Innan du kan lägga till en Toggle-modul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats, kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Aktivera Visual Builder när du bläddrar i din webbplats i förgrunden om du är inloggad på din WordPress-instrumentpanel.
När du är på Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.
Leta reda på växlingsmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva "växla" och sedan trycka på enter för att automatiskt hitta och lägga till växlingsmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .
Exempel på användningsfall: FAQ-sida
En FAQ-sida är en av de bästa platserna att konsolidera information med hjälp av Toggle-modulen. Det gör att användaren snabbt kan identifiera frågan de letar efter utan att behöva läsa massor av text. I det här exemplet visar jag dig hur du kan använda Toggle-modulen för att utforma ett modernt FAQ-avsnitt för din FAQ-sida på några minuter.
Med Visual Builder lägger du till ett nytt avsnitt med en rad med full bredd (1 kolumn). Lägg sedan till en avdelningsmodul i raden. På fliken Innehåll i inställningarna för delarmodulen väljer du alternativet “Visa avdelare”.
På fliken Design anger du följande alternativ:
Färg: # 000000 (svart)
Divider Style: Solid
Separatorposition:
Vertikalt centrerad avdelare Vikt: 4 pixlar
Höjd: 1
Lägg sedan till en växlingsmodul under avdelaren som jag just skapade i samma rad. Uppdatera följande i inställningarna för växlingsmodul:
Innehållsfliken
Titel: [ange din titel]
Innehåll: [ange ditt innehåll]
Status: Stäng
Öppna bakgrundsfärg: #ffffff
Stängt Växla bakgrundsfärgen: #ffffff
Bakgrundsfärg: #ffffff
Design fliken
Ikonfärg: # 000000
Öppna Växla textfärg: # 000000
Stängd Växla Textfärg: # 000000
Titel teckensnitt: öppen sans, fet
Teckenstorlek: 24px
Titel Text Färg: # 000000
Kroppstypsnitt: Open Sans
Kroppstypstorlek: 18px
Kroppstext Färg: # 666666
Höjd på kroppslinjen: 1.6em
Använd gränsen: JA
Breddens bredd: 0px
Anpassad stoppning: Topp 2px, nedre 2px
När du har sparat inställningen för växlingsmodulen duplicerar du avdelningsmodulen som du skapade och placerar den under växlingsmodulen. Detta inramar gungbrädet med en övre och nedre delningslinje. Därefter duplicerar du din flip-flop-modul och placerar den efter den nedre separatorraden. Eftersom detta är en duplicerad Toggle-modul har alla designparametrar överförts till den nya Toggle-modulen och allt du behöver göra är att uppdatera innehållet i den nya Toggle-modulen. Fortsätt sedan med att duplicera modulerna Division och Scale Modules och uppdatera innehållet i dina skalor tills du har slutfört hela FAQ-avsnittet.
Det är allt. Du har nu ett modernt FAQ-avsnitt med hjälp av Toggle-modulen för att konsolidera dina frågor och svar.
Nu när du har sett växlingsmodulen i handling dyker du in i ALLA dess inställningar i avsnitten nedan. Vi har gett en detaljerad titt på vad du hittar på varje flik i modulens inställningar och en förklaring av vad de gör.
Innehållsparametrarna för Toggle-modulen
Fliken för växlingsmodulens innehåll är organiserad i följande parametergrupper (som också växlar!).
Texte
Det är här du kan lägga till titeln och växla innehåll.
etat
Du kan välja om du vill att din knapp ska visas öppen eller stängd som standard med den här inställningen.
sammanhang
Här kan du ändra bakgrundsfärgen när växeln är öppen och bakgrundsfärgen när den är stängd. Du kan också enkelt göra dem desamma genom att ställa in bakgrundsfärgalternativet. Det finns också möjlighet att ställa in eller ladda upp en bakgrundsbild.
Admin-etikett
Som standard visas din växlingsmodul med en etikett som läser "Växla" i generatorn. Admin-tagg låter dig ändra denna tagg för enkel identifiering.
Designparametrarna för vippmodulen
Designparametrarna för växlingsmodulen har grupperats i följande rullgardinsreglage under fliken Design.
icon
Det är här du kan ändra färgen på växlingsikonen.
Texte
Här kan du ställa in färgen för öppen och stängd växlingstext.
Titeltext
Här kan du justera titeltextteckensnittet, vikt, storlek, färg, avstånd, radhöjd och mer.
Textens kropp
Här kan du justera teckensnitt, vikt, storlek, färg, avstånd, radhöjd och mer.
gränser
Här kan du välja att använda en gräns. Och om du väljer att använda en kant kan du också välja dess färg, ändra dess bredd och välja dess stil.
avstånd
I avståndsområdet kan du lägga till anpassad stoppning uppe, till höger, längst ned eller till vänster om växeln. Du kan också ändra dessa värden för stationära datorer, surfplattor eller mobila enheter.
Modulens avancerade inställningar växlar
På fliken Avancerat i din växlingsmodul kan du lägga till ett unikt ID och css-klass. Du kan också lägga till anpassade css till olika fördefinierade (och förvalda) css-väljare i anpassad CS-rullgardinsmodul. Slutligen, i listrutan för synlighet kan du justera synligheten för din modul på telefoner, surfplattor och skrivbord.
Det här är allt för denna handledning, jag hoppas att det gör att du bättre kan använda Divi Toggle-modulen.
[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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andra Divi tutorials
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen
