Gå till innehållet

Strukturera din sida med växelmoduler i full bredd på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Divis Toggle-modul låter dig visa ytterligare innehåll per klick, utan att behöva ytterligare jQuery-kod. I likhet med Accordion-modulen används växlingsmoduler vanligtvis för att dela grupperat innehåll, såsom vanliga frågor. Du kan dock också använda dem för andra uppgifter, till exempel för att strukturera din sida. I den här handledningen använder vi flipmoduler i full bredd för att skapa en enkel siddesign som beter sig vid klick. Designstilen vi hanterar ä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 ska använda titelområdet för att lägga till en titel och lägga allt innehåll vi vill dela i 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å.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • 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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • 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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Ä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 har vi visat dig hur du kan vara kreativ med Divis Toggle-modul. Mer exakt; vi skapade dem i full bredd och använde dem för att visa innehåll från olika sektioner på ett kreativt sätt. Denna handledning visar att du enkelt kan använda Divis moduler utanför lådan när du tar hänsyn till de olika behållarna. Du kunde också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer