Î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.
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.
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.
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”.
Î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
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
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.
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
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
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
Î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
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin