Come rimuovere il bordo della barra laterale Divi

Una cosa che quasi tutti gli utenti Divi vogliono sapere come fare con il tema Divi è rimuovere il bordo della barra laterale. Fortunatamente, questo è un compito semplice. Può essere fatto con il codice, ma, cosa più importante, è facile da fare con Divi Theme Builder. In questo articolo, ti mostreremo come rimuovere il bordo della barra laterale Divi utilizzando entrambi i metodi e vedremo perché l'utilizzo di Divi Theme Builder ti dà i migliori risultati.

La barra laterale Divi predefinita

La pagina predefinita Divi e i layout dei post posizionano una linea tra il contenuto e la barra laterale. Molti degli elementi della barra laterale possono essere stilizzati o regolati con il personalizzatore del tema, ma questa linea non è uno di questi. Questa è un'area in cui mancano le opzioni di WordPress.

Le opzioni del tema Divi ti consentono di spostare la barra laterale a destra o a sinistra, ma non include opzioni di stile.

Divi aggiunge anche impostazioni che ti consentono di scegliere il layout della barra laterale a livello di pagina e post. Ciò include anche l'opzione per rimuovere la barra laterale in modo che nessun widget venga visualizzato, consentendo all'area del contenuto di utilizzare l'intera larghezza della pagina web.

Queste opzioni ti danno il controllo sul layout, ma non sullo stile e non rimuovono il bordo della barra laterale. Diamo un'occhiata a due metodi per applicare uno stile o rimuovere il bordo della barra laterale Divi.

Rimozione o stile del bordo della barra laterale di Divi con il codice

Innanzitutto, vediamo come rimuovere o modellare il bordo della barra laterale del tema Divi aggiungendo codice a Divi.

Dovrai aggiungere alcuni CSS al campo CSS personalizzato delle opzioni del tema Divi. Per accedere al campo CSS personalizzato, vai su Divi > Opzioni del tema nel menu della dashboard di WordPress. Rimani nella scheda Generale e scorri fino alla fine delle impostazioni per incollare il tuo codice.

Ecco il CSS di cui avrai bisogno:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

Questo codice dice a WordPress che il bordo dell'area del widget non ha larghezza, causando la mancata visualizzazione.

Incolla il codice nel campo CSS personalizzato e salva le modifiche.

Il confine è ora rimosso. CSS funziona con il tema Divi per rimuovere il bordo della barra laterale, ma non è l'ideale e non tutti vogliono gestire codice di alcun tipo. E se volessi costruire la pagina del blog con Divi Builder? L'opzione migliore è utilizzare il Divi Theme Builder.

Come utilizzare Divi's Theme Builder per rimuovere il bordo della barra laterale Divi senza codice

È anche possibile utilizzare il tema Divi per rimuovere il bordo della barra laterale senza codice. Vai a Divi Theme Builder selezionando Divi > Theme Builder nel menu della dashboard di WordPress. Se non disponi già di un layout per il blog, seleziona Aggiungi nuovo modello .

Questo modello verrà assegnato alla pagina del tuo blog, alla pagina di archivio o a qualsiasi altra pagina che desideri, quindi assicurati di aver creato prima questa pagina.

Si aprirà una modale in cui puoi selezionare dove apparirà questo modello. Seleziona la pagina del tuo blog in Pagine specifiche . Puoi anche creare pagine di archivio, pagine di autori, pagine di categorie, pagine di date, pagine di tag e molto altro. Fare clic su Salva una volta effettuata la selezione.

Un modello vuoto è ora assegnato alla tua pagina. Successivamente, dovrai creare il layout del blog. Fare clic sull'area denominata Aggiungi corpo personalizzato .

Si apre una casella a discesa in cui è possibile scegliere di creare un corpo personalizzato o aggiungerne uno dalla libreria. Fare clic sulla selezione. Sto selezionando di costruire il corpo personalizzato.

Modulo barra laterale Divi

Ho selezionato un layout a due colonne e posizionato un modulo blog a sinistra e un modulo della barra laterale a destra. Dal momento che è un modulo Divi, puoi posizionare la barra laterale ovunque tu voglia, ma io vado con il design tradizionale del lato destro.

