Hero banner

Hero banner

What

Hero banner introduces key messaging from Fortum that is the most business-critical and timely content.

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.

 

Fortum eNext - Turbine control and protection systems - Hero banner

To create the module in the CMS

Navigate to Manage → Content modules → Add custom block → Hero.

Navigate to the custom block library, click "Add custom block", and select "Hero" from the custom block options
Hero block fields

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.

iCAT

Internet Change Advisory Team
www.fortum.com/indianasupport
icat [at] fortum [dot] com

Change log

Sami Näyhö, 2 weeks ago (November 10, 2022 @ 12:03:00 UTC)

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.