Come rimuovere le barre laterali da Divi

La rimozione della barra laterale dal modello di pagina predefinito di Divi può essere facilmente eseguita quando si utilizza Divi Builder. Tuttavia, poiché i modelli di pagina predefiniti di Divi (con la barra laterale) vengono ancora visualizzati su pagine come 404 e archivi, potresti voler eliminare del tutto la barra laterale dal tuo modello.

Il modo più ovvio per sovrascrivere il layout della barra laterale destra predefinita di Divi è utilizzare Divi Builder per progettare la pagina o il post. Tuttavia, se non utilizzerai Divi Builder per una pagina o un post, ci sono due modi principali per rimuovere la barra laterale. Il primo è cambiare il layout della pagina in base alla pagina quando si modifica una singola pagina o un post. Il secondo è sovrascrivere la pagina predefinita o il modello di post creando un modello personalizzato nel Divi Theme Builder.

Oggi ti mostrerò i diversi modi per rimuovere le barre laterali sul modello predefinito di Divi e sovrascrivere i modelli con Divi Builder. Si spera che questo ti fornisca gli strumenti necessari per creare un sito Web a tutta larghezza progettato in modo coerente.

Iniziamo!

Rimozione delle barre laterali sulle pagine utilizzando le impostazioni della pagina Divi

Modifica del layout predefinito della barra laterale destra per singoli post o pagine

Per la pagina o i post che non utilizzano Divi Builder, il layout di pagina predefinito include una barra laterale destra simile alla seguente:

Se non desideri utilizzare Divi Builder per quella pagina o post e desideri semplicemente rimuovere la barra laterale per pagina, trova semplicemente la casella Impostazioni pagina Divi nella barra laterale quando modifichi la tua pagina e seleziona larghezza intera (o no sidebar ) per il layout della pagina.

Questo eliminerà la barra laterale per quel particolare post o pagina.

Rimozione delle barre laterali nella pagina del negozio WooCommerce, nella pagina delle categorie e nelle pagine dei prodotti utilizzando le opzioni del tema Divi

Se hai installato WooCommerce, puoi trovare un paio di opzioni all'interno delle Opzioni del tema Divi per modificare il layout della pagina delle pagine Negozio WC, Categoria e Prodotto.

Per rimuovere la barra laterale dalle pagine Negozio WC e Categoria, vai a Divi > Opzioni tema. Nella scheda Generale, trova l'opzione denominata "Pagina negozio e layout di pagina categoria per WooCommerce" e modifica il layout in "Nessuna barra laterale" o "Larghezza intera".

Per rimuovere la barra laterale per le pagine dei prodotti, vai a Divi > Opzioni del tema. Seleziona la scheda Costruttore. In Integrazione del tipo di post, seleziona il layout del prodotto "Nessuna barra laterale" dal menu a discesa.

Rimozione delle barre laterali creando modelli personalizzati utilizzando il generatore di temi

Rimuovere le barre laterali per ogni pagina/post con le impostazioni della pagina Divi è una buona soluzione quando si creano nuovi post e pagine individualmente. Tuttavia, questo può essere piuttosto complicato, soprattutto se decidi di rimuovere le barre laterali da tutte le pagine. Inoltre, il modello predefinito (con una barra laterale) viene ancora visualizzato su pagine come 404 e archivi. Quindi potresti voler eliminare del tutto la barra laterale da una pagina o da un modello di post. Per fare ciò, puoi creare modelli personalizzati utilizzando Divi Theme Builder. Questo ti darà il pieno controllo su quali pagine vuoi nascondere a livello globale nelle barre laterali.

Divi's Theme Builder è un potente strumento per la progettazione di modelli globali che si applicheranno a qualsiasi pagina o post che desideri. Ogni volta che crei un nuovo layout del corpo per un modello, quel modello sovrascriverà il layout di pagina predefinito di Divi (che include una barra laterale). Pertanto, tutto ciò che devi fare per rimuovere una barra laterale a livello di modello è creare un nuovo modello nel Divi Theme Builder e assegnarlo alle pagine o ai post di tua scelta.

