{"id":3487,"date":"2025-02-17T03:05:58","date_gmt":"2025-02-17T03:05:58","guid":{"rendered":"https:\/\/tableberg.com\/?p=3487"},"modified":"2025-04-23T09:37:44","modified_gmt":"2025-04-23T09:37:44","slug":"hoe-voeg-ik-een-prijstabel-met-lint-toe-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/nl\/how-to-add-a-pricing-table-with-ribbon-in-wordpress\/","title":{"rendered":"Een prijstabel met lint toevoegen in WordPress"},"content":{"rendered":"<p>De presentatie van je prijstabellen is belangrijk om klanten te be\u00efnvloeden. Een krachtige manier om prijstabellen te verbeteren is door een lint te gebruiken. Dit is visueel een opvallende banner van labels die diagonaal over een tabel worden weergegeven om specifieke aanbiedingen, kortingen en functies te benadrukken.<\/p>\n\n\n\n<p>Of je nu een limited-time korting, een speciale functie of hot-selling pakketten promoot, een goedgeplaatst lint kan potenti\u00eble klanten direct be\u00efnvloeden om beslissingen te nemen. <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Tafelberg<\/a> is een intu\u00eftieve en krachtige plugin om dit te doen.<\/p>\n\n\n\n<p>In dit artikel laten we je zien hoe je met Tableberg een prijstabel met lint toevoegt in WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Een prijstabel met lint toevoegen in WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/SSv8XHstwLQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Zodra je de plugin op je site hebt ge\u00efnstalleerd, kun je de volgende tutorial volgen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stap 1: Voeg het Tableberg-blok toe aan de editor<\/h2>\n\n\n\n<p>De plugin voegt een blok toe met de naam <strong>Tafelberg<\/strong> aan de Gutenberg blokbibliotheek. Voeg het blok toe aan de editor door simpelweg op <strong>het pluspictogram (+)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\" alt=\"Voeg het TableBerg-blok toe aan uw Gutenberg-editor\" class=\"wp-image-481\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Stel het aantal kolommen en rijen in dat je nodig hebt voor je tabel. Voor deze tutorial stellen we <strong>3*1<\/strong> voor kolommen en rijen.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\" alt=\"Stel het aantal rijen en kolommen in\" class=\"wp-image-3014\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Je ziet dat de basislay-out voor de prijstabel is gemaakt met kolommen en een rij.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes.webp\" alt=\"Kolommen en rijen worden toegevoegd aan de editor\" class=\"wp-image-3113\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-selected-for-designing-Icon-Boxes-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Stap 2: Inhoud aan de tabel toevoegen<\/h2>\n\n\n\n<p>Een prijstabel bevat meestal productnamen, afbeeldingen, prijzen, kortingsprijzen en CTA-knoppen. Laten we eens kijken hoe je deze aan de tabel toevoegt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">De productnaam toevoegen<\/h3>\n\n\n\n<p>Met Tableberg kun je verschillende soorten blokken toevoegen aan de cellen, net als met de Gutenberg-blok-editor. Voeg de <strong>Paragraaf blok<\/strong> om de naam van het product te schrijven. (Standaard wordt het alineablok toegevoegd aan de tabelcellen).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table.webp\" alt=\"Voeg het alineablok toe aan de prijstabel\" class=\"wp-image-3488\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-paragraph-block-to-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Schrijf de naam van je product in de cel. Lijn de tekst centraal uit, maak hem vet, verander de kleur en pas de grootte aan met de opties in de onderstaande afbeelding.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it.webp\" alt=\"Schrijf de naam van het product en pas het aan\" class=\"wp-image-3490\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-products-name-and-customize-it-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">De productafbeelding toevoegen<\/h3>\n\n\n\n<p>Voeg het blok Afbeelding toe aan de prijstabel.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table.webp\" alt=\"Voeg het blok Afbeelding toe aan de prijstabel\" class=\"wp-image-3491\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>In het blok Afbeelding kunt u de productafbeelding uploaden. Pas de grootte van de afbeelding aan naar wens en lijn hem goed uit.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-1024x523.webp\" alt=\"Upload de productafbeelding\" class=\"wp-image-3493\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image-18x9.webp 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-the-product-image.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Een vorige prijs toevoegen<\/h3>\n\n\n\n<p>Het verschil tonen tussen de vorige en huidige prijs is een geweldige manier om de korting te benadrukken. Dus laten we nu een vorige prijs toevoegen onder de productafbeelding.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price.webp\" alt=\"Schrijf de vorige prijs op\" class=\"wp-image-3494\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-a-Previous-Price-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Een doorgehaald effect toevoegen aan de vorige prijs kan de aandacht van mensen trekken. Om dit te doen, <strong>selecteer de prijs<\/strong> met je cursor. <strong>Klik op<\/strong> de <strong>Meer optie<\/strong> op de werkbalk.<\/p>\n\n\n\n<p><strong>Ga naar<\/strong> de <strong>Markeer<\/strong> en <strong>Doorstreepopties<\/strong>. Je kunt de kleur van de prijs wijzigen en een doorhaling toevoegen.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price.webp\" alt=\"Het doorgehaalde effect aan de prijs toevoegen\" class=\"wp-image-3495\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-strikethrough-effect-to-the-price-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Voeg de huidige prijs van het product toe<\/h3>\n\n\n\n<p>Voeg nu de huidige prijs van het product toe in een relatief groter lettertype zodat het de aandacht trekt.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product.webp\" alt=\"Voeg de huidige prijs van het product toe\" class=\"wp-image-3496\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Current-Price-of-the-Product-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Een CTA-knop toevoegen<\/h3>\n\n\n\n<p>Voeg aan het einde van alle inhoud de <strong>Knopblok<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table.webp\" alt=\"Voeg het knoppenblok toe aan de prijstabel\" class=\"wp-image-3497\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-button-block-to-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Wijzig de achtergrondkleur, tekstkleur, typografiegrootte en vulling van de knop. Voer deze wijzigingen naar wens uit.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table.webp\" alt=\"Pas de CTA-knop van de prijstabel aan\" class=\"wp-image-3498\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-CTA-button-of-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Stap 3: Voeg spaties toe tussen de blokken<\/h2>\n\n\n\n<p>De kolominhoud is dus klaar. Maar zoals je kunt zien, zijn alle blokken te vol. We moeten ruimte tussen de blokken toevoegen voor een frisser uiterlijk.<\/p>\n\n\n\n<p>Om dit te doen, <strong>selecteer de specifieke kolom<\/strong>. Ga vervolgens naar de <strong>Tabblad Stijlen<\/strong>. Kom naar de <strong>Afstand tussen blokken<\/strong> optie door de tab te verschuiven. Vergroot de ruimte door een waarde toe te voegen aan het vak.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks.webp\" alt=\"Spaties tussen de blokken toevoegen\" class=\"wp-image-3499\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Spaces-Between-the-Blocks-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Voeg op dezelfde manier inhoud toe aan de andere kolommen. Maar om tijd te besparen, kun je de kolom dupliceren en vervolgens de inhoud bijwerken. Hier is een handleiding voor <a href=\"https:\/\/tableberg.com\/nl\/docs\/hoe-dupliceer-ik-een-rij-kolom\/\" target=\"_blank\" rel=\"noreferrer noopener\">hoe dupliceer ik een Tableberg kolom en rij<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table.webp\" alt=\"Vul de andere kolommen van de prijstabel\" class=\"wp-image-3500\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Fill-the-other-columns-of-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Stap 4: Straal toevoegen aan de tabelkolommen<\/h2>\n\n\n\n<p>Je kunt de esthetiek verbeteren door een randradius toe te voegen aan de kolommen van de tabel. <strong>Selecteer<\/strong> de <strong>Tabelberg pictogram<\/strong> op de werkbalk. <strong>Ga naar<\/strong> de <strong>Tabblad Stijlen<\/strong>. <\/p>\n\n\n\n<p>Scroll en <strong>komen naar<\/strong> <strong>Celafstand<\/strong>. Door de betreffende optie te slepen, kun je spaties toevoegen tussen de kolommen van de tabel.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns.webp\" alt=\"Straal toevoegen aan de tabelkolommen\" class=\"wp-image-3501\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Radius-to-the-Table-Columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">Je ziet de&nbsp;<strong>Table Border<\/strong>&nbsp;optie er net onder. <strong>Stel in<\/strong> uw gewenste <strong>Straalwaarde<\/strong> fo<\/span>r zowel de binnenste als de buitenste rand. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns.webp\" alt=\"Redius toevoegen aan de kolommen in de tabel\" class=\"wp-image-3502\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-redius-to-the-table-columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Zo kun je je prijstabel opstellen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stap 5: Een lint toevoegen aan de prijstabel<\/h2>\n\n\n\n<p>Selecteer de kolom waaraan je een lint wilt toevoegen. Klik op het plus (+) pictogram en zoek de <strong>Lint blok<\/strong>. Klik vervolgens op en het blok naar de kolom.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon.webp\" alt=\"Selecteer een kolom om een lint toe te voegen\" class=\"wp-image-3503\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-column-to-add-a-ribbon-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Het lint wordt toegevoegd aan de tabel. Vervolgens kunt u vanuit de <strong>Tabblad Instellingen<\/strong>Selecteer het linttype, de linttekst, de zijde en de afstand. <\/p>\n\n\n\n<p>Pas daarna de tekst en achtergrondkleur aan vanuit de <strong>Tabblad Stijlen<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table.webp\" alt=\"Het lint op de prijstabel aanpassen\" class=\"wp-image-3504\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-ribbon-on-the-pricing-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Zo, je prijzentabel is klaar met een lint eraan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Afsluiten!<\/h2>\n\n\n\n<p>Hopelijk heb je genoten van deze tutorial. Maar er zijn een aantal punten die je moet onthouden. Zorg ervoor dat je tabel schoon en overzichtelijk is. Minimalistische prijstabelontwerpen hebben altijd een impact op potenti\u00eble klanten.<\/p>\n\n\n\n<p>Ten tweede, gebruik een duidelijke en beknopte tekst die webbezoekers direct bindt. Voeg indien mogelijk enkele voordelen\/functies van de producten toe in de tabel. Als je meerdere plannen in je prijstabellen wilt opnemen, kun je ze beter weergeven met een tuimelschakelaar.<\/p>\n\n\n\n<p>Hier is een gids over <a href=\"https:\/\/ultimateblocks.com\/how-to-create-a-pricing-table-with-toggle-switch-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hoe maak je een prijstabel met de toggle switch in WordPress?<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The presentation of your pricing tables is important in influencing customers. One powerful way to enhance pricing tables is by incorporating a ribbon. It&#8217;s visually a striking banner of labels displayed diagonally across a table to highlight specific offers, discounts, and features. Whether you are promotion a limited-time discount, special feature, or hot-selling packages, a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3508,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[86,113],"class_list":["post-3487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-pricing-tables","tag-ribbon-block"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/How-to-Add-a-Pricing-Table-with-Ribbon-in-WordPress.webp","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\/3487","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=3487"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/3487\/revisions"}],"predecessor-version":[{"id":8451,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/3487\/revisions\/8451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media\/3508"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media?parent=3487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/categories?post=3487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/tags?post=3487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}