Hero · centred block

What is the Hero · centred block for?

A focused opening where the message is the main visual. The Hero · centred block is a strong choice when the offer does not need a large image to make sense. An eyebrow, headline, subhead and primary CTA create the opening, while size, width, background, colours and spacing can be tuned to the situation.

A good starting point: use medium or large on a homepage or campaign page, and often compact on inner pages. When in doubt, start medium with a short headline and one concrete CTA.

Homepage / campaign opening

Let one strong promise carry the first screen.

Large works when the hero is the page's main entry point and visitors need to understand one primary message.

See the options All blocks

Which size should you choose?

Choose hero height from the page's role, not personal taste.

Large — when this is the main entry point

For homepages, campaigns or important landing pages where the first screen should stop attention around one main offer.

Medium — the safe default

A strong starting point for most business pages. Prominent without taking over the whole first screen.

Compact — for faster progression

Useful at the top of an inner page or service page. The heading gets enough weight while the main content appears sooner.

General business page

Medium height, clear hierarchy, obvious next step.

Medium is a strong default when you want a distinctive opening without letting the hero dominate the entire first screen.

Create my first version Browse the blocks

Inner page

A compact hero gives the page a title without holding visitors back.

Use it when visitors already know where they are and should reach the actual page content quickly.

If you are not sure where to start: choose medium size, Readable content width, generous inner spacing and one concrete CTA. Get the message clear first; add more visual styling afterwards.

Setting	What does it control?	Practical guidance
Content	Eyebrow, headline and subhead.	The headline should make sense on its own. Let the eyebrow categorise and the subhead expand the promise instead of repeating it.
Heading level	H1, H2 or H3 for the headline.	Keep one H1 per page. Use H1 when the hero is the main page heading; choose H2 when a Title block already appears above it or when this is not the first hero.
Headline and description size	Headline size (px) and description size (px), or Auto.	Leaving them empty keeps the default size, which is usually enough. Large sizes scale down on narrow screens so the text still fits.
CTA	Button label, destination, button colours and an optional second action.	Name one concrete next step. If a quieter second step helps, add it as a text link or a more restrained button — see the second CTA section below.
Size	Compact / Medium / Large.	Medium is a good default. Use Large only when the hero is genuinely the main entry point; Compact is practical on inner pages.
Background and width	Default, Inverted or Custom background plus section width: Column / Full width / Edge to edge.	For a coloured band, Full width is a good default: the background reaches the screen edges while the text remains in the content area. Edge to edge also stretches the content and is rarely needed for centred copy.
Colours	Text, accent and CTA colours.	Stay within the site's palette and always check contrast. The CTA should stand out without feeling unrelated to the page.
Content width	Readable / Wide / Full.	Readable is the safest choice for centred copy. Wide can suit longer headlines; Full is rarely necessary.
Spacing and visibility	Outer and inner spacing, custom padding, mobile-only / desktop-only and scheduling.	Inner spacing controls the hero itself; spacing below controls the distance to the next block. Use scheduling for campaign or seasonal heroes.

Key settings for a Hero · centred block

Second CTA: button or text link

You can add a quieter secondary action beside the primary button — for example, “See how it works” next to “Get started”. Set its destination in the block's Secondary link field and enter the label directly in the hero beside the first button. The second action appears only when both a label and link are present.

Secondary action style: Text link is the default and competes less with the primary CTA, or choose Button. A secondary button can have its own background and text colours.
Buttons: choose Side by side — where the second action wraps if needed — or One under the other.

On coloured or inverted backgrounds, the secondary action follows the section text colour so it stays readable.

Tip: the two actions should not have equal weight. If the second is also a button, keep it quieter so the primary action remains obvious.

An image as the second CTA

The third option under Secondary action style is Image: the second step is then a picture that works as a link. A typical example is a funding badge, such as the Széchenyi Plan Plus or an EU funding notice, linking to the project page.

Image frame: White card, so the official artwork keeps its own white background on any band, or No frame.
The ALT text is the link’s name, so describe where it leads, not the picture, for example: “Széchenyi Plan Plus – project page”. Until it has ALT text, the image link is left off the page.
Set the destination in the Secondary link field, just as for a button or a text link.

Upload the official badge from the file you received with your grant.

Hero · split: heading, a “Get a quote” button and a funding badge on a white card as the second CTA, a photo on the right. — An image as the second CTA on a Hero · split block: the badge on a white card next to the primary button (sample image, not a real logo).

How to fine-tune it without making it feel generic

Use a short category, audience or context such as “Accounting for small businesses”, “Autumn campaign” or “New service”. Do not repeat the headline.
Express one main promise or outcome. If the headline needs several sentences of explanation, it is probably trying to say too many things at once.
Use it to answer the most important “how?” or “for whom?” question after the headline. Add real information rather than filling it with marketing adjectives.
The button should say what happens next: “Request a quote”, “See the plans”, “Create my first version”. Generic labels such as “Continue” give less guidance.
When the hero intentionally differs from the page's default surface. Choose the background first, then check text and CTA contrast. Do not add custom colours simply because the option exists.
Campaign, event or seasonal messaging can use start and end times or daily windows. Use mobile-only or desktop-only visibility only when the content genuinely needs to differ, not as a fix for a responsive-layout problem.

When is another hero better?

Choose by the role of the visual, not by how dramatic the block looks.

Hero · split →

Use it when an image proves or demonstrates something the copy cannot show alone, such as a product, person, place or concrete result.

Hero · full image →

Use it when the photograph itself creates the first impression and can carry the whole opening screen.

Hero · video →

Use it when motion or a short scene communicates the experience or process much faster than a single still image.

TRY IT WITH REAL CONTENT

A good hero is not strong because it is big. It is strong because it is clear immediately.

Start with a clear headline, choose the right size, and use only the visual settings that genuinely support the message.

Build my website →Back to Website Blocks