Creazione di un modello di post di blog a larghezza intera utilizzando Divi Builder

I post del blog sono un ottimo esempio di dove potrebbe essere necessario un modello a livello di sito senza una barra laterale. Le opzioni di contenuto dinamico integrate di Divi ti consentono di progettare un modello di post di blog che verrà applicato a tutti i post di blog in tutto il sito utilizzando Divi Builder e il contenuto dinamico. Una volta fatto, tutto ciò che devi fare è aggiornare il contenuto del corpo effettivo per tutti i post futuri. Il nuovo contenuto del post erediterà il design del modello personalizzato!

Ecco un rapido esempio di come eseguire questa operazione:

Innanzitutto, crea un nuovo modello e assegna il modello a Tutti i post.

Quindi aggiungi un corpo personalizzato al modello.

Utilizzando il Template Layout Editor, progetta l'intero layout utilizzando Divi Builder combinato con i moduli e le opzioni di contenuto dinamico di Divi.

Ad esempio, puoi utilizzare il modulo Titolo del post per visualizzare il titolo del post in modo dinamico. Oppure puoi inserire il titolo del post come contenuto dinamico nel corpo di un modulo di testo e avvolgerlo con i tag H1.

Puoi utilizzare un modulo immagine per inserire l'immagine in primo piano come contenuto dinamico.

Oppure usa una serie di moduli blurb che raccolgono metadati specifici come contenuto dinamico come l'autore del post, la biografia dell'autore del post, le categorie di post, la data di pubblicazione del post e il conteggio dei commenti.

Ancora più importante, è necessario includere il modulo Post Content quando si crea un layout del corpo personalizzato per il modello. Il modulo Contenuto del post include l'area per il contenuto della pagina o del post da visualizzare all'interno dell'area del corpo del modello.

Una volta creato il modello, puoi facilmente creare un nuovo post del blog utilizzando l'editor di post di WordPress predefinito e fare in modo che il post del blog erediti il ​​design del modello di post del blog che hai creato utilizzando Divi Theme Builder.

Per ulteriori informazioni, dai un'occhiata al nostro post su come progettare un modello di post di blog con Divi's Theme Builder.

Creazione di un modello di pagina prodotto WooCommerce a larghezza intera utilizzando Divi Builder

Se vuoi eliminare la barra laterale predefinita per le pagine dei prodotti, puoi anche creare un bel modello di layout a larghezza intera per tutti i post del tuo blog. Simile a quello che abbiamo fatto con il modello di post del blog, puoi anche utilizzare i moduli WooCommerce (o Woo) incorporati di Divi per creare un modello di pagina prodotto personalizzato a livello di sito senza barra laterale.

Per fare ciò, è sufficiente creare un nuovo modello e assegnare il modello a "Tutti i prodotti".

Quindi aggiungi un corpo personalizzato al modello e fai clic per creare il layout del corpo utilizzando l'editor del modello.

Quindi usa Divi Builder per includere i moduli Woo dinamici per progettare il modello di pagina del prodotto.

Ora, crei un nuovo prodotto sul back-end utilizzando l'editor della pagina del prodotto standard, il prodotto erediterà automaticamente il design del modello del corpo assegnato.

Per ulteriori informazioni, dai un'occhiata al nostro post su come creare un modello di pagina del prodotto Woo a livello di sito.

Creazione di modelli di pagina di archivio a larghezza intera utilizzando Divi Builder

Theme Builder semplifica inoltre la progettazione di modelli di pagine di archivio senza barre laterali. La chiave per creare un modello per una pagina di categoria è creare un nuovo modello e assegnarlo a uno dei tanti modelli di archivio disponibili in Divi Builder. Ad esempio, puoi assegnarlo a tutte le pagine di archivio in tutto il sito oppure puoi assegnarlo al modello di pagina di categoria in modo che mostri solo le pagine che mostrano un archivio di post all'interno di una categoria.

