Toggle-modulet til Divi giver dig mulighed for at vise indhold yderligere pr. klik, uden behov for yderligere jQuery-kode. I lighed med harmonikamodulet bruges skiftemoduler typisk til at dele en indhold grupperet, såsom ofte stillede spørgsmål. Du kan dog også bruge dem til andre opgaver, for eksempel til at strukturere din side. I denne øvelse bruger vi moduler i fuld bredde til at skabe et simpelt sidedesign, der fungerer ved klik. Den designstil, vi beskæftiger os med, er fed og ren. Du vil også være i stand til at downloade JSON-filen gratis!
Lad os gå.
Før vi dykker ned i vejledningen, skal vi se hurtigt på, hvordan vi ser på forskellige skærmstørrelser.
Lad os begynde at genskabe
Tilføj en ny sektion
afstand
Start med at oprette en ny side (eller åbne en eksisterende) og tilføje en almindelig sektion til den. Den eneste ting at gøre i sektionsindstillingerne er at fjerne al standard top- og bundpolstring fra afstandsindstillingerne.
- Top polstring: 0px
- Bundpolstring: 0px
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu skal du åbne rækkeindstillingerne og sørge for, at rækken berører venstre og højre side af sektionsbeholderen ved at ændre størrelsesindstillingerne. Dette er et vigtigt trin i denne vejledning. dette gør det muligt for Toggle-modulet, som vi tilføjer senere i denne tutorial, at blive fuld bredde.
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Bredde: 100%
- Maksimal bredde: 100%
afstand
Vi fjerner også standard top- og bundpolstring fra rækken. Dette fjerner al plads mellem skiftemodulet og den række / søjlebeholder, hvori det er placeret.
- Top polstring: 0px
- Bundpolstring: 0px
Tilføj et rocker-modul
Indsæt titel og indhold
Det er tid til at begynde at tilføje moduler! Det eneste modul, vi har brug for i denne linje, er et Toggle-modul. Vi vil bruge titelområdet til at tilføje en titel og placere alt indhold som vi ønsker at dele på kropsindholdsområdet. Du er velkommen til at placere hvad du vil i indholdsområdet; fra tekst til billeder og mere.
Etat
Vi bruger en lukket skifttilstand, men lad også den være åben.
- Stat: tæt
Standardikonindstillinger
Skift til fanen Design, og skift indstillingerne for modulikonet i overensstemmelse hermed:
- Ikonfarve: # 570fff
- Brug tilpasset ikonstørrelse: YEs
- Ikon Skriftstørrelse: 6vw
Ikonindstillinger på markøren
Skift farven på svæveikonet.
- Ikonfarve: # f2f2f2
Standard failover-indstillinger
Skift derefter baggrundsfarven på den lukkede skifte.
- Skift baggrundsfarve: #ffffff
Hold markøren over indstillingerne
Og ændre også farven, der svæver.
- Skift baggrundsfarve: # 000000
Titeltekstindstillinger
Fortsæt med at ændre tekstindstillingerne til titlen som følger:
- Farve tekst titel: # 000000
- Titel Titleniveau: H2
- Titel Politi: Montserrat
- Teksttitel: Venstre justering
- Teksttitelstørrelse: 8vw (desktop), 10vw (tablet og telefon)
- Afstand på bogstavtitel: -1vw (desktop), -0.5vw (tablet og telefon)
- Højde på titellinjen: 0.7em
Standardindstillinger for lukket titeltekst
Gå derefter ind på tekstparametrene for den lukkede titel og ændre dem i overensstemmelse hermed:
- Lukket titel Skrift: Montserrat
- Titel lukket Tekststørrelse: 18vw (desktop), 16vw (tablet og telefon)
- Lukket titelhøjde: 0.8em
Hold markøren over tekstindstillingerne for titlen
Skift farven på den lukkede billedtekst i musen.
- Tittel lukket Tekstfarve: # f4f4f4
Indstillinger for kropstekst
Gå til indstillinger for kropstekst, og foretag også nogle ændringer.
- Body font: Fira Sans
- Vægt på skrifttypen: Let
- Tilpasning af brødteksten: Begrund
- Kropsstørrelse: 1.2vw (desktop), 2vw (tablet), 3vw (telefon)
- Kropshøjde: 2.1em
afstand
Tilføj også brugerdefineret polstring øverst, nederst og til venstre på modulet.
- Top polstring: 10vw
- Bundpolstring: 10vw
- Venstre polstring: 6vw
Border
Fortsæt ved at fjerne modulets standardgrænse i grænseindstillingerne.
- Bredde på grænsen: 0px
Skift CSS-indhold
Definer Skift modulparametre ved at tilføje følgende CSS-kodelinjer til skrivebordet:
bredde: 60vw; kant-venstre: 0.2vw solidblack; polstring: 5vw 5vw 5vw 5vw;
Skift bredden på CSS-kodelinjen på tabletten og telefonen:
bredde: 85vw;
Klon hele sektionen så mange gange som du vil
Når du har afsluttet det første afsnit, linjen og Toggle-modulet, kan du klone hele sektionen så mange gange du vil. afhængigt af mængden af indhold, du vil vise på din side.
Skift indholdet
Sørg for at ændre hele indholdet af flip-flop i hvert flip-flop-modul.
Skift farverne på ikonerne
Åbn derefter hvert Toggle-modul individuelt, og skift ikonfarven. Dem, vi brugte til denne vejledning, er nævnt nedenfor:
- Ikonfarve 1: # ff9000
- Ikonfarve 2: # 00ffd4
undersøgelse
Nu hvor alle trin er taget, lad os tage et sidste kig på, hvad der skete med forskellige skærmstørrelser.
endelige tanker
I denne artikel viste vi dig, hvordan du bliver kreativ med Toggle-modulet Divi. Mere præcist; vi lavede dem i fuld bredde og brugte dem til at vise indhold fra forskellige sektioner på kreative måder. Denne tutorial viser, at du nemt kan bruge modulerne til Divi uden for boksen, når man tager hensyn til de forskellige beholdere. Du var også i stand til at downloade tutorial JSON-filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
