---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/portfoliogalerij'
title: 'Een portfoliogalerij maken | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:10+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een portfoliopagina: een gecentreerde kop, drie projecten naast elkaar elk met een omslagfoto en een resultaat van één regel, en een oproep tot actie. Gebruik hem om je werk in één oogopslag te tonen en link elk project aan zijn verhaal. Om één project uitgebreid te beschrijven, volg je Een klantverhaal schrijven.
  De video bouwt een bureaupagina genaamd “Ons werk”.
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 portfoliogalerij maken'
      description: |-
        Hier bouw je een portfoliopagina: een gecentreerde kop, drie projecten naast elkaar elk met een omslagfoto en een resultaat van één regel, en een oproep tot actie. Gebruik hem om je werk in één oogopslag te tonen en link elk project aan zijn verhaal. Om één project uitgebreid te beschrijven, volg je Een klantverhaal schrijven.
        De video bouwt een bureaupagina genaamd “Ons werk”.
      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:10+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/portfoliogalerij'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/portfoliogalerij'
      description: |-
        Hier bouw je een portfoliopagina: een gecentreerde kop, drie projecten naast elkaar elk met een omslagfoto en een resultaat van één regel, en een oproep tot actie. Gebruik hem om je werk in één oogopslag te tonen en link elk project aan zijn verhaal. Om één project uitgebreid te beschrijven, volg je Een klantverhaal schrijven.
        De video bouwt een bureaupagina genaamd “Ons werk”.
      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 portfoliogalerij maken.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een Drupal-view op je pagina tonen](/nl/hc/documentatie/dxpr-builder-leren/integraties/drupal-views)
- [Een klantverhaal schrijven](/nl/hc/documentatie/dxpr-builder-leren/tutorials/klantverhaal)
- [Een afbeelding toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeelding)

Hier bouw je een portfoliopagina: een gecentreerde kop, drie projecten naast elkaar elk met een omslagfoto en een resultaat van één regel, en een oproep tot actie. Gebruik hem om je werk in één oogopslag te tonen en link elk project aan zijn verhaal. Om één project uitgebreid te beschrijven, volg je [Een klantverhaal schrijven](/nl/hc/documentatie/dxpr-builder-leren/tutorials/klantverhaal).

De video bouwt een bureaupagina genaamd “Ons werk”.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat een omslagfoto voor elk project, bijgesneden tot dezelfde verhoudingen.
- 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 kolom, dus elke omslagfoto gaat erin na zijn tekst.

## 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 werk” 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/documentatie/dxpr-builder-leren/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: het projectraster 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**; deze komt met twee gelijke kolommen. 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 de projectnaam als **Kop 3**, voeg het resultaat van één regel toe en klik op **Opslaan**.
4. Klik op **+** in dezelfde kolom en kies **Afbeelding**; deze belandt boven de tekst. Klik op **Afbeelding selecteren**, vink de omslagfoto aan en klik op **Geselecteerde invoegen**. Typ het **alt-attribuut** in het paneel **SEO** en klik op **Opslaan**.
5. Herhaal voor de tweede en derde kolom.

## Stap 3: de oproep tot actie toevoegen

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen** 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 met ons op”, **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 “Laten we samenwerken” als **Kop 2** en voeg één regel toe. Zet **Tekstkleur** op wit in het paneel **Stijl** 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:

- **Link elk project**: zet bij de omslagfoto **Afbeeldingslink** naar de klantverhaalpagina.
- **Optillen bij hover**: zet in het paneel **Stijl** van elke afbeelding **Randradius** op 4 en **Slagschaduw** op 1. Verhoog in **Hoverstijl** de **Slagschaduw** naar 3.
- **Meer projecten**: voeg nog een **Rij** met dezelfde preset toe onder de eerste.

## Maak het raster filterbaar

Het statische raster past bij een handvol projecten. Om bezoekers op type te laten filteren, sla je elk project op als inhoud en toon je ze met een view met een exposed filter. Views is deel van Drupal-core.

### 1. Het contenttype Portfolio aanmaken

