Cum să eliminați marginea barei laterale Divi

Un lucru pe care aproape fiecare utilizator Divi vrea să știe cum să-l facă cu tema Divi este eliminarea marginii barei laterale. Din fericire, aceasta este o sarcină simplă. Se poate face cu cod, dar mai important, este ușor de făcut cu Divi Theme Builder. În acest articol, vă vom arăta cum să eliminați marginea barei laterale Divi folosind ambele metode și vom vedea de ce utilizarea Divi Theme Builder vă oferă cele mai bune rezultate.

Bara laterală implicită Divi

Aspectele implicite ale paginii și postărilor Divi plasează o linie între conținut și bara laterală. Multe dintre elementele barei laterale pot fi stilizate sau ajustate cu ajutorul personalizatorului de temă, dar această linie nu este una dintre ele. Acesta este un domeniu în care lipsesc opțiunile WordPress.

Opțiunile temei Divi vă permit să mutați bara laterală spre dreapta sau spre stânga, dar nu include opțiuni de stil.

Divi adaugă, de asemenea, setări care vă permit să alegeți aspectul barei laterale la nivel de pagină și postare. Aceasta include chiar și opțiunea de a elimina bara laterală, astfel încât să nu se afișeze widgeturi, permițând zonei de conținut să utilizeze întreaga lățime a paginii web.

Aceste opțiuni vă oferă control asupra aspectului, dar nu asupra stilului și nu elimină marginea barei laterale. Să ne uităm la două metode de stilizare sau eliminare a marginii laterale Divi.

Îndepărtarea sau stilizarea marginii laterale a Divi cu cod

În primul rând, să vedem cum să eliminați sau să stilizați marginea barei laterale a temei Divi adăugând cod la Divi.

Va trebui să adăugați câteva CSS în câmpul CSS personalizat Opțiuni temă Divi. Pentru a accesa câmpul CSS personalizat, accesați Divi > Opțiuni temă din meniul tabloului de bord WordPress. Rămâneți în fila General și derulați până în partea de jos a setărilor pentru a lipi codul.

Iată CSS de care aveți nevoie:

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

Acest cod îi spune WordPress că marginea zonei widgetului nu are lățime, ceea ce face să nu se afișeze.

Lipiți codul în câmpul CSS personalizat și salvați modificările.

Bordura este acum eliminată. CSS funcționează cu tema Divi pentru a elimina marginea laterală, dar nu este ideală și nu toată lumea vrea să gestioneze codul de orice fel. Ce se întâmplă dacă doriți să creați pagina blogului cu Divi Builder? Cea mai bună opțiune este utilizarea Divi Theme Builder.

Cum se utilizează Divi's Theme Builder pentru a elimina marginea laterală Divi fără cod

De asemenea, este posibil să utilizați tema Divi pentru a elimina marginea laterală fără cod. Accesați Divi Theme Builder selectând Divi > Theme Builder în meniul tabloului de bord WordPress. Dacă nu aveți deja un aspect de blog, selectați Adăugați un șablon nou .

Acest șablon va fi atribuit paginii dvs. de blog, paginii de arhivă sau oricărei alte pagini pe care o doriți, așa că asigurați-vă că ați creat această pagină mai întâi.

Se va deschide un mod unde puteți selecta unde va apărea acest șablon. Selectați pagina blogului dvs. sub Pagini specifice . De asemenea, puteți crea pagini de arhivă, pagini de autor, pagini de categorii, pagini de date, pagini de etichete și multe altele. Faceți clic pe Salvare după ce ați făcut selecția.

Un șablon gol este acum atribuit paginii dvs. Apoi, va trebui să creați aspectul blogului. Faceți clic pe zona etichetată Adaugă corp personalizat .

Aceasta deschide o casetă derulantă în care puteți selecta fie să creați un corp personalizat, fie să adăugați unul din bibliotecă. Faceți clic pe selecția dvs. Selectez să construiesc corpul personalizat.

Modulul barei laterale Divi

Am selectat un aspect cu două coloane și am plasat un modul de blog în stânga și un modul de bară laterală în dreapta. Deoarece este un modul Divi, puteți plasa bara laterală oriunde doriți, dar merg cu designul tradițional din partea dreaptă.

