Înainte de a putea adăuga un modul de comutare 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 Activați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

accesul la constructorul vizual

Odată ce vă aflați în Visual Builder, puteți face clic pe butonul plus 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.

flip flop divi modul.png

Localizați modulul de comutare î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 „comutare” și apoi apăsați Enter pentru a găsi și adăuga automat modulul comutare! 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 utilizare: pagina FAQ

O pagină de întrebări frecvente este unul dintre cele mai bune locuri pentru consolidarea informațiilor folosind modulul Toggle. Permite utilizatorului să identifice rapid întrebarea pe care o caută fără a fi nevoie să citească tone de text. Pentru acest exemplu, vă voi arăta cum puteți utiliza modulul Toggle pentru a proiecta o secțiune modernă de întrebări frecvente pentru pagina dvs. de întrebări frecvente în câteva minute.
probă pagină FAQ.jpg

Folosind Visual Builder, adăugați o nouă secțiune cu un rând cu lățime completă (1 coloană). Apoi adăugați un modul Divider la rând. Sub fila Conținut a setărilor modulului Divider, selectați opțiunea „Show Divider”.

exemplu de buton rock divi.png

În fila Proiectare, introduceți următoarele opțiuni:

Culoare: # 000000 (negru)
Stil separator: solid
Poziția separatorului:
Separator centrat vertical Greutate: 4 px
Înălțime: 1

opțiuni de configurare flip divi.png

Apoi adăugați un modul de comutare sub divizorul pe care tocmai l-am creat în același rând. În setările modulului Toggle, actualizați următoarele:

Fila Conținut

Titlu: [introduceți titlul]
Conținut: [introduceți conținutul dvs.]
Stare: Închidere
Culoare fundal deschis: #ffffff
Închis Togglează culoarea de fundal: #ffffff
Culoarea fundalului: #ffffff

Fila Design

Culoare pictogramă: # 000000
Deschideți Culoarea textului: # 000000
Culoare text închisă: # 000000
Font Titlu: Open Sans, Bold
Dimensiune font: 24px
Titlu Culoare text: # 000000
Fontul corpului: Open Sans
Dimensiune caractere corp: 18px
Culoarea textului corpului: # 666666
Înălțimea liniei corporale: 1.6em
Utilizați marginea: YES
Lățimea marginii: 0px
Padding personalizat: Top 2px, 2px de jos

noul conținut cu divi.png rocker

După ce ați salvat setarea pentru modulul de comutare, copiați modulul divizor pe care l-ați creat și plasați-l sub modulul de comutare. Aceasta va încadra bascula cu o linie de separare superioară și inferioară. După aceea, copiați modulul de comutare și plasați-l după linia separatorului de jos. Deoarece acesta este un modul Toggle duplicat, toate setările de proiectare au fost transferate în noul modul Toggle și tot ce trebuie să faceți este să actualizați conținutul noului modul Toggle. Apoi continuați procesul de duplicare a modulelor Diviziune și Module de scalare și actualizați conținutul scalei dvs. până când ați finalizat întreaga secțiune FAQ.

Asta e tot. Aveți acum o secțiune modernă de întrebări frecvente care utilizează modulul Toggle pentru a vă consolida întrebările și răspunsurile.

modul flip-flop divi.gif

Acum că ați văzut modulul de comutare în acțiune, intrați în TOATE setările sale în secțiunile de mai jos. Am oferit o privire detaliată asupra a ceea ce veți găsi în fiecare filă a setărilor modulului și o explicație a ceea ce face fiecare.

Parametrii conținutului modulului Toggle

parametri flip-flops divi.png

Fila de conținut a modulului de comutare este organizată în următoarele grupuri de parametri (care alternează, de asemenea!).

Text

Aici puteți adăuga titlul și comuta conținutul.

etat

Puteți alege dacă doriți ca butonul dvs. să apară deschis sau închis în mod implicit cu această setare.

context

Aici puteți schimba culoarea de fundal când comutatorul este deschis și culoarea de fundal când este închisă. De asemenea, le puteți face cu ușurință la fel, setând opțiunea de culoare de fundal. Există, de asemenea, opțiunea de a seta sau încărca o imagine de fundal.

Admin Label

În mod implicit, modulul dvs. de comutare va apărea cu o etichetă pe care scrie „Toggle” în generator. Eticheta de administrare vă permite să modificați această etichetă pentru o identificare ușoară.

Parametrii de proiectare a modulului basculant

opțiune design flip wordpress.png

Parametrii de proiectare ai modulului de comutare au fost grupați împreună în următoarele comutatoare derulante din fila Proiectare.

icoană

Aici puteți schimba culoarea pictogramei de comutare.

Text

Aici puteți seta culoarea pentru textul de comutare deschis și închis.

Textul titlului

Aici puteți regla fontul, greutatea, dimensiunea, culoarea, spațiul, înălțimea liniei și multe altele.

Corpul textului

Aici puteți regla fontul, greutatea, dimensiunea, culoarea, distanța, înălțimea rândului și multe altele.

frontiere

Aici puteți alege să utilizați un chenar. Și dacă alegeți să utilizați un chenar, puteți, de asemenea, să-i selectați culoarea, să-i modificați lățimea și să alegeți stilul.

spaţierea

În zona de spațiere, puteți adăuga umplutură personalizată în partea de sus, dreapta, jos sau stânga a comutatorului. De asemenea, puteți modifica aceste valori pentru desktopuri, tablete sau dispozitive mobile.

Setările avansate ale comutării modulului

flip-flop parametru divi.png

În fila Advanced a modulului dvs. de comutare, puteți adăuga un ID unic și o clasă CSS. Puteți adăuga, de asemenea, css personalizate la diferiți selectori css predefiniți (și preselectați) în modulul glisor video drop-down css personalizat. În cele din urmă, în lista verticală de vizibilitate, puteți regla vizibilitatea modulului dvs. pe telefoane, tablete și desktopuri.

Asta este tot pentru acest tutorial, sper că vă va permite să utilizați mai bine modulul Divi Toggle.

[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