1. Ga naar **Structuur** > **Contenttypen** > **Contenttype toevoegen** (`/admin/structure/types/add`).
2. Noem het “Portfolio” en sla op.
3. Voeg op het tabblad **Velden beheren** een **Afbeelding**-veld toe met het label “Omslagafbeelding”.
4. Voeg een veld **Lijst (tekst)** toe met het label “Projecttype” en waarden zoals `web|Web`, `branding|Branding` en `campaign|Campaign`.
5. Maak een paar Portfolio-items bij **Inhoud** > **Inhoud toevoegen** > **Portfolio**.

### 2. De view bouwen

1. Ga naar **Structuur** > **Weergaven** > **View toevoegen** (`/admin/structure/views/add`).
2. Noem hem “Portfolio grid”; toon onder **View-instellingen** **Inhoud** van het type **Portfolio**.
3. Vink **Blok aanmaken** aan, zet het weergaveformaat op **Raster** van **velden** en sla op.
4. Voeg in de view-editor de velden **Omslagafbeelding** en **Titel** toe, en zet het raster in de formaatinstellingen op 3 kolommen.
5. Klik onder **Filtercriteria** op **Toevoegen**, kies **Projecttype** en vink **Deze filter tonen aan bezoekers** aan. Noem het “Filteren op type”.
6. Zet onder **Geavanceerd** **Use AJAX** op Yes. Exposed filters in een builderpagina werken alleen via AJAX.
7. Sla de view op.

### 3. De view invoegen in de pagina

1. Leeg in DXPR Builder de drie statische kolommen of voeg een nieuwe **Rij** toe.
2. Klik op **+**, open het tabblad **Drupal-views** en kies **View: Portfolio grid (Block)**.
3. Vink in de instellingendialoog **Exposed filters tonen** aan en klik op **Opslaan**. Het raster toont met de dropdown “Filteren op type” erboven, en nieuwe Portfolio-items verschijnen vanzelf.
4. Klik op **Opslaan** op de werkbalk van de builder.

## Wat je ziet

De gecentreerde kop “Ons werk” opent de pagina. Op de grijze strook eronder staan drie projecten naast elkaar, elk een omslagfoto boven naam en resultaat. Een paarse strook sluit de pagina af met **Neem contact met ons op**.

## Als je de pagina niet ziet zoals getoond

- **Een omslagfoto staat onder zijn tekst.** De foto ging erin vóór de tekst, en nieuwe elementen belanden bovenaan hun kolom. Sleep de foto met de sleepgreep op de besturingsbalk boven de tekst.
- **De omslagen hebben verschillende hoogtes.** De verhoudingen verschillen. Snijd ze bij tot dezelfde verhoudingen, upload ze opnieuw en kies de nieuwe exemplaren.
- **Portfolio grid staat niet op het tabblad Drupal-views.** De view is uitgeschakeld, of je gebruikersprofiel voor de builder verbergt hem. Schakel hem in bij **Structuur** > **Weergaven**, of vraag een beheerder hem aan te vinken onder **Weergaven** in je gebruikersprofiel.
- **De editor toont “Turn on Ajax on this view to use exposed filters.”** De view gebruikt geen AJAX. Zet **Use AJAX** op Yes onder **Geavanceerd** in de view-editor; zie [Een element ziet er verkeerd uit of gedraagt zich verkeerd](/nl/hc/documentatie/dxpr-builder-leren/probleemoplossing/elementen-zien-er-verkeerd-uit).
- **De dropdown “Filteren op type” ontbreekt.** **Exposed filters tonen** staat uit op het element. Open de instellingen van het view-element, vink het aan en klik op **Opslaan**.

## Wat nu?

- [Drupal-views-integratie](/nl/hc/documentation/learn-dxpr-builder/integrations/drupal-views) voor hoe viewweergaven in de elementenkiezer komen
- [Klantverhaal](/nl/hc/documentatie/dxpr-builder-leren/tutorials/klantverhaal) voor de pagina waarnaar elk project linkt
- [Afbeeldingselement](/nl/hc/documentation/learn-dxpr-builder/elements/image) voor elke afbeeldingsinstelling