Hero block

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 sample hero block hero block preview background banner height desktop & mobile there are 5 different sizes you can use 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 (static) use a single image as background image animation show multiple images with transition animation video play video in the background 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 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 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 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 show video controls set to " on " or " off " to show or hide video play/pause controls hero block video controls example 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 hero block background 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 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) hero block sticky animation example 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% the following image shows the difference in the hero block with 0% and 50% black color overlay hero block 50% black color overlay effect background mode full this will spread your background over the full width of your screen reduced this will add spacing/padding to the left & right side of your screen hero block full vs reduced background mode text prefix this will add a medium size text at the top of your hero content title this is the main title in large text size subtitle this will be printed below the title in small text size content width use 30% , 40% , 50% or 100% of the available block to display your content horizontal content align choose left , center or right vertical content align choose top , center or bottom text color click the rectangular button to set your text color buttons you can add buttons at the bottom of the hero block buttons align left, center, right 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 hero block buttons styling example button text this is the text displayed on the button, when using multi languages make sure to also enter the translations 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" color text highlight color this is the color used on your website to highlight specific titles hero block highlight color example supplements use the supplements tab to activate more features animation images add x amount of images, they will be displayed one by one with animation in between transitions conditional media use this when you want to show different images for different retailer locations url parameter name add parameter name here, for example 'retailerid' url parameter value add the parameter value here, for example 'fzkta' 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 block with google map 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 hero block with openinghours