---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/productpagina'
title: 'Een productpagina bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:21+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een pagina voor één product. Een foto staat naast de naam, prijs en knop Koop nu, gevolgd door drie functies, een lijst met specificaties en een verkoopoproep. Gebruik hem voor alles wat je verkoopt. Om meerdere abonnementen te vergelijken, voeg je er een prijstabel aan toe.
  De video bouwt de pagina van een hardwareproduct genaamd Insight Hub.
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 productpagina bouwen'
      description: |-
        Hier bouw je een pagina voor één product. Een foto staat naast de naam, prijs en knop Koop nu, gevolgd door drie functies, een lijst met specificaties en een verkoopoproep. Gebruik hem voor alles wat je verkoopt. Om meerdere abonnementen te vergelijken, voeg je er een prijstabel aan toe.
        De video bouwt de pagina van een hardwareproduct genaamd Insight Hub.
      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:21+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/productpagina'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/productpagina'
      description: |-
        Hier bouw je een pagina voor één product. Een foto staat naast de naam, prijs en knop Koop nu, gevolgd door drie functies, een lijst met specificaties en een verkoopoproep. Gebruik hem voor alles wat je verkoopt. Om meerdere abonnementen te vergelijken, voeg je er een prijstabel aan toe.
        De video bouwt de pagina van een hardwareproduct genaamd Insight Hub.
      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 productpagina bouwen.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een prijstabel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel)
- [Een pictogram toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/pictogram)
- [Een marketinglandingspagina bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina)

Hier bouw je een pagina voor één product. Een foto staat naast de naam, prijs en knop **Koop nu**, gevolgd door drie functies, een lijst met specificaties en een verkoopoproep. Gebruik hem voor alles wat je verkoopt. Om meerdere abonnementen te vergelijken, voeg je er een [prijstabel](/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel) aan toe.

De video bouwt de pagina van een hardwareproduct genaamd Insight Hub.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een foto van het product.
- 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 kolom. Daarom wordt de rechterkolom vanaf de knop omhoog opgebouwd.

## Stap 1: het product toevoegen

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**.
2. Klik op **+** op de sectie en kies **Rij**; deze komt met twee gelijke kolommen.
3. Klik op **+** in de linkerkolom en kies **Afbeelding**. Klik op **Afbeelding selecteren**, vink de productfoto aan en klik op **Geselecteerde invoegen**. Typ het **alt-attribuut** in het paneel **SEO** en klik op **Opslaan**.
4. Klik op **+** in de rechterkolom en kies **Knop**. Zet **Titel** op “Koop nu”, **Link** naar je winkel, **Type** op **Primary** en **Size** op **Large**, en klik daarna op **Opslaan**.
5. Klik opnieuw op **+** in de rechterkolom en kies **Tekst**; deze belandt boven de knop. Typ de prijs als **Kop 2** en klik op **Opslaan**.
6. Klik nog een keer op **+** en kies **Tekst**; deze belandt bovenaan. Typ de productnaam als **Kop 2**, voeg één regel beschrijving toe en klik op **Opslaan**. Het thema drukt de paginatitel af als kop 1 van de pagina. Om in plaats daarvan deze kop kop 1 te maken, zie [SEO-vriendelijke pagina’s bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: de functies toevoegen

1. Beweeg over de sectie en klik op **Sectie hieronder toevoegen**. Geef de nieuwe sectie de klasse **Align text center**.
2. Klik op **+** op de sectie en kies **Rij**. Klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**.
3. Klik op **+** in de eerste kolom en kies **Tekst**. Typ de functienaam als **Kop 3**, voeg één regel toe en klik op **Opslaan**.
4. Klik op **+** in dezelfde kolom en kies **Pictogram**; dit belandt boven de tekst. Kies de set **Font Awesome Free Solid**, zoek naar `plug` en klik op het pictogram. Zet **Size** op **Very Large (3x)**, open **Pictogramutilities**, zet **Style** op **Circle** en klik op **Opslaan**.
5. Herhaal voor de tweede kolom met `cloud` en de derde met `battery-full`.

## Stap 3: de specificaties toevoegen

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen**. Open **More** > **Settings**, kies een lichtgrijze **Achtergrond** in het paneel **Stijl** en klik op **Opslaan**.
2. Klik op **+** op de sectie en kies **Tekst**. Typ “Specificaties” als **Kop 2**, daarna één specificatie per regel, en klik op **Opslaan**.

## Stap 4: de oproep tot actie toevoegen

1. Voeg een vierde sectie toe en open **More** > **Settings**. Kies **Align text center** onder **HTML-klassen**, daarna de paarse **Achtergrond** en witte **Tekstkleur** in het paneel **Stijl**. Klik op **Opslaan**.
2. Klik op **+** op de sectie en kies **Knop**. Zet **Titel** op “Praat met sales”, **Link** op `/contact`, **Type** op **Light** en **Size** op **Large**, en klik daarna op **Opslaan**.
3. Klik opnieuw op **+** en kies **Tekst**; deze belandt boven de knop. Typ “Insight Hub vanaf 249 euro” als **Kop 2** en voeg één regel toe. Zet **Tekstkleur** op wit 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:

- **Specificatietabel**: voeg een tabel in met de knop **Tabel** op de tekstwerkbalk in plaats van één regel per specificatie.
- **Galerij**: vervang de enkele foto door een **Afbeeldingcarrousel** met productfoto’s.
- **Abonnementen**: link de prijs aan een [prijstabel](/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel).

## Wat je ziet

De productfoto vult de linkerhelft, met de naam, prijs en knop **Koop nu** rechts. Drie gecentreerde functies volgen, elk een omcirkeld pictogram boven naam en regel. De specificaties staan op een grijze strook, en een paarse strook sluit de pagina af met **Praat met sales**.

## Als je de pagina niet ziet zoals getoond

- **De naam, prijs en knop staan in de verkeerde volgorde.** Ze gingen er van boven naar beneden in, en nieuwe elementen belanden bovenaan hun kolom. Sleep ze op hun plek aan de sleepgreep op de besturingsbalk.
- **De pictogrammen hebben geen cirkel.** **Stijl** staat in het paneel **Pictogramutilities**, niet in **Algemeen**. Open de instellingen van het pictogram, open **Pictogramutilities** en zet **Stijl** op **Circle**.
- **De kop blijft donker op paars.** Het Tekst-element heeft geen eigen **Tekstkleur**. Open het paneel **Stijl** en zet **Tekstkleur** op wit.
- **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?

- [Prijstabel](/nl/hc/documentatie/dxpr-builder-leren/tutorials/prijstabel) voor een prijssectie met meerdere niveaus
- [Pictogramelement](/nl/hc/documentation/learn-dxpr-builder/elements/icon) voor pictogramgroottes en -stijlen
- [Marketinglandingspagina](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina) voor een campagnepagina rond het product