---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'Design a hero section | 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: 'Full-width hero banner with background image and 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: 'Design a hero section'
      description: 'Full-width hero banner with background image and 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/hero-section'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      description: 'Full-width hero banner with background image and 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) # Design a hero section.

Full-width hero banner with background image and CTA

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Sections](/hc/documentation/learn-dxpr-builder/layout/sections)
- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

Here you build a hero that fills the screen: a background photo, a headline, one supporting line and a button, with the photo moving slower than the page as visitors scroll. Use it at the top of any page. To build the whole page around it, follow [Build a marketing landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) next.

The video builds the hero of a reporting product.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds a wide photo, at least 1920 pixels across.
- 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**.

## Step 1: add the section

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**, so the headline, the text and the button centre together.
3. Switch on **100% height** so the hero fills the screen, and **Vertical centering** so the content sits in the middle.
4. Open the **Style** panel. Under **Background image** click **Select Image**, tick a wide photo and click **Insert selected**.
5. Set **Background style** to **Cover** so the photo fills the section.
6. Pick a dark **Background** colour, which shows while the photo loads. Set **Font color** to white, then click **Save**.

**Tip**

Compress the photo to under 500 KB so the hero loads fast.

## Step 2: add the button

1. Click **+** on the section and pick **Button** from the **Content** tab.
2. Set **Title** to "Start free trial", **Link** to `/trial`, **Type** to **Light** for contrast on the photo and **Size** to **Large**, then click **Save**.

## Step 3: add the headline

1. Click **+** on the section again and pick **Text** from the **Content** tab. It lands above the button, since new elements land at the top.
2. Type your headline, "Reporting that keeps up with your team", and choose **Heading 2** from the heading dropdown. 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).
3. Add one supporting line: "Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required."
4. In the **Style** panel set **Font color** to white, then click **Save**.

## Step 4: add parallax

1. Hover the section and open **More** > **Settings** again.
2. Open the **Background effects** panel and set **Background effect** to **Parallax image**. **Parallax speed** starts at 20; drag it to 35 for a stronger effect and click **Save**.

## Step 5: add content below the hero

1. Hover the hero and click **Add Section Below**, so the page has content to scroll.
2. Click **+** on the new section and pick **Text** from the **Content** tab. Type a heading and a short paragraph, set the first line to **Heading 2** and click **Save**.

## Step 6: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**), choose **Preview** and scroll down.

## Go further

Not shown in the video:

- **Overlay**: set **Background effect** to **Gradient** and pick a dark **Start color** and **End color** at around 50% opacity. Text stays readable on any photo. The effect holds one value, so an overlay replaces parallax.
- **Shorter hero**: switch **100% height** off and give the section its own top and bottom padding in the **Style** panel, for example 100 pixels.
- **Wide button**: switch on **Block button** for a button as wide as its column.

## Variations

Alternatives to the build in the video:

### Video background hero

1. In the **Background effects** panel, set **Background effect** to **YouTube video**.
2. Paste the video URL in **YouTube video URL**.
3. Under **Video options**, tick **Loop** and **Disable on mobile devices**; leave audio off.

### Gradient-only hero

Skip the background image and use the **Gradient** effect with two solid brand colours for a hero that loads fast.

### Split hero

1. Add a **Row** inside the section; it arrives with two equal columns.
2. Place the text and button in the left column and an image in the right column.

## What you see

The photo fills the screen with your headline, supporting line and **Start free trial** button centred in white on top. As you scroll down to the second section, the photo moves slower than the page.

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

- **The hero is only as tall as its text.** **100% height** is off. Switch it on in the section's settings and click **Save**.
- **The photo stays still as you scroll.** **Background effect** is still on **Simple image**, **Parallax speed** is 0, or nothing sits below the hero to scroll to. Set **Parallax image**, drag **Parallax speed** above 0 and add the second section of Step 5.
- **The headline stays dark on the photo.** The Text element has no **Font color** of its own. Open its **Style** panel and set **Font color** to white.

## What's next?

- [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) to build a complete page around your hero
- [Sections](/hc/documentation/learn-dxpr-builder/layout/sections) for the section's layout options
- [Style tab reference](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) for all styling options