Wil je je gebruikers een snelle en duidelijke manier geven om te schakelen tussen verschillende inhouds- of prijsopties op je WordPress site? Een toggle knop is de perfecte oplossing!
Met een wisselknop kunnen bezoekers direct schakelen tussen twee of meer opties, zoals maandelijkse of jaarlijkse prijzen, lichte of donkere modus of zelfs volledig verschillende inhoudssecties, zonder dat je pagina vol staat.
In deze post ontdek je twee eenvoudige manieren om toggle-knoppen aan je WordPress site toe te voegen:
- Methode 1: Een wisselknop toevoegen voor elk type inhoud (tekst, afbeeldingen, formulieren, enz.)
- Methode 2: Een wisselknop toevoegen voor prijstabellen of elk ander type gegevens in tabelvorm
Laten we erin duiken!
Methode 1: Een knop om te schakelen toevoegen voor elk type inhoud
Als je gebruikers wilt laten wisselen tussen verschillende inhoudsblokken, zoals FAQsproductdetails of verschillende functiesets, dan is deze methode iets voor jou.
We gebruiken de Ultieme Blokken plugin, die een veelzijdig Content Toggle (Tabbed Content) blok biedt dat werkt voor alle soorten inhoud.
Stap 1: Installeer Ultimate Blocks Plugin
- Ga naar je WordPress dashboard.
- Navigeer naar Plugins > Nieuwe toevoegen.
- Zoek naar "Ultimate Blocks" en installeer/activeer het.
Stap 2: Het blok Inhoud met tabbladen toevoegen
- Open een bericht of pagina in de WordPress editor.
- Type
/inhoud met tabbladenof gebruik het + pictogram om het blok Inhoud met tabbladen toe te voegen.
Het blok 'Inhoud in tabbladen' ziet er als volgt uit -
Stap 3: het blok aanpassen voor schakelfunctionaliteit
Selecteer het blok en kies de Pillen stijl in de instellingen (hierdoor lijken tabbladen op knoppen).
Centreer de uitlijning voor een klassieke toggle look.
Klik op de + teken naast het eerste tabblad om nog een tabblad toe te voegen. Voeg ten minste twee tabbladen toe (bijvoorbeeld "Maandelijks" en "Jaarlijks" of "Details" en "Overzicht"). Hernoem de tabbladen zodat ze overeenkomen met je schakelopties.
Gebruik de Kleurinstellingen om contrasterende kleuren in te stellen, zodat het duidelijk is welk tabblad actief is.
Stap 4: Uw inhoud toevoegen
Klik in elk tabblad om de gewenste inhoud toe te voegen (tekst, afbeeldingen, lijsten, formulieren of zelfs andere blokken).
Pas verder aan indien nodig: verander tabbladachtergronden, inhoudskleuren en meer.
Stap 5: Voorbeeld bekijken en publiceren
- Gebruik de optie Preview om de toggle te testen.
- Als je tevreden bent, kun je de pagina publiceren of bijwerken.
Dat is het! Je hebt nu een flexibele wisselknop voor elk type inhoud op je WordPress site.
Methode 2: Een knop om te schakelen toevoegen voor prijstabellen (en meer)
Wil je gebruikers laten wisselen tussen maandelijkse en jaarlijkse prijstabellen of verschillende gegevenssets naast elkaar laten vergelijken? De Schakelaar voor Tableberg blok in de Tableberg plugin is daar speciaal voor ontworpen!
Met Tableberg ProMet het blok Toggle kun je een willekeurig aantal tabellen organiseren in overzichtelijke, klikbare tabbladen - perfect voor prijsplannen, productvergelijkingen, meertalige tabellen of elk ander scenario waarin meerdere tabellen zinvol zijn.
Stap 1: Voeg het blok 'Toggle voor Tableberg' in
- Open je bericht of pagina in de WordPress editor.
- Klik op het + (plus)-pictogram en zoek naar "Toggle for Tableberg".
- Voeg het blok toe aan je pagina.
Stap 2: Uw tabbladen instellen en aanpassen
- Standaard zie je drie tabbladen met het label "Tabblad 1", "Tabblad 2" en "Tabblad 3".
- Voeg naar behoefte tabbladen toe of verwijder ze met de pictogrammen + of -.
- Geef elk tabblad een andere naam (bijvoorbeeld "Maandelijks", "Jaarlijks" of "Basisplan", "Pro Plan").
- Gebruik het rechterpaneel met opties om tabbladtitels, uitlijning, kleuren en randen aan te passen voor een merkuitstraling.
Stap 3: Uw tabellen toevoegen
- Klik op elk tabblad om er een unieke tabel aan toe te voegen.
- Bouw een nieuwe tabel vanaf nul of voeg een vooraf gemaakt Tableberg tabelpatroon in.
- Elk tabblad kan een compleet andere tabel bevatten, geweldig voor functievergelijkingen, prijsniveaus, gegevenssets en meer.
Populaire gebruikssituaties
- Prijstabellen: Laat gebruikers wisselen tussen maandelijkse en jaarlijkse prijzen, of tussen verschillende plannen.
- Gegevensvergelijkingen: Toon regionale gegevens, verschillende productspecificaties of prestatiecijfers in aparte tabbladen.
- Educatieve inhoud: Organiseer lessen of cursusmateriaal om het navigeren te vergemakkelijken.
- Meertalige tabellen: Geef dezelfde gegevens in verschillende talen weer voor internationale bezoekers.
Stap 4: Voorbeeld bekijken en publiceren
- Bekijk een voorbeeld van uw wisseltabbladen om te controleren of alles er uitziet en werkt zoals verwacht.
- Publiceer of update je bericht/pagina wanneer je klaar bent.
Hier is een voorbeeld van hoe toggle eruit ziet voor een prijstabel.
Conclusie
Het toevoegen van een wisselknop aan je WordPress site is een geweldige manier om de navigatie te verbeteren, ruimte te besparen en bezoekers direct toegang te geven tot de inhoud waar ze om geven - of het nu gaat om het wisselen tussen prijsplannen, het bekijken van details of het vergelijken van gegevens.
- Gebruik voor elk type inhoud Ultieme Blokken om in enkele seconden flexibele toggles te maken.
- Probeer voor prijstabellen en meer geavanceerde tabelindelingen Tableberg Pro's Schakelblok voor een naadloze ervaring met tabbladen.
Probeer deze methoden uit op uw site en maak uw inhoud interactiever en gebruiksvriendelijker. Heb je vragen of hulp nodig? Laat het ons weten in de reacties!
