Come cambiare il lato della barra laterale in WordPress (4 metodi)

Quando abbiamo iniziato a personalizzare i temi di WordPress, spostare la barra laterale da destra a sinistra sembrava un'operazione semplice.

Eppure abbiamo scoperto che molti utenti hanno difficoltà con questa modifica di base del layout perché ogni tema la gestisce in modo diverso e alcuni non rendono l'opzione evidente.

Dopo aver aiutato gli utenti tramite WPBeginner, abbiamo appreso che il posizionamento della barra laterale può influire in modo significativo su come i visitatori interagiscono con i tuoi contenuti.

Sia che tu stia seguendo le migliori pratiche di design o adattandoti alle abitudini di lettura del tuo pubblico, sapere come cambiare la posizione della tua barra laterale è un'abilità preziosa.

In questa guida, ti mostreremo i modi più semplici per cambiare la posizione della tua barra laterale in WordPress.

Come cambio il lato della barra laterale nel mio tema WordPress?

Per cambiare il lato della barra laterale nel tuo tema WordPress, devi prima identificare se stai usando un tema classico o un tema a blocchi. Il metodo che utilizzerai dipenderà interamente dal tipo di tema.

I temi classici utilizzano tipicamente il Personalizzatore del tema o CSS personalizzato per questa modifica. I temi a blocchi utilizzano il più recente Editor del sito completo.

Ecco come verificare rapidamente quale hai. Nella tua bacheca, vai su Aspetto. Se vedi un menu 'Editor', stai usando un tema a blocchi. Se invece vedi 'Personalizza' e 'Widget', hai un tema classico.

Spostare la barra laterale può essere utile per molti motivi. Ad esempio, i siti web con lingue da destra a sinistra risultano più naturali con la barra laterale sul lato sinistro.

Potresti anche voler migliorare l'esperienza utente sul tuo sito. Se noti che i visitatori del tuo sito di eCommerce scansionano le pagine secondo uno schema specifico, regolare la barra laterale può rendere lo shopping più intuitivo.

Tenendo tutto questo a mente, vediamo come cambiare il lato della barra laterale sul tuo blog o sito web WordPress.

Abbiamo 4 metodi semplici e puoi usare i collegamenti rapidi qui sotto per saltare a quello che preferisci:

• Metodo 1: Come cambiare il lato della barra laterale con il personalizzatore di WordPress (Temi classici)
• Method 2: How to Change the Sidebar Side With Code (Classic Themes)
• Metodo 3: Come cambiare il lato della barra laterale con FSE (Temi a blocchi)
• Metodo 4: Come cambiare il lato della barra laterale con CSS Hero (Tutti i temi)
• Alternativa: Crea barre laterali personalizzate con un plugin per page builder di WordPress
• Domande frequenti sulle barre laterali di WordPress

Metodo 1: Come cambiare il lato della barra laterale con il personalizzatore di WordPress (Temi classici)

Questo metodo è per le persone che utilizzano un tema classico. Ciò significa che puoi ancora utilizzare il personalizzatore di WordPress per stilizzare il design del tuo sito e la sezione Widget nel menu Aspetto dell'amministratore di WordPress esiste ancora.

Se il personalizzatore del tema è mancante dalla tua dashboard di WordPress, stai probabilmente utilizzando un tema a blocchi e devi passare al terzo metodo.

A volte, gli sviluppatori di temi classici offrono più posizionamenti della barra laterale tra cui puoi scegliere. Puoi confermare se questo è vero utilizzando il personalizzatore di WordPress e scegliendo la posizione della barra laterale che preferisci lì.

Innanzitutto, vai su Aspetto » Personalizza. Utilizziamo il tema Hestia come esempio.

Qui, vai alla pagina Impostazioni aspetto » Impostazioni generali dalla colonna di sinistra

Come puoi vedere, Hestia ha tre modelli di sidebar: uno senza sidebar, uno con una sidebar sinistra e uno con una sidebar destra. Questo ci permette di cambiare il lato della sidebar con un clic. Qui, abbiamo cambiato il lato della sidebar a sinistra.

