Toggle-modulen för Divi låter dig visa innehåll ytterligare per klick, utan behov av ytterligare jQuery-kod. I likhet med dragspelsmodulen används växlingsmoduler vanligtvis för att dela en innehåll grupperade, till exempel vanliga frågor. Du kan dock även använda dem för andra uppgifter, till exempel för att strukturera din sida. I den här handledningen kommer vi att använda växlingsmoduler i full bredd för att skapa en enkel siddesign som fungerar vid klick. Designstilen vi sysslar med är djärv och ren. Du kommer också att kunna ladda ner JSON-filen gratis!
Låt oss gå.
Innan vi dyker in i handledningen, låt oss ta en snabb titt på hur det ser ut på olika skärmstorlekar.
Låt oss börja återskapa
Lägg till en ny sektion
avstånd
Börja med att skapa en ny sida (eller öppna en befintlig) och lägga till en vanlig sektion i den. Det enda du kan göra i sektionsinställningarna är att ta bort alla standardupp- och nedre vadderingar från avståndsinställningarna.
- Toppad padding: 0px
- Botten stoppning: 0px
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna och se till att raden vidrör vänster och höger sida av sektionsbehållaren genom att ändra storleksinställningarna. Detta är ett viktigt steg i denna handledning. detta gör att Toggle-modulen, som vi lägger till senare i den här självstudien, blir full bredd.
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Bredd: 100%
- Maximal bredd: 100%
avstånd
Vi tar också bort standard- och toppdynan från raden. Detta tar bort allt utrymme mellan växlingsmodulen och raden / kolumnbehållaren där den är placerad.
- Toppad padding: 0px
- Botten stoppning: 0px
Lägg till en vippmodul
Sätt in titel och innehåll
Det är dags att börja lägga till moduler! Den enda modulen vi behöver i den här raden är en Toggle-modul. Vi kommer att använda titelområdet för att lägga till en titel och placera allt innehåll som vi vill dela på kroppsinnehållsområdet. Placera gärna vad du vill i innehållsområdet; från text till bilder och mer.
etat
Vi använder ett stängt växlingsläge, men lämna det gärna också.
- Tillstånd: nära
Standardikoninställningar
Byt till fliken Design och ändra inställningarna för modulikonen i enlighet med detta:
- Ikonfärg: # 570fff
- Använd anpassad ikonstorlek: YEs
- Ikon Fontstorlek: 6vw
Ikoninställningar på svävaren
Ändra färgen på svävarikonen.
- Ikonfärg: # f2f2f2
Standard failover-inställningar
Ändra sedan bakgrundsfärgen på den stängda växeln.
- Växla bakgrundsfärg: #ffffff
Håll muspekaren över inställningarna
Och ändra färgen som svävar också.
- Växla bakgrundsfärg: # 000000
Titeltextinställningar
Fortsätt genom att ändra textinställningarna för titeln enligt följande:
- Färgtexttitel: # 000000
- Titel Titelnivå: H2
- Titel Police: Montserrat
- Textens titel: vänsterjustering
- Texttitelstorlek: 8vw (skrivbord), 10vw (surfplatta och telefon)
- Avstånd mellan titlar och bokstäver: -1vw (skrivbord), -0.5vw (surfplatta och telefon)
- Titelradens höjd: 0.7em
Standardinställningar för stängd titel
Gå sedan till textparametrarna för den stängda titeln och ändra dem i enlighet därmed:
- Closed title font: Montserrat
- Titel stängd Textstorlek: 18vw (skrivbord), 16vw (surfplatta och telefon)
- Stängd titelhöjd: 0.8em
Håll muspekaren över textinställningarna för titeln
Ändra färgen på texten med stängda bildtexter i muspekaren.
- Titel stängd Textfärg: # f4f4f4
Inställningar för kroppstext
Gå till inställningar för kroppstext och gör också några ändringar.
- Body Font: Fira Sans
- Teckensnittets vikt: Lätt
- Justering av karaktärstexten: Motivera
- Kroppsstorlek: 1.2vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Kroppshöjd: 2.1em
avstånd
Lägg också till anpassad stoppning längst upp, nedre och vänster i modulen.
- Topp stoppning: 10vw
- Botten stoppning: 10vw
- Vänster Padding: 6vw
gräns
Fortsätt genom att ta bort modulens standardgräns i gränsinställningarna.
- Breddens bredd: 0px
Växla CSS-innehåll
Definiera Växla modulparametrar genom att lägga till följande CSS-kodrader på skrivbordet:
bredd: 60vw; kant-vänster: 0.2vw solidblack; stoppning: 5vw 5vw 5vw 5vw;
Ändra bredden på CSS-kodraden på surfplattan och telefonen:
bredd: 85vw;
Klona hela avsnittet så många gånger du vill
När du har slutfört det första avsnittet, raden och Toggle-modulen kan du klona hela sektionen så många gånger du vill. beroende på hur mycket innehåll du vill visa på din sida.
Ändra innehållet
Se till att ändra hela flip-flop-innehållet i varje flip-flop-modul.
Ändra färgerna på ikonerna
Öppna sedan varje Toggle-modul separat och ändra ikonfärgen. De som vi använde för denna handledning nämns nedan:
- Ikonfärg 1: # ff9000
- Ikonfärg 2: # 00ffd4
undersökningen
Nu när alla steg har tagits, låt oss ta en sista titt på vad som hände med olika skärmstorlekar.
Avslutande tankar
I den här artikeln visade vi dig hur du blir kreativ med Toggle-modulen Divi. Mer exakt; vi gjorde dem i full bredd och använde dem för att visa innehåll från olika sektioner på kreativa sätt. Denna handledning visar att du enkelt kan använda modulerna i Divi utanför lådan när man tar hänsyn till de olika behållarna. Du kunde också ladda ner tutorial JSON-filen gratis! Om du har några frågor eller förslag får du gärna lämna en kommentar i kommentarsfältet nedan.
