Als je een scenario wilt bedenken waarbij je gebruikers kunnen schakelen tussen verschillende toestanden of opties, is een toggle-knop de perfecte oplossing. Deze knoppen geven gebruikers snel toegang tot opties zonder al te veel paginaruimte in beslag te nemen. Ze zijn bijvoorbeeld perfect om te schakelen tussen maandelijkse en jaarlijkse prijzen, gedetailleerde versus overzichtsweergaven of weergavevoorkeuren zoals de lichte en donkere modi.
Hoewel WordPress van zichzelf geen toggle-knoppen ondersteunt, maakt het Tabbed Content-blok van Ultimate Blocks het eenvoudig om hun functionaliteit na te bootsen. De plugin is veelzijdig en biedt, in tegenstelling tot veel andere opties, een brede set blokken waarmee je eenvoudige tabbladen met slechts een paar aanpassingen kunt veranderen in schakelbare toestanden.
Deze handleiding laat je zien hoe je deze plugin kunt gebruiken om een gestroomlijnde, gebruiksvriendelijke wisselknop te maken. Laten we aan de slag gaan.
Stap 1: Installeer Ultimate Blocks Plugin
Log eerst in op je WordPress dashboard en ga dan naar Plugins > Nieuwe toevoegen. Typ in de zoekbalk "Ultieme blokken," en klik zodra het verschijnt op Installeer. Na installatie, activeren de plugin.
Stap 2: Het blok Inhoud met tabbladen toevoegen
Als Ultimate Blocks eenmaal actief is, beslis dan waar u de toggle-knop wilt toevoegen. U kunt een nieuwe pagina of post openen of doorgaan met een bestaande.
Typ in de WordPress editor /inhoud met tabbladen of klik op de + pictogram om de blokbibliotheek te openen. Als u de + pictogrammethode gebruikt, typt u "inhoud met tabbladen". in de zoekbalk om de Inhoudsblok met tabbladen en voeg het in je pagina of bericht in.
Zodra je het blok hebt toegevoegd aan je editor, is dit de interface die je krijgt in je editor.
Op dit punt lijkt het blok nog niet op een wisselknop. Wat we nu nodig hebben zijn een paar aanpassingen in de blokinstellingen om het dichter bij een setup te brengen die een toggle-knop nabootst waarmee gebruikers kunnen schakelen tussen zichtbare inhoudssecties.
Stap 3: Het blok Inhoud met tabbladen aanpassen en configureren
Met het blok geselecteerd, gaan we naar de instellingen rechts. Selecteer de Pillen stijl in de instellingen om elk tabblad eruit te laten zien als een knop in plaats van een tabblad.
Vervolgens moeten we de uitlijning naar het midden om het meer op een tuimelknop te laten lijken.
Om een wisseltoestand te maken, hebben we ten minste twee tabbladen nodig. Klik gewoon op de + teken naast het eerste tabblad om nog een tabblad toe te voegen. Als u meer tabbladen wilt, volgt u dezelfde procedure.
Als we dat hebben gedaan, hebben we afzonderlijke tabbladen om mee te werken. Nu moeten we deze tabbladen met behulp van de kleurinstellingen veranderen in schakelknoppen.
Maar eerst, hernoemen de tabbladen met verschillende labels om de verschillende omschakeltoestanden weer te geven, ga dan naar de stijlinstellingen op de rechterzijbalk. Gebruik vanaf daar de Kleurinstellingen om contrasterende kleuren toe te voegen voor elk tabblad om het actieve tabblad duidelijker te maken.
Nu is je toggle-knop klaar. Nu hoef je alleen nog maar je inhoud toe te voegen. Klik in elk tabblad om specifieke inhoud toevoegen. Je kunt tekst, afbeeldingen, video's of andere blokken toevoegen. Klik gewoon op de + teken en voeg het verwante blok toe voor de gewenste inhoud.
Voeg daarna gerelateerde inhoud toe aan elk tabblad. Hier hebben we een voorbeeld gemaakt voor een prijzensectie met alinea-, kop- en lijstblokken in beide tabbladen. U kunt de kleur van elk blok opgeven in de kleursectie en, als u denkt dat er meer nadruk nodig is voor die tabbladen, de inhoudelijke achtergrond van het hele blok.
Stap 4: Voorbeeld bekijken en publiceren
Gebruik de Voorbeeld optie om te testen hoe je tabbladen functioneren als een wisselknop. Controleer of elk tabblad de juiste inhoudssectie opent. Als je tevreden bent met het uiterlijk en de functionaliteit, klik je op Publiceren of bijwerken als het een bestaand bericht is. Je wisselknoopeffect is nu live en klaar om je gebruikers een gemakkelijke manier te bieden om te wisselen tussen inhoudssecties.
Conclusie
Door deze stappen te volgen, kun je met succes standaard tabbladen veranderen in een volledig functionerende wisselknop. Deze instelling zal de lay-out van je inhoud verbeteren en deze toegankelijk en gemakkelijk navigeerbaar maken. Uw bezoekers kunnen nu direct tussen opties schakelen, of ze nu verschillende prijzen bekijken, extra details bekijken of hun weergavevoorkeuren kiezen. Deze kleine toevoeging brengt duidelijkheid en flexibiliteit op je site en stelt gebruikers in staat om de inhoud op hun eigen manier te verkennen terwijl de pagina schoon en overzichtelijk blijft.
