What is a page hero row?
A hero row is intended to display full width image or video at the top of a page. Hero images/videos catch a users attention and help draw them in. You should only add one hero image/video.
How do I add a hero row to a page?
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Click the Add row button to the right of the Content heading
Select One column (100%) from the drop-down menu under Columns.
Click the Add button
Ensure the row is at the top of the list, see 'How do I move rows around?'.
Click the Edit button in the top right.
Tick the First row is hero row checkbox under Settings.
Click update.
After adding a hero row you will need to add some content, see 'How do I add an image to a hero row' or 'How do I add a video to a hero row?' and 'How do I add a title to a hero row?'.
How do I add an image to a hero row?
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Find the row that you are looking for and click Background in the drop-down menu under More in the Options column.
Click the Choose File button to open a File Explorer window and select an image.
Select a Background image focal point.
Select a Background image scroll effect.
Select a Background image repeat.
Select a Background image fit.
Ensure that Background YouTube URL or ID is empty.
Enter a Background overlay opacity.
Click the Update button.
How do I add a video to a hero row?
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Find the row that you are looking for and click Background in the drop-down menu under More in the Options column.
Ensure that Background image is empty, if not tick the Remove image checkbox.
Enter a Background YouTube URL or ID.
Check that the correct video is displayed in the Preview.
Enter a Background overlay opacity.
Click the Update button.
How do I add a title to a hero row?
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Find the row that you are looking for and click the Content title in the Columns column.
Enter a title in the Content with apply a Heading 1 format and centre alignment, see 'How do I edit the content of a page?'.
Click the Update button.
How do I edit the minimum height of a hero row?
Setting a minimum height will ensure that the hero row will never be displayed smaller than the specified height. The recommended minimum height is 300px.
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Find the row that you are looking for and click Layout in the drop-down menu under More in the Options column
Enter a Minimum row height.
Click the Update button.
How do I edit the maximum height of a hero row?
Setting a maximum height will ensure that the hero row will never be displayed larger than the specified height. The recommended maximum height is 500px.
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Find the row that you are looking for and click Layout in the drop-down menu under More in the Options column
Enter a Minimum row height.
Click the Update button.
How do I delete a hero row?
Go to Website > Pages
Find the page that you are looking for and click on it.
Click the Content tab under the page title.
Find the row that you are looking for and click the Delete button in the Options column.
Click the Delete button.
Click the Edit button in the top right.
Un-tick the First row is hero row checkbox under Settings.
Click update.