Cum se elimină bare laterale de la Divi

Eliminarea barei laterale din șablonul de pagină implicit al Divi se poate face cu ușurință atunci când utilizați Divi Builder. Cu toate acestea, deoarece șabloanele de pagini implicite ale lui Divi (cu bara laterală) încă se afișează pe pagini precum 404 și arhive, poate doriți să scoateți bara laterală din șablonul dvs. cu totul.

Cea mai evidentă modalitate de a înlocui aspectul implicit al barei laterale din dreapta Divi este de a utiliza Divi Builder pentru a proiecta pagina sau postarea. Cu toate acestea, dacă nu veți utiliza Divi Builder pentru o pagină sau o postare, există două modalități principale de a elimina bara laterală. Primul este să modificați aspectul paginii pe bază de pagină la editarea unei pagini sau postări individuale. Al doilea este să înlocuiți pagina implicită sau șablonul de postare prin crearea unui șablon personalizat în Divi Theme Builder.

Astăzi vă voi arăta diferitele moduri de a elimina bare laterale din șablonul implicit al lui Divi și de a înlocui șabloanele cu Divi Builder. Sperăm că acest lucru vă va dota cu instrumentele de care aveți nevoie pentru a crea un site web cu lățime completă proiectat constant.

Să începem!

Eliminarea barei laterale de pe pagini utilizând setările pentru pagina Divi

Schimbarea aspectului implicit al barei laterale din dreapta pentru mesaje sau pagini individuale

Pentru pagini sau postări care nu utilizează Divi Builder, aspectul paginii implicite include o bară laterală dreaptă care arată ca următoarea:

Dacă nu doriți să utilizați Divi Builder pentru acea pagină sau postare și pur și simplu doriți să eliminați bara laterală pe bază de pagină, pur și simplu găsiți caseta Divi Page Settings din bara laterală atunci când editați pagina și selectați lățimea completă (sau nu bara laterală ) pentru aspectul paginii.

Aceasta va elimina bara laterală pentru postarea sau pagina respectivă.

Eliminarea barei laterale din pagina magazinului WooCommerce, pagina categoriilor și paginile produsului utilizând opțiunile temei Divi

Dacă aveți instalat WooCommerce, puteți găsi câteva opțiuni în Opțiunile temei Divi pentru a schimba aspectul paginilor din magazinele WC, categorie și pagini de produse.

Pentru a elimina bara laterală din paginile WC Shop și Categorie, navigați la Divi> Opțiuni temă. Sub fila General, găsiți opțiunea denumită „Pagină magazin și categorie Aspect pagină pentru WooCommerce” și schimbați aspectul în „Fără bară laterală” sau „Lățime completă”.

Pentru a elimina bara laterală pentru paginile produsului, navigați la Divi> Opțiuni temă. Selectați fila Generator. Sub Integrare tip postare, selectați aspectul produsului „Fără bară laterală” din meniul derulant.

Eliminarea barei laterale prin construirea de șabloane personalizate utilizând Theme Builder

Eliminarea barei laterale pentru fiecare pagină / postare cu setările paginii Divi este o soluție bună atunci când creați postări și pagini noi individual. Cu toate acestea, acest lucru poate fi destul de greoi, mai ales dacă decideți să eliminați bare laterale din toate paginile. În plus, șablonul implicit (cu o bară laterală) se afișează în continuare pe pagini precum 404 și arhive. Așadar, poate doriți să scoateți complet bara laterală dintr-o pagină sau un șablon de postare. Pentru a face acest lucru, puteți crea șabloane personalizate utilizând Divi Theme Builder. Acest lucru vă va oferi control deplin asupra paginilor pe care doriți să le ascundeți la nivel global.

Divi's Theme Builder este un instrument puternic pentru proiectarea șabloanelor globale care se vor aplica oricărei pagini sau postări dorite. De fiecare dată când creați un nou aspect al corpului pentru un șablon, acel șablon va înlocui aspectul de pagină implicit al Divi (care include o bară laterală). Prin urmare, tot ce trebuie să faceți pentru a elimina o bară laterală la nivelul șablonului este să creați un șablon nou în Divi Theme Builder și să îl alocați paginii sau postărilor la alegere.