Questa impostazione controlla il layout predefinito della sidebar per l'intero sito web. Tuttavia, Hestia ti consente anche di personalizzare la posizione della sidebar del blog separatamente, in modo che influenzi solo i tuoi post del blog o la pagina dei post.

Una volta apportate le modifiche, puoi aggiungere i widget disponibili alla sidebar come al solito. Per ulteriori informazioni, consulta la nostra guida su come aggiungere e utilizzare i widget in WordPress.

Quindi, fai semplicemente clic su 'Pubblica'.

Sebbene questa sia una funzionalità conveniente, dipende interamente dal tema. Ti consigliamo vivamente di controllare la documentazione del tuo tema per vedere se puoi cambiare la sidebar utilizzando il personalizzatore.

In caso contrario, passa al metodo successivo.

Metodo 2: Come cambiare il lato della barra laterale con il codice (Temi classici)

Se il tuo tema classico non offre più sidebar tra cui scegliere, puoi cambiare il lato della sidebar manualmente utilizzando il codice CSS.

La maggior parte dei temi classici utilizza una proprietà CSS chiamata float per posizionare la barra laterale e l'area del contenuto uno accanto all'altro. Il nostro obiettivo è trovare il CSS per entrambi gli elementi e semplicemente invertire la loro direzione di float.

Ti consigliamo di utilizzare un sito di staging e/o un tema figlio per sperimentare con questo metodo. In questo modo, se si verifica un errore, non influenzerà il tuo tema padre e/o il tuo sito web live.

Inoltre, l'utilizzo di un child theme può impedire che le tue modifiche vengano sovrascritte quando c'è un aggiornamento del tema.

Passaggio 1: Utilizza lo strumento Ispeziona per individuare la classe CSS della tua barra laterale

La prima cosa che farai è aprire il tuo sito web. Quindi, passa il mouse sull'area della tua barra laterale e utilizza lo strumento Ispeziona del tuo browser.

Se usi Chrome, puoi semplicemente fare clic destro sull'area e selezionare 'Ispeziona'.

Per maggiori informazioni, puoi consultare la nostra guida alle basi dell'elemento Ispeziona.

Ora, quello che devi fare è passare il cursore sopra le righe HTML e CSS nella parte in alto a destra della pagina.

Quando vedi che l'intera area della tua barra laterale è evidenziata, fai clic su quella riga. Per noi, era <aside id="secondary" class="sidebar widget-area">.

La scheda 'Stili' in fondo alla pagina contiene tutte le proprietà CSS relative alla barra laterale.

Nel nostro caso, abbiamo visto che la classe CSS per l'area della barra laterale è .sidebar. Ci sono anche regole che determinano la posizione della barra laterale, che, in questo caso, è il lato sinistro.

Sappiamo questo perché quando deselezioniamo la regola margin-left, la barra laterale si sposta sull'altro lato.

Ecco il codice per l'area della barra laterale del nostro tema:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Puoi copiare e incollare questo codice in un editor di testo perché ci servirà per un passaggio successivo. Oppure, puoi semplicemente lasciare questa scheda aperta per dopo.

Ora che conosciamo la classe CSS per l'area della barra laterale, dobbiamo anche trovare la classe per l'area del contenuto principale che visualizza tutti i tuoi post o il contenuto dei post.

Quello che puoi fare è passare il mouse sulle righe HTML e CSS per vedere quale riga evidenzia l'area del contenuto principale. Qui, abbiamo scoperto che era la riga <div id="primary" class="content-area">.

Come prima, puoi scorrere verso il basso fino alla scheda ‘Stili’ per vedere qual è la classe CSS per quell'area. In questo caso, era .content-area. Ecco il codice per essa:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Ancora, puoi copiare e incollare il codice CSS della tua area di contenuto in un editor di testo o tenere questa scheda aperta per il prossimo passaggio.

Ora che conosciamo le classi CSS della tua barra laterale e dell'area di contenuto, possiamo modificare il tuo file style.css del tema per cambiare il lato della barra laterale.

Passaggio 2: Personalizza il file style.css del tuo tema

