Gå till innehållet

Så här använder du Divi Builder Flip-modulen

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]

Innan du kan lägga till en växlingsmodul på din sida måste du först hoppa in i Divi Builder. När Divi-temat har installerats 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 surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

tillgång till den visuella byggaren

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.

flip flop divi module.png

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.
prov sida FAQ.jpg

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

Exempel på en flip-flop-knapp divi.png

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

konfigurationsalternativ välj divi.png

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:

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]

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

nytt innehåll med divi.png rocker

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.

modul växla divi.gif

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

parametrar flip-flops divi.png

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]

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

alternativ design växla wordpress.png

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.

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]

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

flip-flop parameter divi.png

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.

Andra Divi tutorials

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
18 aktier
del8
tweet3
Enregistrer7