Il primo elemento essenziale del contenuto dinamico per un modello di archivio deve includere il titolo del post/archivio.

Il secondo elemento essenziale del contenuto dinamico è l'archivio effettivo dei post da visualizzare. Per fare ciò, aggiungi un modulo blog e scegli l'opzione per visualizzare i post per la pagina corrente.

Per una panoramica completa, dai un'occhiata al nostro post su come creare un modello di pagina di categoria per il tuo blog utilizzando Divi Theme Builder.

Creazione di un modello di pagina 404 a larghezza intera utilizzando Divi Builder

Il Theme Builder semplifica inoltre la progettazione di un modello di pagina 404 per il tuo sito Web Divi senza la barra laterale predefinita. Una pagina 404 non si basa necessariamente su alcun contenuto dinamico, quindi sentiti libero di progettare tutto ciò che desideri utilizzando Divi Builder.

Per una panoramica completa, dai un'occhiata al nostro post su come creare un modello di pagina 404 utilizzando Divi Theme Builder.

Creazione di un modello di pagina di ricerca a larghezza intera utilizzando Divi Builder

Theme Builder semplifica inoltre la progettazione di un modello di pagina dei risultati di ricerca per il tuo sito Web Divi senza la barra laterale predefinita. Come i modelli di pagine di categoria, la chiave per creare un modello per i risultati di ricerca è creare un'area del corpo personalizzata e includere quanto segue:

1: Un titolo di post/archivio come contenuto dinamico

2: Il modulo Blog per visualizzare i post per la pagina corrente.

3: un modulo di ricerca per consentire agli utenti di continuare le ricerche secondo necessità.

Per una panoramica completa, dai un'occhiata al nostro post su come creare un modello di pagina dei risultati di ricerca per il tuo sito Web utilizzando Divi Theme Builder.

Non creare un modello di corpo a larghezza intera per tutte le pagine a meno che tu non abbia un motivo specifico

Creare un modello personalizzato con un layout del corpo a tutta larghezza per tutte le tue pagine può sembrare inizialmente una buona idea. Tuttavia, potrebbe non funzionare come previsto. Ad esempio, puoi limitare l'area in cui puoi utilizzare Divi Builder per la pagina o creare un'area del corpo troppo ampia per le pagine che non utilizzano Divi Builder. Ecco perché è meglio creare un modello di pagina solo per quelle pagine che non utilizzeranno Divi Builder.

Per ulteriori informazioni, consulta la documentazione sulla creazione di un modello di corpo globale.

Eliminazione della barra laterale predefinita con CSS personalizzato

Se stai utilizzando i layout di pagina dei temi predefiniti di Divi senza utilizzare Divi Builder, o se desideri eliminare la barra laterale a livello di sito senza doverla sovrascrivere utilizzando le impostazioni di pagina individuali o i modelli di generatore di temi, puoi utilizzare alcuni buoni CSS alla vecchia maniera .

Vai a Divi > Opzioni tema. Nella scheda Generale, incolla il seguente codice nella casella CSS personalizzato nella parte inferiore della pagina:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Pensieri finali

Quando crei un sito web, è importante che tutte le tue pagine mantengano lo stesso layout e design coerenti. Quindi, se stai costruendo un sito con un layout a larghezza intera utilizzando Divi Builder, potresti voler mantenere questo layout per tutte le tue pagine per impostazione predefinita. Questo potrebbe migliorare l'esperienza dell'utente. Se non altro, ora hai il potere di personalizzare i display della barra laterale come ritieni opportuno.

Spero che lo troverai utile per il tuo sito e per i progetti futuri.

Non vedo l'ora di sentirti nei commenti.

Saluti!