Di solito, dovrai modificare direttamente il tuo style.css utilizzando il file manager o il client FTP del tuo provider di web hosting. Tuttavia, il file style.css può essere piuttosto lungo e, se commetti un errore, potrebbe influire sull'intero design del tuo sito web e rovinare la tua esperienza utente.

Ecco perché consigliamo di utilizzare WPCode. L'abbiamo trovato il modo più sicuro e semplice per aggiungere CSS personalizzato senza modificare direttamente i file del tuo tema.

Se le modifiche al codice causano errori imprevisti, puoi disattivarle con un solo clic e il tuo sito web tornerà alla normalità.

Per saperne di più, consulta la nostra recensione di WPCode.

Innanzitutto, procedi all'installazione di WPCode sul tuo WordPress. Se hai bisogno di istruzioni passo passo, leggi la nostra guida su come installare un plugin WordPress.

Una volta completato, vai su Snippet di codice » + Aggiungi snippet. Quindi, seleziona 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante '+ Aggiungi snippet personalizzato'.

Ora, digita un titolo per il tuo codice personalizzato. Potrebbe essere qualcosa come 'Cambia lato della barra laterale'.

Quindi, cambia il Tipo di codice in 'Snippet CSS'.

Una volta fatto, devi inserire gli snippet di codice CSS delle tue aree sidebar e di contenuto nella casella Anteprima codice.

Puoi separarli con uno spazio vuoto per renderli facili da identificare, così:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Ora, personalizziamo questo codice CSS. Quello che devi fare è cambiare le proprietà CSS che definiscono il posizionamento della sidebar e delle aree di contenuto principali.

Nel nostro caso, queste classi CSS hanno proprietà float, margin, padding e width, ma questo potrebbe apparire diverso a seconda del tuo tema.

Per la nostra area della barra laterale, abbiamo cambiato left in right nelle proprietà float e margin. Ciò significa che l'area della barra laterale sarà nella direzione opposta a quella in cui era originariamente posizionata.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Fatto questo, cambiamo la posizione dell'area di contenuto. Quello che ha funzionato per noi è stato cambiare float: left in float: right e margin-right in margin-left. Questo dice a WordPress di spostare l'area di contenuto a destra.

Inoltre, abbiamo aggiunto le proprietà position: relative e right: 100%. Queste assicurano che la nostra area di contenuto non vada troppo lontano sul lato destro.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Ancora una volta, ciò che funziona per il nostro tema potrebbe non funzionare per il tuo perché ogni tema ha nomi diversi per le sue classi CSS e utilizza proprietà diverse. Ti consigliamo di leggere questo riferimento CSS completo per capire cosa funziona meglio per il tuo tema.

Inoltre, sentiti libero di giocare con le percentuali della larghezza e dei margini nel codice per regolare il posizionamento della barra laterale.

Una volta modificato lo snippet di codice, scorri verso il basso fino alla sezione Inserimento. Assicurati che il Metodo di Inserimento sia 'Inserimento Automatico'.

Per quanto riguarda la Posizione, seleziona 'Footer del Sito' in modo che il tuo codice possa sovrascrivere il codice esistente nel tuo file style.css.

Ora, puoi fare clic sull'interruttore nell'angolo in alto a destra per rendere il codice 'Attivo' e fare clic su 'Salva Snippet'. Quindi, visualizza in anteprima il tuo sito web per vedere i risultati.

Se guardi gli screenshot qui sopra, puoi vedere che la barra laterale sul nostro sito web demo era sul lato destro.

Dopo aver modificato il codice in style.css, il tema ora ha una barra laterale sinistra:

Ora che hai cambiato il lato della barra laterale, puoi iniziare a cambiare o aggiungere più contenuti alla barra laterale. Ecco alcune idee per aiutarti:

• Come aggiungere un'immagine nel widget della barra laterale di WordPress
• Come aggiungere un link ai titoli dei widget in WordPress
• Come aggiungere stili personalizzati ai widget di WordPress
• Come disabilitare widget indesiderati in WordPress
• Come personalizzare la visualizzazione degli archivi di WordPress nella tua barra laterale

Metodo 3: Come cambiare il lato della barra laterale con FSE (Temi a blocchi)

