Hero · full image block

What is the Hero · full image block for?

Use it when the image itself carries the first impression. A Hero · full image block works best when you have a photograph that already communicates atmosphere, quality, outcome or context on its own. Here the image is not background decoration; it is the visual foundation of the entire opening.

A good starting point: choose one strong image, set an appropriate height, then use the overlay and focal point to keep it readable and responsive.

How tall should the hero be?

Height controls how much of the first screen belongs to the image.

Short — visual opening band

Good on an inner page or a shorter campaign opening. It gives the page visual character without delaying the main content.

Tall — balanced main hero

A strong default for most image-led homepages. Large enough for impact without necessarily taking over the entire screen.

Fullscreen — immersive opening

Use it when the image can genuinely carry the whole first screen and you deliberately want to focus attention on one opening moment.

A woodworking workshop with hand tools lined up on the wall above an old workbench.

Short / inner page

Give the page visual character without taking over the whole screen.

Short height is useful when the image matters but visitors should reach the main content quickly.

See the details

A woodworker sanding a walnut board by hand in a workshop covered with wood shavings.

Tall / homepage opening

Show the feeling first, then explain the offer.

Tall is a strong default when the photograph is part of the message but you still want the next section to remain relatively close.

Explore All blocks

A potter's hand shaping clay on a spinning wheel, viewed from above.

Fullscreen / full width

When an image genuinely has something to say, give it the whole screen.

Here not only the background but the content also uses a full-width layout, with safe padding at the sides.

Take a closer look

Quick decision rule: do not choose the prettiest image; choose the one that still works with the copy. Keep the main subject away from the headline area, leave enough negative space for text, and make sure the important part of the image stays recognisable after cropping.

Setting	What does it control?	Practical guidance
Image	The visual foundation of the entire hero.	Choose an image with a clear subject and enough space for the copy.
Height	Short / Tall / Fullscreen.	Tall is a strong default. Use Fullscreen only for a composition that can carry it; use Short when you want to reveal the page content sooner.
Overlay	Light / medium / dark layer over the image.	Choose for readability. Bright images often need a stronger overlay; darker images may only need a light one.
Focal point	Horizontal and vertical image focus.	Mark the face, product or important detail so it stays visible as the crop changes across screen sizes.
Copy and CTA	Eyebrow, headline, subhead, CTA and button colours.	Keep the copy short. Make sure the CTA contrasts clearly with both the image and the overlay.
Heading level	H1, H2 or H3 for the headline.	Keep one H1 per page. Use H1 when this hero is the page's main 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.
Background and width	Background plus section width: Column, Full width or Edge to edge.	Full width is the natural setting for this hero: the image reaches the screen edges while the copy stays in the content area. With Edge to edge, the copy also stretches out, so add safe side padding.
Content width and visibility	Content width, spacing below, device and scheduled visibility.	Wide is a good starting point. Use scheduling for campaigns; do not use mobile-only or desktop-only visibility as a workaround for responsive problems.

Key settings for a Hero · full image 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, then enter the label directly in the hero beside the first button. The second action appears only when both a label and a link are present.

Secondary action style: Text link is the default and competes less with the primary CTA, or choose Button. As a button, it 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.

Over an image, the text-link version follows the surrounding text colour so it remains legible with the overlay. If you give a secondary button custom colours, check it over both the brightest and darkest parts of the image.

Tip: the two actions should not carry equal weight. If the second is also a button, keep it visually 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 a Hero · full image block

The image should stay detailed at large sizes and have a clear focal point. If it only works as a small thumbnail, it will probably feel weak when stretched across a large hero.
The goal is not to darken the photograph for its own sake, but to keep the copy reliably readable. Check the headline over both the brightest and darkest areas, then choose light, medium or dark overlay accordingly.
It tells the crop which part of the image matters most on different screen sizes. It is especially useful for faces, products and asymmetric compositions.
When the visual experience is part of the offer itself — for example a location, premium product, accommodation, restaurant, creative work or strong brand photography. With a generic stock image, fullscreen usually makes the opening feel oversized.
The stronger the visual, the less copy it usually needs. A short headline, one supporting sentence and one CTA is often enough. Move longer explanation into the next section.
Make sure the important part of the image is not lost to cropping, the headline does not land on a visually busy area and the CTA stays readable. Fix the focal point or image first rather than creating separate mobile content as a workaround.

When is another hero better?

The role of the image should determine whether it becomes a background, a separate visual or disappears entirely.

Hero · split →

Use it when the image should be shown as a separate visual beside the copy rather than underneath it.

Hero · centred →

Use it when the message itself matters most and an image would only distract.

Hero · video →

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

GIVE YOUR STRONGEST VISUAL ROOM

A Hero · full image block works when the image and the copy stay clear together.

Choose a strong composition, the right height and overlay, then check the focal point on smaller screens too.

Build my website →Back to Website Blocks