Crearea unui șablon de postare pe blog cu lățime completă utilizând Divi Builder

Postările de blog sunt un exemplu excelent în care poate fi necesar un șablon la nivel de site fără o bară laterală. Opțiunile de conținut dinamic încorporat Divi vă permit să proiectați un șablon de postare pe blog care va fi aplicat tuturor site-urilor de postări pe blog folosind Divi Builder și conținut dinamic. După ce ați terminat, tot ce trebuie să faceți este să actualizați conținutul real al corpului pentru toate postările viitoare. Noul conținut al postării va moșteni designul șablonului personalizat!

Iată un exemplu rapid de cum să faceți acest lucru:

Mai întâi, creați un șablon nou și atribuiți șablonul tuturor postărilor.

Apoi adăugați un corp personalizat la șablon.

Utilizând Editorul de machetare a șabloanelor, proiectați întregul aspect folosind Divi Builder combinat cu modulele și opțiunile de conținut dinamic încorporate ale Divi.

De exemplu, puteți utiliza modulul Titlu postare pentru a afișa dinamic titlul postării. Sau puteți trage titlul postării ca conținut dinamic în corpul unui modul text și îl puteți înfășura cu etichete H1.

Puteți utiliza un modul de imagine pentru a extrage imaginea prezentată ca conținut dinamic.

Sau utilizați o serie de module blurb care includ metadate specifice ca conținut dinamic, cum ar fi autorul postării, biografia autorului postării, categoriile postărilor, data publicării postării și numărul de comentarii.

Cel mai important, trebuie să includeți modulul Postați conținutul atunci când creați orice aspect personalizat al corpului pentru șablonul dvs. Modulul Conținut de postare include zona pentru conținutul paginii sau postării care trebuie afișat în zona de corp a șablonului.

Odată ce șablonul este creat, puteți crea cu ușurință o nouă postare de blog utilizând editorul de postare implicit WordPress și să faceți ca această postare de blog să moștenească designul șablonului de postare pe blog pe care l-ați creat folosind Divi Theme Builder.

Pentru mai multe informații, consultați postarea noastră despre cum să proiectați un șablon de postare pe blog cu Divi's Theme Builder.

Crearea unui șablon de pagină de produs WooCommerce cu lățime completă utilizând Divi Builder

Dacă doriți să eliminați bara laterală implicită pentru paginile de produse, puteți crea, de asemenea, un șablon de aspect frumos cu lățime completă pentru toate postările de pe blog. Similar cu ceea ce am făcut cu șablonul de postare pe blog, puteți utiliza și modulele WooCommerce încorporate Divi (sau Woo) pentru a crea un șablon de pagină de produs personalizat la nivel de site, fără bară laterală.

Pentru aceasta, pur și simplu creați un șablon nou și atribuiți șablonul „Toate produsele”.

Apoi adăugați un corp personalizat la șablon și faceți clic pentru a construi aspectul corpului folosind editorul de șabloane.

Apoi utilizați Divi Builder pentru a include modulele Woo dinamice pentru a proiecta șablonul de pagină Produs.

Acum, creați un produs nou pe backend folosind editorul de pagini standard al produsului, produsul va moșteni automat designul șablonului de corp atribuit.

Pentru mai multe informații, consultați postarea noastră despre cum să creați un șablon de pagină de produs woo la nivel de site.

Crearea unei șabloane de pagină de arhivă cu lățime completă utilizând Divi Builder

Theme Builder facilitează, de asemenea, proiectarea șabloanelor de pagină de arhivare fără bare laterale. Cheia creării unui șablon pentru o pagină de categorie este crearea unui șablon nou și atribuirea acestuia la unul dintre numeroasele șabloane de arhivă disponibile în Divi Builder. De exemplu, îl puteți atribui tuturor paginilor de arhivare la nivel de site sau îl puteți atribui șablonului de pagină de categorie, astfel încât să afișeze numai pe paginile care afișează o arhivă de postări dintr-o categorie.

