---
title: Hero block
slug: hero-block
docTags:
createdAt: 2024-04-18T08:17:36.591Z
---
# Overview
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.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/LQp-FATYNTHbjXCiCsqUV_image.png" size="44" width="326" height="53" position="center" caption="Hero block - Page structure" alt="Hero block - Page structure" darkWidth="326" darkHeight="53" showCaption="true"}
### Sample Hero block
# Background
### Banner height Desktop & Mobile
There are 5 different sizes you can use
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Ua4ThNmKivffaI0lFL5rM_image.png" size="44" width="334" height="178" position="center" caption="Hero block - banner height" alt="Hero block - banner height" darkWidth="334" darkHeight="178" showCaption="true"}
- **Small **: this will use 1/4 of your screen
- **Medium **: this will use half of your screen
- **Large** : this will use 3/4 of your screen
- **Full height** : this will use the full height of your screen
- **Fit content: **automatically stretches banner height in order to fit background media or text block height.
### Background type
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/528mipLPXwZs_ftzFbcfE_image.png" size="44" width="800" height="623" position="center" caption="Hero block - background type" alt="Hero block - background type" darkWidth="800" darkHeight="623" showCaption="true"}
1. **Image (static) **: Use a single image as background.
2. **Image Animation** : Show multiple images with transition animation
3. **Video :** Play video in the background
4. **Solid **: Use a solid background color
### Image
Upload a single large image to be used as the Hero background, this will show as a still background image without animation.
###
Animated Images
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:
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ZGIKJy9eLplpVTIm5GHT7_animation-background-type.png" size="44" width="293" height="188" position="center" caption="Hero Block - Image animation setting" alt="Hero Block - Image animation setting" darkWidth="293" darkHeight="188" showCaption="true"}
2\. Upload several images to the 'Animated images section' in the order they're expected to appear:
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/9CnpI4A-1IPt9tO844R_9_animated-images.png" size="48" width="285" height="777" position="center" caption="Hero Block - Image animation example setting" alt="Hero Block - Image animation example setting" darkWidth="285" darkHeight="777" showCaption="true"}
3\. You can select "Loop animation" if you like to keep this animation running multiple times instead of once.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/HQL2PyiEtEIo0VGDlFVX5_image.png" size="44" width="316" height="68" position="center" caption="Hero Block - Image animation loop setting" alt="Hero Block - Image animation loop setting" darkWidth="316" darkHeight="68" showCaption="true"}
### Background video
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:
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/nnCpOLxRTHmYW0oKyWtx5_background-video.png" size="56" width="378" height="658" position="center" caption="Hero Block - Background Video setting" alt="Hero Block - Background Video setting" darkWidth="378" darkHeight="658" showCaption="true"}
### Video autoplay
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.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/X9Qkn1EwnjsTGfmU3MkTV_image.png" size="44" width="321" height="172" position="center" caption="Hero Block - Background Video autoplay setting" alt="Hero Block - Background Video autoplay setting" darkWidth="321" darkHeight="172" showCaption="true"}
### Show Video controls
Set to "**On**" or "**Off**" to show or hide video play/pause controls.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ix2oMCUTLO5gh7Nm2MuYb_image.png" size="44" width="321" height="165" position="center" caption="Hero Block - Background Video controls setting" alt="Hero Block - Background Video controls setting" darkWidth="321" darkHeight="165" showCaption="true"}
### Solid Background color
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.
### Sticky animation
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.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/-bY9vKzVZQfNOQvfU3vel_enabling-sticky-animations.png" size="54" width="361" height="565" position="center" caption="Hero Block - Sticky animation setting" alt="Hero Block - Sticky animation setting" darkWidth="361" darkHeight="565" showCaption="true"}
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):
### Media overlay
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%**
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/vH8xb5-T7bNZdhM7uzmWm_image.png" size="44" width="327" height="206" position="center" caption="Hero Block - Media overlay setting" alt="Hero Block - Media overlay setting" darkWidth="327" darkHeight="206" showCaption="true"}
The following image shows the difference in the Hero block with 0% and 50% black color overlay.
### Background mode
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/0RzSY5M3f69xNIfWZzV0F_image.png" size="44" width="323" height="163" position="center" caption="Hero block. Reduced or full background setting" alt="Hero block. Reduced or full background setting" darkWidth="323" darkHeight="163" showCaption="true"}
1. **Full **: This will spread your background over the full width of your screen.
2. **Reduced** : This will add spacing/padding to the left & right side of your screen.
****
# Text
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/MQnmMQBW4SgtaZLvse0y5_image.png" size="44" width="351" height="649" position="center" caption="Hero Block - Text setting" alt="Hero Block - Text setting" darkWidth="351" darkHeight="649" showCaption="true"}
1. **Prefix** : This will add a medium size text at the top of your Hero content
2. **Title** : This is the main title in large text size
3. **Subtitle** : This will be printed below the title in small text size
4. **Content width** : Use **30%**, **40%**, **50%** or **100%** of the available block to display your content
5. **Horizontal content align** : Choose **Left**, **Center** or **Right**
6. **Vertical content align** : Choose **Top**, **Center** or **Bottom**
7. **Text color** : Click the rectangular button to set your text color
# Buttons
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/7oxDUCTLCOdKUa-SRA1zY_image.png" size="44" width="322" height="394" position="center" caption="Hero Block - Button setting" alt="Hero Block - Button setting" darkWidth="322" darkHeight="394" showCaption="true"}
You can add buttons at the bottom of the Hero block.
1. **Buttons align**: Left, Center, Right
2. **Buttons align direction**: Horizontal or Vertical
Cards are used to fill out the display, content, and link of each button. Click the **+ Add** button to add more buttons.
### Button style
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.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/g23DtcrD_Wq73iEc05oQX_image.png" size="44" width="289" height="339" position="center" caption="Hero Block - Button style setting" alt="Hero Block - Button style setting" darkWidth="289" darkHeight="339" showCaption="true"}
### Button text
This is the text displayed on the button, when using multi-languages make sure to also enter the translations.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/1rZSuJfzWcj43L2axjusy_image.png" size="44" width="303" height="88" position="center" caption="Hero Block - Button text setting" alt="Hero Block - Button text setting" darkWidth="303" darkHeight="88" showCaption="true"}
### Button url :
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"
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/QtdYFC0uDSlVnphujEqDy_image.png" size="44" width="291" height="171" position="center" caption="Hero Block - Button url setting" alt="Hero Block - Button url setting" darkWidth="291" darkHeight="171" showCaption="true"}
# Color
**Text highlight color : **This is the color used on your website to highlight specific titles.
# Supplements
Use the supplements tab to activate more features
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/mhArK5uBaC2fZONm1KJVV_image.png" size="44" width="331" height="770" position="center" caption="Hero block - Supplements" alt="Hero block - Supplements" darkWidth="331" darkHeight="770" showCaption="true"}
### Animation images :
Add x amount of images, they will be displayed one by one with animation in between transitions.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/f8YXapcbAhMNFBIiddraJ_image.png" size="50" width="325" height="268" position="center" caption="Hero block - Supplements - Animation images" alt="Hero block - Supplements - Animation images" darkWidth="325" darkHeight="268" showCaption="true"}
### Conditional media :
Use this when you want to show different images for different retailer locations.
::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/HoOK8DbTfmU7yC3Oxq4j4_image.png" size="50" width="330" height="448" position="center" caption="Hero block - Supplements - Conditional media" alt="Hero block - Supplements - Conditional media" darkWidth="330" darkHeight="448" showCaption="true"}
.
1. **Url parameter name** : add parameter name here, for example 'retailerId'
2. **Url parameter value** : Add the parameter value here, for example 'FZKTA'
3. **Display media** : Select images from Media Library or upload new images
Click "**+ Add**" to add multiple conditional images to this page.
# Custom Hero block modifications
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
- **Hero with Opening Hours **- Custom version of the Hero block, connected to the HyperPortal CMS. It automatically pulls up the opening hours schedule for the selected physical location.
