---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
title: 'Een kennisbank bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:41+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je de voorpagina van een helpcentrum: een donkerblauwe header, drie categoriekaarten elk met een pictogram, twee lijsten met populaire artikelen en een supportoproep. Gebruik hem wanneer je hulp over veel artikelen is verspreid. Voor een korte lijst met vragen en antwoorden volg je in plaats daarvan Een veelgestelde-vragenpagina bouwen.
  De video bouwt het helpcentrum van een softwareproduct.
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 kennisbank bouwen'
      description: |-
        Hier bouw je de voorpagina van een helpcentrum: een donkerblauwe header, drie categoriekaarten elk met een pictogram, twee lijsten met populaire artikelen en een supportoproep. Gebruik hem wanneer je hulp over veel artikelen is verspreid. Voor een korte lijst met vragen en antwoorden volg je in plaats daarvan Een veelgestelde-vragenpagina bouwen.
        De video bouwt het helpcentrum van een softwareproduct.
      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:41+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/knowledge-base'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
      description: |-
        Hier bouw je de voorpagina van een helpcentrum: een donkerblauwe header, drie categoriekaarten elk met een pictogram, twee lijsten met populaire artikelen en een supportoproep. Gebruik hem wanneer je hulp over veel artikelen is verspreid. Voor een korte lijst met vragen en antwoorden volg je in plaats daarvan Een veelgestelde-vragenpagina bouwen.
        De video bouwt het helpcentrum van een softwareproduct.
      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 kennisbank bouwen.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Drupal-blokken: formulieren, menu's en inhoudsblokken](/nl/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)
- [Een veelgestelde-vragenpagina bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/faq-page)
- [Een link toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/link)

Hier bouw je de voorpagina van een helpcentrum: een donkerblauwe header, drie categoriekaarten elk met een pictogram, twee lijsten met populaire artikelen en een supportoproep. Gebruik hem wanneer je hulp over veel artikelen is verspreid. Voor een korte lijst met vragen en antwoorden volg je in plaats daarvan [Een veelgestelde-vragenpagina bouwen](/nl/hc/documentation/learn-dxpr-builder/tutorials/faq-page).

De video bouwt het helpcentrum van een softwareproduct.

  ## 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. Voeg de elementen van een kolom in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

## 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**. Kies in het paneel **Stijl** de donkerblauwe **Achtergrond** en witte **Tekstkleur**, en klik daarna op **Opslaan**.
3. Klik op **+** op de sectie en kies **Tekst**. Typ “Helpcentrum” als **Kop 2** en voeg “Waar kunnen we je vandaag mee helpen?” toe. 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/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: de categorieën toevoegen

1. Beweeg over de sectie en klik op **Sectie hieronder toevoegen**. Geef de nieuwe sectie de klasse **Align text center**.
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 categorienaam en de **Titel** op het aantal artikelen, en klik daarna op **Opslaan**.
4. Klik op **+** in dezelfde kolom en kies **Pictogram**; dit belandt boven de kaart. Kies de set **Font Awesome Free Solid**, zoek naar `rocket` en klik op het pictogram. Zet **Size** op **Extra Large (2x)** en klik op **Opslaan**.
5. Herhaal voor de tweede kolom met `credit-card` en de derde met `screwdriver-wrench`.

## Stap 3: de populaire artikelen 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**; deze komt met twee gelijke kolommen.
3. Klik op **+** in elke kolom en kies **Tekst**. Typ drie artikeltitels, één per regel, en klik op **Opslaan**.
4. Klik op **+** op de sectie en kies **Tekst**; deze belandt boven de rij. Typ “Populaire artikelen” als **Kop 2** en klik op **Opslaan**.

## Stap 4: de supportoproep 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 “Neem contact op met support”, **Link** op `/support`, **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 “Kun je niet vinden wat je nodig hebt?” 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:

- **Zoekvak**: schakel de core-module **Zoeken** in bij **Uitbreiden**. Klik op **+** in de headersectie, open het tabblad **Drupal-blokken** en kies **Block: Forms: Search form**. Bezoekers belanden op `/search/node`.
- **Klikbare kaarten**: voeg eerst een element **Link** toe aan de kolom en zet de **Link** op de categoriepagina. Voeg daarna de **Kaart** erin toe.
- **Artikellinks**: selecteer elke titel in de lijsten en link hem met de linkknop op de werkbalk.
- **Meer categorieën**: voeg een tweede **Rij** toe met dezelfde preset. Veelvoorkomende zijn De editor gebruiken, Sjablonen en ontwerp, en API en ontwikkeling.

## Wat je ziet

De donkerblauwe header begroet bezoekers met “Helpcentrum” in het wit. Drie gecentreerde categorieën volgen, elk een pictogram boven een kaart met naam en aantal artikelen. Een grijze strook toont zes populaire artikelen in twee kolommen, en een paarse strook biedt **Neem contact op met support**.

## 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 pictogram staat onder zijn kaart.** Het pictogram ging erin vóór de kaart, en nieuwe elementen belanden bovenaan hun kolom. Sleep het pictogram met de sleepgreep op de besturingsbalk boven de kaart.
- **De kop blijft donker op donkerblauw.** Het Tekst-element heeft geen eigen **Tekstkleur**. Open het paneel **Stijl** en zet **Tekstkleur** op wit.
- **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?

- [Drupal-blokkenintegratie](/nl/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) voor andere blokken die je kunt invoegen
- [Veelgestelde-vragenpagina](/nl/hc/documentation/learn-dxpr-builder/tutorials/faq-page) voor uitvouwbare antwoorden in een categoriepagina
- [Linkelement](/nl/hc/documentation/learn-dxpr-builder/elements/link) voor de klikbare wikkel rond een kaart