Hoe de Divi Builder Flip-module te gebruiken

par Blair Jersyer | Divi

Voordat u een Toggle-module aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Visual Builder inschakelen wanneer u door uw bladert Site web op de voorgrond als u bent ingelogd op uw WordPress-dashboard.

toegang tot de visual builder

Als u zich eenmaal in Visual Builder bevindt, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.

flip flop divi module.png

Zoek de schakelmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook "toggle" kunt typen en vervolgens op enter kunt drukken om automatisch te zoeken en de toggle-module toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Voorbeeld use case: FAQ-pagina

Een pagina met veelgestelde vragen is een van de beste plaatsen om informatie te consolideren met de Toggle-module. Hiermee kan de gebruiker snel de vraag identificeren waarnaar hij op zoek is zonder tonnen tekst te hoeven lezen. Voor dit voorbeeld laat ik u zien hoe u de Toggle-module kunt gebruiken om binnen enkele minuten een moderne FAQ-sectie voor uw FAQ-pagina te ontwerpen.
voorbeeldpagina FAQ.jpg

Voeg met behulp van de Visual Builder een nieuwe sectie toe met een rij over de volledige breedte (1 kolom). Voeg vervolgens een Divider-module toe aan de rij. Selecteer op het tabblad Inhoud van de instellingen van de Divider-module de optie "Show Divider".

voorbeeld van een flip-flop-knop divi.png

Voer op het tabblad Ontwerpen de volgende opties in:

Kleur: # 000000 (zwart)
Divider Style: Solid
Separatorpositie:
Verticaal gecentreerde verdeler Gewicht: 4px
Hoogte: 1

configuratie-opties toggle divi.png

Voeg vervolgens een toggle-module toe onder de scheidingslijn die ik zojuist in dezelfde rij heb gemaakt. Werk in de instellingen van de Toggle-module het volgende bij:

Inhoud tabblad

Titel: [vul je titel in]
Inhoud: [voer uw inhoud in]
Status: Sluiten
Open achtergrondkleur: #ffffff
Gesloten Wissel de achtergrondkleur in: #ffffff
Achtergrondkleur: #ffffff

Ontwerp tabblad

Pictogramkleur: # 000000
Open Tekstkleur wisselen: # 000000
Gesloten Wissel tekstkleur: # 000000
Titellettertype: Open Sans, Bold
Tekengrootte: 24px
Titel tekstkleur: # 000000
Body Font: Open Sans
Tekstgrootte body: 18px
Tekstkleur hoofdtekst: # 666666
Hoogte van de lichaamslijn: 1.6em
Gebruik de rand: JA
Breedte van de rand: 0px
Aangepaste opvulling: bovenkant 2px, onderkant 2px

nieuwe inhoud met divi.png rocker

Na het opslaan van uw instelling voor de toggle-module, dupliceert u de divider-module die u hebt gemaakt en plaatst u deze onder de toggle-module. Dit zal de wip omlijsten met een bovenste en onderste scheidingslijn. Dupliceer daarna uw toggle-module en plaats deze achter de onderste scheidingslijn. Aangezien dit een dubbele Toggle-module is, zijn alle ontwerpparameters overgebracht naar de nieuwe Toggle-module en hoeft u alleen de inhoud van de nieuwe Toggle-module bij te werken. Ga dan verder met het dupliceren van de Divisie- en Schaalmodules-modules en werk de inhoud van uw weegschaal bij totdat u de volledige FAQ-sectie heeft doorlopen.

Dat is alles. Je hebt nu een moderne FAQ-sectie die de Toggle-module gebruikt om je vragen en antwoorden te consolideren.

module toggle divi.gif

Nu je de toggle-module in actie hebt gezien, duik je in ALLE instellingen in de onderstaande secties. We hebben een gedetailleerd overzicht gegeven van wat u op elk tabblad van de module-instellingen kunt vinden en een uitleg van wat elk doet.

De inhoudsparameters van de Toggle-module

parameters flip-flops divi.png

Het tabblad met de inhoud van de wisselmodule is georganiseerd in de volgende parametergroepen (die ook afwisselen!).

Teksten

Hier kunt u de titel toevoegen en inhoud wisselen.

Etat

U kunt kiezen of u wilt dat uw knop standaard wordt geopend of gesloten met deze instelling.

verband

Hier kunt u de achtergrondkleur wijzigen wanneer de schakelaar open is en de achtergrondkleur wanneer deze gesloten is. U kunt ze ook gemakkelijk hetzelfde maken door de optie voor achtergrondkleur in te stellen. Er is ook de mogelijkheid om een ​​achtergrondafbeelding in te stellen of te uploaden.

Admin-label

Standaard wordt uw toggle-module weergegeven met een label met de tekst 'Toggle' in de generator. Met de Admin-tag kunt u deze tag wijzigen voor eenvoudige identificatie.

De ontwerpparameters van de rocker module

optie ontwerp toggle wordpress.png

De ontwerpparameters van de toggle-module zijn gegroepeerd in de volgende dropdown-schakelaars onder het tabblad Design.

icon

Hier kunt u de kleur van het schakelpictogram wijzigen.

Teksten

Hier kunt u de kleur instellen voor open en gesloten schakeltekst.

Titel tekst

Hier kunt u het lettertype, de dikte, de grootte, de kleur, de afstand, de regelhoogte en meer van de titeltekst aanpassen.

Het lichaam van de tekst

Hier kunt u het lettertype, het gewicht, de grootte, de kleur, de spatiëring, de rijhoogte en meer aanpassen.

borders

Hier kunt u ervoor kiezen om een ​​rand te gebruiken. En als u ervoor kiest om een ​​rand te gebruiken, kunt u ook de kleur selecteren, de breedte wijzigen en de stijl kiezen.

tussenruimte

In het tussenruimtegebied kunt u aangepaste opvulling toevoegen aan de boven-, rechter-, onder- of linkerzijde van de schakelaar. U kunt deze waarden ook wijzigen voor desktops, tablets of mobiele apparaten.

De geavanceerde instellingen van de module schakelen

flip-flop parameter divi.png

Op het tabblad Geavanceerd van uw schakelingsmodule kunt u een unieke ID en CSS-klasse toevoegen. U kunt ook aangepaste css toevoegen aan verschillende vooraf gedefinieerde (en vooraf geselecteerde) css-selectors in de aangepaste css drop-down videoslider-module. Ten slotte kunt u in de vervolgkeuzelijst zichtbaarheid de zichtbaarheid van uw module op telefoons, tablets en desktops aanpassen.

Dat is alles voor deze tutorial, ik hoop dat je hierdoor de Divi Toggle-module beter kunt gebruiken.

[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”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /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 DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi-zelfstudies

Plaats de reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.