---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/services-page'
title: 'Create a services 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: 'Service cards, features, contact CTA'
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 a services page'
      description: 'Service cards, features, contact CTA'
      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/services-page'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/services-page'
      description: 'Service cards, features, contact CTA'
      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 a services page.

Service cards, features, contact CTA

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Icon](/hc/documentation/learn-dxpr-builder/elements/icon)
- [Logo Marquee](/hc/documentation/learn-dxpr-builder/elements/marquee)

Here you build a page that lists what you offer. It has a header, three services with icons, one service in detail beside a photo, client logos and a call to action. Use it when you sell several services. For a page about one offer, follow [Build a marketing landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) instead.

The video builds the services page of a digital agency.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a photo for the service in detail and four client logos.
- 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**.
- 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 elements of a column in reverse order, or drag them into place afterwards.

## Step 1: add the header

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab. Hover it, open **More** > **Settings**, pick the navy **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Jumbotron** from the **Content** tab.
3. Set the **Title** to "Our services", the **Lead** to one line about what you offer and the **Type** to **Primary**, then click **Save**.

## Step 2: add the services overview

1. Hover the section and click **Add Section Below**. Give the new section the **Align text center** class.
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. Click **+** in the first column and pick **Text**. Type "Design" as **Heading 3**, add one line and click **Save**.
4. Click **+** in the same column and pick **Icon**; it lands above the text. Choose the **Font Awesome Free Solid** set, search for `palette` and click the icon. Set **Size** to **Very Large (3x)**, open **Icon utilities**, set **Style** to **Circle** and click **Save**.
5. Repeat for "Development" with `code` and "Marketing" with `bullhorn`.

## Step 3: add one service in detail

1. Add a third section with **Add Section Below**, then a **Row**; it arrives with two equal columns.
2. Click **+** in the left column and pick **Image**. Click **Select Image**, tick a photo and click **Insert selected**. Type the **Alt attribute** in the **SEO** panel and click **Save**.
3. Click **+** in the right column and pick **Button**. Set **Title** to "Get a quote", **Link** to `/contact` and **Type** to **Primary**, then click **Save**.
4. Click **+** in the right column again and pick **Text**; it lands above the button. Type "Design" as **Heading 2**, add the description and what is included, and click **Save**.

## Step 4: add the client logos

1. Add a fourth section and open its **More** > **Settings**. Pick **Align text center** under **HTML classes** and a light grey **Background** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Marquee**. Remove the three sample images with the **×** on each. Click **Select Image**, search for your logos, tick four of them and click **Insert selected**. Switch on **Gray scale** and click **Save**.
3. Click **+** on the section again and pick **Text**; it lands above the marquee. Type "Trusted by leading brands" as **Heading 2** and click **Save**.

## Step 5: add the call to action

1. Add a fifth 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 "Schedule a consultation", **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 6: 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:

- **One detail section per service**: repeat Step 3 for Development and Marketing. Switch on **Mirror row** in every second row's settings, so the photos alternate sides on tablets and desktops.
- **Jump links**: set each detail section's **HTML ID** (`design`, `development`, `marketing`). Add a **Button** under each overview text with **Link** `#design` and so on.
- **Testimonials**: add a **Block quote** per client above the logos.

## What you see

A navy band opens the page, with "Our services" in large white type over a one-line summary. Three centred services follow, each a circled icon over its name and line. Design gets its own band with a photo, a description and **Get a quote**. Grey client logos scroll past on a light band, and a purple band closes the page.

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

- **The marquee still shows the sample logos.** The three sample images stay until you remove them. Open the marquee's settings, click the **×** on each sample image and save.
- **The logos are in colour.** **Gray scale** is off. Open the marquee's settings, switch it on and click **Save**.
- **The icons have no circle.** **Style** sits in the **Icon utilities** panel, not in **General**. Open the icon's settings, open **Icon utilities** and set **Style** to **Circle**.
- **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?

- [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) for a dedicated page per service
- [Icon element](/hc/documentation/learn-dxpr-builder/elements/icon) for sizes and styles
- [Marquee element](/hc/documentation/learn-dxpr-builder/elements/marquee) for the logo band's settings