---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel'
title: 'Een prijstabel toevoegen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:25+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een prijstabel: drie abonnementen naast elkaar, elk een paneel met een prijs, een functielijst en een knop over de volle breedte, en het middelste abonnement uitgelicht. Gebruik hem op een prijspagina of in een productpagina. Voor de volledige productpagina eromheen volg je Een productpagina bouwen.
  De video bouwt drie abonnementen voor een rapportagetool.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Een prijstabel toevoegen'
      description: |-
        Hier bouw je een prijstabel: drie abonnementen naast elkaar, elk een paneel met een prijs, een functielijst en een knop over de volle breedte, en het middelste abonnement uitgelicht. Gebruik hem op een prijspagina of in een productpagina. Voor de volledige productpagina eromheen volg je Een productpagina bouwen.
        De video bouwt drie abonnementen voor een rapportagetool.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:01:25+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel'
      description: |-
        Hier bouw je een prijstabel: drie abonnementen naast elkaar, elk een paneel met een prijs, een functielijst en een knop over de volle breedte, en het middelste abonnement uitgelicht. Gebruik hem op een prijspagina of in een productpagina. Voor de volledige productpagina eromheen volg je Een productpagina bouwen.
        De video bouwt drie abonnementen voor een rapportagetool.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/nl/hc/documentation/learn-dxpr-builder/tutorials/overview) # Een prijstabel toevoegen.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een productpagina bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/productpagina)
- [Een kaart toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart)
- [Een paneel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/paneel)

Hier bouw je een prijstabel: drie abonnementen naast elkaar, elk een paneel met een prijs, een functielijst en een knop over de volle breedte, en het middelste abonnement uitgelicht. Gebruik hem op een prijspagina of in een productpagina. Voor de volledige productpagina eromheen volg je [Een productpagina bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/productpagina).

De video bouwt drie abonnementen voor een rapportagetool.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De pagina is open in de builder. Ga voor een nieuwe naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`) en klik op **Opslaan**.
- Nieuwe elementen belanden bovenaan hun container, dus in elk paneel gaat de knop erin vóór de prijs.

## Stap 1: de sectie en de kolommen toevoegen

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**.
2. Beweeg over de sectie en open **More** > **Settings**. Kies onder **HTML-klassen** de optie **Align text center**. Open het paneel **Stijl**, kies een lichtgrijze **Achtergrond** en klik op **Opslaan**.
3. Klik op **+** op de sectie en kies **Rij**; deze komt met twee gelijke kolommen.
4. Klik op het rasterpictogram (**Kolomindeling**) van de rij, kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**.

## Stap 2: het eerste abonnement bouwen

1. Klik op **+** in de eerste kolom en kies **Paneel** op het tabblad **Inhoud**.
2. Beweeg over het paneel en open **More** > **Settings**. Zet de **Titel** op “Starter”, houd het **Type** op **DXPR** en klik op **Opslaan**.
3. Klik op **+** op het paneel en kies **Knop**. Zet **Titel** op “Kies abonnement”, **Link** op `/signup` en **Type** op **Primary**. Zet **Blokknop** aan zodat hij de kolom vult, en klik daarna op **Opslaan**.
4. Klik opnieuw op **+** op het paneel en kies **Tekst**; deze belandt boven de knop. Typ de prijs als **Kop 2**, voeg de functies één per regel toe en klik op **Opslaan**.

## Stap 3: de andere abonnementen bouwen

1. Herhaal stap 2 in de tweede kolom voor “Professional”. Kies in het paneel **Stijl** van het paneel de paarse **Achtergrond**, en zet het **Type** van de knop op **Success**, zodat het abonnement opvalt.
2. Herhaal stap 2 in de derde kolom voor “Enterprise”, met “Prijs op maat” als prijs.

**Tip**

De middelste kolom trekt het oog. Zet daar het abonnement dat je het liefst verkoopt.

## Stap 4: de kop toevoegen

1. Klik op **+** op de sectie en kies **Tekst**; deze belandt boven de rij.
2. Typ “Kies je abonnement” als **Kop 2**, voeg één regel toe zoals “Eenvoudige maandelijkse prijzen. Altijd opzegbaar.” en klik op **Opslaan**.

## Stap 5: opslaan en vooraf bekijken

1. Klik op **Opslaan** op de werkbalk van de builder.
2. Open het weergavemenu (het **oogpictogram**) en kies **Voorvertoning**.

## Verder gaan

Niet getoond in de video:

- **Vier abonnementen**: kies in plaats daarvan de preset **1/4 + 1/4 + 1/4 + 1/4** en bouw een vierde kolom.
- **Badge Populairst**: voeg een **Tekst**-element toe bovenaan het uitgelichte paneel met “Populairst” in vet.
- **Jaarlijks en maandelijks**: voeg een **Tekst**-regel toe boven de rij zoals “Maandelijks \| Jaarlijks (20% korting)”. De regel is statisch; een live wissel heeft het element **HTML** met een eigen script nodig.
- **Vinkjes bij functies**: plak een vinkje vóór elke functieregel, of voeg een element **Pictogram** toe boven de lijst.

## Wat je ziet

“Kies je abonnement” staat gecentreerd boven drie abonnementen op een grijze strook. Elk paneel toont zijn naam in de titelbalk, de prijs, drie functies en een knop **Kies abonnement** over de volle breedte. Het middelste abonnement valt op in paars met een groene knop.

## Als je de abonnementen niet ziet zoals getoond

- **Een paneel opent zonder instellingendialoog.** Panelen openen leeg, zonder dialoog. Beweeg over het paneel en open **More** > **Settings** om de **Titel** in te stellen.
- **Een paneeltype zoals Primary toont geen kleur.** Je thema stijlt dat paneeltype niet. Houd **Type** op **DXPR** en kies een **Achtergrond** in het paneel **Stijl** van het paneel, zoals in stap 3.
- **De knoppen zijn slechts zo breed als hun tekst.** **Blokknop** staat uit. Open de instellingen van elke knop en zet hem aan.
- **Je wijzigingen zijn weg na een herladen.** Je verliet de pagina voordat je op **Opslaan** op de werkbalk van de builder klikte. Als Opslaan een fout toont, zie [Wijzigingen worden niet opgeslagen](/nl/hc/documentatie/dxpr-builder-leren/probleemoplossing/opslaan-mislukt).

## Wat nu?

- [Productpagina](/nl/hc/documentatie/dxpr-builder-leren/tutorials/productpagina) voor een volledige pagina met functies en prijzen
- [Kaartelement](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart) voor een andere kaartstijl
- [Paneelelement](/nl/hc/documentatie/dxpr-builder-leren/elementen/paneel) voor elke paneelinstelling