Modulul Comutare al Divi vă permite să afișați cuprins suplimentar pe clic, fără a fi nevoie de cod jQuery suplimentar. Similar cu modulul Accordion, modulele de comutare sunt de obicei folosite pentru a partaja a cuprins grupate, cum ar fi întrebările frecvente. Cu toate acestea, le puteți folosi și pentru alte sarcini, de exemplu pentru a vă structura pagina. În acest tutorial, vom folosi module de comutare cu lățime completă pentru a crea un design simplu de pagină care se comportă la clic. Stilul de design cu care ne ocupăm este îndrăzneț și curat. De asemenea, veți putea descărca fișierul JSON gratuit!
Să mergem.
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra modului în care arată pe diferite dimensiuni de ecran.
Să începem să recreăm
Adăugați o secțiune nouă
spaţierea
Începeți prin crearea unei pagini noi (sau deschiderea uneia existente) și adăugarea unei secțiuni obișnuite la ea. Singurul lucru de făcut în setările secțiunii este să eliminați toate umpluturile implicite de sus și de jos din setările de spațiere.
- Top placă: 0px
- Garnitura de jos: 0px
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un rând nou folosind următoarea structură a coloanelor:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului și asigurați-vă că rândul atinge laturile stânga și dreapta ale containerului secțiunii modificând setările de dimensionare. Acesta este un pas important în acest tutorial. aceasta permite modulului Toggle, pe care îl vom adăuga mai târziu în acest tutorial, să devină lățime completă.
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Lățime: 100%
- Lățimea maximă: 100%
spaţierea
De asemenea, eliminăm umplutura implicită de sus și de jos de pe rând. Aceasta va elimina tot spațiul dintre modulul de comutare și containerul rând / coloană în care este plasat.
- Top placă: 0px
- Garnitura de jos: 0px
Adăugați un modul basculant
Inserați titlul și conținutul
Este timpul să începeți să adăugați module! Singurul modul de care avem nevoie în această linie este un modul Toggle. Vom folosi zona de titlu pentru a adăuga un titlu și pentru a plasa totul cuprins pe care vrem să le împărtășim în zona conținutului corpului. Simțiți-vă liber să plasați orice doriți în zona de conținut; de la text la imagini și multe altele.
etat
Folosim o stare de comutare închisă, dar nu ezitați să o lăsați deschisă și.
- Stat: aproape
Setări implicite ale pictogramei
Treceți la fila Proiectare și modificați setările pictogramei modulului în consecință:
- Culoare pictogramă: # 570fff
- Utilizați dimensiunea pictogramei personalizate: DA
- Icon Dimensiune font: 6vw
Setările pictogramei pe hover
Schimbați culoarea pictogramei cu mouse-ul.
- Culoare pictogramă: # f2f2f2
Setări implicite ale reactivării
Apoi schimbați culoarea de fundal a comutatorului închis.
- Comutați culoarea de fundal: #ffffff
Treceți cursorul peste setări
Și schimbați culoarea de asemenea.
- Comutați culoarea de fundal: # 000000
Setări text de titlu
Continuați modificând setările de text ale titlului după cum urmează:
- Denumirea textului color: # 000000
- Titlu Titlu Nivel: H2
- Titlul Poliției: Montserrat
- Titlul textului: Aliniere stânga
- Mărimea titlului textului: 8vw (desktop), 10vw (tabletă și telefon)
- Spațiu de litere de titlu: -1vw (desktop), -0.5vw (tabletă și telefon)
- Înălțimea liniei de titlu: 0.7em
Setări implicite ale textului titlului închis
Apoi, accesați parametrii text ai titlului închis și modificați-i în consecință:
- Font închis la titlu: Montserrat
- Titlu închis Dimensiunea textului: 18vw (desktop), 16vw (tabletă și telefon)
- Înălțimea închisă a titlului: 0.8em
Treceți cursorul peste setările textului din titlu
Schimbați culoarea textului din legendă închisă în pas.
- Titlu închis Culoarea textului: # f4f4f4
Setări text corp
Accesați setările textului corpului și efectuați și unele modificări.
- Font pentru corp: Fira Sans
- Greutatea fontului: Light
- Alinierea textului corpului: Justificați
- Dimensiunea textului corpului: 1.2vw (desktop), 2vw (tabletă), 3vw (telefon)
- Înălțimea corpului: 2.1em
spaţierea
Adăugați, de asemenea, căptușeală personalizată în partea de sus, jos și stânga a modulului.
- Padding Top: 10vw
- Garnitura de jos: 10vw
- Stingerea stânga: 6vw
frontieră
Continuați prin eliminarea frontierei implicite a modulului din setările de frontieră.
- Lățimea marginii: 0px
Comutați conținut CSS
Definiți parametrii modulului Toggle adăugând pe desktop următoarele linii de cod CSS:
lățime: 60vw; graniță-stânga: 0.2vw solidblack; căptușire: 5vw 5vw 5vw 5vw;
Modificați lățimea liniei de cod CSS de pe tabletă și telefon:
latime: 85vw;
Clonați întreaga secțiune de câte ori doriți
După ce ați finalizat prima secțiune, linia și modulul Toggle, puteți clona întreaga secțiune de câte ori doriți. în funcție de cantitatea de conținut pe care doriți să o afișați pe pagina dvs.
Schimbați conținutul
Asigurați-vă că modificați întregul conținut al flip-flop-ului în fiecare modul flip-flop.
Schimbați culorile pictogramelor
Apoi deschideți fiecare modul de comutare individual și schimbați culoarea pictogramei. Cele pe care le-am folosit pentru acest tutorial sunt menționate mai jos:
- Culoarea pictogramei 1: # ff9000
- Culoarea pictogramei 2: # 00ffd4
studiu
Acum, după ce s-au făcut toți pașii, să aruncăm o privire finală asupra a ceea ce s-a întâmplat cu diferite dimensiuni de ecran.
Ultimele gânduri
În acest articol, v-am arătat cum să fiți creativ cu modulul Comutare al Divi. Mai precis; le-am făcut pe toată lățimea și le-am folosit pentru a afișa conținut din diferite secțiuni în moduri creative. Acest tutorial arată că puteți utiliza cu ușurință modulele de Divi în afara cutiei atunci când iei în calcul diferitele containere. De asemenea, ați putut descărca gratuit fișierul tutorial JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
