De Divi Tabbladen Module

Tabbladen zijn een geweldige manier om informatie te consolideren en de gebruikerservaring op uw pagina te verbeteren. Met Divi kunt u een willekeurig aantal tabbladen maken die er geweldig uitzien in elke kolom van formaat. Bij ¼ kolommen zijn tabknoppen gestapeld en blijven zichtbaar. Bij grotere formaten liggen de tabknoppen in een horizontale rij. Elke vorm van inhoud kan binnen een tabblad worden geplaatst, omdat tabbladinhoud wordt beheerd met behulp van de standaard WordPress-berichteditor.

BEKIJK EEN LIVE DEMO VAN DEZE MODULE

Hoe een tabbladenmodule aan uw pagina toe te voegen

Voordat u een tabbladenmodule aan uw pagina kunt toevoegen, moet u eerst in 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 gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

tabbladen module

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.

tabbladen module

Zoek de tabbladenmodule 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 het woord ‘tabbladen’ kunt typen en vervolgens op enter kunt klikken om de tabbladenmodule automatisch te zoeken 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: tabbladen toevoegen om productfuncties te ordenen

Tabbladen zijn geweldig voor het consolideren en organiseren van uw inhoud. Een veelgebruikt gebruik voor tabbladen is om functies van een product te tonen. Als uw product drie of meer functies heeft, zorgt het organiseren ervan in tabbladen voor een betere gebruikerservaring, waardoor de gebruiker de inhoud gemakkelijk kan verwerken.

In dit voorbeeld ga ik je laten zien hoe je een tabmodule aan een productpagina kunt toevoegen om de productfuncties te presenteren.

tabbladen module

Voeg eerst een nieuwe sectie en een nieuwe rij met een kolomindeling 1/2 1/2 toe. Voeg in de linkerkolom uw productafbeelding van 510 x 510 toe met behulp van de afbeeldingsmodule.
tabbladen module

Voeg in de rechterkolom de module Tabs toe. Klik op het tabblad Inhoud van de instellingen van de module Tabbladen op “een nieuw item toevoegen” om de instellingen voor uw eerste specifieke tabblad weer te geven. Werk de tabbladinstellingen op het tabblad Inhoud als volgt bij:

Titel: [voeg de titel of het label van uw tabblad toe]
Inhoud: [voeg de hoofdtekst van uw tabblad toe]

tabbladen module

Sla de tabbladinstellingen op en herhaal dit proces om nog twee tabbladen te maken.

tabbladen module

Nadat uw tabbladen zijn gemaakt, gaat u naar het tabblad Ontwerpen van uw Tabs-instellingen en wijzigt u de kleur van de tabtekst in # 0c71c3 (blauw).

tabbladen module

Nu hebt u een effectieve Tabs-module die u kunt gebruiken om informatie over uw producten weer te geven.

tabbladen module

Tabs Inhoudsopties

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

tabbladen module

Voeg een nieuw item toe

Hier voegt u nieuwe tabbladen toe aan uw module Tabbladen. Als u op “nieuw item toevoegen” klikt, wordt een volledig nieuwe lijst met ontwerpinstellingen (inclusief Inhoud, Ontwerp, Geavanceerd) voor uw nieuwe tabblad geopend. Zie hieronder voor individuele tabbladinstellingen.

Nadat u uw eerste tabblad hebt toegevoegd, ziet u een grijze balk met de titel van uw tabblad als een label. De grijze balk heeft ook drie knoppen waarmee u de instellingen van het tabblad kunt bewerken, het tabblad kunt dupliceren of het tabblad kunt verwijderen.

Als u de instellingen voor uw eerste tabblad hebt aangepast en de stijl in de rest van uw tabbladen wilt behouden, klikt u op het dubbele pictogram / knop. U ziet een nieuwe grijze balk verschijnen onder het eerste tabblad. Klik om de inhoud van het nieuwe tabblad te bewerken en herhaal dit proces voor de rest van uw tabbladen.

Actieve tabblad achtergrondkleur

