---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/dienstenpagina'
title: 'Een dienstenpagina bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:00:54+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een pagina met je aanbod. Deze heeft een header, drie diensten met pictogrammen, één dienst in detail naast een foto, klantlogo’s en een oproep tot actie. Gebruik hem wanneer je meerdere diensten verkoopt. Voor een pagina over één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen.
  De video bouwt de dienstenpagina van een digitaal bureau.
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 dienstenpagina bouwen'
      description: |-
        Hier bouw je een pagina met je aanbod. Deze heeft een header, drie diensten met pictogrammen, één dienst in detail naast een foto, klantlogo’s en een oproep tot actie. Gebruik hem wanneer je meerdere diensten verkoopt. Voor een pagina over één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen.
        De video bouwt de dienstenpagina van een digitaal bureau.
      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:54+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/dienstenpagina'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/dienstenpagina'
      description: |-
        Hier bouw je een pagina met je aanbod. Deze heeft een header, drie diensten met pictogrammen, één dienst in detail naast een foto, klantlogo’s en een oproep tot actie. Gebruik hem wanneer je meerdere diensten verkoopt. Voor een pagina over één aanbod volg je in plaats daarvan Een marketinglandingspagina bouwen.
        De video bouwt de dienstenpagina van een digitaal bureau.
      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 dienstenpagina bouwen.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een marketinglandingspagina bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina)
- [Een pictogram toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/pictogram)
- [Een marquee toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/marquee)

Hier bouw je een pagina met je aanbod. Deze heeft een header, drie diensten met pictogrammen, één dienst in detail naast een foto, klantlogo’s en een oproep tot actie. Gebruik hem wanneer je meerdere diensten verkoopt. Voor een pagina over één aanbod volg je in plaats daarvan [Een marketinglandingspagina bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina).

De video bouwt de dienstenpagina van een digitaal bureau.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een foto voor de dienst in detail en vier klantlogo’s.
- De pagina is open in de builder. Ga voor een nieuwe naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`) en klik op **Opslaan**.
- 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 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**. Beweeg erover, open **More** > **Settings**, kies de donkerblauwe **Achtergrond** in het paneel **Stijl** en klik op **Opslaan**.
2. Klik op **+** op de sectie en kies **Jumbotron** op het tabblad **Inhoud**.
3. Zet de **Titel** op “Onze diensten”, de **Lead** op één regel over je aanbod en het **Type** op **Primary**, en klik daarna op **Opslaan**.

## Stap 2: het dienstenoverzicht 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 **Tekst**. Typ “Design” als **Kop 3**, voeg één regel toe en klik op **Opslaan**.
4. Klik op **+** in dezelfde kolom en kies **Pictogram**; dit belandt boven de tekst. Kies de set **Font Awesome Free Solid**, zoek naar `palette` en klik op het pictogram. Zet **Size** op **Very Large (3x)**, open **Pictogramutilities**, zet **Style** op **Circle** en klik op **Opslaan**.
5. Herhaal voor “Development” met `code` en “Marketing” met `bullhorn`.

## Stap 3: één dienst in detail toevoegen

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen**, daarna een **Rij**; deze komt met twee gelijke kolommen.
2. Klik op **+** in de linkerkolom en kies **Afbeelding**. Klik op **Afbeelding selecteren**, vink een foto aan en klik op **Geselecteerde invoegen**. Typ het **alt-attribuut** in het paneel **SEO** en klik op **Opslaan**.
3. Klik op **+** in de rechterkolom en kies **Knop**. Zet **Titel** op “Vraag een offerte aan”, **Link** op `/contact` en **Type** op **Primary**, en klik daarna op **Opslaan**.
4. Klik opnieuw op **+** in de rechterkolom en kies **Tekst**; deze belandt boven de knop. Typ “Design” als **Kop 2**, voeg de beschrijving toe en wat erbij zit, en klik op **Opslaan**.

## Stap 4: de klantlogo’s toevoegen

1. Voeg een vierde sectie toe en open **More** > **Settings**. Kies **Align text center** onder **HTML-klassen** en een lichtgrijze **Achtergrond** in het paneel **Stijl**. Klik op **Opslaan**.
2. Klik op **+** op de sectie en kies **Marquee**. Verwijder de drie voorbeeldafbeeldingen met de **×** op elk. Klik op **Afbeelding selecteren**, zoek je logo’s, vink er vier aan en klik op **Geselecteerde invoegen**. Zet **Grijswaarden** aan en klik op **Opslaan**.
3. Klik opnieuw op **+** op de sectie en kies **Tekst**; deze belandt boven de marquee. Typ “Vertrouwd door toonaangevende merken” als **Kop 2** en klik op **Opslaan**.

## Stap 5: de oproep tot actie toevoegen

1. Voeg een vijfde 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 “Plan een adviesgesprek”, **Link** op `/contact`, **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 “Klaar om te beginnen?” als **Kop 2** en voeg één regel toe. Zet **Tekstkleur** op wit en klik 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**.

## Verder gaan

Niet getoond in de video:

- **Eén detailsectie per dienst**: herhaal stap 3 voor Development en Marketing. Zet **Rij spiegelen** aan in de instellingen van elke tweede rij, zodat de foto’s op tablets en desktops van kant wisselen.
- **Ankerlinks**: geef elke detailsectie een **HTML-id** (`design`, `development`, `marketing`). Voeg een **Knop** toe onder elke overzichtstekst met **Link** `#design` enzovoort.
- **Testimonials**: voeg een **Blokcitaat** per klant toe boven de logo’s.

## Wat je ziet

Een donkerblauwe strook opent de pagina, met “Onze diensten” in grote witte letters boven een samenvatting van één regel. Drie gecentreerde diensten volgen, elk een omcirkeld pictogram boven naam en regel. Design krijgt een eigen strook met een foto, een beschrijving en **Vraag een offerte aan**. Grijze klantlogo’s scrollen voorbij op een lichte strook, en een paarse strook sluit de pagina af.

## Als je de pagina niet ziet zoals getoond

- **De marquee toont nog de voorbeeldlogo’s.** De drie voorbeeldafbeeldingen blijven tot je ze verwijdert. Open de instellingen van de marquee, klik op de **×** op elke voorbeeldafbeelding en sla op.
- **De logo’s hebben kleur.** **Grijswaarden** staat uit. Open de instellingen van de marquee, zet het aan en klik op **Opslaan**.
- **De pictogrammen hebben geen cirkel.** **Stijl** staat in het paneel **Pictogramutilities**, niet in **Algemeen**. Open de instellingen van het pictogram, open **Pictogramutilities** en zet **Stijl** op **Circle**.
- **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?

- [Landingspagina](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina) voor een eigen pagina per dienst
- [Pictogramelement](/nl/hc/documentation/learn-dxpr-builder/elements/icon) voor groottes en stijlen
- [Marquee-element](/nl/hc/documentatie/dxpr-builder-leren/elementen/marquee) voor de instellingen van de logostrook