Se utilizzi un tema a blocchi, non vedrai una sezione Widget nell'amministrazione di WordPress. Potresti chiederti come cambiare il lato della barra laterale se quel menu non esiste.

Fortunatamente, il processo è molto più semplice rispetto a quello per i temi classici. Questo perché i temi a blocchi utilizzano i blocchi Gutenberg e puoi semplicemente trascinare e rilasciare gli elementi per cambiarne la posizione utilizzando l'editor completo del sito (FSE).

In secondo luogo, i temi a blocchi avranno solitamente un modello che include una barra laterale. Dobbiamo semplicemente cambiarlo e ogni pagina che utilizza il modello ne sarà influenzata. Puoi controllare la documentazione del tuo tema per vedere come si chiama il modello per accedervi.

Per la dimostrazione, utilizzeremo il tema Twenty Twenty-Four, che ha una pagina con un modello di barra laterale.

Innanzitutto, vai su Aspetto » Editor nella tua bacheca.

Qui vedrai alcuni menu per personalizzare il tuo tema a blocchi.

Seleziona 'Modelli'.

Ora, trova il modello con la barra laterale che desideri modificare.

In Twenty Twenty-Four, si tratta di 'Pagina con barra laterale' e 'Singola con barra laterale'. A seconda del tuo tema, il nome del modello potrebbe non indicare chiaramente che ha una barra laterale, quindi, ancora una volta, dovresti controllare la documentazione del tuo tema.

Procedi e seleziona quel modello di barra laterale.

Tipicamente, i temi a blocchi includono la barra laterale e l'area di contenuto principale in un blocco colonne. Questo mantiene tutto ordinato, organizzato e ben separato l'uno dall'altro.

Per cambiare il lato della barra laterale, devi solo selezionare la colonna che compone la barra laterale e spostarla.

Il modo più semplice per farlo è fare clic sulla funzione 'Vista elenco' sul lato sinistro della pagina.

Quindi, fai clic sul blocco 'Colonne' per espanderlo e passa il mouse sul suo contenuto finché non trovi la colonna che contiene gli elementi della barra laterale.

Nel nostro caso, è stato d'aiuto che il tema Twenty Twenty-Four abbia una parte di modello chiamata 'Sidebar', quindi identificarla è stato facile. Detto questo, alcuni temi potrebbero includere solo un normale gruppo di blocchi senza nome che compongono la barra laterale.

Saprai di aver selezionato la colonna giusta quando un'evidenziazione rettangolare e una barra degli strumenti appariranno attorno all'intero gruppo di blocchi per la barra laterale.

Ora, nella barra degli strumenti della colonna della barra laterale, vedrai delle frecce che puoi usare per cambiare la posizione della colonna.

Fai clic su di essa e, a seconda di come è progettato il blocco Colonne, potresti dover giocare con la posizione finché non trovi la giusta corrispondenza.

Lo sviluppatore del tema potrebbe aver aggiunto alcune colonne vuote per creare spazio tra l'area del contenuto principale e l'area della barra laterale.

Se vuoi eliminarla, trova la colonna vuota corretta usando la funzione Vista Elenco come prima. Quindi, nella barra degli strumenti del blocco, fai clic sul menu a tre punti e seleziona 'Elimina'.

Oppure, se vuoi creare più spazio tra l'area della barra laterale e l'area del contenuto, puoi aprire la scheda delle impostazioni del blocco e passare alla sezione 'Stili'.

Quindi, nella sezione 'Dimensioni', puoi trascinare il cursore per il padding, il margine o lo spazio tra i blocchi.

Una volta fatto, fai clic su 'Salva'.

Quindi, puoi visualizzare in anteprima tutte le pagine su mobile e desktop che utilizzano il modello appena modificato per vedere come appare.

Cosa succede se hai modificato il modello, ma le tue pagine o i tuoi post non lo stanno utilizzando?

Tutto quello che devi fare è aprire la pagina o il post nell'editor a blocchi. Quindi, nel pannello delle impostazioni del post, fai clic sul link nel campo 'Modello' e seleziona 'Scambia modello'.

Ora, scegli semplicemente il modello che utilizza la barra laterale.

