Skip to content

Build a marketing landing page

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

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

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.

What's next?

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