Copy and image tell the opening story together. The Hero · split block works when the visual does more than decorate the page: it shows the product, result, person, place or detail that would be slower to explain with words alone.
A good starting point: keep one main promise on the text side, choose a genuinely relevant image, then decide whether the visual should sit on the left or right.
Service / expertise
Use the image as proof or a tangible detail: real work, place, person, product or result — not just atmosphere.
A Hero · split block is strongest when the visual adds information rather than simply filling half the page.
Use a product, reference, location, team member or concrete result — something that helps understanding on its own.
The main subject should stay recognisable when the crop changes or the screen becomes smaller.
If the image would work just as well on a competitor's website, it probably is not adding enough value to the hero.
Product / visual focus
With the image on the left, the visual gets attention first and the copy immediately explains why it matters.
Quick decision rule: if the image is only decorative, use a Hero · centred block instead. If it proves, demonstrates or adds context, a Hero · split block is a strong choice. Put it on the left or right based on which element should catch the eye first.
| Setting | What does it control? | Practical guidance |
|---|---|---|
| Content | Eyebrow, headline, subhead and CTA. | Keep the headline short and understandable on its own. Use the subhead to explain what the visual adds to the offer. |
| Heading level | H1, H2 or H3 for the headline. | Keep one H1 per page. Use H1 when the hero is the main page heading; use 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. |
| Image | Image, ALT text and TITLE text. | Use a real, relevant visual. ALT text should describe the essential content of the image, not become a keyword list. |
| Image position | Left or right. | Lead with the visual when it is the stronger entry point; lead with the copy when the offer needs to be understood first. |
| Focal point | Horizontal and vertical image focus. | Useful when the image contains an important face, product or detail. The focal point helps keep it visible as the crop changes. |
| Background and width | Background colour plus section width: Column, Full width or Edge to edge. | For a strong band, Full width is a good default: the background reaches the screen edges while image and text stay inside the content area. Column is quieter; Edge to edge takes both image and copy all the way out. |
| CTA colours | Button background and text colours. | Make the CTA stand out from the background while keeping it inside the site's colour system. |
| Content width and spacing | Content width, inner spacing and spacing below. | Wide usually suits a split layout. Avoid adding too much inner and outer space at the same time. |
Key settings for a Hero · split block
Cuts the picture to a shape that unveils like a curtain as it scrolls into view.
A rectangle with clearly rounded corners. The default for an image pair.
A cut-out rounded at the top, like an archway.
The largest circle the frame holds, centred.
Strongly rounded on two opposite corners, like a leaf.
A soft, irregular shape that slowly changes its outline.
Needs a cropped frame (Fill). Printed pages show the picture uncut.
Shape: Arch
The picture is cut to an arch and unveils like a curtain as it scrolls into view. Shape only works with a cropped frame (Fill).
Under Images, you can choose Image pair instead of One image: two photos slide over each other with a soft shadow, just like in the Image pair block. Your existing picture stays the front image, and you add a back image with its own ALT and TITLE text.
Image pair: Tilted
The front image is the larger one and loads first; the back one sits behind it in the top corner.
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, then enter the label directly in the hero beside the first button. The second action appears only when both a label and link are present.
In a Hero · split block, both actions stay on the text side below the subhead regardless of where the image sits.
Tip: do not give the two actions equal weight. If the second is also a button, keep it quieter so the primary action remains obvious.
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.
Upload the official badge from the file you received with your grant.
When you want visitors to understand the offer first and let the visual confirm it afterwards. This is often a good starting point for services, expert offers and more complex messages.
Choose based on the role the visual plays.
Use it when the message should lead and the image would not add meaningful information.
Use it when one strong photo can carry the first screen and establish the atmosphere by itself.
Use it when a short moving scene communicates the experience or process faster than a still image.
BALANCE COPY AND VISUAL
The image and copy should not compete. They should strengthen the same offer in two different ways.