Dopodiché, puoi aggiornare la pagina o il post.

Per ulteriori suggerimenti e trucchi sull'utilizzo dell'editor completo del sito o dell'editor a blocchi, consulta queste guide:

• Come modificare un sito WordPress (Guida definitiva)
• Come personalizzare i colori sul tuo sito WordPress

Metodo 4: Come cambiare il lato della barra laterale con CSS Hero (Tutti i temi)

Il metodo successivo utilizza un plugin a pagamento chiamato CSS Hero, che è il miglior plugin WordPress per la modifica visiva del CSS. Questo plugin rende facile personalizzare il CSS del tuo tema senza toccare alcun codice, rendendolo ideale per i principianti.

Questo metodo funziona anche con tutti i temi, quindi se trovi che i metodi precedenti sono leggermente limitanti, puoi usare questo invece. Detto questo, non esiste una versione gratuita del plugin, quindi devi acquistare un piano a pagamento.

Per maggiori informazioni sul plugin e sui suoi prezzi, consulta la nostra recensione di CSS Hero.

Innanzitutto, scarica il plugin sul tuo computer e installalo sul tuo sito WordPress. Per istruzioni passo passo, consulta la nostra guida per principianti su come installare un plugin WordPress.

Una volta installato, vedrai un menu 'CSS Hero' nella barra degli strumenti. Cliccaci sopra per aprire l'editor CSS visuale.

Tieni presente che, poiché non tutti i temi WordPress funzionano allo stesso modo, il modo in cui utilizzerai CSS Hero per cambiare il lato della barra laterale sarà diverso. Pertanto, ti incoraggiamo a sperimentare con la piattaforma per vedere cosa funziona meglio per te.

Detto questo, ti mostreremo quali impostazioni abbiamo personalizzato per spostare la barra laterale da destra a sinistra.

Innanzitutto, fai clic sull'area della barra laterale sulla tua pagina. Saprai di aver fatto clic su quella giusta quando tutti gli elementi nella tua barra laterale saranno selezionati come gruppo e avranno un contorno rettangolare attorno a loro.

Sul lato sinistro della pagina, vedrai alcuni menu per personalizzare i tuoi elementi.

Secondo la nostra esperienza, le impostazioni che possono cambiare il posizionamento della barra laterale sono Posizione, Misure e Spaziatura.

La posizione determina come la barra laterale è posizionata rispetto agli altri elementi sulla pagina. Qui puoi selezionare 'Assoluto', che ti darà una certa libertà su dove dovrebbe trovarsi la barra laterale.

Da qui, puoi modificare i pixel in Alto, Destra, Basso e Sinistra per posizionare la barra laterale.

Puoi vedere che ora la barra laterale e l'area del contenuto principale sono sullo stesso lato.

Per risolvere questo problema, puoi passare il mouse sul contenitore che costituisce l'area del contenuto principale e fare clic su di esso.

Ora, nel pannello laterale sinistro, regola le impostazioni di Posizione finché non trovi la giusta corrispondenza.

Quello che abbiamo fatto è stato lasciare la posizione come 'Relativa' e regolare i pixel a destra.

Tecnicamente, questo è tutto ciò che devi fare. Ma se vuoi regolare le dimensioni della barra laterale, seleziona l'area della barra laterale e vai alle impostazioni 'Misure'.

Qui puoi cambiare la larghezza e l'altezza della barra laterale.

Se vuoi cambiare lo spazio tra l'area della barra laterale e l'area del contenuto principale, puoi andare su 'Spaziatura'.

Vedrai alcuni slider per regolare il padding e il margine dell'elemento qui.

Ancora una volta, ti incoraggiamo a esplorare le impostazioni di questo plugin per cambiare la posizione della barra laterale secondo le tue esatte preferenze.

Una volta terminato, puoi fare clic sul pulsante 'Salva' nell'angolo in basso a destra della pagina.

Alternativa: Crea barre laterali personalizzate con un plugin per page builder di WordPress

