---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina'
title: 'Een marketinglandingspagina bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:00:43+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een landingspagina voor één aanbod: een fotohero met een knop Vraag een demo aan, drie functies met pictogrammen, twee testimonials en een afsluitende oproep tot actie. Gebruik hem voor een campagne- of productpagina met één doel. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.
  De video bouwt een pagina voor een analyseproduct genaamd Insight.
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 marketinglandingspagina bouwen'
      description: |-
        Hier bouw je een landingspagina voor één aanbod: een fotohero met een knop Vraag een demo aan, drie functies met pictogrammen, twee testimonials en een afsluitende oproep tot actie. Gebruik hem voor een campagne- of productpagina met één doel. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.
        De video bouwt een pagina voor een analyseproduct genaamd Insight.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:00:43+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/marketinglandingspagina'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina'
      description: |-
        Hier bouw je een landingspagina voor één aanbod: een fotohero met een knop Vraag een demo aan, drie functies met pictogrammen, twee testimonials en een afsluitende oproep tot actie. Gebruik hem voor een campagne- of productpagina met één doel. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.
        De video bouwt een pagina voor een analyseproduct genaamd Insight.
      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 marketinglandingspagina bouwen.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een hero-sectie ontwerpen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie)
- [Formulieren toevoegen aan pagina’s](/nl/hc/documentatie/dxpr-builder-leren/tutorials/formulieren-toevoegen)

Hier bouw je een landingspagina voor één aanbod: een fotohero met een knop **Vraag een demo aan**, drie functies met pictogrammen, twee testimonials en een afsluitende oproep tot actie. Gebruik hem voor een campagne- of productpagina met één doel. Voor een hele site op één scrollende pagina volg je in plaats daarvan [Een scrollende one-page-website bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/one-page-website).

De video bouwt een pagina voor een analyseproduct genaamd Insight.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een brede foto voor de hero.
- 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**.
5. Klik op **+** op de sectie en kies **Knop**. Zet **Titel** op “Vraag een demo aan”, **Link** op `/demo`, **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 kop als **Kop 2** en de ondertitel 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/documentatie/dxpr-builder-leren/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: de functies toevoegen

1. Beweeg over de hero 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 `bolt` 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 `chart-line` en de derde met `shield`.

## Stap 3: de testimonials 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 **Rij**; deze komt met twee gelijke kolommen.
3. Klik op **+** in elke kolom en kies **Blokcitaat**. Typ het citaat, vul bij **Bron** de naam en rol van de persoon in, 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 “Boek een rondleiding”, **Link** op `/demo`, **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 “Zie Insight op je eigen data” 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:

- **Leadformulier**: voeg een webformulierblok toe op het tabblad **Drupal-blokken** in plaats van de laatste knop; zie [Formulieren toevoegen aan pagina’s](/nl/hc/documentatie/dxpr-builder-leren/tutorials/formulieren-toevoegen)
- **Donkerdere foto**: zet in het paneel **Achtergrondeffecten** van de hero **Achtergrondeffect** op **Gradient**. Kies dezelfde donkere kleur met een dekking van ongeveer 60% als **Beginkleur** en **Eindkleur**
- **Hogere hero**: geef de hero-sectie 100 pixels boven- en onderpadding in het **Stijl**-paneel
- **Beginnen met een sjabloon**: klik op een lege pagina op **Kies een sjabloon** en kies een landingspagina-indeling; zie [Paginasjablonen](/nl/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## Wat je ziet

De kop, ondertitel en knop **Vraag een demo aan** staan gecentreerd in het wit op de foto. Drie functies volgen, elk een omcirkeld pictogram boven een korte kop en regel. Twee citaten staan naast elkaar op een grijze strook, en een paarse strook sluit de pagina af met **Boek een rondleiding**.

## Als je de pagina niet ziet zoals getoond

- **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 herofoto vult de sectie niet.** **Achtergrondstijl** staat nog op **Theme defaults**. Open het paneel **Stijl** van de sectie en zet hem op **Cover**.
- **Een pictogram staat onder de functietekst.** Het pictogram ging er vóór de tekst in, en nieuwe elementen belanden bovenaan hun kolom. Sleep het pictogram met de sleepgreep op de besturingsbalk boven de tekst.
- **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?

- [Hero-sectie](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie) voor hero-opties over de volle hoogte en met parallax
- [Formulieren toevoegen aan pagina’s](/nl/hc/documentatie/dxpr-builder-leren/tutorials/formulieren-toevoegen) om een aanmeldformulier toe te voegen
- [A/B-testen](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) om twee versies van de pagina te testen