---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: 'Write up a case study | 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: 'Challenge, solution, results format'
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: 'Write up a case study'
      description: 'Challenge, solution, results format'
      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/case-study'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: 'Challenge, solution, results format'
      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) # Write up a case study.

Challenge, solution, results format

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Blockquote](/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Number Counter](/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [Portfolio](/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

Here you write up one client project in three parts: the challenge, the solution and the results. You end with seven bands: a photo hero, an overview with the main number, the challenge, the solution beside a photo, three counters, a quote and a call to action. To show many projects on one page, follow [Build a portfolio gallery](/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) instead.

The video writes up an agency's work for Northwind Retail.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a wide photo for the hero and a photo of what you delivered.
- 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 section or column. Add the elements of a column in reverse order, or drag them into place afterwards.

## Step 1: add the hero

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab. Hover it and open **More** > **Settings**.
2. Under **HTML classes** pick **Align text center**.
3. Open the **Style** panel. Under **Background image** click **Select Image**, tick a photo and click **Insert selected**. Set **Background style** to **Cover**.
4. Pick a dark navy **Background** and a white **Font color**, then click **Save**. The colour shows while the photo loads.
5. Click **+** on the section and pick **Button**. Set **Title** to "Visit the site", **Link** to the client's URL, **Type** to **Light** and **Size** to **Large**, then click **Save**.
6. Click **+** again and pick **Text**; it lands above the button. Type the client name as **Heading 2** and a one-line summary below it. Set **Font color** to white in the **Style** panel 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 overview

1. Hover the hero and click **Add Section Below**. Add a **Row** to the new section, click its grid icon (**Column layout**), pick the **2/3 + 1/3** preset and click **Save**.
2. Click **+** in the wide column and pick **Text**. Type "Overview" as **Heading 2**, add the summary and click **Save**.
3. Click **+** in the narrow column and pick **Text**. Type the metric's label, "More online orders", and click **Save**.
4. Click **+** in the narrow column again and pick **Number counter**; it lands above the label. Set **End** to 32, **Suffix** to %, **Thousands separator** to **Comma**, set **Speed** to 2500, then click **Save**.

The counter has no label field of its own; the Text element under it does that job.

## Step 3: add the challenge

1. Add a third section with **Add Section Below**. Open its **More** > **Settings**, pick a light grey **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Text**. Type "The challenge" as **Heading 2**, describe the problem and click **Save**.

## Step 4: add the solution

1. Add a fourth section, then a **Row**; it arrives with two equal columns.
2. Click **+** in the left column and pick **Text**. Type "The solution" as **Heading 2**, describe what you built and click **Save**.
3. Click **+** in the right column and pick **Image**. Click **Select Image**, tick a photo of the deliverable and click **Insert selected**. Type the **Alt attribute** in the **SEO** panel and click **Save**.

## Step 5: add the results

1. Add a fifth section and open its **More** > **Settings**. Pick **Align text center** under **HTML classes**, then the navy **Background** and white **Font color** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Row**. Click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. In each column, add a **Text** label first, then a **Number counter** above it, as in Step 2: **End** 32 with **Suffix** %, **End** 2 with **Suffix** s, and **End** 15000.

## Step 6: add the quote

1. Add a sixth section.
2. Click **+** on the section and pick **Block quote**. Type the client's words, fill in **Cite** with their name and role, and click **Save**.

## Step 7: add the call to action

1. Add a seventh section 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 "Ready to get started?" as **Heading 2** and add one line. Set **Font color** to white and click **Save**.

## Step 8: save and preview

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

## What you see

The client name and the **Visit the site** button sit centred on the photo. The overview shows 32% beside its summary; visitors see it count up when it scrolls into view. The challenge stands on a grey band, and the solution sits beside its photo.

On the navy band the three results count up as they scroll into view: 32%, 2s and 15,000. The client quote and a purple **Contact us** band close the page.

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

- **The hero photo does not fill the section.** **Background style** is still on **Theme defaults**. Open the section's **Style** panel and set it to **Cover**.
- **The last counter reads 15000 without a comma.** **Thousands separator** is still on **None**. Open the counter's settings and pick **Comma**.
- **A label sits above its counter.** The counter went in before its label, and new elements land at the top of their column. Drag the label below the counter by the drag handle on its control bar.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Blockquote element](/hc/documentation/learn-dxpr-builder/elements/blockquote) for testimonial styling options
- [Number counter element](/hc/documentation/learn-dxpr-builder/elements/number-counter) for every counter setting
- [Portfolio](/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) to list all your case studies on one page