Super Hero component
a more configurable variant of the Hero component that lets you display information more appealingly
- use images or videos
- place information that needs to be highlighted on a Super Hero
- add links and buttons to the Super Hero
- choose a scrolling effect
- add videos
- configure the image for mobile display
- configure the Search Engine Optimization
The Super Hero component is similiar to the Hero component, but has a few more options available. By using large images as a background this component offers a big design aspect to your pages that the viewer notices right away.
Introduction
The Super Hero component, much like 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 videos on top of it. It can be used to advertise new products or simply to inform the viewers about certain things. Compared to the Hero the Super Hero offers configuations for mobile devices, scrolling effects and Search Engine Optimization.
There are also 3 similar components, called the Hero, the Hero Search and the Hero Slider.
Glossary:
Examples:
Image
Video (refresh the page to watch)
CMS settings
Sidekick
The Super Hero component can be found in the GEM AT menu in the Sidekick.
tab: General
Header Type: Image Header
In the General tab, the header type, layout and styling of the Super Hero is configured.
Header Type: Video Header
tab: Content
In the Content tab, all textual content of the Super Hero is configured.
It is possible to define the text content for the mobile version seperatly, so the text will be different on mobile devices. jump to example
Content type: Key features
Content type: Text
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
In this tab background images can be added to the Super Hero.
There are 2 image drop fields available, one for the desktop version (Image) and one for the mobile version (Image Mobile). In the Image Mobile filed, a seperate image can be added for the display on mobile devices.
If left empty the mobile version will be displayed without a background image.
This image is also used as a preview image for the Video Header.
tab: Video
This tab is only available if the Header Type is set to Video Header in the General tab.
In the Video tab a video from the DAM can be added to the Super Hero.
tab: Links
tab: Spacing
tab: SEO
In the SEO tab, the Search Engine Optimization can be configured.
(based on the Google guidlines)
Front-end examples
Vertical Alignment: Top | Horizontal Alignment: Left | Spacing: None
Vertical Alignment: Top | Horizontal Alignment: Middle | Spacing: None
Vertical Alignment: Top | Horizontal Alignment: Right | Spacing: None
Vertical Alignment: Center | Horizontal Alignment: Left | Spacing: None
Vertical Alignment: Center | Horizontal Alignment: Middle | Spacing: None
Vertical Alignment: Center | Horizontal Alignment: Right | Spacing: None
Overlay type: None | Font Color: Default
Overlay type: None | Font Color: White
Overlay Type: Dark Gradient
Overlay type: Bright Gradient
Overlay Type: Dark Full
Theme: Transparent | Overlay Type: None | Font Color: Default | No Image
Theme: White | Overlay Type: None | Font Color: Default | No Image
Theme: Light Blue | Overlay Type: None | Font Color: Default | No Image
Theme: Blue | Overlay Type: None | Font Color: Default | No Image
Theme: Dark Blue | Overlay Type: None | Font Color: Default | No Image
Theme: Light Grey | Overlay Type: None | Font Color: Default | No Image
Theme: Grey | Overlay Type: None | Font Color: Default | No Image
Theme: Dark Grey | Overlay Type: None | Font Color: Default | No Image
Theme: Light Orange | Overlay Type: None | Font Color: Default | No Image
Theme: Green | Overlay Type: None | Font Color: Default | No Image
Effect Type: None
Effect Type: Fade-In
Effect Type: Parallax Overscroll
Effect Type: Parallax Content Shift
Headline Only
Sub-Headline Only
Key Features Only
Text Only
3 Grid Columns
4 Grid Columns
5 Grid Columns
6 Grid Columns
7 Grid Columns
8 Grid Columns
9 Grid Columns
10 Grid Columns
Legal Text Only
Link Only
Scroll Element Only
Content Settings: Equal
Content Settings: Adapted
Image Crop: Free Crop | Spacing: None
Image Crop: Content Crop | Spacing: None
Image Crop: Thin Hero | Spacing: None
Image Crop: Small Hero | Spacing: None
Image Crop: Medium Hero | Spacing: None
Image Crop: Large Hero | Spacing: None
Image Crop: Fullscreen Hero | Spacing: None
Image Mobile Crop: Free Crop | Spacing: None
Image Mobile Crop: Mobile Crop | Spacing: None
Video Header | No Image | Content Presentation: Content Overlay | Effect Type: None | Play Options: Autoplay | Minimal Height: 768
Video Header | Image | Content Presentation: Content Overlay | Effect Type: None | Play Options: Autoplay | Minimal Height: 768
Video Header | Image | Content Presentation: Content Overlay | Effect Type: None | Play Options: Autoplay And Loop | Minimal Height: 768
Video Header | No Image | Content Presentation: Content Overlay | Effect Type: None | Play Options: Show Play Button | Minimal Height: 768
Video Header | Image | Content Presentation: Content Overlay | Effect Type: None | Play Options: Show Play Button | Minimal Height: 768
Video Header | Image | Content Presentation: Content Overlay | Effect Type: None | Play Options: Show Play Button And Loop | Minimal Height: 768
Video Header | Image | Content Presentation: Transition To Content | Minimal Height: 768
Video Header | No Image | Content Presentation: Transition To Content | Minimal Height: 768
Video Header | Image | Content Presentation: Transition To Content | Minimal Height: 200
Video Header | Image | Content Presentation: Transition To Content | Minimal Height: 1200
Spacing Top & Bottom: None
Spacing Top & Bottom: Small
Spacing Top & Bottom: Medium
Spacing Top & Bottom: Large
Grid Position: Default
Grid Position: 1
Grid Position: 2
Grid Position: 3
With Scroll Element
Without Scroll Element
Step by step
1
2
3
4
5
6
7
8
Related topics
Used recurring elements
Help Center
Important links:
Topics:
- , Opens in a modal
- , Opens in a modal
- , Opens in a modal