Divi vă permite să creați un număr nelimitat de zone gata de utilizare din mers. Barele laterale pot fi apoi adăugate la orice pagină, permițându-vă să creați bare laterale unice pentru diferite secțiuni ale dvs site-ul web.

Cum se adaugă un modul widget Zonde de la Divi

Înainte de a putea adăuga un modul de bară laterală la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

divi builder

Odată ce utilizați Visual Builder, puteți face clic pe butonul gri (+) pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs.

bara laterala divi plugin wordpress.png

Găsiți modulul barei laterale în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „bară laterală” și apoi să faceți clic pe „Enter” pentru a găsi și adăuga automat modulul barei laterale! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: adăugarea unei bare laterale pe pagina blogului dvs.

Modulul barei laterale vă permite să inserați o bară laterală (și toate widgeturile sale încorporate) oriunde pe pagina dvs. De fapt, puteți adăuga orice zonă widget folosind modulul barei laterale. Pentru acest exemplu, vă voi arăta cum să inserați o bară laterală personalizată pe pagina blogului dvs. folosind secțiunea specializată pentru a afișa widgetul Căutare și Postări recente pe WordPress.

bara laterala pentru articol pe WordPress.jpg

Această pagină de blog are un antet cu lățime completă pentru a afișa titlul blogului în partea de sus a paginii. Sub modulul antet cu lățime completă este un aspect special cu un modul de blog în stânga și o zonă verticală dreaptă a barei laterale în dreapta.

Utilizarea secțiunii specializate vă permite să adăugați variații complexe de coloane lângă bare laterale verticale, fără a adăuga pauze nedorite la pagină. Acest lucru este perfect pentru un blog cu o bară laterală.

Mai întâi trebuie să vă asigurați că aveți widgeturile configurate în pagina Widgets a tabloului de bord WordPress. Pentru acest exemplu, adaug widgetul Căutare și widgetul Articole recente în widgetul Barei laterale.

bara laterală widget wordpress.png

Apoi implementați Visual Builder pentru a edita pagina blogului. Adăugați o secțiune specializată pe pagina dvs. (chiar sub antetul dvs.) cu următorul aspect:

creați o secțiune personalizată divi.png

inserați coloanele divi.png

După ce ați adăugat o secțiune specializată la pagină, veți observa că o zonă (din stânga) are butonul „Adăugați modul”. Pentru acest exemplu, aici a fost adăugat modulul Blog cu aspect de grilă pentru a afișa postări de blog.
exemplu articol blog layout grid.png

Cealaltă (în dreapta) are un buton „Insert Row”. Zona „Insert module” reprezintă bara laterală verticală. Aici veți intra în modulul barei laterale. Puteți adăuga aici cât mai multe module, într-un singur rând, și vor acoperi lățimea verticală a secțiunii, adiacentă structurii coloanei pe care o construiți lângă ea. De fapt, pentru acest exemplu, pagina blogului are deja un modul Email Optin și un modul Persoană în acea zonă a barei laterale verticale a aspectului Speciality.

Acum, adăugați modulul de bară laterală în partea de sus a celorlalte module din zona dvs. laterală verticală.

adăugați module la sidebar.jpg

În setarea modulului Bara laterală, actualizați următoarele:

Fila Conținut

Zona widget: selectați Bara laterală

Fila Design

Orientare: dreapta (deoarece bara laterală este în dreapta)
Ștergeți separatorul de frontieră: DA
Culoare text:
Dimensiune font antet întunecat: 26 px
Spațierea literelor
antet: 3px Înălțimea rândului antet: 1.1em

Fila Advanced

Sub secțiunea CSS personalizat, adăugați următorul CSS în caseta de text Widget. Acest lucru va face ca designul widgeturilor din bara laterală să se potrivească cu designul site-ului:

fundal: #fff; padding: 20px; -webkit-box-shadow: 0 1X5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1X5px rgba (0, 0, 0, 0.1);

creați o bară laterală divi.jpg

Salvați setările

Puteți vedea acum că modulul de bară laterală afișează elementele widgetului Bara laterală (Căutare și articole recente) și le afișează în zona de bară laterală verticală a secțiunii dvs. de specialitate.

exemplu de bara laterală divi.jpg

Opțiuni de conținut pentru bara laterală

În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Tot ceea ce controlează ceea ce apare în modulul dvs. va fi găsit întotdeauna în această filă.

sidebar.png setări

Domeniu widget

Modulul Sidebar utilizează casete de creare widget pe care le puteți crea în fila Aspecte> Widgeturi. Puteți selecta una dintre zonele dvs. widget personalizate din acest meniu derulant.

Admin Label

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare a barei laterale

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

opțiuni de proiectare divi.png

Orientare

Aici puteți alege pe ce parte a paginii va fi afișată bara laterală. Acest parametru controlează orientarea textului și poziția chenarului.

Ștergeți separatorul de frontieră

Aici puteți elimina chenarul subțire gri care separă bara laterală de conținutul paginii dvs.

Culoarea textului

Aici puteți alege dacă textul dvs. trebuie să fie deschis sau întunecat. Dacă lucrați pe un fundal întunecat, textul dvs. ar trebui să fie ușor. Dacă fundalul dvs. este deschis, textul dvs. ar trebui să fie întunecat.

Font antet

Puteți modifica fontul textului antetului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului antetului

Aici puteți regla dimensiunea textului antetului. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii dorite a textului în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoare text antet

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului antetului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor antet

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul antetului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea rândului antet

Înălțimea liniei afectează spațiul dintre fiecare linie a textului antetului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmp. intrare situată în dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Font corp

Puteți schimba fontul corpului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului corpului

Aici puteți regla dimensiunea textului corpului. Puteți trage glisorul pentru a mări sau micșora dimensiunea textului sau a introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului corporal

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor corporale

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din text, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei corpului

Înălțimea liniei afectează spațiul dintre fiecare linie de text din corpul dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Opțiuni avansate ale barei laterale

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

avans bara laterală divi.png

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la site-ul dvs. web utilizând opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Alte tutoriale Divi