Met deze optie kunt u een achtergrondkleur toevoegen aan uw actieve tabbladen. Een tabblad wordt als actief beschouwd wanneer erop is geklikt of geselecteerd. Standaard is de actieve achtergrondkleur van uw tabblad wit en komt deze overeen met de standaard witte achtergrondkleur van de inhoud van uw tabblad.

Inactieve Tab Achtergrondkleur

Met deze optie kunt u een achtergrondkleur toevoegen aan uw inactieve tabbladen. Een tabblad wordt als inactief beschouwd als er niet op is geklikt of geselecteerd. De achtergrondkleur van uw inactieve tabblad is standaard grijs in tegenstelling tot de standaard witte achtergrondkleur van het actieve tabblad. Dit achtergrondkleurcontrast voor actieve en inactieve tabbladen zorgt voor eenvoudiger navigatie tussen tabbladen.

Achtergrond kleur

Met deze optie kunt u de achtergrondkleur van de inhoud van de tabmodule wijzigen.

Achtergrond afbeelding

Met deze optie kunt u een achtergrondafbeelding van de inhoud van de tabmodule toevoegen.

Beheerderslabel

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

Ontwerpopties voor tabbladen

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

tabbladen module

Ontwerpopties voor tabtekst

Deze opties bepalen de stijl van uw tabtekst (of titel) voor alle tabbladen in uw module. Opties zijn onder andere tablettertype, tablettergrootte, tabtekstkleur, tabletterafstand en hoogte van de tabregel.

Opties voor hoofdtekstontwerp

Deze opties bepalen de stijl van de hoofdtekst van uw tabmodules (de tekst die is ingevoerd in de inhoud van uw afzonderlijke tabbladen). Opties omvatten hoofdlettertype, hoofdlettergrootte, hoofdtekstkleur, hoofdletterafstand en hoofdlijnhoogte.

Gebruik de rand

Selecteer “JA” voor deze optie als u een rand aan uw tabbladenmodule wilt toevoegen. Zodra “JA” is geselecteerd, ziet u extra stijlopties voor uw rand, waaronder de randkleur, de randbreedte en de randstijl.

Tabbladen Geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

tabbladen module

CSS ID en klassen

Dit kan worden gebruikt om een ​​unieke CSS ID of Klasse toe te voegen aan uw tabbladenmodule. Deze kunnen vervolgens worden gebruikt in uw stylesheet of in het vak CSS Aangepaste thema-opties om aangepaste stijlen toe te passen op de module. CSS-ID’s kunnen ook worden getarget met ankerlinks om naar bepaalde delen van uw pagina te linken.

Aangepaste CSS

Hier kunt u aangepaste CSS toevoegen aan uw tabbladenmodule.

Zichtbaarheid

Hier kunt u ervoor kiezen om uw tabbladenmodule op bepaalde apparaten te verbergen (of uit te schakelen). U kunt ervoor kiezen om de module uit te schakelen op telefoon, tablet en / of desktop.

Inhoudsopties individuele tabbladen

tabbladen module

Titel

Deze optie dient als de titel van uw tabblad. Dit is de tekst op het tabblad waarop gebruikers klikken om door de live tag-module te schakelen.

Inhoud

Hier voert u de hoofdtekst van uw tabblad in met behulp van de ingebouwde wysiwyg-editor.

Achtergrond kleur

Hier kunt u een achtergrondkleur voor uw tabblad toevoegen.

Achtergrond afbeelding

Hier kunt u een achtergrondafbeelding voor uw tabblad toevoegen.

Individuele ontwerpopties voor tabbladen

tabbladen module

Tabtekst

Met deze optie kunt u de tabtekst ontwerpen die de titel van uw tabblad is. Opties zijn onder andere lettertype, lettergrootte, tekstkleur, letterafstand en regelhoogte.

Lichaamstaal

Met deze optie kunt u de hoofdtekst van uw tabblad ontwerpen. Opties zijn onder andere lettertype, lettergrootte, tekstkleur, letterafstand en regelhoogte.

Individuele tabbladen Geavanceerde opties

tabbladen module

Aangepaste CSS

Hier kunt u aangepaste CSS toevoegen aan het specifieke tabblad dat u aan het bewerken bent. Deze CSS wordt alleen op dit tabblad toegepast.