---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/over-ons-pagina'
title: 'Een Over ons-pagina maken | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:00:51+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een Over ons-pagina: een missieheader, je verhaal naast een foto, drie getallen die optellen, teamkaarten en een afsluitende oproep tot actie. Gebruik hem wanneer één pagina moet vertellen wie jullie zijn. Voor een pagina met elke collega volg je in plaats daarvan Een teamoverzicht bouwen.
  De video bouwt de pagina voor een ontwerpstudio in Rotterdam.
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 Over ons-pagina maken'
      description: |-
        Hier bouw je een Over ons-pagina: een missieheader, je verhaal naast een foto, drie getallen die optellen, teamkaarten en een afsluitende oproep tot actie. Gebruik hem wanneer één pagina moet vertellen wie jullie zijn. Voor een pagina met elke collega volg je in plaats daarvan Een teamoverzicht bouwen.
        De video bouwt de pagina voor een ontwerpstudio in Rotterdam.
      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:51+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/over-ons-pagina'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/over-ons-pagina'
      description: |-
        Hier bouw je een Over ons-pagina: een missieheader, je verhaal naast een foto, drie getallen die optellen, teamkaarten en een afsluitende oproep tot actie. Gebruik hem wanneer één pagina moet vertellen wie jullie zijn. Voor een pagina met elke collega volg je in plaats daarvan Een teamoverzicht bouwen.
        De video bouwt de pagina voor een ontwerpstudio in Rotterdam.
      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 Over ons-pagina maken.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een teamoverzicht bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/teamoverzicht)
- [Een kaart toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart)

Hier bouw je een Over ons-pagina: een missieheader, je verhaal naast een foto, drie getallen die optellen, teamkaarten en een afsluitende oproep tot actie. Gebruik hem wanneer één pagina moet vertellen wie jullie zijn. Voor een pagina met elke collega volg je in plaats daarvan [Een teamoverzicht bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/teamoverzicht).

