Skip to content

Design a hero section

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

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