{"id":1514,"date":"2025-03-21T10:03:44","date_gmt":"2025-03-21T10:03:44","guid":{"rendered":"https:\/\/tableberg.com\/?p=1514"},"modified":"2025-03-21T10:18:43","modified_gmt":"2025-03-21T10:18:43","slug":"hoe-maak-je-een-wordpress-prijstabel-met-toggle","status":"publish","type":"post","link":"https:\/\/tableberg.com\/nl\/how-to-create-a-wordpress-pricing-table-with-toggle\/","title":{"rendered":"Zo maak je een WordPress prijstabel met Toggle"},"content":{"rendered":"<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Stap 1: Tableberg installeren en activeren<\/h3>\n\n\n\n<p>Installeer en activeer eerst de <strong><a href=\"https:\/\/tableberg.com\/nl\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tafelberg<\/a><\/strong> plugin op je WordPress site. Als je de plugin nog niet hebt ge\u00efnstalleerd, haal hem dan op <a href=\"https:\/\/tableberg.com\/nl\/prijzen\/\" target=\"_blank\" rel=\"noreferrer noopener\">hier<\/a>.<\/p>\n\n\n\n<p>Eenmaal ge\u00efnstalleerd en geactiveerd, kun je beginnen met het maken van je prijstabel.<\/p>\n\n\n\n<p class=\"has-primary-alt-background-color has-background\">Opmerking: Hoewel Tableberg een <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">gratis versie<\/a>De toggle-functie is alleen beschikbaar in de pro-versie.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Stap 2: Toggle toevoegen voor Tableberg-blok<\/h3>\n\n\n\n<p>Tableberg Pro wordt geleverd met een krachtige <strong>Schakelaar voor Tableberg<\/strong> blok waarmee je tabellen moeiteloos in tabbladen kunt organiseren.<\/p>\n\n\n\n<p>Dit blok toevoegen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open de WordPress editor en klik op de <strong>+ knop<\/strong> om een nieuw blok toe te voegen.<\/li>\n\n\n\n<li>Zoeken naar <strong>Schakelaar voor Tableberg<\/strong> en selecteer het.<\/li>\n\n\n\n<li>Het toggle-blok wordt toegevoegd aan je editor.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-1024x583.png\" alt=\"\" class=\"wp-image-8117\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-1024x583.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-300x171.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-768x437.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-1536x875.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-2048x1167.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Inserting-Toggle-for-Tableberg-Block-18x10.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Stap 3: Maak een prijstabel in het eerste tabblad<\/h3>\n\n\n\n<p>Binnen de <strong>Schakelaar voor Tableberg<\/strong> blok kun je een tabel vanaf nul maken of een kant-en-klare tabel kiezen. In deze tutorial kiezen we een kant-en-klare. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"1013\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Adding-a-Table-inside-the-Toggle-for-Tableberg-Block.gif\" alt=\"\" class=\"wp-image-8130\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Binnen de <strong>Schakelaar voor Tableberg<\/strong> blok, kunt u <\/li>\n\n\n\n<li>Klik op de <strong>+ knop<\/strong> in het tabblad en zoek naar de <strong>Tafelberg<\/strong> blok.<\/li>\n\n\n\n<li>Definieer het aantal rijen en kolommen voor je prijstabel (bijv. 3\u00d73 voor drie plannen).<\/li>\n\n\n\n<li>De tabelopmaak wordt onmiddellijk gegenereerd.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Stap 4: inhoud aan de tabel toevoegen\/bewerken<\/h3>\n\n\n\n<p>Nu is het tijd om inhoud aan je prijstabel toe te voegen of te bewerken.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Kolomtitels toevoegen<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klik op de eerste rij en voer de namen van de prijsplannen in (bijv. Basic, Standard, Premium).<\/li>\n\n\n\n<li>Lijn ze centraal uit en vergroot het lettertype voor een betere zichtbaarheid.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Prijzen toevoegen<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Voer in de tweede rij de prijzen voor elk plan in.<\/li>\n\n\n\n<li>Gebruik de <strong>Markeer optie<\/strong> om de prijzen te differenti\u00ebren.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># Lijst Producteigenschappen<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elke kolom moet een lijst van kenmerken voor het respectieve plan bevatten.<\/li>\n\n\n\n<li>Met Tableberg kun je een <strong>Lijst blok<\/strong> direct in de tabel.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong># CTA-knoppen toevoegen<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gebruik de <strong>Knopblok<\/strong> in Tableberg om call-to-action-knoppen te maken (bijvoorbeeld \"Koop nu\" of \"Aan de slag\").<\/li>\n\n\n\n<li>Pas de tekst, kleur en stijl van de knop aan.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Stap 5: Een andere prijstabel aan een nieuw tabblad toevoegen<\/h3>\n\n\n\n<p>Klik op de <strong>Tab 2<\/strong> 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Stap 6: De schakelknop voor het Tableberg-blok aanpassen<\/h3>\n\n\n\n<p>Om je prijstabel visueel aantrekkelijker te maken en af te stemmen op je merk, kun je de <strong>Schakelaar voor Tableberg<\/strong> blok:<\/p>\n\n\n\n<p><strong>De Toggles een andere naam geven<\/strong>: Klik op elk tabblad en verander het label zodat het overeenkomt met uw prijsplannen, zoals Maandelijks, Jaarlijks of Levenslang.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-1024x571.png\" alt=\"\" class=\"wp-image-8131\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-1024x571.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-300x167.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-768x428.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-1536x856.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-2048x1141.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-the-Tabs-Name-18x10.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Tabbladuitlijning wijzigen<\/strong>: Kies in het paneel met blokinstellingen om de tabbladen links, in het midden of rechts uit te lijnen op basis van uw ontwerpvoorkeur.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-1024x625.png\" alt=\"\" class=\"wp-image-8132\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-1024x625.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-300x183.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-768x469.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-1536x938.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-2048x1250.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Changing-Tab-Alignment-18x12.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>De tabbladen stylen<\/strong>: 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-1024x656.png\" alt=\"\" class=\"wp-image-8133\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-1024x656.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-300x192.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-768x492.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-1536x984.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-2048x1312.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/Styles-Tab-18x12.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Deze eenvoudige aanpassingen kunnen de gebruikerservaring enorm verbeteren en ervoor zorgen dat je prijstabel naadloos aansluit bij het algemene uiterlijk van je website.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusie<\/h3>\n\n\n\n<p>Het maken van prijstabellen met een wisselfunctie is essentieel voor een naadloze gebruikerservaring. Met <strong>Tableberg Pro's Toggle voor Tableberg<\/strong> blok, je kunt nu interactieve prijstabellen rechtstreeks in WordPress maken zonder dat je extra plugins nodig hebt.<\/p>\n\n\n\n<p>Probeer het eens en laat ons weten wat je ervan vindt in de reacties hieronder!<\/p>","protected":false},"excerpt":{"rendered":"<p>Creating a pricing table is a must if you want to sell your products and services through your website. But to display multiple pricing plans that customers can compare easily without leaving the page, you must add the toggle feature to the table. The toggle feature allows users to navigate or switch between different sets [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[8,86],"class_list":["post-1514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-create-a-table","tag-pricing-tables"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/How-to-Create-a-Pricing-Table-With-Toggle-Switch.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/nl\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":8134,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/1514\/revisions\/8134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media\/8135"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}