This feature works on all page types.
This is one of the most complex formatting options in our theme so if you need any help don't hesitate to contact us.
Table of Contents
Page-level Settings
All of the following code elements are added as a page tag and apply to all of the Featured Content Images.
Add one of the following tags to the page to change the behaviour of the hero image container:
layout_hero_image_fixed
layout_hero_image_parallax
layout_hero_image_only
displays the entire image
Note: We highly recommend adding any text and call to actions as "Headline/Action text" and not directly on graphics or images because screen readers cannot read the text and depending on the visitors screen size the text may get cut off.
layout_hero_image_sm
Optimal image size: 1600px width by 300px height
layout_hero_image_md
default on inner pages
Optimal image size: 1600px width by 500px height
layout_hero_image_lg
Optimal image size: 1600px width by 700px height
layout_hero_image_xl
default on home page
Optimal image size: 1600px width by 900px height
Open hero image links in new tabs:
nav_new_tab
Adds a sign-up bar below the hero image
layout_hero_signup
Individual Featured Content Image Settings
All of the following code elements are added to each individual featured content image in the Featured Content Image "Headline/Action Text" field.
Type your text in the Headline/Action Text field and wrap any combination of the following formatting tags in curly brackets:
{{ }}
||||
formats the text following the 4 pipes as regular text
|||
formats the text before the 3 pipes as a pre-headline
||
formats the text following 2 pipes as a sub-headline
|
creates a line break in the text
overlay
Removes the colour block behind the text
gradient
adds a gradient background behind the text
bars
formats the text so each line has a separated background
text_bottom
positions the text at the bottom-center
text_top
positions the text at the top-center
text_middle
positions the text at the middle-center
text_left
positions the text at the middle-left
text_right
positions the text at the middle-right
You can also use these in combination. For example:
text_bottom, text_right
positions the text at the bottom-right
size_sm
size_md
Default
size_lg
size_xl
image_top
aligns the image to prioritize the top edge (ie. this can be useful to ensure people's heads are not cut off in photos)
image_bottom
aligns the image to prioritize the bottom edge (ie. this can be useful if there is excess space at the top of a photo)
image_left
aligns the image to prioritize the left edge
image_right
aligns the image to prioritize the right edge
image_center
aligns the image horizontally centered
image_middle
aligns the image vertically centered
You can also use these in combination. For example:
image_top, image_left
aligns the image to prioritize the top and left edges
image_dim
Adds a grey overlay to your image to make your text pop.
theme_primary
theme_secondary
theme_tertiary
Upload a video file (no larger than 2mb) under files of the page you would like the video to display in the featured content slider of. Then under the featured content slider "Headline/Action text" add the following tag between the {{ }} and without the file extension (ie. .mpg)
video:filename
Upload an image/logo file (no larger than 2mb and preferably .svg) under files of the page you would like the logo to display in the featured content slider of. Then under the featured content slider "Headline/Action text" add the following tag between the {{ }}.
logo:filename.svg
Under the featured content slider "Headline/Action text" add the following attribute, between square brackets [], where you'd like the icon to be displayed:
icon:icon-name-goes-here/icon
Don't forget to add the square brackets "[]"
Go to fontawesome.com and search for the icon of your choice. (Only free font awesome icons are available for use unless you have a pro account)
Click the name of the icon to copy it and paste it in place of "icon-name-goes-here". Keep "/icon".