Skip to content

Write up a case study

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

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.

What's next?

Something wrong or missing on this page? Report it or edit the page.