Modulul a fost proiectat pentru a fi amplasat pe partea dreaptă sau stângă și plasează marginea în consecință. În mod implicit, modulul este setat să se afișeze ca o bară laterală stângă, astfel încât marginea se află în partea dreaptă a widgeturilor.

Pentru a schimba aspectul, deschideți modulul, selectați fila Proiectare , priviți secțiunea Aspect și alegeți Dreapta în caseta derulantă Aliniere . Acest exemplu are acum marginea din stânga zonei widgetului, făcând din aceasta o bară laterală dreaptă.

Utilizați această setare dacă doriți să afișați marginea barei laterale. Alinierea nu contează dacă doriți să dezactivați marginea. Sunt sigur că ați observat deja comutarea sub caseta derulantă Aliniere .

A doua opțiune din secțiunea Aspect este o comutare numită Afișare separator de margine . Acest lucru vă permite să dezactivați sau să activați marginea. Este activat în mod implicit. Pur și simplu faceți clic pe comutare. Bordura este acum eliminată din bara laterală. Salvați aspectul și ieșiți din editor. Este atât de ușor.

În cele din urmă, selectați Salvare modificări înainte de a părăsi Divi Theme Builder. Acum arată un corp personalizat pentru pagina Blog.

Pagina mea de blog arată acum bara laterală fără margine. Desigur, mai sunt câteva lucruri pe care le puteți face dacă doriți un design mai bun.

Crearea unei chenare laterale personalizate Divi

Dacă nu doriți să utilizați tema Divi pentru a elimina marginea barei laterale, dar nu doriți marginea standard WordPress, puteți crea o margine personalizată a barei laterale utilizând modulul barei laterale Divi.

În fila Proiectare a modulului barei laterale, derulați la setările Border . Aici puteți adăuga o margine pe o parte a modulului. Selectați fiecare parte pe care nu doriți să o afișeze chenarul și setați lățimea chenarului la 0. De asemenea, puteți alege lățimea chenarului, puteți alege o culoare și puteți selecta un stil. Stilurile includ solid, punctat, punctat, dublu, canelat, creastă, inserție, început și niciunul.

Pentru partea pe care doriți să o afișați chenarul, alegeți lățimea, culoarea și stilul chenarului. În acest exemplu, am selectat să afișez marginea numai în partea stângă a modulului. Am setat lățimea chenarului la 7 pixeli, culoarea la portocaliu deschis, iar stilul chenarului la punctat.

Pagina blogului meu afișează acum marginea mea personalizată a barei laterale Divi.

Puteți adăuga chiar și o umbră de cutie celorlalte trei părți, dacă doriți. În acest exemplu, am rotunjit marginile pentru partea dreaptă. Am făcut clic pe linkul din centru, astfel încât marginea punctată rămâne dreaptă. De asemenea, am ajustat umbra cutiei pentru a obține designul dorit.

Iată designul meu final cu bordura punctată. Bara laterală se combină bine cu designul blogului.

Revenind la ideea de a folosi tema Divi pentru a elimina marginea barei laterale, iată aspectul meu final de blog. Îmi place cum sa dovedit asta. Acest lucru arată că utilizarea modulului Divi deschide o mulțime de posibilități pentru designul barei laterale.

Concluzie

Acesta este aspectul nostru de a utiliza tema Divi pentru a elimina marginea laterală. Este suficient de simplu să eliminați codul, dar folosind Divi Theme Builder vă oferă mai multe opțiuni, ceea ce vă oferă mai mult control asupra designului. Această caracteristică este extrem de simplă, dar este ceva ce majoritatea utilizatorilor Divi vor să învețe. Este, de asemenea, un exercițiu bun de a învăța cum ajustările mici din modulele Divi pot face o mare diferență în designul site-ului dvs. web.

Vrem sa auzim de la tine. Ați eliminat marginea laterală Divi folosind oricare dintre aceste metode? Spuneți-ne despre experiența dvs. în comentariile de mai jos.

Imagine prezentată prin Andrew Rybalko / shutterstock.com