Hero block is a prominent and visually striking section of a website, typically located at the top of the homepage or a landing page. It serves as the first point of interaction for the visitors and is designed to capture their attention immediately.

There are 5 different sizes you can use



Upload a single large image to be used as the Hero background, this will show as a still background image without animation.

With this feature, you can animate multiple images that will be overlapped and displayed in a sequence with a delay. For this, you will need to:

1. Choose the 'Image animation' background type to enable the corresponding fields:

2. Upload several images to the 'Animated images section' in the order they're expected to appear:

3. You can select "Loop animation" if you like to keep this animation running multiple times instead of once.

For the video to appear on the background of your website page, make sure to switch the background type to 'Video' and upload the video file from your media library:

Set this to "On" to start playing your background video automatically when someone visits your page. When set to "Off" a play button will be displayed on top of the Hero block, visitors can start the video by clicking the button.

Set to "On" or "Off" to show or hide video play/pause controls.

If you want to focus the attention of the view entirely on the textual message, you can set a background color instead of an image. You can work with a predefined color palette or a free color picker.



The sticky animation will appear in the block when you start scrolling down. The elements transition smoothly from their original position to the sticky position, creating a parallax effect for a seamless user experience.

First, you need to open the media library to choose/add the picture for your background. Then click the corresponding toggle to enable the sticky animation feature.

You can add several 'Hero' blocks for the sticky animation, simply add a new block by clicking the '+' on the page structure on the left, or clone the current one (see below):

When activating this setting a dark shade will be used to cover your background image. This can be useful when you have a distractive background that makes it hard to read the text. Set overlay at : 0%, 30% or 50%

The following image shows the difference in the Hero block with 0% and 50% black color overlay.



You can add buttons at the bottom of the Hero block.

Cards are used to fill out the display, content, and link of each button. Click the + Add button to add more buttons.

Choose between 6 different button styles. Depending on the chosen style you will have to change the text color to make the button text visible on your screen/button.

This is the text displayed on the button, when using multi-languages make sure to also enter the translations.

First, use the dropdown and select "internal" or "URL". When using internal links make sure to make those relative. When using "URL" add the full URL to the website you want to link, so "https://your-website.com"

Text highlight color : This is the color used on your website to highlight specific titles.

Use the supplements tab to activate more features

Add x amount of images, they will be displayed one by one with animation in between transitions.



Use this when you want to show different images for different retailer locations.



.

Click "+ Add" to add multiple conditional images to this page.

Depending on the concrete use case, there also exist custom-modified versions of the 'Hero' block, designed to fulfill a certain business purpose.

Hero with Google Maps - Custom version of the Hero block, connected to the Google Maps API. Designed to display map location on the landing page