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 tabel met toggle kunt maken. Laten we beginnen.
Maak prachtige tafels
Met blok-editor
Zo maak je een WordPress prijstabel met Toggle
Voordat je in de tutorial duikt, moet je het volgende hebben TafelBerg en Ultieme Blokken plugins geïnstalleerd op je site. Met TableBerg kun je een prijstabel maken, en met Ultimate Blocks kun je de toggle-functie aan de tabel toevoegen.
Zodra je de plugins op je site hebt geïnstalleerd, kun je beginnen met de zelfstudie.
Stap 01: Het blok Inhoud met tabbladen toevoegen
Zodra de Ultimate Blocks plugin is geïnstalleerd en geactiveerd, krijg je de Inhoud met tabbladen in de blokkenbibliotheek. Zoek het blok en voeg het toe aan de editor.
Het blok Inhoud met tabbladen wordt onmiddellijk toegevoegd aan de editor.
Stap 02: het TableBerg-blok toevoegen binnen het blok Inhoud met tabbladen
Aan het blok Inhoud met tabbladen kun je andere blokken toevoegen. Klik op de plus (+) knop. Zoek het TableBerg-blok en voeg het toe.
Stap 03: Maak een prijstabel in het eerste tabblad
Bepaal het aantal rijen en kolommen voor je tabel. We selecteren 3*3 omdat we een tabel met drie kolommen willen maken.
Je ziet dat de tabelopmaak klaar is.
Stap 04: Inhoud aan de tabel toevoegen
Met het TableBerg-blok kun je verschillende soorten inhoud aan de cellen toevoegen. Je kunt teksten, lijsten, afbeeldingen, CTA-knoppen en meer toevoegen.
# Kolomtitels toevoegen
Eerst moeten we titels toevoegen aan de kolommen van de tabel. We maken hier een prijstabel voor een denkbeeldige plugin. Onze inhoud zal dus overeenkomstig zijn.
Je kunt zien dat we drie titels hebben toegevoegd, ze centraal hebben uitgelijnd en hun grootte hebben vergroot.
# Prijzen toevoegen
Voeg vervolgens prijsplannen toe aan de kolommen. We hebben ze gekleurd met de optie Markeren op de Gutenberg-werkbalk.
# Lijst Producteigenschappen
Nu is het tijd om de functies van elk plan op te sommen. Met TableBerg kun je de Lijst blok aan de tabel. Zoek en voeg het blok List toe aan de tabel.
Je kunt zien dat we alle functies van elk plan in alle kolommen hebben opgesomd.
# CTA-knoppen toevoegen
Tot slot kun je CTA-knoppen toevoegen aan de kolommen met behulp van de Knopblok.
De CTA-knoppen zijn klaar op de prijstabel.
Zo, je tafel is klaar. Je kunt de tafel verder aanpassen en stylen zoals je zelf wilt. Ik hoop dat je het alleen kunt.
Stap 05: Een nieuwe tabel op een ander tabblad maken
Maak een nieuw tabblad door op de knop plus (+) pictogram. Vergeet niet de naam van de tabbladen aan te passen aan je voorkeuren.
Maak op dit tabblad een nieuwe tabel op dezelfde manier als hierboven beschreven. We hebben de tabbladtitels centraal uitgelijnd voor een betere visualisatie.
Zo, je prijstabel met de toggle-functie is klaar. Bekijk een voorbeeld van de tabel in een nieuw tabblad om te zien of alles goed werkt.
Conclusie
Het maken van prijstabellen met de toggle-functie is nu een slimmigheid die door bijna alle websites van standaardklasse wordt gevolgd. De meeste websites maken ze met behulp van page builders en soortgelijke oplossingen, die de pagina vaak zwaar maken.
Maar omdat TableBerg en Ultimate Blocks twee blok-gebaseerde plugins zijn, zullen ze nooit zware prijspagina's maken. Je kunt ze zelfs testen op je staging sites of lokale host. Je zult genieten van lichtgewicht en snelle snelheid.
Laat ons je feedback weten in het commentaarvak hieronder. Aarzel ook niet om ons vragen te stellen.
