Het maken van een prijstabel is een must als u uw producten en diensten via uw website wilt verkopen. Maar om meerdere prijsplannen weer te geven die klanten gemakkelijk kunnen vergelijken zonder de pagina te verlaten, moet je de toggle-functie toevoegen aan de tabel.
Met de toggle-functie kunnen gebruikers navigeren of schakelen tussen verschillende sets met prijsopties, waardoor een interactieve interface ontstaat. Gebruikers kunnen bijvoorbeeld wisselen tussen maandelijkse, jaarlijkse en levenslange abonnementen.
In deze blogpost laten we je stap voor stap zien hoe je een WordPress prijstabel met een toggle kunt maken met behulp van Tableberg. Laten we beginnen.
Stap 1: Tableberg installeren en activeren
Installeer en activeer eerst de Tafelberg plugin op je WordPress site. Als je de plugin nog niet hebt geïnstalleerd, haal hem dan op hier.
Eenmaal geïnstalleerd en geactiveerd, kun je beginnen met het maken van je prijstabel.
Opmerking: Hoewel Tableberg een gratis versieDe toggle-functie is alleen beschikbaar in de pro-versie.
Stap 2: Toggle toevoegen voor Tableberg-blok
Tableberg Pro wordt geleverd met een krachtige Schakelaar voor Tableberg blok waarmee je tabellen moeiteloos in tabbladen kunt organiseren.
Dit blok toevoegen:
- Open de WordPress editor en klik op de + knop om een nieuw blok toe te voegen.
- Zoeken naar Schakelaar voor Tableberg en selecteer het.
- Het toggle-blok wordt toegevoegd aan je editor.
Stap 3: Maak een prijstabel in het eerste tabblad
Binnen de Schakelaar voor Tableberg blok kun je een tabel vanaf nul maken of een kant-en-klare tabel kiezen. In deze tutorial kiezen we een kant-en-klare.
- Binnen de Schakelaar voor Tableberg blok, kunt u
- Klik op de + knop in het tabblad en zoek naar de Tafelberg blok.
- Definieer het aantal rijen en kolommen voor je prijstabel (bijv. 3×3 voor drie plannen).
- De tabelopmaak wordt onmiddellijk gegenereerd.
Stap 4: inhoud aan de tabel toevoegen/bewerken
Nu is het tijd om inhoud aan je prijstabel toe te voegen of te bewerken.
# Kolomtitels toevoegen
- Klik op de eerste rij en voer de namen van de prijsplannen in (bijv. Basic, Standard, Premium).
- Lijn ze centraal uit en vergroot het lettertype voor een betere zichtbaarheid.
# Prijzen toevoegen
- Voer in de tweede rij de prijzen voor elk plan in.
- Gebruik de Markeer optie om de prijzen te differentiëren.
# Lijst Producteigenschappen
- Elke kolom moet een lijst van kenmerken voor het respectieve plan bevatten.
- Met Tableberg kun je een Lijst blok direct in de tabel.
# CTA-knoppen toevoegen
- Gebruik de Knopblok in Tableberg om call-to-action-knoppen te maken (bijvoorbeeld "Koop nu" of "Aan de slag").
- Pas de tekst, kleur en stijl van de knop aan.
Stap 5: Een andere prijstabel aan een nieuw tabblad toevoegen
Klik op de Tab 2 in het blok Toggle for Tableberg om een nieuwe tabel toe te voegen op een ander tabblad. Herhaal vervolgens dezelfde stappen als hierboven om nog een prijstabel voor het nieuwe tabblad te maken.
Zodra je deze stappen hebt voltooid, is je prijstabel met toggle-functie klaar. Bekijk een voorbeeld van je tabel om te controleren of alles goed werkt.
Stap 6: De schakelknop voor het Tableberg-blok aanpassen
Om je prijstabel visueel aantrekkelijker te maken en af te stemmen op je merk, kun je de Schakelaar voor Tableberg blok:
De Toggles een andere naam geven: Klik op elk tabblad en verander het label zodat het overeenkomt met uw prijsplannen, zoals Maandelijks, Jaarlijks of Levenslang.
Tabbladuitlijning wijzigen: Kies in het paneel met blokinstellingen om de tabbladen links, in het midden of rechts uit te lijnen op basis van uw ontwerpvoorkeur.
De tabbladen stylen: Pas op het tabblad Styles de achtergrondkleur, tekstkleur en rand van de toggles aan zodat ze visueel consistent zijn met het ontwerp van je site.
Deze eenvoudige aanpassingen kunnen de gebruikerservaring enorm verbeteren en ervoor zorgen dat je prijstabel naadloos aansluit bij het algemene uiterlijk van je website.
Conclusie
Het maken van prijstabellen met een wisselfunctie is essentieel voor een naadloze gebruikerservaring. Met Tableberg Pro's Toggle voor Tableberg blok, je kunt nu interactieve prijstabellen rechtstreeks in WordPress maken zonder dat je extra plugins nodig hebt.
Probeer het eens en laat ons weten wat je ervan vindt in de reacties hieronder!
