Modules

Hero banner

The first section of a page: Eyebrow, heading, lead text, up to three buttons and an optional image, SVG or video. One module covers every hero style – split or centered, full width or inset panel, small to full screen.

Set up the content

Content → Content: Write the Heading (wrap words in asterisks to highlight them) and the Lead text. Keep Heading level on H1 for the first hero on a page.
Content → Buttons: Add up to three. Choose Link button or HubSpot CTA per button.
Content → Media: Choose Image, SVG, Video or None, and add alt text to images.

Choose the look

Setting	Options
Styles → Layout → Layout	Split (text beside media), Centered (media below the text), Cover (text on the background, no media), Stacked (text, then the media, then the checklist and the buttons, like a product hero)
Content → Checklist	Up to six short points with check marks. In the Stacked layout they sit under the media, in the other layouts under the lead text
Styles → Layout → Buttons	Stacked layout only: After the checklist or After the text
Styles → Layout → Media width	Centered and Stacked layouts: How wide the media may get below the text, so it can be wider than the text column
Styles → Media → Device-style frame	A thick rounded frame in a chosen color around the image or video, like a screen
Styles → Layout → Height	Small, Medium, Full screen, Fit content, Custom (px)
Styles → Layout → Module width	Full width, Inset panel, Fixed width, Percent width
Swap sides and Mobile order	Split layout only
Styles → Alignment → Content alignment	Horizontal position (centered and cover layouts) and vertical position inside the height

Recipes

Framed hero like a product page: Layout Split, Height Medium, Module width Inset panel, Background Color.
Big statement: Layout Centered, Height Full screen, Module width Inset panel, Decorative pattern Honeycomb and Light effect Light sweep.
Photo hero: Layout Cover, Background Image with an overlay of 60–70 % and Light text on dark background.
Product hero: Layout Stacked, text alignment Center, a screenshot with Device-style frame, three checklist points and one button after the checklist, on a dark Color mode.

Animation

Under Styles → Animation the hero has two extra settings. Reveal the heading line by line slides each line of the heading up in turn, followed by the lead text and the buttons. Image animation controls the image beside the text: Parallax (the default) moves it slightly slower than the page, Curtain reveals it behind a color panel, and you can choose both or none.

E-mail sign-up under the text

A single e-mail field under the hero text, for the shortest possible first step.

Turn on Content → E-mail sign-up → Show the e-mail field.
Open the next step with the address filled in (default): write the placeholder and the button text, and point Next step at the page with the full form, or at an anchor further down this page. The address travels in the address bar as omni_email, and the form on that page fills its e-mail field in by itself.
Show a HubSpot form here instead puts the whole form in the hero. Use it on a landing page where the hero is the form, not on pages where speed matters: a form embed is the heaviest thing on a page.
Note under the field is the small line under the row, for example «No credit card required · Cancel anytime».

The first option loads no form script in the hero at all, which is why it is the default.

Typewriter (Omni Pro)

Put a phrase in the heading and let the words take turns.

Turn on Content → Pro: Typewriter → Type the phrases.
Write one phrase per line. The first one is written into the page, so the heading is there before the script runs and search engines read it.
Typing speed, Hold a finished phrase, Show the cursor and Start over after the last phrase set the rhythm. The cursor takes its color from Styles → Text → Typewriter cursor.

The slot keeps the width of the longest phrase, so nothing on the page moves while it types, and the heading's line-by-line animation is skipped while the typewriter is on. Visitors who ask for less motion see the phrases swap without the typing.

Good to know

A new hero starts on white with a still honeycomb net and a soft light sweep. Change or remove them under Styles → Background.
Full screen subtracts the site header, so the hero and header together fill the screen.
Background, module width, spacing and alignment work the same in every module – see Backgrounds and Module width and inset panels.
An SVG can be any size: Set Styles → Media → SVG size in percent. 100 % fills the media area, 50 % is half as wide, and above 100 % the sides are cropped.