Adding a Hero Content Block to Your Pages

Overview

The Hero Content Block is a full-width section that puts one message front and centre. It combines a small label, a headline, a short paragraph, and up to two call-to-action buttons, laid over a background photo or a solid colour.

Use it when a page needs to say one thing clearly: a featured departure, a seasonal offer, an invitation to get in touch, or a short pitch at the top of a landing page.

The Hero Content Block is available on every plan.

Websites created from the sample template already have a Hero Content Block on the home page. You can edit that one instead of adding a new section.

Adding a Hero Content Block

Go to Main menu > Website > Pages > [your page].
Click + Add Section.
Choose Hero Content Block from the section-type list.
The section is added in a disabled state, so it is not on your live site yet.
Fill in the content and appearance settings described below.
Click Save, then click the section’s toggle to enable it.

All of the hero’s settings live in a single editor panel:

Hero Content Block editor showing the Eyebrow, Title, and Body text fields, the Primary and Secondary CTA button rows, Overlay strength, Background Colour, Text Colour, and the Background Image upload tile

For reordering, disabling, and deleting sections, see Managing Website Sections.

Writing the headline and text

The Hero Content Block has three text fields:

Eyebrow — an optional small label shown above the headline. Use it for context such as “Featured Trip of the Month” or “Now booking for spring”.
Title — the headline. This is the only required field.
Body text — an optional paragraph below the headline. Keep it to a single short paragraph, because the hero is a summary and not an article.

Body text supports bold, italic, strikethrough, and links.

Write the headline as a benefit rather than a label. “Small groups, led by guides who live here” gives a visitor a reason to keep reading. “Our Tours” does not.

Adding call-to-action buttons

You can add a primary and a secondary call-to-action button. Each button has two parts:

Button text — what the button says, for example “Book Now” or “View Itinerary”.
Link — search for one of your own pages, collections, tours, promotions, or blog pages. To point the button somewhere else, choose Custom URL and enter the address.

Set both the text and the link for a button, or leave both blank. A button with only one of the two is not saved.

The secondary button adapts to your website theme. When your theme uses filled buttons, the secondary appears as a matching outlined button. When your theme already uses outlined buttons, the secondary appears as a plain text link instead.

Two buttons work best when they serve different levels of intent. Pair a committing action (“Book Now”) with a browsing action (“See all departures”). Two buttons that do nearly the same thing just split the visitor’s attention.

Choosing a background

A Hero Content Block can sit on a background photo or on a solid colour.

To use a photo, click the + tile under Background Image and upload an image or pick one from your media library. To use a solid colour instead, leave the background image empty and choose a Background Colour.

The remaining appearance settings are:

Overlay strength — how strongly the overlay tints the photo so the text stays readable. Choose Light, Medium, or Dark.
Background Colour — the colour behind the content. On a photo hero this colour tints the image; on a colour-only hero it is the background itself.
Text Colour — the colour of the eyebrow, headline, and body text. Tick Set theme color to follow your website theme instead of picking a colour.

Check the contrast between your text colour and your background. Light text on a pale photo is hard to read. If a photo is bright or busy, raise the overlay strength to Dark and use light text.

How it looks on your website

On desktop the hero spans the full width of the page. On mobile the headline, text, and buttons stack vertically.

Hero Content Block on a desktop storefront showing the headline, paragraph, and two buttons over a background — Desktop

Hero Content Block on a mobile storefront with the headline, paragraph, and buttons stacked — Mobile

Hero Content Block or Banner Slides?

Both sections put a headline and a button over a full-width image, so it helps to know which one fits.

Choose a Hero Content Block when you want one focused message. It stays put, so a visitor reads it in full. It is the better choice for a single promotion, a positioning statement, or an invitation to enquire, and it is the only one of the two that gives you a second call-to-action button.

Choose Banner Slides when you want to showcase several things in rotation. Banner slides can pull in tours, collections, and promotions automatically, and they can auto-play through a slideshow.

You can use both on the same page. A common arrangement is a rotating banner at the top to show your range, followed by a hero further down that makes one specific offer.

Managing Website Sections — add, reorder, enable, disable, and delete sections
Banner Slides: Adding Slides and Enabling Auto-Play — the rotating slideshow alternative
Banner images and focus points — image size guidelines for full-width photos
Rich Content Section with Photo Gallery — free-form text and images further down a page
Understanding Your Website Pages — page types and what you can customise on each

Related articles