Section Guide: Hero, Text & Layout

These are the sections you'll reach for to make a strong first impression and lay out your written content. Your Hero is the big banner at the top of a page; the text and layout sections below it carry your story, explain what you do, and organize longer content so it's easy to read. Every section here also shares the universal Background, Spacing, and Appearance settings covered in "The Page Builder & Universal Section Options."

Your hero banner

Hero

The Hero is the large banner at the very top of a page, usually the first thing a visitor sees. It carries your main headline, a short supporting sentence, and your most important buttons. It's your storefront window, so give it a clear message and a strong image. A Hero can also show an optional row of stats and a strip of social proof: your choice of customer logos, avatars with a star rating, or a short review quote.

Layouts:

Fullscreen: a bold, full-width banner that fills the screen.
Split: text on one side, an image on the other.
Minimal: a clean, centered headline with lots of space and little else.
Contained: the hero sits inside a rounded, inset frame rather than stretching edge to edge.
Gallery: shows a staggered grid of images alongside your message, great for showing off your work at a glance.
Chart: draws a real line graph from numbers you type in, ideal for showing growth or results.

Playing a video behind your hero

Instead of a still photo, your hero can play a short silent video behind the text. It suits atmosphere rather than detail: a slow pan across your workshop, your crew on a job, the front of your shop on a good day. Any sound in the file is ignored, so nothing starts playing out loud.

Turn on Use a background video in the hero's settings. It's offered on the Fullscreen, Split, and Contained layouts, the three that have a single image for it to replace. Then choose where the video comes from:

Upload a file: an MP4 or WebM stored on your site, up to 12 MB. Aim for about ten seconds. It loops, so nobody notices it's short, and a small file keeps your page quick to load.
Vimeo link: paste the address of a video on Vimeo and it streams from there instead, so it doesn't count towards your storage. The controls, title, and Vimeo logo are hidden for you.

Keep your hero image in place when you add a video. It becomes the still frame shown while the video loads, and it's what a visitor sees if their browser blocks video from starting on its own. It also decides how quickly your page looks finished, so choose it as carefully as you would any hero photo.

On phones, the still image shows by default rather than the video. Video on a phone uses a visitor's mobile data and battery, and a hero that size is too small to appreciate it. Switch that setting to play the video if you'd rather it behave the same everywhere.

Text and rich content

Rich Text

This is your everyday formatted-text section: headings, paragraphs, bulleted and numbered lists, bold and italic, and links. Use it for your "About" story, service descriptions, policies, or any block of writing. It's the workhorse for words on a page.

Styles:

Default: standard, full-width text.
Narrow: a tighter column that's easier and more comfortable to read for long passages.
Two Columns: splits your text into two side-by-side columns, like a newspaper.
Boxed: wraps the text in a subtle bordered box to set it apart, good for a note or highlight.

Image + Text

Pairs a single image beside a block of text, perfect for introducing a service, a team member, or a product, with a picture next to the explanation. It's one of the most versatile sections on your site.

Styles:

Image Left: image on the left, text on the right.
Image Right: image on the right, text on the left.
Full Bleed: the image stretches to the edge of the screen for a bigger, more immersive feel.
Overlap: the text panel overlaps the image slightly for a layered, designed look.
Background: the image sits behind the text as a full backdrop.
Contained: the whole pairing sits inside a neat, rounded frame.

Alternating Sections

A stack of image-and-text rows that automatically flip sides as you go down the page: image left, then image right, then image left again. It's the fastest way to walk a visitor through several features, steps, or services in a rhythmic, easy-to-follow layout without adding and flipping each Image + Text section by hand.

Bullet points under your text

Image + Text, Alternating Sections, and the Hero can each carry a short list of points under the paragraph. It's the quickest way to make a section scannable: someone who won't read your paragraph will still read four ticks.

You add the points on the section's Content tab. Each one has two parts, and the first is optional:

Bold lead-in: a word or two that opens the line, shown in bold with the period added for you. Leave it blank for a plain point.
Text: the point itself. One sentence reads best.

So a point can read "Free estimates. Booked same day, anywhere in the county", which lands as a headline and a detail rather than one long line. A hero takes up to four points, since a hero is a headline and not a spec sheet; the other two sections take up to six.

Once you've added a point, three settings appear on the Style tab for the look of the list:

Bullet marker: the mark before each point. A check for benefits, a dot or dash for something quieter, an arrow to suggest movement, numbered when your points are really steps in order, or none for text on its own.
Marker look: how that mark is drawn, from a soft wash of your brand color behind it through to a solid filled shape.
List layout: short points can sit two across on a computer instead of running down one column. Long sentences read better in one.

Leave the list empty and nothing shows, so none of your existing sections change until you add a point. On a Content Type, an Image + Text or Alternating Sections list can also be filled from a list field on your items, so you write the section once and every service or project fills in its own points.

Organizing longer content

Tabs

Splits content across clickable tabs so visitors can jump between topics without a long scroll. Handy for things like "Residential / Commercial," a set of service categories, or a short FAQ grouped by theme. Only one tab's content shows at a time.

Styles:

Pill Tabs: the tabs look like rounded buttons.
Underline: simple text labels with an underline marking the active tab.
Vertical: the tab labels run down the side instead of across the top.

Timeline

Lays out a series of milestones with dates, great for "our history," a project's stages, a step-by-step process, or an event schedule. Each entry has a date, a title, and a description. You can also pin a contact form or an image to the side of the timeline so a visitor can reach out or see a visual while they read.

Styles:

Vertical: all the milestones run straight down one side.
Alternating: milestones zig-zag from side to side down the center line.

Accordion / FAQ

A list of expandable questions and answers. Visitors click a question to reveal its answer, which keeps the page tidy while still holding a lot of information. It's ideal for frequently asked questions, but works for any "click to expand" content.

Styles:

Accordion: a single stacked list; click any question to open it.
Grid: questions arranged in a grid of columns.
Side by Side: a heading or intro on one side and the questions on the other.

There's also a toggle to add FAQ markup, which quietly labels your questions and answers so search engines like Google can display them directly in search results. Only turn this on when the section really is genuine questions and answers. Using it for other content can work against you in search.

Was this helpful?