Før du kan tilføje et Toggle-modul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din Websted, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Aktivér Visual Builder når du gennemser din Websted i forgrunden, hvis du er logget ind på dit WordPress-dashboard.
Når du er på Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først.
Find skiftemodulet på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive "skifte" og derefter trykke på enter for automatisk at finde og tilføje skiftmodulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Eksempel på brugssag: FAQ-side
En FAQ-side er et af de bedste steder at konsolidere information ved hjælp af Toggle-modulet. Det giver brugeren mulighed for hurtigt at identificere det spørgsmål, de leder efter uden at skulle læse masser af tekst. I dette eksempel viser jeg dig, hvordan du kan bruge Toggle-modulet til at designe en moderne FAQ-sektion til din FAQ-side på få minutter.
Brug Visual Builder til at tilføje et nyt afsnit med en fuldbredderække (1 kolonne). Tilføj derefter et Divider-modul til rækken. Under fanen Indhold i indstillingerne for Divider-modulet skal du vælge indstillingen "Show Divider".
Indtast følgende indstillinger på fanen Design:
Farve: # 000000 (sort)
Divider Style: Solid
Separatorposition:
Lodret centreret skillevægt Vægt: 4 pixel
Højde: 1
Tilføj derefter et skiftemodul under skillelinjen, jeg lige har oprettet i samme række. Opdater følgende i indstillingerne for Toggle-modul:
Fanen Indhold
Titel: [indtast din titel]
Indhold: [indtast dit indhold]
Status: Luk
Åbn baggrundsfarve: #ffffff
Lukket Skift baggrundsfarve: #ffffff
Baggrundsfarve: #ffffff
Design fanen
Ikonfarve: # 000000
Åbn skift tekstfarve: # 000000
Lukket veksle tekstfarve: # 000000
Titel skrifttype: Åben sans, fed
Skriftstørrelse: 24px
Titel Tekst Farve: # 000000
Body Font: Open Sans
Body skrifttypestørrelse: 18px
Body Text Farve: # 666666
Højde på kropslinjen: 1.6em
Brug grænsen: JA
Bredde på grænsen: 0px
Tilpasset polstring: Top 2px, bund 2px
Efter at have gemt din indstilling til skiftermodulet, skal du duplikere det skillevægsmodul, du oprettede, og placere det under skiftemodulet. Dette rammer vippen med en øvre og nedre skillelinje. Derefter duplikeres dit skiftmodul og placerer det efter den nederste skillelinje. Da dette er et duplikat Toggle-modul, er alle designparametre blevet overført til det nye Toggle-modul, og alt hvad du skal gøre er at opdatere indholdet af det nye Toggle-modul. Fortsæt derefter processen med at duplikere modulerne Division og Scale Modules, og opdater indholdet af dine skalaer, indtil du har gennemført hele FAQ-sektionen.
Det er alt. Du har nu en moderne FAQ-sektion ved hjælp af Toggle-modulet til at konsolidere dine spørgsmål og svar.
Nu hvor du har set skiftemodulet i aktion, kan du dykke ned i ALLE dets indstillinger i afsnittene nedenfor. Vi har givet et detaljeret kig på, hvad du finder i hver fane i modulets indstillinger og en forklaring på, hvad hver enkelt gør.
Indholdsparametre for Toggle-modulet
Fanen til skiftmodulindhold er organiseret i følgende parametergrupper (som også skifter!).
Tekster
Det er her, du kan tilføje titlen og skifte indhold.
Etat
Du kan vælge, om du vil have, at din knap skal vises åben eller lukket som standard med denne indstilling.
contexte
Her kan du ændre baggrundsfarven, når skiften er åben, og baggrundsfarven, når den er lukket. Du kan også nemt gøre dem ens ved at indstille indstillingen for baggrundsfarve. Der er også mulighed for at indstille eller uploade et baggrundsbillede.
Admin Label
Som standard vises dit skiftemodul med en etiket, der læser 'Skift' i generatoren. Admin-taggen giver dig mulighed for at ændre dette tag for nem identifikation.
Designparametrene for rocker-modulet
Designindstillingerne for skiftemodulet er grupperet i følgende rullelister under fanen Design.
ikon
Det er her, du kan ændre farven på skifteikonet.
Tekster
Her er du i stand til at indstille farven til åben og lukket skiftetekst.
Titeltekst
Her kan du justere titeltekstens skrifttype, vægt, størrelse, farve, afstand, liniehøjde og mere.
Tekstens krop
Her kan du justere skrifttype, vægt, størrelse, farve, afstand, rækkehøjde og mere.
grænser
Her kan du vælge at bruge en kant. Og hvis du vælger at bruge en kant, kan du også vælge dens farve, ændre bredden og vælge dens stil.
afstand
I afstandsområdet kan du tilføje tilpasset polstring til toppen, højre, bund eller venstre for skiftet. Du kan også ændre disse værdier til desktops, tablets eller mobile enheder.
Modulets avancerede indstillinger skifter
På fanen Avanceret i dit skiftemodul kan du tilføje et unikt ID og css-klasse. Du kan også tilføje brugerdefinerede css til forskellige foruddefinerede (og forudvalgte) css-vælgere i tilpasset css-rullemenu. Endelig kan du i rullelisten for synlighed justere synligheden af dit modul på telefoner, tablets og desktops.
Det er alt til denne tutorial, jeg håber, det giver dig mulighed for bedre at bruge Divi Toggle-modulet.
[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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
