---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'Een hero-sectie ontwerpen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:00:39+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een hero die het scherm vult: een achtergrondfoto, een kop, één ondersteunende regel en een knop, waarbij de foto langzamer beweegt dan de pagina terwijl bezoekers scrollen. Gebruik hem bovenaan elke pagina. Om de hele pagina eromheen te bouwen, volg je daarna Een marketinglandingspagina bouwen.
  De video bouwt de hero van een rapportageproduct.
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 hero-sectie ontwerpen'
      description: |-
        Hier bouw je een hero die het scherm vult: een achtergrondfoto, een kop, één ondersteunende regel en een knop, waarbij de foto langzamer beweegt dan de pagina terwijl bezoekers scrollen. Gebruik hem bovenaan elke pagina. Om de hele pagina eromheen te bouwen, volg je daarna Een marketinglandingspagina bouwen.
        De video bouwt de hero van een rapportageproduct.
      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:39+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/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      description: |-
        Hier bouw je een hero die het scherm vult: een achtergrondfoto, een kop, één ondersteunende regel en een knop, waarbij de foto langzamer beweegt dan de pagina terwijl bezoekers scrollen. Gebruik hem bovenaan elke pagina. Om de hele pagina eromheen te bouwen, volg je daarna Een marketinglandingspagina bouwen.
        De video bouwt de hero van een rapportageproduct.
      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 hero-sectie ontwerpen.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Een marketinglandingspagina bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Een sectie toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/sections)
- [Het uiterlijk van een element wijzigen in het paneel Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

Hier bouw je een hero die het scherm vult: een achtergrondfoto, een kop, één ondersteunende regel en een knop, waarbij de foto langzamer beweegt dan de pagina terwijl bezoekers scrollen. Gebruik hem bovenaan elke pagina. Om de hele pagina eromheen te bouwen, volg je daarna [Een marketinglandingspagina bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing).

De video bouwt de hero van een rapportageproduct.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een brede foto, minstens 1920 pixels breed.
- De pagina is open in de builder. Ga voor een nieuwe naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`) en klik op **Opslaan**.

## Stap 1: de sectie 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**, zodat de kop, de tekst en de knop samen centreren.
3. Zet **100% hoogte** aan zodat de hero het scherm vult, en **Verticaal centreren** zodat de inhoud in het midden staat.
4. Open het paneel **Stijl**. Klik onder **Achtergrondafbeelding** op **Afbeelding selecteren**, vink een brede foto aan en klik op **Geselecteerde invoegen**.
5. Zet **Achtergrondstijl** op **Cover** zodat de foto de sectie vult.
6. Kies een donkere kleur voor **Achtergrond**, die toont terwijl de foto laadt. Zet **Tekstkleur** op wit en klik daarna op **Opslaan**.

**Tip**

Comprimeer de foto tot onder 500 KB zodat de hero snel laadt.

## Stap 2: de knop toevoegen

1. Klik op **+** op de sectie en kies **Knop** op het tabblad **Inhoud**.
2. Zet **Titel** op “Start gratis proefperiode”, **Link** op `/trial`, **Type** op **Light** voor contrast op de foto en **Size** op **Large**, en klik daarna op **Opslaan**.

## Stap 3: de kop toevoegen

1. Klik opnieuw op **+** op de sectie en kies **Tekst** op het tabblad **Inhoud**. Deze belandt boven de knop, omdat nieuwe elementen bovenaan belanden.
2. Typ je kop, “Rapportage die je team bijhoudt”, en kies **Kop 2** in de kopdropdown. 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).
3. Voeg één ondersteunende regel toe: “Dashboards, waarschuwingen en integraties in één werkruimte. In minuten ingesteld, geen ontwikkelaars nodig.”
4. Zet in het paneel **Stijl** de **Tekstkleur** op wit en klik daarna op **Opslaan**.

## Stap 4: parallax toevoegen

1. Beweeg over de sectie en open opnieuw **More** > **Settings**.
2. Open het paneel **Achtergrondeffecten** en zet **Achtergrondeffect** op **Parallax image**. **Parallaxsnelheid** begint bij 20; sleep hem naar 35 voor een sterker effect en klik op **Opslaan**.

## Stap 5: inhoud toevoegen onder de hero

1. Beweeg over de hero en klik op **Sectie hieronder toevoegen**, zodat de pagina inhoud heeft om naartoe te scrollen.
2. Klik op **+** op de nieuwe sectie en kies **Tekst** op het tabblad **Inhoud**. Typ een kop en een korte alinea, zet de eerste regel op **Kop 2** en klik op **Opslaan**.

## Stap 6: opslaan en vooraf bekijken

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

## Verder gaan

Niet getoond in de video:

- **Overlay**: zet **Achtergrondeffect** op **Gradient** en kies een donkere **Beginkleur** en **Eindkleur** met een dekking van ongeveer 50%. Tekst blijft leesbaar op elke foto. Het effect heeft één waarde, dus een overlay vervangt parallax.
- **Kortere hero**: zet **100% hoogte** uit en geef de sectie een eigen boven- en onderpadding in het paneel **Stijl**, bijvoorbeeld 100 pixels.
- **Brede knop**: zet **Blokknop** aan voor een knop zo breed als zijn kolom.

## Variaties

Alternatieven voor de bouw in de video:

### Hero met video-achtergrond

1. Zet in het paneel **Achtergrondeffecten** **Achtergrondeffect** op **YouTube video**.
2. Plak de video-URL bij **YouTube-video-URL**.
3. Vink onder **Video-opties** **Herhalen** en **Uitschakelen op mobiele apparaten** aan; laat audio uit.

### Hero met alleen een verloop

Sla de achtergrondafbeelding over en gebruik het effect **Gradient** met twee effen merkkleuren voor een hero die snel laadt.

### Gesplitste hero

1. Voeg een **Rij** toe in de sectie; deze komt met twee gelijke kolommen.
2. Zet de tekst en knop in de linkerkolom en een afbeelding in de rechterkolom.

## Wat je ziet

De foto vult het scherm met je kop, ondersteunende regel en knop **Start gratis proefperiode** gecentreerd in het wit erop. Terwijl je naar de tweede sectie scrolt, beweegt de foto langzamer dan de pagina.

## Als je de hero niet ziet zoals getoond

- **De hero is slechts zo hoog als zijn tekst.** **100% hoogte** staat uit. Zet het aan in de instellingen van de sectie en klik op **Opslaan**.
- **De foto staat stil terwijl je scrolt.** **Achtergrondeffect** staat nog op **Simpele afbeelding**, **Parallaxsnelheid** is 0, of er staat niets onder de hero om naartoe te scrollen. Stel **Parallaxafbeelding** in, sleep **Parallaxsnelheid** boven 0 en voeg de tweede sectie van stap 5 toe.
- **De kop blijft donker op de foto.** Het Tekst-element heeft geen eigen **Tekstkleur**. Open het paneel **Stijl** en zet **Tekstkleur** op wit.

## Wat nu?

- [Landingspagina](/nl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) om een complete pagina rond je hero te bouwen
- [Secties](/nl/hc/documentation/learn-dxpr-builder/layout/sections) voor de indelingsopties van de sectie
- [Verwijzing naar het tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) voor alle stijlopties