Il modulo è stato progettato per essere posizionato sul lato destro o sinistro e posiziona il bordo di conseguenza. Per impostazione predefinita, il modulo è impostato per essere visualizzato come barra laterale sinistra, quindi il bordo si trova sul lato destro dei widget.

Per modificare il layout, apri il modulo, seleziona la scheda Design , guarda la sezione Layout e scegli Destra nella casella a discesa Allineamento . Questo esempio ora ha il bordo a sinistra dell'area del widget, rendendolo una barra laterale a destra.

Utilizzare questa impostazione se si desidera visualizzare il bordo della barra laterale. L'allineamento non ha importanza se vuoi disabilitare il bordo. Sono sicuro che hai già notato l'interruttore sotto la casella a discesa Allineamento .

La seconda opzione nella sezione Layout è un interruttore chiamato Show Border Separator . Ciò consente di disabilitare o abilitare il confine. È abilitato per impostazione predefinita. Basta fare clic sull'interruttore. Il bordo è ora rimosso dalla barra laterale. Salva il layout ed esci dall'editor. È così facile.

Infine, seleziona Salva modifiche prima di uscire dal Divi Theme Builder. Ora mostra un corpo personalizzato per la pagina del blog.

La mia pagina del blog ora mostra la barra laterale senza il bordo. Naturalmente, ci sono alcune altre cose che puoi fare se vuoi un design migliore.

Creazione di un bordo della barra laterale Divi personalizzato

Se non desideri utilizzare il tema Divi per rimuovere il bordo della barra laterale, ma non desideri il bordo standard di WordPress, puoi creare un bordo della barra laterale personalizzato utilizzando il modulo della barra laterale Divi.

Nella scheda Design del modulo della barra laterale, scorri fino alle impostazioni del bordo . Qui puoi aggiungere un bordo a un lato del modulo. Seleziona ogni lato che non vuoi visualizzare sul bordo e imposta la larghezza del bordo su 0. Puoi anche scegliere la larghezza del bordo, scegliere un colore e selezionare uno stile. Gli stili includono solido, tratteggiato, punteggiato, doppio, scanalatura, cresta, inserto, inizio e nessuno.

Per il lato in cui desideri visualizzare il bordo, scegli la larghezza, il colore e lo stile del bordo. In questo esempio, ho scelto di mostrare il bordo solo sul lato sinistro del modulo. Ho impostato la larghezza del bordo su 7 pixel, il colore su arancione chiaro e lo stile del bordo su punteggiato.

La mia pagina del blog ora mostra il mio bordo della barra laterale Divi personalizzato.

Puoi anche aggiungere un'ombra di scatola agli altri tre lati, se lo desideri. In questo esempio, ho arrotondato i bordi per il lato destro. Ho fatto clic sul collegamento al centro, in modo che il bordo tratteggiato rimanga dritto. Ho anche regolato l'ombra della scatola per ottenere il design che desidero.

Ecco il mio disegno finale con il bordo punteggiato. La barra laterale si fonde bene con il design del blog.

Tornando all'idea di utilizzare il tema Divi per rimuovere il bordo della barra laterale, ecco il layout del mio blog finale. Mi piace come è andata a finire. Ciò dimostra che l'utilizzo del modulo Divi apre molte possibilità per il design della barra laterale.

Conclusione

Questo è il nostro sguardo su come utilizzare il tema Divi per rimuovere il bordo della barra laterale. È abbastanza semplice da rimuovere nel codice, ma l'utilizzo di Divi Theme Builder ti offre molte più opzioni, il che ti dà un maggiore controllo sul design. Questa funzione è estremamente semplice, ma è qualcosa che la maggior parte degli utenti Divi vuole imparare. È anche un buon esercizio per imparare come piccoli aggiustamenti nei moduli Divi possono fare un'enorme differenza nel design del tuo sito web.

Vogliamo sentire da voi. Hai rimosso il bordo della barra laterale Divi utilizzando uno di questi metodi? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in primo piano tramite Andrew Rybalko / shutterstock.com