---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: 'Een klantverhaal schrijven | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:29+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier beschrijf je één klantproject in drie delen: de uitdaging, de oplossing en de resultaten. Je eindigt met zeven stroken: een fotohero, een overzicht met het belangrijkste getal, de uitdaging, de oplossing naast een foto, drie tellers, een citaat en een oproep tot actie. Om veel projecten op één pagina te tonen, volg je in plaats daarvan Een portfoliogalerij maken.
  De video beschrijft het werk van een bureau voor Northwind Retail.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Een klantverhaal schrijven'
      description: |-
        Hier beschrijf je één klantproject in drie delen: de uitdaging, de oplossing en de resultaten. Je eindigt met zeven stroken: een fotohero, een overzicht met het belangrijkste getal, de uitdaging, de oplossing naast een foto, drie tellers, een citaat en een oproep tot actie. Om veel projecten op één pagina te tonen, volg je in plaats daarvan Een portfoliogalerij maken.
        De video beschrijft het werk van een bureau voor Northwind Retail.
      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:29+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/tutorials/case-study'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: |-
        Hier beschrijf je één klantproject in drie delen: de uitdaging, de oplossing en de resultaten. Je eindigt met zeven stroken: een fotohero, een overzicht met het belangrijkste getal, de uitdaging, de oplossing naast een foto, drie tellers, een citaat en een oproep tot actie. Om veel projecten op één pagina te tonen, volg je in plaats daarvan Een portfoliogalerij maken.
        De video beschrijft het werk van een bureau voor Northwind Retail.
      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