De video bouwt de pagina voor een ontwerpstudio in Rotterdam.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een foto van je kantoor, team of product.
- De pagina bestaat: ga naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`), typ “Over ons” als **Titel** en klik op **Opslaan**. De pagina opent met de builder erop.
- Verberg op DXPR CMS de paginatitel van het thema op deze pagina: open in het bewerkingsformulier **DXPR-thema-instellingen** en vink **Paginatitel** aan onder **DXPR Regio’s verbergen**. De **Titel** van de Jumbotron is dan de enige kop 1 van de pagina, zoals [SEO-vriendelijke pagina’s bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/seo#step-1-start-the-content-at-heading-2) uitlegt.
- Nieuwe elementen belanden bovenaan hun sectie of kolom. Voeg de rijen van een sectie, of de elementen van een kolom, in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

## Stap 1: een missieheader toevoegen

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**.
2. Beweeg over de sectie en open **More** > **Settings**. Open het paneel **Stijl**, kies een donker kleurstaal voor **Achtergrond** en klik op **Opslaan**.
3. Klik op **+** op de sectie en kies **Jumbotron** op het tabblad **Inhoud**.
4. Typ je missie als **Titel**: “We bouwen websites die mensen graag gebruiken”.
5. Typ een ondersteunende zin in het veld **Lead**: “Een studio met 24 mensen in Rotterdam, die sinds 2012 met merken in heel Europa werkt.”
6. Zet **Type** op **Primary** voor witte tekst op je primaire kleur, en klik daarna op **Opslaan**.

## Stap 2: het verhaal van je bedrijf vertellen

1. Beweeg over de sectie en klik op **Sectie hieronder toevoegen**, de **+** eronder.
2. Klik op **+** op de nieuwe sectie en kies **Rij**; deze komt met twee gelijke kolommen. Klik op het rasterpictogram (**Kolomindeling**) op de rij, kies de preset **2/3 + 1/3** en klik op **Opslaan**.
3. Klik op **+** in de bredere kolom en kies **Tekst**. Typ “Ons verhaal” als **Kop 2**, daarna twee korte alinea’s: hoe je begon en hoe een project verloopt. Klik op **Opslaan**.
4. Klik op **+** in de smallere kolom en kies **Afbeelding**.
5. Klik op **Afbeelding selecteren**, doorzoek de mediabibliotheek met **Filters toepassen**, vink een foto van je kantoor of team aan en klik op **Geselecteerde invoegen**.
6. Open het paneel **SEO**, vul het **alt-attribuut** in en klik op **Opslaan**.

**Tip**

Houd het verhaal kort en breek het op met een tussenkop. Bezoekers scannen voordat ze lezen.

## Stap 3: kerngetallen met tellers 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. Voeg in elke kolom een **Tekst**-element toe met het label van het getal: “Opgeleverde projecten”, “Jaren actief”, “Terugkerende klanten”.
4. Klik in elke kolom opnieuw op **+** en kies **Nummerteller**; deze belandt boven het label. Stel in:
    - **Einde**: het getal (140, 12, 98)
    - **Achtervoegsel**: “+” of “%” waar van toepassing
    - **Duizendtalscheiding**: **Komma**
    - **Snelheid**: 2500, de milliseconden die het tellen duurt
5. Klik op elke teller op **Opslaan**.

De teller heeft geen eigen labelveld, daarom staat er een Tekst-element onder.

## Stap 4: een teamsectie bouwen

1. Voeg een vierde sectie toe met **Sectie hieronder toevoegen**.
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 in elke kolom op **+** en kies **Kaart**. Open **More** > **Settings**, zet de **Header** op de naam van de persoon (“Sofia Andersen”) en de **Titel** op de rol (“Creatief directeur”), en klik daarna op **Opslaan**.
4. Klik op **+** op de sectie zelf en kies **Tekst**; deze belandt boven de kaartenrij. Typ “Ontmoet het team” als **Kop 2**, centreer hem en klik op **Opslaan**.

## Stap 5: een afsluitende sectie toevoegen

1. Voeg een laatste sectie toe met **Sectie hieronder toevoegen** en open **More** > **Settings**. Kies onder **HTML-klassen** de optie **Align text center**, zodat de tekst en de knop samen centreren. Kies in het paneel **Stijl** je merkkleur als **Achtergrond** en wit als **Tekstkleur**, en klik daarna op **Opslaan**.
2. Klik op **+** op de sectie en kies **Knop**. Zet **Titel** op “Neem contact op”, **Link** op `/contact`, **Type** op **Light** en **Size** op **Large**, en klik daarna op **Opslaan**.
3. Klik opnieuw op **+** op de sectie en kies **Tekst**; deze belandt boven de knop. Typ “Wil je met ons werken?” als **Kop 2**, daarna “We nemen elk kwartaal een handvol nieuwe klanten aan.” Zet in het paneel **Stijl** de **Tekstkleur** op wit, en klik daarna op **Opslaan**.

## Stap 6: opslaan en vooraf bekijken

1. Klik op **Opslaan** op de werkbalk van de builder.
2. Open het weergavemenu (het **oogpictogram**) en kies **Voorvertoning**.
3. Scrol door de pagina om elke sectie te controleren.

## Verder gaan

Niet getoond in de video, maar het waard om toe te voegen:

- Een bio-**Tekst** en een portret-**Afbeelding** in elke kaart, en **Sociale links** eronder
- **100% hoogte** in de instellingen van de eerste sectie voor een header die het scherm vult

## Wat je ziet

De voorvertoning toont vijf stroken. De donkere header draagt je missie en de intro in het wit. Je verhaal staat naast de foto. Op de grijze strook tellen de drie getallen op vanaf nul wanneer ze in beeld scrollen.

De teamkop staat gecentreerd boven drie kaarten, elk met een naam en een rol. De afsluitende strook centreert een witte kop boven een lichte knop **Neem contact op**. Kies **Bewerken** in het oogmenu om verder te werken.

## Als je de pagina niet ziet zoals getoond

- **Er is geen knop Add Elements op de lege pagina.** De assistent voor het maken van pagina’s staat uit, zodat de pagina alleen **Kies een sjabloon** biedt. Klik in plaats daarvan op het lege gebied om de elementenkiezer te openen.
- **Een nieuw element staat boven het element dat je eerder toevoegde.** De builder voegt nieuwe elementen bovenaan hun sectie of kolom in. Sleep het op zijn plek aan de sleepgreep op de besturingsbalk.
- **Nummerteller of Kaart ontbreekt in de kiezer.** Je gebruikersprofiel voor de builder verbergt het. Vraag een beheerder om het aan te vinken onder **Elementen** op **DXPR Studio** > **DXPR Builder** > **Gebruikersprofielen** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **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?

- [Teamoverzicht](/nl/hc/documentatie/dxpr-builder-leren/tutorials/teamoverzicht) voor een eigen teampagina
- [Kaartelement](/nl/hc/documentatie/dxpr-builder-leren/elementen/kaart) voor kaarttypen en kindelementen
- [Elementreferentie](/hc/documentation/learn-dxpr-builder/elements) voor de volledige elementverwijzing