Divi Toggle Module

Toggle is een geweldige manier om informatie te consolideren en de gebruikerservaring op uw pagina te verbeteren. Met Divi kunt u een willekeurig aantal schakelaars maken die er geweldig uitzien in elke kolom met een grootte.

BEKIJK EEN LIVE DEMO VAN DEZE MODULE

Een schakelmodule aan uw pagina toevoegen

Voordat u een schakelmodule aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder inschakelen tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

Nadat u Visual Builder hebt ingevoerd, 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 start, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s rij- en sectie- elementen.

divi-toggle-module-3

Zoek de schakelmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat u ook “toggle” kunt typen en vervolgens op enter kunt drukken om de toggle-module automatisch te vinden en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: pagina met veelgestelde vragen

Een pagina met veelgestelde vragen is een van de beste plaatsen om informatie te consolideren met behulp van de Toggle-module. Het stelt de gebruiker in staat om snel te identificeren welke vraag hij wil hebben, zonder tonnen tekst te hoeven doorlezen. Voor dit voorbeeld ga ik je laten zien hoe je de Toggle Module in minuten kunt gebruiken om een ​​moderne FAQ-sectie voor je FAQ-pagina te ontwerpen.

Voeg met Visual Builder een nieuwe sectie toe met een rij met volledige breedte (1 kolom). Voeg vervolgens een scheidingsmodule toe aan de rij. Selecteer op het tabblad Inhoud van de Divider Module-instellingen de optie “Show Divider”.

Voer op het tabblad Ontwerpen de volgende opties in:

Kleur: # 000000 (zwart)
Divider Stijl: Solid
Divider Positie: Verticaal gecentreerd
Divider Gewicht: 4 px
Hoogte: 1

Voeg vervolgens een Toggle Module toe onder de Divider die ik zojuist in dezelfde rij heb gemaakt. Werk in de Toggle Module-instellingen het volgende bij:

Tabblad Inhoud

Titel: [voer uw titel in]
Inhoud: [voer uw inhoud in]
Status: Sluiten
Openen Achtergrondkleur schakelen: #ffffff
Gesloten Achtergrondkleur schakelen: #ffffff
Achtergrondkleur: #ffffff

Ontwerp tabblad

Icoon Kleur: # 000000
Open Toggle Text color: # 000000
Gesloten Toggle Tekst Kleur: # 000000
Lettertype van titel: Open Sans, Bold
Lettertype van titel Grootte: 24px
Titel Tekst Kleur: # 000000
Body Font: Open Sans
Body Font Grootte: 18px
Body Tekst Kleur : # 666666
Body Line Lengte: 1.6em
Gebruik Border: JA
Border Breedte: 0px
Custom Padding: Top 2px, Bottom 2 px

Nadat u uw instelling voor de Toggle Module hebt opgeslagen, dupliceert u de Divider Module die u hebt gemaakt en plaatst u deze onder de Toggle Module. Dit omkadert de Toggle met een bovenste en onderste scheidingslijn. Kopieer daarna uw Toggle-module en plaats deze achter de onderste scheidingslijn. Aangezien dit een dubbele Toggle-module is, zijn alle ontwerpinstellingen overgedragen naar de nieuwe Toggle en hoeft u alleen de inhoud van de nieuwe Toggle-module bij te werken. Ga vervolgens verder met het dupliceren van scheidingsmodules en Toggle-modules en het bijwerken van de inhoud van uw Toggles totdat u alle veelgestelde vragen hebt voltooid.

Dat is het. Nu heb je een moderne FAQ-sectie met behulp van de Toggle-module om je vragen en antwoorden te consolideren.

Nu je de schakelmodule 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 instellingen van de module vindt en een uitleg van wat elke module doet.

De inhoudsinstellingen van de Toggle-module

divi-toggle-module 2

Het inhoudstabblad van de schakelmodule is georganiseerd in de volgende groepen instellingen (die ook kunnen schakelen!).

Tekst

Hier kunt u de wisseltitel en inhoud toevoegen.

Staat

U kunt kiezen of u wilt dat uw schakelaar standaard open of gesloten wordt weergegeven met deze instelling.

Achtergrond

Hier kunt u de open knevel achtergrondkleur en de gesloten knevel achtergrondkleur wijzigen. Je kunt ze ook eenvoudig hetzelfde maken door de optie voor achtergrondkleur in te stellen. Er is ook de optie om een ​​achtergrondafbeelding in te stellen of te uploaden.

Beheerderslabel

Standaard wordt uw schakelmodule weergegeven met een label met de tekst ‘Schakel’ in de builder. Met het beheerderslabel kunt u dit etiket wijzigen voor eenvoudige identificatie.

De ontwerpinstellingen van de Toggle-module

divi-toggle-module 4

De ontwerpinstellingen van de schakelmodule zijn gegroepeerd in de volgende vervolgkeuzelijsten op het ontwerptabblad.

Icoon

Hier kunt u de kleur van het schakelpictogram wijzigen.

Tekst

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

Titel tekst

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

Lichaamstaal

Hier kunt u het lettertype van de hoofdtekst, het gewicht, de grootte, de kleur, de afstand, de lijnhoogte en meer aanpassen.

Grens

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.

Spatiëring

In het afstandsgebied kunt u aangepaste opvulling toevoegen aan de bovenkant, rechterkant, onderkant of linkerkant van de schakelaar. U kunt deze waarden ook wijzigen voor desktop-, tablet- of mobiele apparaten.

De geavanceerde instellingen van de Toggle-module

divi-toggle-module 5

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