---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/evenementpagina'
title: 'Een evenementpagina bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:00:47+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 evenement. Deze heeft een fotohero met de datum en een knop Registreer nu, de details naast een kaart, sprekerskaarten en een aanmeldstrook. Gebruik hem voor opendagen, lezingen en webinars. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.
  De video bouwt de pagina voor een universitaire opendag.
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 evenementpagina bouwen'
      description: |-
        Hier bouw je een pagina voor één evenement. Deze heeft een fotohero met de datum en een knop Registreer nu, de details naast een kaart, sprekerskaarten en een aanmeldstrook. Gebruik hem voor opendagen, lezingen en webinars. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.
        De video bouwt de pagina voor een universitaire opendag.
      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:47+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/evenementpagina'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/evenementpagina'
      description: |-
        Hier bouw je een pagina voor één evenement. Deze heeft een fotohero met de datum en een knop Registreer nu, de details naast een kaart, sprekerskaarten en een aanmeldstrook. Gebruik hem voor opendagen, lezingen en webinars. Voor een hele site op één scrollende pagina volg je in plaats daarvan Een scrollende one-page-website bouwen.
        De video bouwt de pagina voor een universitaire opendag.
      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 evenementpagina bouwen.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een plattegrond toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/plattegrond)
- [Een kaart toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart)
- [Een hero-sectie ontwerpen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie)

Hier bouw je een pagina voor één evenement. Deze heeft een fotohero met de datum en een knop **Registreer nu**, de details naast een kaart, sprekerskaarten en een aanmeldstrook. Gebruik hem voor opendagen, lezingen en webinars. 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 de pagina voor een universitaire opendag.

  ## 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 sectie 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 “Registreer nu”, **Link** naar de registratiepagina, **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 evenementnaam als **Kop 2**, daarna de datum en een ondertitel. 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 details en de kaart toevoegen

1. Beweeg over de hero en klik op **Sectie hieronder toevoegen**. Klik op **+** op de nieuwe sectie en kies **Rij**; de twee gelijke kolommen zijn de splitsing die je nodig hebt.
2. Klik op **+** in de linkerkolom en kies **Tekst**. Typ “Evenementdetails” als **Kop 2**, voeg voor datum, locatie en contact elk één regel toe, en klik op **Opslaan**.
3. Klik op **+** in de rechterkolom en kies **Kaart**. Typ het **Adres** van de locatie, zet **Kaarthoogte** op 320 en klik op **Opslaan**.

## Stap 3: de sprekers 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**. Klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**.
3. Klik op **+** in elke kolom en kies **Kaart**. Open **More** > **Settings**, zet de **Header** op de sessie en de **Titel** op de naam en rol van de spreker, en klik daarna op **Opslaan**.

## Stap 4: de registratieoproep 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 “Aanmelden”, **Link** naar de registratiepagina, **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 “Registreer je vandaag” 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:

- **Sprekersfoto’s**: klik op **+** op een kaart en voeg een **Tekst**-biografie toe, klik daarna opnieuw op **+** op de kaart en voeg een **Afbeelding** toe; deze belandt boven de tekst
- **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**
- **Programma**: voeg een **Tekst**-element toe en voeg een tabel in met de knop **Tabel** voor tijd, sessie en spreker
- **Registratie op de pagina**: zie [Formulieren toevoegen aan pagina’s](/nl/hc/documentatie/dxpr-builder-leren/tutorials/formulieren-toevoegen)

## Wat je ziet

De evenementnaam, datum en knop **Registreer nu** staan gecentreerd en wit op de foto. Eronder vullen de details de linkerhelft en een kaart van de locatie de rechter. Drie sprekerskaarten staan op een grijze strook, en een paarse strook sluit de pagina af met **Aanmelden**.

## 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 kaart toont de verkeerde plek.** Google Maps zoekt op het adres zoals getypt. Voeg de postcode, stad en het land toe bij **Adres** en sla opnieuw op.
- **Een kaart toont geen instellingendialoog nadat je hem toevoegt.** Kaarten openen leeg, zonder dialoog. Beweeg over de kaart en open **More** > **Settings** om **Header** en **Titel** in te vullen.
- **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?

- [Kaartelement](/nl/hc/documentation/learn-dxpr-builder/elements/map) voor de kaartinstellingen
- [Kaartelement](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart) voor kaarttypen en kindelementen
- [Hero-sectie](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie) voor meer hero-opties