Homestage Component

Description


The Homestage Component is the header to be used on the homepage or on main pages of microsites. It does not contain the H1-Headline for the page and is intented to contain very important teasers that link to specific sub pages. For the content pages an other header is used instead, the Simple Header Component.

The Homestage is swipeable. That means that it can contain multiple stages that are then controlled in a carousel slider and will show small thumbnails for each. The Large colorized Headline will show an animation when the page is loaded.

Usage


The Homestage Component will be used:

  • On Home
  • On Campaign pages

Component Types

The component Homestage Component consists of one (or more) stage and every stage consist of:

  • A headline (editable) with a background color (choice between 4 colors)
  • A background video (from the DAM) or background image (selectable from the DAM)
  • A link text (looking like a button)
  • A link path respectively URL
  • A thumbnail per stage (case more than one stage)

Placement

The  Homestage Component will be always placed  at the top of the page just below the top navigation.


Demonstration

Below are some examples of homestage component in several variations.

This Hero Stage contains
one video slide only
Hero stage with multiple slides
Video Slide 1
Hero stage with multiple slides
Video Slide 2
Hero stage with multiple slides
Image Slide 1
Links optional
Neue Maßstäbe in der
Luft- und Klimatechnik
Links optional
This Hero Stage contains
one image slide only

How to build a Homestage Component 

How to built a "Homestage Component"
How to built a Homestage Component

 

 

Once the component has been placed, doubleclick it or choose the wrench tool at the component to get a setup modal and follow the step-by-step instructions:

❶ Enter the text of the headline

❷ If italic text is necessary, please select this one and make it italic by clicking on the "I"

❸Select the desired background colour for the text

❹For the background you can choose between: background video (from Youtube), background DAM (video from DAM) or background image (selectable from the DAM)

❺In case of a YouTube Video please enter the Youtube ID

❻ Type the text for the button link

❼Link the page (or the file) from the DAM

❽If you have more than one stage, select (from the DAM) the thumbnail image for the current stage

The first stage is ready and you can see the result below.
Please note: All other examples below are built with the same way.

Select Preview mode to see your header component and switch back to Edit mode to continue editing.

❾ If you wish to add a new stage, click on "Add" and repeat steps 1 to 8.