---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/about-page'
title: 'Create an About Us page | 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: 'Company story, team, mission statement'
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: 'Create an About Us page'
      description: 'Company story, team, mission statement'
      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/about-page'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/about-page'
      description: 'Company story, team, mission statement'
      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) # Create an About Us page.

Company story, team, mission statement

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Team directory](/hc/documentation/learn-dxpr-builder/tutorials/team-directory)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)

Here you build an About Us page: a mission header, your story beside a photo, three numbers that count up, team cards and a closing call to action. Use it when one page should tell visitors who you are. For a page that lists every colleague, follow [Build a team directory](/hc/documentation/learn-dxpr-builder/tutorials/team-directory) instead.

The video builds the page for a design studio in Rotterdam.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a photo of your office, team or product.
- The page exists: go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`), type "About Us" as the **Title** and click **Save**. The page opens with the builder on it.
- On DXPR CMS, hide the theme's page title on this page: in its edit form, open **DXPR Theme Settings** and tick **Page Title** under **DXPR Hide Regions**. The Jumbotron **Title** is then the page's only Heading 1, as [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2) explains.
- New elements land at the top of their section or column. Add the rows of a section, or the elements of a column, in reverse order, or drag them into place afterwards.

## Step 1: add a mission statement header

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Hover the section and open **More** > **Settings**. Open the **Style** panel, pick a dark **Background** swatch and click **Save**.
3. Click **+** on the section and pick **Jumbotron** from the **Content** tab.
4. Type your mission statement as the **Title**: "We build websites people enjoy using".
5. Type a supporting sentence in the **Lead** field: "A 24-person studio in Rotterdam working with brands across Europe since 2012."
6. Set **Type** to **Primary** for white text on your primary colour, then click **Save**.

## Step 2: tell your company story

1. Hover the section and click **Add Section Below**, the **+** under it.
2. Click **+** on the new section and pick **Row**; it arrives with two equal columns. Click the grid icon (**Column layout**) on the row, pick the **2/3 + 1/3** preset and click **Save**.
3. Click **+** in the wider column and pick **Text**. Type "Our story" as **Heading 2**, then two short paragraphs: how you started and how a project runs. Click **Save**.
4. Click **+** in the narrower column and pick **Image**.
5. Click **Select Image**, search the media library with **Apply filters**, tick a photo of your office or team and click **Insert selected**.
6. Open the **SEO** panel, fill in the **Alt attribute** and click **Save**.

**Tip**

Keep the story short and break it up with a subheading. Visitors scan before they read.

## Step 3: add key stats with counters

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 **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** element with the label of the stat: "Projects delivered", "Years in business", "Clients who return".
4. In each column, click **+** again and pick **Number counter**; it lands above the label. Set:
    - **End**: the stat (140, 12, 98)
    - **Suffix**: "+" or "%" where it applies
    - **Thousands separator**: **Comma**
    - **Speed**: 2500, the milliseconds the count takes
5. Click **Save** on each counter.

The counter has no label field of its own, which is why a Text element sits below it.

## Step 4: build a team section

1. Add a fourth section with **Add Section Below**.
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, click **+** and pick **Card**. Open its **More** > **Settings**, set **Header** to the person's name ("Sofia Andersen") and **Title** to their role ("Creative Director"), then click **Save**.
4. Click **+** on the section itself and pick **Text**; it lands above the card row. Type "Meet the team" as **Heading 2**, centre it and click **Save**.

## Step 5: add a closing section

1. Add a final section with **Add Section Below** and open its **More** > **Settings**. Under **HTML classes** pick **Align text center**, so the text and the button centre together. In the **Style** panel pick your brand colour as **Background** and white as **Font color**, then click **Save**.
2. Click **+** on the section and pick **Button**. Set **Title** to "Get in touch", **Link** to `/contact`, **Type** to **Light** and **Size** to **Large**, then click **Save**.
3. Click **+** on the section again and pick **Text**; it lands above the button. Type "Want to work with us?" as **Heading 2**, then "We take on a handful of new clients each quarter." In the **Style** panel set **Font color** to white, then click **Save**.

## Step 6: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.
3. Scroll through the page to check every section.

## Go further

Not shown in the video, but worth adding:

- A bio **Text** and a headshot **Image** inside each card, and **Social links** below it
- **100% height** in the first section's settings for a header that fills the screen

## What you see

The preview shows five bands. The dark header carries your mission statement and its lead in white. Your story sits beside the photo. On the grey band the three numbers count up from zero when they scroll into view.

The team heading sits centred above three cards, each with a name and a role. The closing band centres a white heading over a light **Get in touch** button. Choose **Edit** in the eye menu to keep working.

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

- **There is no Add Elements button on the empty page.** The page creation assistant is turned off, so the page offers only **Choose a template**. Click the empty area to open the element picker instead.
- **A new element sits above the one you added before.** The builder inserts new elements at the top of their section or column. Drag it into place by the drag handle on its control bar.
- **Number counter or Card is missing from the picker.** Your builder user profile hides it. Ask an administrator to tick it under **Elements** at **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **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?

- [Team directory](/hc/documentation/learn-dxpr-builder/tutorials/team-directory) for a dedicated team page
- [Card element](/hc/documentation/learn-dxpr-builder/elements/card) for card types and child elements
- [Elements](/hc/documentation/learn-dxpr-builder/elements) for the full element reference