---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
title: 'Build a marketing landing 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: 'Hero, benefits, social proof, conversion'
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: 'Build a marketing landing page'
      description: 'Hero, benefits, social proof, conversion'
      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/marketing-landing'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
      description: 'Hero, benefits, social proof, conversion'
      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) # Build a marketing landing page.

Hero, benefits, social proof, conversion

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section)
- [Embed forms](/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

Here you build a landing page for one offer: a photo hero with a **Request a demo** button, three features with icons, two testimonials and a closing call to action. Use it for a campaign or product page with one goal. For a whole site on one scrolling page, follow [Create a one-page scrolling website](/hc/documentation/learn-dxpr-builder/tutorials/one-page-website) instead.

The video builds a page for an analytics product called Insight.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a wide photo for the hero.
- 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**.
5. Click **+** on the section and pick **Button**. Set **Title** to "Request a demo", **Link** to `/demo`, **Type** to **Light** and **Size** to **Large**, then click **Save**.
6. Click **+** again and pick **Text**; it lands above the button. Type the headline as **Heading 2** and the subtitle 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 features

1. Hover the hero 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 the feature name 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 `bolt` and click the icon. Set **Size** to **Very Large (3x)**, open **Icon utilities**, set **Style** to **Circle** and click **Save**.
5. Repeat for the second column with `chart-line` and the third with `shield`.

## Step 3: add the testimonials

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**; it arrives with two equal columns.
3. Click **+** in each column and pick **Block quote**. Type the quote, fill in **Cite** with the person's name and role, and click **Save**.

## Step 4: add the call to action

1. Add a fourth 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 "Book a walkthrough", **Link** to `/demo`, **Type** to **Light** and **Size** to **Large**, then click **Save**.
3. Click **+** again and pick **Text**; it lands above the button. Type "See Insight on your own data" as **Heading 2** and add one line. Set **Font color** to white and click **Save**.

## Step 5: 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:

- **Lead form**: insert a webform block from the **Drupal Blocks** tab instead of the last button; see [Add forms to pages](/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **Darker photo**: in the hero's **Background effects** panel set **Background effect** to **Gradient**. Pick the same dark colour at around 60% opacity as **Start color** and **End color**
- **Taller hero**: give the hero section 100 pixels of top and bottom padding in the **Style** panel
- **Start from a template**: on an empty page, click **Choose a template** and pick a landing page layout; see [Page templates](/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## What you see

The headline, subtitle and **Request a demo** button sit centred in white on the photo. Three features follow, each a circled icon over a short heading and line. Two quotes stand side by side on a grey band, and a purple band closes the page with **Book a walkthrough**.

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

- **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**.
- **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**.
- **An icon sits below its feature text.** The icon went in before the text, and new elements land at the top of their column. Drag the icon above the text 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?

- [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) for full-height and parallax hero options
- [Add forms to pages](/hc/documentation/learn-dxpr-builder/tutorials/add-forms) to add a signup form
- [A/B testing](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) to test two versions of the page