---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
title: 'Build a portfolio gallery | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Project grid with a call to action'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Build a portfolio gallery'
      description: 'Project grid with a call to action'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      description: 'Project grid with a call to action'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build a portfolio gallery.

Project grid with a call to action

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Drupal Views](/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [Case study](/hc/documentation/learn-dxpr-builder/tutorials/case-study)
- [Image](/hc/documentation/learn-dxpr-builder/elements/image)

Here you build a portfolio page: a centred heading, three projects side by side with a cover photo and a one-line result each, and a call to action. Use it to show your work at a glance and link each project to its story. To write up one project in depth, follow [Write up a case study](/hc/documentation/learn-dxpr-builder/tutorials/case-study).

The video builds an agency page called "Our work".

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a cover photo for each project, cropped to the same proportions.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their column, so each cover photo goes in after its text.

## Step 1: add the header

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Hover the section and open **More** > **Settings**. Under **HTML classes** pick **Align text center**, then click **Save**.
3. Click **+** on the section and pick **Text** from the **Content** tab.
4. Type "Our work" as **Heading 2**, add one line of introduction and click **Save**. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Step 2: add the project grid

1. Hover the section and click **Add Section Below**. Open the new section's **More** > **Settings**, pick a light grey **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Row**; it arrives with two equal columns. Click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Click **+** in the first column and pick **Text**. Type the project name as **Heading 3**, add the one-line result and click **Save**.
4. Click **+** in the same column and pick **Image**; it lands above the text. Click **Select Image**, tick the cover photo and click **Insert selected**. Type the **Alt attribute** in the **SEO** panel and click **Save**.
5. Repeat for the second and third column.

## Step 3: add the call to action

1. Add a third section with **Add Section Below** and open its **More** > **Settings**. Pick **Align text center** under **HTML classes**, then the purple **Background** and white **Font color** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Button**. Set **Title** to "Contact us", **Link** to `/contact`, **Type** to **Light** and **Size** to **Large**, then click **Save**.
3. Click **+** again and pick **Text**; it lands above the button. Type "Let's work together" as **Heading 2** and add one line. Set **Font color** to white in the **Style** panel and click **Save**.

## Step 4: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Link each project**: set **Image link** on the cover photo to the case study page.
- **Lift on hover**: in each image's **Style** panel set **Border radius** to 4 and **Drop shadow** to 1. In **Hover style** raise **Drop shadow** to 3.
- **More projects**: add another **Row** with the same preset under the first.

## Make the grid filterable

The static grid suits a handful of projects. To let visitors filter by type, store each project as content and show them with a View that has an exposed filter. Views is part of Drupal core.

### 1. Create the Portfolio content type

1. Go to **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Name it "Portfolio" and save.
3. On the **Manage fields** tab, add an **Image** field labelled "Cover image".
4. Add a **List (text)** field labelled "Project type" with values such as `web|Web`, `branding|Branding` and `campaign|Campaign`.
5. Create a few Portfolio items at **Content** > **Add content** > **Portfolio**.

### 2. Build the View

1. Go to **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Name it "Portfolio grid"; under **View settings** show **Content** of type **Portfolio**.
3. Tick **Create a block**, set the display format to **Grid** of **fields** and save.
4. In the view editor, add the fields **Cover image** and **Title**, and set the grid to 3 columns in its format settings.
5. Under **Filter criteria**, click **Add**, choose **Project type** and tick **Expose this filter to visitors**. Label it "Filter by type".
6. Under **Advanced**, set **Use AJAX** to Yes. Exposed filters in a builder page work only through AJAX.
7. Save the view.

### 3. Insert the View in the page

1. Back in DXPR Builder, empty the three static columns or add a new **Row**.
2. Click **+**, open the **Drupal Views** tab and pick **View: Portfolio grid (Block)**.
3. In the settings dialog, tick **Show exposed filters** and click **Save**. The grid renders with the "Filter by type" dropdown above it, and new Portfolio items appear on their own.
4. Click **Save** on the builder toolbar.

## What you see

The centred "Our work" heading opens the page. On the grey band below, three projects stand side by side, each a cover photo over its name and result. A purple band closes the page with **Contact us**.

## If you don't see the page as shown

- **A cover photo sits below its text.** The photo went in before the text, and new elements land at the top of their column. Drag the photo above the text by the drag handle on its control bar.
- **The covers have different heights.** Their proportions differ. Crop them to the same proportions, upload them again and pick the new copies.
- **Portfolio grid is not in the Drupal Views tab.** The view is disabled, or your builder user profile hides it. Enable it at **Structure** > **Views**, or ask an administrator to tick it under **Views** in your user profile.
- **The editor shows "Turn on Ajax on this view to use exposed filters."** The view does not use AJAX. Set **Use AJAX** to Yes under **Advanced** in the view editor; see [An element looks or behaves wrong](/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **The "Filter by type" dropdown is missing.** **Show exposed filters** is off on the element. Open the view element's settings, tick it and click **Save**.

## What's next?

- [Drupal Views integration](/hc/documentation/learn-dxpr-builder/integrations/drupal-views) for how view displays reach the element picker
- [Case study](/hc/documentation/learn-dxpr-builder/tutorials/case-study) for the page each project links to
- [Image element](/hc/documentation/learn-dxpr-builder/elements/image) for every image setting