Parallax Hero
Hero Type Field
Notes
Determines if the hero is a slider or not
Autoplay Field
Notes
If the hero is a slider, this determines if the slider autoplays.
Hero Content/Slides Field
Notes
Containers for the content for the hero or the hero’s slides
Background Type Field
Notes
Dropdown determining if the background is an image or a video
Hide Content Field
Notes
Check this if the hero needs to display the background but not the content.
Header Field
Accepted Content
- Text
Notes
Primary Header for the Hero/Hero Slide. Wrapping any text in the header in double asterisks (**Like This**) will render the wrapped text in custom styling. This custom styling on Frontline is in the form of the fancy text, but this is adjusted on a site-by-site basis
Subheader Field
Accepted Content
- Text
Notes
Displays below the header.
Body Field
Accepted Content
- Text
Notes
The body text that displays below the Header and Subheader. This is a rich text editor field, so it supports text formatting like bold and italics. While the editor will give options to insert lists, this is not recommended as it is not formatted to display lists and may display incorrectly.
Buttons Field
Accepted Content
- Link
Notes
Repeater field for buttons. Maximum 2.Within the repeater is a spot for the Button and Button Class.The Button Class determines the button style, and is on a site-by-site basis. Sites will usually have a list of button style classes that will be used consistently.The Button field accepts the text that displays on the button as well as the button link. If you need a placeholder, put a # in the link field.
Image Field
Accepted Content
- Image
Notes
Floating image to display on the right of the hero. This is showcased on Frontline with the icons we have on our heroes.Below this is a checkbox for “Tilting Image”. Checking this box has the floating image tilt to follow the mouse.
Background Layers Field
Accepted Content
- Image
Notes
Repeater field containing settings for each background layer. Each layer accepts an image and a speed value. The speed value determines the rate of that layer’s parallax. Layers will be rendered in sequential order (meaning the first layer in the repeater will be at the bottom of the stack).If the hero does not need parallax, set the speed to 0.There is no rule of thumb for “correct” speeds. It tends to be to taste, so it will vary.
Background Video Field
Accepted Content
- Video
Notes
Background video for the hero/hero slide. Does not support parallax. Cannot exist at the same time as the background layers. This means the bottom layer of the hero cannot be a video with images layered on top, for example.
Mobile Image Field
Accepted Content
- Image
Notes
Optional field. This image would replace the background at mobile if desired. If left empty, the main background will display at all sizes.
Live Example Pages
