Zo maak je een WordPress prijstabel met Toggle

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 toevoegen

Het blok Inhoud met tabbladen wordt onmiddellijk toegevoegd aan de editor.

Tabblok 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.

Rijen en kolommen definiëren voor je tabel

Je ziet dat de tabelopmaak klaar is.

De tabelopmaak is klaar

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.

Prijsplannen toevoegen

# 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.

Productkenmerken weergeven

# CTA-knoppen toevoegen

Tot slot kun je CTA-knoppen toevoegen aan de kolommen met behulp van de Knopblok.

CTA-knoppen toevoegen

De CTA-knoppen zijn klaar op de prijstabel.

CTA-knoppen 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 een nieuw tabblad met het blok Inhoud met tabbladen

Maak op dit tabblad een nieuwe tabel op dezelfde manier als hierboven beschreven. We hebben de tabbladtitels centraal uitgelijnd voor een betere visualisatie.

Een nieuwe tabel maken in een nieuw tabblad

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.



Het Tableberg-team

Early Bird-aanbieding is nu live!
Dit is de standaardtekst voor de meldingsbalk