Skip to content

Create an About Us page

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

What's next?

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