What
Hero banner introduces key messaging from Fortum that is the most business-critical and timely content.
Hero banner Lift-up
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 → Lift up.
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 frontend. It should follow the naming convention: Section name_module type_description.
Required:
1. Liftup type (Hero)
2. Title (max. 70 characters)
3. Block description
4. Subtitle (max. 35 characters)
7. Image. Optimal size for image only is 1980x900 px. If video is used, then the image should be the same size as the video. Optimal size for Vimeo video is 1920x816 px.
Optional:
Attach brand corner
5. CTA (max. 20 characters) (URL and Link text)
6. Vimeo video -id (used for Hero lift-ups with video backgrounds) For Hero lift-ups 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. Contact sami [dot] nayho [at] fortum [dot] com for Vimeo video instructions.
8. You can choose to align the text box the hero modules: Left, center or right
9. You can choose the size of the hero module: small, medium, large
When ready, save your module. It will not show on the front-end until attached to a page.
Support
In case you can't find answers from this guide, you can contact Indiana support.
iCAT
Internet Change Advisory Team
www.fortum.com/indianasupport
icat [at] fortum [dot] com