---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
title: 'Een teamoverzicht bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:18+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een teampagina: een gecentreerde kop, drie leiderschapskaarten met een LinkedIn-link onder de derde, en een raster van vier teamkaarten. Gebruik hem wanneer elke collega gemakkelijk te vinden moet zijn. Voor een korte teamsectie op je bedrijfspagina volg je in plaats daarvan Een Over ons-pagina maken.
  De video bouwt de teampagina van een logistiek bedrijf.
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 teamoverzicht bouwen'
      description: |-
        Hier bouw je een teampagina: een gecentreerde kop, drie leiderschapskaarten met een LinkedIn-link onder de derde, en een raster van vier teamkaarten. Gebruik hem wanneer elke collega gemakkelijk te vinden moet zijn. Voor een korte teamsectie op je bedrijfspagina volg je in plaats daarvan Een Over ons-pagina maken.
        De video bouwt de teampagina van een logistiek bedrijf.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:01:18+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/team-directory'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
      description: |-
        Hier bouw je een teampagina: een gecentreerde kop, drie leiderschapskaarten met een LinkedIn-link onder de derde, en een raster van vier teamkaarten. Gebruik hem wanneer elke collega gemakkelijk te vinden moet zijn. Voor een korte teamsectie op je bedrijfspagina volg je in plaats daarvan Een Over ons-pagina maken.
        De video bouwt de teampagina van een logistiek bedrijf.
      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 teamoverzicht bouwen.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Een kaart toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/card)
- [Een social-links-element toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/social-links)
- [Een Over ons-pagina maken](/nl/hc/documentation/learn-dxpr-builder/tutorials/about-page)

Hier bouw je een teampagina: een gecentreerde kop, drie leiderschapskaarten met een LinkedIn-link onder de derde, en een raster van vier teamkaarten. Gebruik hem wanneer elke collega gemakkelijk te vinden moet zijn. Voor een korte teamsectie op je bedrijfspagina volg je in plaats daarvan [Een Over ons-pagina maken](/nl/hc/documentation/learn-dxpr-builder/tutorials/about-page).

De video bouwt de teampagina van een logistiek bedrijf.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- 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. Daarom gaan de sociale links erin vóór de kaart erboven.

## Stap 1: de header 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**. Kies onder **HTML-klassen** de optie **Align text center**, en klik daarna op **Opslaan**.
3. Klik op **+** op de sectie en kies **Tekst** op het tabblad **Inhoud**.
4. Typ “Ons team” als **Kop 2**, voeg één regel introductie toe 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/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: de leiderschapskaarten toevoegen

1. Beweeg over de sectie en klik op **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 de eerste kolom en kies **Kaart**. Open **More** > **Settings**, zet de **Header** op de rol en de **Titel** op de naam, en klik daarna op **Opslaan**.
4. Voeg op dezelfde manier een **Kaart** toe aan de tweede kolom.
5. Klik op **+** in de derde kolom en kies **Sociale links**. Deze komt met twee voorbeeldrijen. Typ `linkedin` over “Facebook” in de eerste rij en typ de profiel-URL ernaast. Verwijder de tweede rij met de **×** ervan, zet **Style** op **Circle** en **Size** op **2x**, en klik daarna op **Opslaan**.
6. Klik op **+** in dezelfde kolom en kies **Kaart**; deze belandt boven de links. Zet **Header** en **Titel** op dezelfde manier en klik op **Opslaan**.
7. Klik op **+** op de sectie en kies **Tekst**; deze belandt boven de rij. Typ “Leiderschap” als **Kop 2** en klik op **Opslaan**.

## Stap 3: het teamraster toevoegen

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen**, daarna een **Rij**. Klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/4 + 1/4 + 1/4 + 1/4** en klik op **Opslaan**.
2. Voeg een **Kaart** toe aan elke kolom. Open **More** > **Settings**, zet de rol als **Header** en de naam als **Titel**, en klik op **Opslaan**.
3. Klik op **+** op de sectie en kies **Tekst**; deze belandt boven de rij. Typ “Het team” als **Kop 2** en klik op **Opslaan**.

## Stap 4: 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:

- **Foto’s en biografieën**: 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. Vul het **alt-attribuut** in met de naam van de persoon.
- **Ronde foto’s**: zet bij elke afbeelding **Randradius** in het paneel **Stijl**. De waarde is in pixels, tot 100.
- **Optillen bij hover**: zet in het paneel **Hoverstijl** van de kaart **Slagschaduw** op 2.
- **Team dat zichzelf bijwerkt**: maak een contenttype “Teamlid” en een **Raster**-view met een blokweergave. Voeg de view in op het tabblad **Drupal-views**, en redacteuren voegen mensen toe zonder de pagina aan te raken.

## Wat je ziet

“Ons team” staat gecentreerd bovenaan. Op de grijze strook tonen drie leiderschapskaarten elk de rol in de header en de naam eronder, met een rond LinkedIn-pictogram onder de derde. “Het team” volgt met vier kaarten naast elkaar.

## Als je de pagina niet ziet zoals getoond

- **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.
- **Een sociale link toont “No matching brand icon found”.** Het merk is geen bekende pictogramnaam. Typ hem in kleine letters, zoals `linkedin`.
- **Het LinkedIn-pictogram staat boven de kaart.** De kaart ging erin vóór de links, en nieuwe elementen belanden bovenaan hun kolom. Sleep de kaart met de sleepgreep op de besturingsbalk boven de links.
- **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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## Wat nu?

- [Kaartelement](/nl/hc/documentation/learn-dxpr-builder/elements/card) voor kaarttypen en kindelementen
- [Element voor sociale links](/nl/hc/documentation/learn-dxpr-builder/elements/social-links) voor pictogramstijlen en -kleuren
- [Over ons-pagina](/nl/hc/documentation/learn-dxpr-builder/tutorials/about-page) om een kortere teamsectie op je bedrijfspagina te zetten