Primul element esențial al conținutului dinamic pentru un șablon de arhivă trebuie să includă titlul postării / arhivei.

Al doilea element esențial al conținutului dinamic este arhiva propriu-zisă a postărilor care trebuie afișate. Pentru a face acest lucru, adăugați un modul de blog și alegeți opțiunea pentru a afișa postările pentru pagina curentă.

Pentru o plimbare completă, consultați postarea noastră despre cum să creați un șablon de pagină de categorie pentru blogul dvs. folosind Divi Theme Builder.

Crearea unui șablon de pagină 404 Fullwidth folosind Divi Builder

Theme Builder facilitează, de asemenea, proiectarea unui șablon de pagină 404 pentru site-ul dvs. Divi fără bara laterală implicită. O pagină 404 nu se bazează neapărat pe orice conținut dinamic, așa că nu ezitați să proiectați orice doriți folosind Divi Builder.

Pentru o plimbare completă, consultați postarea noastră despre cum să creați un șablon de 404 pagini folosind Divi Theme Builder.

Crearea unui șablon de pagină de căutare cu lățime completă utilizând Divi Builder

Theme Builder facilitează, de asemenea, proiectarea unui șablon de pagină cu rezultate ale căutării pentru site-ul dvs. Divi fără bara laterală implicită. La fel ca șabloanele de pagini de categorii, cheia pentru crearea unui șablon pentru rezultatele căutării este crearea unei zone personalizate a corpului și includerea următoarelor:

1: Un titlu de postare / arhivă ca conținut dinamic

2: Modulul Blog pentru a afișa postările pentru pagina curentă.

3: un modul de căutare pentru a permite utilizatorilor să continue căutările după cum este necesar.

Pentru o plimbare completă, consultați postarea noastră despre cum să creați un șablon de pagină cu rezultatele căutării pentru site-ul dvs. web folosind Divi Theme Builder.

Nu creați un șablon de lățime completă pentru toate paginile, cu excepția cazului în care aveți un motiv specific

Crearea unui șablon personalizat cu un aspect al lățimii complete pentru toate paginile dvs. poate părea o idee bună inițial. Cu toate acestea, este posibil să nu funcționeze așa cum era de așteptat. De exemplu, puteți limita suprafața pe care o puteți utiliza Divi Builder pentru pagină sau puteți crea o zonă a corpului prea largă pentru paginile care nu folosesc Divi Builder. De aceea, este mai bine să creați un șablon de pagină numai pentru acele pagini care nu vor folosi Divi Builder.

Pentru mai multe informații, consultați documentația privind construirea unui șablon de corp global.

Scoaterea barei laterale implicite cu CSS personalizat

Dacă utilizați aspectele implicite ale paginii temei Divi fără a utiliza Divi Builder sau dacă doriți să scăpați de bara laterală la nivel de site fără a fi nevoie să o suprascrieți utilizând setările de pagină individuale sau șabloanele de generare a temelor, puteți utiliza câteva CSS de modă veche. .

Navigați la Divi> Opțiuni temă. Sub fila General, lipiți următorul cod în caseta CSS personalizată din partea de jos a paginii:

/*** 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;
}
}

Gânduri finale

Atunci când creați un site web, este important ca toate paginile dvs. să păstreze același aspect și design consecvente. Deci, dacă construiți un site cu un aspect cu lățime completă utilizând Divi Builder, vă recomandăm să păstrați în mod implicit acest aspect pentru toate paginile dvs. Acest lucru ar putea îmbunătăți experiența utilizatorului. Dacă aveți ceva, acum aveți puterea de a vă personaliza afișajele din bara laterală, oricum doriți.

Sper că veți găsi acest lucru util pentru site-ul dvs. și pentru proiectele viitoare.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!