Før du kan legge til en Toggle-modul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på din nettstedet Web, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Aktiver Visual Builder når du surfer på din nettstedet Web i forgrunnen hvis du er logget på WordPress-dashbordet.
Når du er på Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.
Finn vekselmodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive "veksle" og deretter trykke enter for å finne og automatisk legge til vekselmodulen! Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .
Eksempel på bruksside: FAQ-side
En FAQ-side er et av de beste stedene å konsolidere informasjon ved hjelp av Toggle-modulen. Det lar brukeren raskt identifisere spørsmålet de leter etter uten å måtte lese massevis av tekst. For dette eksemplet vil jeg vise deg hvordan du kan bruke Toggle-modulen til å designe en moderne FAQ-seksjon for FAQ-siden din i løpet av få minutter.
Bruk Visual Builder til å legge til en ny seksjon med fullbredderad (1 kolonne). Deretter legger du til en delermodul på raden. Under Innhold-fanen i delermodulinnstillingene velger du alternativet “Vis skillelinje”.
I kategorien Design skriver du inn følgende alternativer:
Farge: # 000000 (svart)
Divider Style: Solid
Separatorposisjon:
Vertikalsentrert skillevekt Vekt: 4 px
Høyde: 1
Deretter legger du til en vekselmodul under skillelinjen jeg nettopp opprettet i samme rad. Oppdater følgende i innstillingene for Toggle-modul:
Innholds-fanen
Tittel: [skriv inn tittelen din]
Innhold: [skriv inn innholdet ditt]
Status: Lukk
Åpen bakgrunnsfarge: #ffffff
Lukket Bytt bakgrunnsfargen: #ffffff
Bakgrunnsfarge: #ffffff
Design-fanen
Ikonfarge: # 000000
Åpne Veksle tekstfarge: # 000000
Lukket veksle tekstfarge: # 000000
Tittel Skrift: Åpen Sans, Fet
Skriftstørrelse: 24px
Tittel Tekst Farge: # 000000
Kropps skrifttype: Åpen sans
Kropps skrifttypestørrelse: 18px
Kropps tekstfarge: # 666666
Høyde på kroppslinjen: 1.6em
Bruk grensen: JA
Bredde på grensen: 0px
Tilpasset polstring: Topp 2px, nederste 2px
Etter at du har lagret innstillingen for vekselmodulen, dupliser du skillemodulen du opprettet, og plasser den under vekselmodulen. Dette vil ramme vippen med en øvre og nedre skillelinje. Deretter dupliserer du flip-flop-modulen og plasserer den etter den nederste skillelinjen. Siden dette er en duplikat Toggle-modul, har alle designinnstillinger blitt overført til den nye Toggle-modulen, og alt du trenger å gjøre er å oppdatere innholdet i den nye Toggle-modulen. Fortsett deretter med prosessen med å duplisere modulene Division og Scale Modules, og oppdater innholdet i skalaene dine til du har fullført hele FAQ-delen.
Det er alt. Du har nå en moderne FAQ-seksjon ved hjelp av Toggle-modulen for å konsolidere spørsmålene og svarene dine.
Nå som du har sett veksle-modulen i aksjon, dykk ned i ALLE innstillingene i avsnittene nedenfor. Vi har gitt en detaljert titt på hva du finner i hver fane i modulens innstillinger og en forklaring på hva hver gjør.
Innholdsparametrene til Toggle-modulen
Innholdsfanen for vekselmodul er organisert i følgende parametergrupper (som også veksler!).
Texte
Dette er hvor du kan legge til tittelen og bytte innhold.
Etat
Du kan velge om du vil at knappen skal vises åpen eller lukket som standard med denne innstillingen.
contexte
Her kan du endre bakgrunnsfargen når vekselen er åpen og bakgrunnsfargen når den er lukket. Du kan også enkelt gjøre dem like ved å angi bakgrunnsfargealternativet. Det er også muligheten til å angi eller laste opp et bakgrunnsbilde.
Admin-etikett
Som standard vil veksle-modulen din vises med en etikett som leser 'Toggle' i generatoren. Admin-taggen lar deg endre denne taggen for enkel identifisering.
Designparametrene til vippemodulen
Designparametrene til vekselmodulen er gruppert i følgende rullegardinbrytere under fanen Design.
icon
Det er her du kan endre fargen på veksleikonet.
Texte
Her kan du stille inn fargen for åpen og lukket vekseltekst.
Titteltekst
Her kan du justere titteltekstens skrift, vekt, størrelse, farge, avstand, linjehøyde og mer.
Kroppen av teksten
Her kan du justere skrift, vekt, størrelse, farge, avstand, radhøyde og mer.
grenser
Her kan du velge å bruke en grense. Og hvis du velger å bruke en kant, kan du også velge fargen, endre bredden og velge stilen.
avstanden
I avstandsområdet kan du legge til tilpasset polstring øverst, høyre, nederst eller venstre for vekselen. Du kan også endre disse verdiene for stasjonære datamaskiner, nettbrett eller mobile enheter.
De avanserte innstillingene for modulen veksler
I kategorien Avansert i vekselmodulen kan du legge til en unik ID- og css-klasse. Du kan også legge til tilpasset css til forskjellige forhåndsdefinerte (og forhåndsvalgte) css-velgere i tilpasset css-rullegardinmodul. Til slutt, i nedtrekkslisten for synlighet, kan du justere synligheten til modulen din på telefoner, nettbrett og stasjonære datamaskiner.
Det er alt for denne opplæringen, jeg håper det vil tillate deg å bruke Divi Toggle-modulen bedre.
[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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]
Andre divisjoner
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
