---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina'
title: 'Je eerste pagina | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:58:07+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Bouw een pagina met DXPR Builder: een afbeelding naast een kop, een korte alinea en een knop. Je kunt ook starten vanuit een kant-en-klaar sjabloon en zijn woorden wijzigen. Beide kosten een paar minuten, en je eindigt met een opgeslagen pagina waarvan je een voorbeeld bekijkt zoals bezoekers hem zien. Gebruik deze pagina na het installeren van DXPR Builder.
  De video bouwt de pagina vanaf nul: sectie, rij, afbeelding, knop en tekst, dan opslaan en voorbeeld.
tags:
  - 'Build your first page'
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: 'Je eerste pagina'
      description: |-
        Bouw een pagina met DXPR Builder: een afbeelding naast een kop, een korte alinea en een knop. Je kunt ook starten vanuit een kant-en-klaar sjabloon en zijn woorden wijzigen. Beide kosten een paar minuten, en je eindigt met een opgeslagen pagina waarvan je een voorbeeld bekijkt zoals bezoekers hem zien. Gebruik deze pagina na het installeren van DXPR Builder.
        De video bouwt de pagina vanaf nul: sectie, rij, afbeelding, knop en tekst, dan opslaan en voorbeeld.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:58:07+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/aan-de-slag/eerste-pagina'
      articleSection: 'Je eerste pagina bouwen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina'
      description: |-
        Bouw een pagina met DXPR Builder: een afbeelding naast een kop, een korte alinea en een knop. Je kunt ook starten vanuit een kant-en-klaar sjabloon en zijn woorden wijzigen. Beide kosten een paar minuten, en je eindigt met een opgeslagen pagina waarvan je een voorbeeld bekijkt zoals bezoekers hem zien. Gebruik deze pagina na het installeren van DXPR Builder.
        De video bouwt de pagina vanaf nul: sectie, rij, afbeelding, knop en tekst, dan opslaan en voorbeeld.
      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) /[Begin hier](/nl/hc/documentation/learn-dxpr-builder/start-here) /[Je eerste pagina bouwen](/nl/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Je eerste pagina.

 DXPR Builder lerenBegin hierJe eerste pagina bouwen

   ## In deze gids

Bouw een pagina met DXPR Builder: een afbeelding naast een kop, een korte alinea en een knop. Je kunt ook starten vanuit een kant-en-klaar sjabloon en zijn woorden wijzigen. Beide kosten een paar minuten, en je eindigt met een opgeslagen pagina waarvan je een voorbeeld bekijkt zoals bezoekers hem zien. Gebruik deze pagina na het [installeren van DXPR Builder](/nl/hc/documentation/learn-dxpr-builder/getting-started/installation).

De video bouwt de pagina vanaf nul: sectie, rij, afbeelding, knop en tekst, dan opslaan en voorbeeld.

  ## Voordat je begint

- DXPR Builder is geïnstalleerd met je productsleutel ([DXPR Builder installeren](/nl/hc/documentation/learn-dxpr-builder/getting-started/installation)).
- Een inhoudstype toont de builder: zijn tekstveld gebruikt de formatter **DXPR Builder**, zoals **Sleep-en-neerzetpagina** uit `dxpr_builder_page`.
- Je rol heeft de toestemming **Bewerken met DXPR Builder**.

## De pagina aanmaken

1. Ga naar **Inhoud** > **Inhoud toevoegen** en kies een inhoudstype dat de builder toont.
2. Typ een **Titel** en klik op **Opslaan**.

De opgeslagen pagina opent met een lege builder. DXPR Builder werkt op deze pagina, niet op het bewerkingsformulier.

## Optie A: starten vanuit een sjabloon

De **Opgeslagen sjablonen** somt lay-outs op die mensen op je site hebben opgeslagen voor hergebruik. DXPR CMS levert er enkele mee, zoals **Gekleurde pictogramvakken**. Op andere sites kan het tabblad leeg zijn; **Kies een sjabloon** op de lege pagina biedt dan de paginasjablonen die met DXPR Builder meekomen. [Een opgeslagen sjabloon invoegen](/nl/hc/documentatie/dxpr-builder-leren/herbruikbare-sjablonen/opgeslagen-sjablonen-tabblad) toont deze stappen in een video.

1. Klik op **Add Elements** om de elementenkiezer te openen.
2. Schakel over naar het tabblad **Opgeslagen sjablonen**.
3. Klik op een sjabloon om het in te voegen. Zijn secties, rijen en elementen verschijnen op de pagina, klaar om te bewerken.
4. Klik op **Opslaan** op de werkbalk.
5. Open het oogmenu en kies **Voorbeeld** om de pagina te zien zoals bezoekers hem zien.

## Optie B: bouwen vanaf nul

De video hierboven volgt deze stappen.

1. Klik op **Add Elements** en kies **Sectie** op het tabblad **Lay-out**.
2. Klik op **+** op de besturingsbalk van de sectie en kies **Rij**.
3. Klik op het rasterpictogram op de rij, kies een kolompreset zoals 1/3 + 2/3, en klik op **Opslaan**.
4. Klik op **+** in de linkerkolom, open het tabblad **Inhoud** en kies **Afbeelding**.
5. Klik op **Afbeelding selecteren**, zoek in de mediabrowser met **Filters toepassen**, vink een foto aan en klik op **Geselecteerde invoegen**.
6. Open het paneel **SEO**, typ het **Alt-attribuut** en klik op **Opslaan**.
7. Klik op **+** in de rechterkolom en kies **Knop**.
8. Typ de **Titel** en **Link**, kies een **Type** en klik op **Opslaan**.
9. Klik op **+** op de besturingsbalk van de brede kolom en kies **Tekst**.
10. Typ een kop, zet hem op **Kop 2**, typ eronder een alinea en klik op **Opslaan**.
11. Klik op **Opslaan** op de werkbalk.
12. Open het oogmenu en kies **Voorbeeld** om de pagina te zien zoals bezoekers hem zien. Kies **Bewerken** in hetzelfde menu om verder te werken.

## Wijzig wat je hebt toegevoegd

- **Tekst**: klik op een Tekst-element om het ter plekke te bewerken. Een werkbalk biedt vet, cursief, koppen, links, lijsten, letterkleur en meer. Je [gebruikersprofiel](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) bepaalt welke knoppen verschijnen.
- **Instellingen**: open **More** op de besturingsbalk van een element en kies **Instellingen**. Een Afbeelding heeft breedte, hoogte, een link en zijn alt-tekst; een Knop heeft een **Type**, een grootte en een link.
- **Volgorde**: sleep een element aan zijn besturingsbalk naar een andere plek.

Klik op **Opslaan** op de werkbalk als je klaar bent. De browser waarschuwt je als je de pagina probeert te verlaten met niet-opgeslagen wijzigingen.

## Wat je ziet

In **Voorbeeld** staat de afbeelding links. De kop, alinea en knop staan rechts, zonder besturingsbalken. Terug in **Bewerken** toont elk element zijn besturingsbalk als je erover beweegt. DXPR Builder slaat de pagina op als HTML in het veld dat hij bewerkt, meestal **Body**. Bezoekers zien de pagina zodra de inhoud is gepubliceerd.

## Als je de knop Add Elements niet ziet

- **De lege pagina toont “Kies een sjabloon” en “Of voeg elementen toe met de +”.** **Enable page creation assistant** staat uit op `/admin/dxpr_studio/dxpr_builder/ai_settings`. Klik op **+** op de builder-werkbalk om de elementenkiezer te openen.
- **De pagina toont helemaal geen builder.** Het inhoudstype gebruikt de formatter **DXPR Builder** niet, of je rol mist **Bewerken met DXPR Builder**. Volg [De installatie controleren](/nl/hc/documentation/learn-dxpr-builder/getting-started/installation#verify-the-installation).
- **De Opgeslagen sjablonen somt geen sjablonen op.** Niemand op de site heeft er nog een opgeslagen, of je gebruikersprofiel verbergt ze. Gebruik **Kies een sjabloon** op de lege pagina, of [sla je eigen op](/nl/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates).
- **Je wijzigingen zijn weg na een herlaadbeurt.** De pagina is niet opgeslagen. Klik op **Opslaan** op de builder-werkbalk voordat je de pagina verlaat.

## Wat nu?

- [De bewerkingstools](/hc/documentation/learn-dxpr-builder/editing): elke knop, plus sneltoetsen.
- [Elementen](/hc/documentation/learn-dxpr-builder/elements): alle 22 inhoudselementen en 6 lay-outelementen.
- [Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview): secties, rijen en kolommen die zich aanpassen aan elk scherm.