---
[Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Een klantverhaal schrijven.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Een citaatblok toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Een getalenteller toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [Een portfoliogalerij maken](/nl/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

Hier beschrijf je één klantproject in drie delen: de uitdaging, de oplossing en de resultaten. Je eindigt met zeven stroken: een fotohero, een overzicht met het belangrijkste getal, de uitdaging, de oplossing naast een foto, drie tellers, een citaat en een oproep tot actie. Om veel projecten op één pagina te tonen, volg je in plaats daarvan [Een portfoliogalerij maken](/nl/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery).

De video beschrijft het werk van een bureau voor Northwind Retail.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een brede foto voor de hero en een foto van wat je opleverde.
- 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 sectie of kolom. Voeg de elementen van een kolom in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

## Stap 1: de hero toevoegen

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**. Beweeg erover en open **More** > **Settings**.
2. Kies onder **HTML-klassen** de optie **Align text center**.
3. Open het paneel **Stijl**. Klik onder **Achtergrondafbeelding** op **Afbeelding selecteren**, vink een foto aan en klik op **Geselecteerde invoegen**. Zet **Achtergrondstijl** op **Cover**.
4. Kies een donkerblauwe **Achtergrond** en een witte **Tekstkleur** en klik daarna op **Opslaan**. De kleur toont terwijl de foto laadt.
5. Klik op **+** op de sectie en kies **Knop**. Zet **Titel** op “Bezoek de site”, **Link** naar de URL van de klant, **Type** op **Light** en **Size** op **Large**, en klik daarna op **Opslaan**.
6. Klik opnieuw op **+** en kies **Tekst**; deze belandt boven de knop. Typ de klantnaam als **Kop 2** en een samenvatting van één regel eronder. Zet **Tekstkleur** op wit in het paneel **Stijl** 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/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: het overzicht toevoegen

1. Beweeg over de hero en klik op **Sectie hieronder toevoegen**. Voeg een **Rij** toe aan de nieuwe sectie, klik op het rasterpictogram (**Kolomindeling**), kies de preset **2/3 + 1/3** en klik op **Opslaan**.
2. Klik op **+** in de brede kolom en kies **Tekst**. Typ “Overzicht” als **Kop 2**, voeg de samenvatting toe en klik op **Opslaan**.
3. Klik op **+** in de smalle kolom en kies **Tekst**. Typ het label van de metriek, “Meer online bestellingen”, en klik op **Opslaan**.
4. Klik opnieuw op **+** in de smalle kolom en kies **Nummerteller**; deze belandt boven het label. Zet **Einde** op 32, **Achtervoegsel** op %, **Duizendtalscheiding** op **Komma**, zet **Snelheid** op 2500, en klik daarna op **Opslaan**.

De teller heeft geen eigen labelveld; het Tekst-element eronder doet dat werk.

## Stap 3: de uitdaging 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 “De uitdaging” als **Kop 2**, beschrijf het probleem en klik op **Opslaan**.

## Stap 4: de oplossing toevoegen

1. Voeg een vierde sectie toe, daarna een **Rij**; deze komt met twee gelijke kolommen.
2. Klik op **+** in de linkerkolom en kies **Tekst**. Typ “De oplossing” als **Kop 2**, beschrijf wat je bouwde en klik op **Opslaan**.
3. Klik op **+** in de rechterkolom en kies **Afbeelding**. Klik op **Afbeelding selecteren**, vink een foto van het opgeleverde werk aan en klik op **Geselecteerde invoegen**. Typ het **alt-attribuut** in het paneel **SEO** en klik op **Opslaan**.

## Stap 5: de resultaten toevoegen

1. Voeg een vijfde sectie toe en open **More** > **Settings**. Kies **Align text center** onder **HTML-klassen**, daarna de donkerblauwe **Achtergrond** en witte **Tekstkleur** in het paneel **Stijl**. Klik op **Opslaan**.
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. Voeg in elke kolom eerst een **Tekst**-label toe, daarna een **Nummerteller** erboven, zoals in stap 2: **Einde** 32 met **Achtervoegsel** %, **Einde** 2 met **Achtervoegsel** s, en **Einde** 15000.

## Stap 6: het citaat toevoegen

1. Voeg een zesde sectie toe.
2. Klik op **+** op de sectie en kies **Blokcitaat**. Typ de woorden van de klant, vul bij **Bron** naam en rol in, en klik op **Opslaan**.

## Stap 7: de oproep tot actie toevoegen

1. Voeg een zevende 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 “Neem contact met ons op”, **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 “Klaar om te beginnen?” als **Kop 2** en voeg één regel toe. Zet **Tekstkleur** op wit en klik op **Opslaan**.

## Stap 8: opslaan en vooraf bekijken

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

## Wat je ziet

De klantnaam en de knop **Bezoek de site** staan gecentreerd op de foto. Het overzicht toont 32% naast de samenvatting; bezoekers zien het optellen wanneer het in beeld scrolt. De uitdaging staat op een grijze strook, en de oplossing staat naast de foto.

Op de donkerblauwe strook tellen de drie resultaten op wanneer ze in beeld scrollen: 32%, 2s en 15.000. Het klantcitaat en een paarse strook **Neem contact met ons op** sluiten de pagina af.

## Als je de pagina niet ziet zoals getoond

- **De herofoto vult de sectie niet.** **Achtergrondstijl** staat nog op **Theme defaults**. Open het paneel **Stijl** van de sectie en zet hem op **Cover**.
- **De laatste teller leest 15000 zonder komma.** **Duizendtalscheiding** staat nog op **Geen**. Open de instellingen van de teller en kies **Komma**.
- **Een label staat boven zijn teller.** De teller ging erin vóór zijn label, en nieuwe elementen belanden bovenaan hun kolom. Sleep het label met de sleepgreep op de besturingsbalk onder de teller.
- **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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## Wat nu?

- [Blokcitaat-element](/nl/hc/documentation/learn-dxpr-builder/elements/blockquote) voor stijlopties van testimonials
- [Nummerteller-element](/nl/hc/documentation/learn-dxpr-builder/elements/number-counter) voor elke tellerinstelling
- [Portfolio](/nl/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) om al je klantverhalen op één pagina te zetten