Hero component

display information more appealingly

  • use large images as background
  • place information that needs to be highlighted on a Hero
  • add links and buttons to the Hero
  • add YouTube videos

The Hero component lets you display information in a more appealing way. By using large images as a background this component offers a big design aspect to your pages that the viewer notices right away.

on this page:
CMS settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window

Introduction

The Hero component serves as an appealing way to highlight information, by selecting a large image to serve as a background and adding text and links or even YouTube videos on top of it. It can be used to advertise new products or simply to inform the viewers about certain things. 

There are also 3 similar components, called the Hero Search, the Super Hero and the Hero Slider.

Glossary:

Example:

CMS settings

tab: General

In the General tab, the layout and all textual content for the Hero is configured.

Editorial hint:

BB Codes  

Since there is no Rich Text Editor for writing the textual content of the component, it is helpful to use BB Codes for styling. You can insert a line break or simply make some text bold, italic or red.

tab: Image

tab: Links

tab: Video

In the Video tab a YouTube video can be added to the Hero. A play button will be displayed on the Hero and if clicked the whole Hero becomes the video. 

Front-end examples

Headline Only

Sub-Headline Only

Key Features Only

Link Only

Scroll Element Only

Layout type: Bottom

Layout type: Middle

Layout type: Bright Left

Layout type: Bright Right

Layout type: Dark Left

Layout type: Dark Right

Fullscreen: unchecked

Fullscreen: checked

Video: Controls Disabled

Video: Controls Enabled

With Scroll Element

Without Scroll Element

Step by step

1

2

3

4

5

Related topics

Used recurring elements