Finora, abbiamo esplorato metodi per cambiare la posizione della barra laterale per l'intero sito web. Ma cosa succede se vuoi solo barre laterali specifiche per determinate pagine o tipi di post? Dopotutto, non ogni pagina ha bisogno dello stesso contenuto della barra laterale.

Ad esempio, la tua homepage potrebbe beneficiare di una barra laterale più generale con icone dei social media e una call to action. Tuttavia, una pagina prodotto potrebbe essere migliore con una barra laterale che mostra prodotti correlati o recensioni dei clienti.

In questo caso, potresti voler creare barre laterali personalizzate per il tuo tema WordPress. Con le barre laterali personalizzate, puoi:

• Assegnare barre laterali specifiche a diverse pagine o tipi di post. Questo ti consente di adattare il contenuto della tua barra laterale alle esigenze specifiche di ogni pagina.
• Creare un'esperienza utente più dinamica e coinvolgente. Offrendo contenuti pertinenti nella barra laterale, puoi mantenere i visitatori coinvolti e interessati a esplorare ulteriormente il tuo sito web.

È qui che entra in gioco un plugin per la creazione di pagine WordPress. Questi plugin offrono funzionalità drag-and-drop e ampie librerie di template, rendendo facile la creazione di barre laterali personalizzate.

Ti consigliamo di utilizzare SeedProd, un popolare plugin per la creazione di pagine e temi, facile da usare per i principianti. Con SeedProd, puoi progettare facilmente pagine e temi personalizzati con la loro interfaccia intuitiva.

Puoi consultare questi articoli per maggiori informazioni:

• Come aggiungere intestazioni, piè di pagina o barre laterali personalizzate per ogni categoria
• Come visualizzare una barra laterale diversa per ogni articolo e pagina in WordPress

In alternativa, puoi utilizzare il page builder Thrive Architect. Questo strumento dispone anche di tantissimi kit di temi e modelli di landing page, e offre persino una funzionalità per creare un widget a barra laterale mobile e fisso. Questo è utile per mantenere la tua barra laterale fissa mentre gli utenti scorrono la pagina.

Domande frequenti sulle barre laterali di WordPress

Ecco alcune domande che i nostri lettori pongono frequentemente riguardo alle barre laterali sui loro siti web:

Come si cambia la posizione della barra laterale in WordPress?

Il metodo che utilizzi dipende dal tuo tema. Per i temi classici, puoi cambiare la posizione nel Personalizzatore del tema se l'opzione esiste, o aggiungendo CSS personalizzato. Per i temi a blocchi moderni, puoi semplicemente trascinare e rilasciare la colonna della barra laterale sull'altro lato nell'Editor del sito completo.

Come personalizzare la barra laterale in WordPress?

Puoi personalizzare il contenuto della barra laterale utilizzando widget o blocchi. Se hai un tema classico, vai su Aspetto » Widget per aggiungere o rimuovere elementi.

Se utilizzi un tema a blocchi, vai su Aspetto » Editor e modifica direttamente la parte del modello della barra laterale aggiungendo o rimuovendo qualsiasi blocco di WordPress.

Come aggiungo una barra laterale sinistra e destra in WordPress?

L'aggiunta di una barra laterale sia sinistra che destra richiede un tema che supporti un layout a tre colonne.

Se il tuo tema non ha questa opzione integrata, il modo più semplice per creare un layout personalizzato a tre colonne è con un plugin page builder per WordPress come SeedProd o Thrive Architect.

Come cambiare la larghezza della barra laterale in WordPress?

Il modo più affidabile per cambiare la larghezza della barra laterale è con CSS personalizzato. Puoi usare lo strumento Ispeziona del tuo browser per trovare il selettore CSS della tua barra laterale e quindi aggiungere una nuova regola di larghezza, come .sidebar { width: 30%; }.

In alternativa, un plugin come CSS Hero ti permette di regolare la larghezza visivamente senza codice.

Speriamo che questo tutorial di WordPress ti abbia aiutato a imparare come cambiare la posizione della barra laterale in WordPress. Potresti anche voler consultare il nostro articolo su come aggiungere un menu responsive a schermo intero in WordPress e la nostra lista dei migliori trucchi per la barra laterale di WordPress per ottenere il massimo dei risultati.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.