---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
title: 'Een indeling met meerdere kolommen bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:37+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je één pagina met de vier kolomindelingen die je het meest gebruikt: inhoud met een zijbalk, twee gelijke helften, drie derden en vier kwarten. Elk krijgt een kop erboven. Gebruik hem om te leren welke preset bij welke inhoud past. Voor elke rij-instelling, zie Rijen en kolommen.
  De video bouwt de afvalinzamelingspagina van een gemeente.
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 indeling met meerdere kolommen bouwen'
      description: |-
        Hier bouw je één pagina met de vier kolomindelingen die je het meest gebruikt: inhoud met een zijbalk, twee gelijke helften, drie derden en vier kwarten. Elk krijgt een kop erboven. Gebruik hem om te leren welke preset bij welke inhoud past. Voor elke rij-instelling, zie Rijen en kolommen.
        De video bouwt de afvalinzamelingspagina van een gemeente.
      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:37+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/multi-column-content'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      description: |-
        Hier bouw je één pagina met de vier kolomindelingen die je het meest gebruikt: inhoud met een zijbalk, twee gelijke helften, drie derden en vier kwarten. Elk krijgt een kop erboven. Gebruik hem om te leren welke preset bij welke inhoud past. Voor elke rij-instelling, zie Rijen en kolommen.
        De video bouwt de afvalinzamelingspagina van een gemeente.
      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 indeling met meerdere kolommen bouwen.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Een rij toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Een sectie toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/sections)

Hier bouw je één pagina met de vier kolomindelingen die je het meest gebruikt: inhoud met een zijbalk, twee gelijke helften, drie derden en vier kwarten. Elk krijgt een kop erboven. Gebruik hem om te leren welke preset bij welke inhoud past. Voor elke rij-instelling, zie [Rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

De video bouwt de afvalinzamelingspagina van een gemeente.

  ## 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. Daarom gaat elke kop erin na zijn rij: die belandt erboven.

## Kies een indeling

| Indeling | Beste voor | Preset |
|---|---|---|
| Inhoud met een zijbalk | artikelen met gerelateerde links | **2/3 + 1/3** |
| Twee gelijke helften | vergelijkingen, voor en na | de standaard van de rij |
| Drie gelijke derden | uitgelichte functies, diensten | **1/3 + 1/3 + 1/3** |
| Vier gelijke kwarten | statistieken, kleine kaarten | **1/4 + 1/4 + 1/4 + 1/4** |

Een nieuwe **Rij** komt met twee gelijke kolommen. Elke andere indeling komt uit het rasterpictogram van de rij (**Kolomindeling**).

## Stap 1: inhoud met een zijbalk

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**.
2. Klik op **+** op de sectie en kies **Rij**. Klik op het rasterpictogram (**Kolomindeling**), kies de preset **2/3 + 1/3** en klik op **Opslaan**.
3. Klik op **+** in de brede kolom en kies **Tekst** op het tabblad **Inhoud**. Typ het artikel, zet de eerste regel op **Kop 3** en klik op **Opslaan**.
4. Klik op **+** in de smalle kolom en kies **Tekst**. Typ “Gerelateerd” als **Kop 4**, voeg één regel per gerelateerde pagina toe en klik op **Opslaan**.
5. Klik op **+** op de sectie en kies **Tekst**; deze belandt boven de rij. Typ “Inhoud met een zijbalk” als **Kop 2** en klik op **Opslaan**.

## Stap 2: twee gelijke helften

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**. Twee gelijke kolommen is de standaard, dus er is niets te wijzigen.
3. Voeg een **Tekst**-element toe in elke kolom: “Voor” en “Na” als **Kop 4** met elk één regel.
4. Voeg de kop “Twee gelijke helften” toe zoals in stap 1.

## Stap 3: drie gelijke derden

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen** en geef hem de klasse **Align text center**.
2. Voeg een **Rij** toe, klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**.
3. Voeg een **Tekst**-element toe in elke kolom: “Papier”, “Glas” en “GFT” als **Kop 4** met elk één regel.
4. Voeg de kop “Drie gelijke derden” toe.

## Stap 4: vier gelijke kwarten

1. Voeg een vierde sectie toe met een lichtgrijze **Achtergrond** en de klasse **Align text center**.
2. Voeg een **Rij** toe, klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/4 + 1/4 + 1/4 + 1/4** en klik op **Opslaan**.
3. Voeg een **Tekst**-element toe in elke kolom: de dag als **Kop 4** en wat wordt opgehaald.
4. Voeg de kop “Vier gelijke kwarten” toe.

## 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**.

## Op kleinere schermen

Kolommen staan naast elkaar vanaf 768 pixels breed, dus tablets tonen dezelfde indeling als desktops. Op telefoons neemt elke kolom de volle breedte, en de kolommen stapelen in hun volgorde. Voor een andere indeling op tablets klik je op het rasterpictogram van de rij (**Kolomindeling**) en kies je **Schermgrootte toevoegen**.

## Verder gaan

Niet getoond in de video:

- **Smal, breed, smal**: de preset **1/4 + 1/2 + 1/4** houdt lange tekst leesbaar met lege marges.
- **Rij spiegelen**: zet het aan in de instellingen van de rij om de kolommen te wisselen op tablets en desktops. Telefoons behouden de oorspronkelijke volgorde, dus de eerste kolom komt daar nog steeds eerst.

## Wat je ziet

Vier stroken volgen elkaar, elk met zijn kop bovenaan. Het artikel en de gerelateerde links delen de eerste, twee helften staan op grijs, en drie gecentreerde derden komen daarna. Vier gecentreerde kwarten op grijs sluiten de pagina af.

## Als je de kolommen niet ziet zoals getoond

- **De rij heeft het verkeerde aantal kolommen.** De preset geldt pas wanneer je op **Opslaan** klikt in de indelingendialoog. Klik opnieuw op het rasterpictogram (**Kolomindeling**) van de rij, kies de preset en klik op **Opslaan**.
- **Een kop staat onder zijn rij.** De kop ging erin vóór de rij, en nieuwe elementen belanden bovenaan hun sectie. Sleep de kop met de sleepgreep op de besturingsbalk boven de rij.
- **De kolommen stapelen op een tablet.** De tablet is smaller dan 768 pixels, zoals een kleine tablet in portret. Voeg een indeling voor die breedte toe met **Schermgrootte toevoegen** in de indelingendialoog van de rij.
- **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?

- [Rijen en kolommen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) voor elke rij-instelling
- [Secties](/nl/hc/documentation/learn-dxpr-builder/layout/sections) voor sectieachtergronden en -breedten