What
Hero banner introduces key messaging from Fortum that is the most business-critical and timely content.
Hero banner
Where
Hero banner element is mandatory on the homepages, while usage is not limited to the homepage. It is positioned at the beginning of the page, before or after the page title and summary.
Do
Image and video area (Optimal size 1920x816 px)
Select a single image or video that supports the content. Use the same image or video on the destination page to reassure users that they land in the right place. Use photo or video with a focal area in the center for an optimal responsive experience. Go for creating an emotional impact on the users by using content with a strong visual focus.
Call-to-action button
Use an encouraging CTA that describe the users' action on the destination page.
Don't
Use vertical images. The image area is optimized for horizontal photos.
The module can link only to a single piece of content.
Image or video
Mandatory. When using video in the hero banner, there needs to be a fallback image displayed while the video is loading. This image is also used on mobile, where the video will not load.
Corner element
Optional. It is positioned in the top-left corner.
Text box
Optional, can be placed left, center or right.
CTA
Optional
Box placement
You can select to place the text box on the left, center or right.
To create the module in the CMS
Navigate to Manage → Content modules → Add custom block → Hero.
Required:
- Block description. Add a value to the "Block description" field. This is used later when referencing the module from the admin UI and will never show on the front end. It should follow the naming convention: Section name_module type_description.
- Media (either image or video). For Hero blocks that use video, an image is still required as this acts as a fallback on mobile or for devices that do not support inline video. Both YouTube and Vimeo videos work. Contact Sami Näyhö for Vimeo video instructions.
Optional:
- Title (max 70 characters)
- CTA (max. 20 characters) (URL and Link text)
- Hero size: Small, Big, XL
- Text box alignment: Left, center or right
When ready, save your module. It will not show on the front-end until attached to a page into the Hero block.
Support
In case you can't find answers from this guide, you can contact Indiana support.
Change log
A new "Hero" custom block replaces the hero option in the Liftup custom block. Therefore, do not use the liftup block anymore—guidelines have been updated with instructions on creating the new Hero custom block.