Quick Links
Examples
Content
Placeholder Image
This is an image/ media picker. This image will set the height of the hero (if no image is added a default height will be used)
Video Background
This is a text field which will allow the user to add the URL of the video. (add a transparent placeholder image to set video height)
Video Title
This is a text field to input the title of the video. This is required for the the video element.
Video Poster
This is an image/ media picker which is used as a backup image if the video doesn't load right away
Title
This is a text field
Content
This is a (WYSIWYG) text area.
Block Name
This is a text input to add the block name to help distinguish between the content blocks. This is only seen on the CMS.
Settings
Full Height Hero
This checkbox will set the hero banner to 100% height of viewport (window)
Video Background ID
This is a text field to add a unique ID to allow the user to pause the video (default: herovid)
Title Colour
This is a dropdown with the eight colour options. It will set the colour of the title font.
Title Background Colour
This is a dropdown with the eight colour options. It will set the colour of the title background.
Title Padding
This dropdown will set the padding around the title text. The options are Small, Medium, Large, X-Large.
Heading Type
This dropdown will set the heading type. The options are H1 - H6
Heading Size
This dropdown will set the heading size. The options are X-Small, Small, Medium, Large, X-Large.
Title Position
The position can only be set when using a placeholder
Title Bold
This checkbox will make title text bold.
Title Uppercase
This checkbox will make title text uppercase.
Title Margin
This checkbox will add bottom margin to the title.
Parallax Image
This checkbox will allow the image to remain in place as the user scrolls
General Block Settings
GRID SIZE
Full width - A checkbox to select if the container is full viewport width
Grid size (Desktop) - A dropdown of options to choose the grid cell size at desktop size (Large - 12 columns, Medium - 10 columns, Small- 8 columns, X-Small- 6 columns, XX-Small- 4 columns)
Grid size (tablet) - A dropdown of options to choose the grid cell size at tablet size (Large - 12 columns, Medium - 10 columns, Small- 8 columns, X-Small- 6 columns, XX-Small- 4 columns)
GRID ALIGNMENT
Horizontal Grid Alignment - The horizontal alignment of the block and items (Left, Right or Centre)
Vertical Grid Alignment - The vertical alignment of the block and items (Top, Middle or Bottom)
Items Align - Align the items of the block (Left, Right or Centre) - this will only be used on multi item blocks that are side-by-side
Content Text Align - Align the text of the block (Left, Right or Centre)
SPACING
The settings below all use the same values for desktop (None = 0px, X-Small = 10px, Small = 20px, Medium = 30px, Large = 50px, X-Large = 80px, XX-Large = 100px). Default is 0.
Padding Top
Padding Bottom
Margin Top
Margin Bottom
BACKGROUND
Background Colour - Use the eye-drop picker to choose the background colour of the block.
Background Colour on Container - Set if background colour appears on container or main block (Default: Main block)
Background Image - Select image from media folder to display on background of the main block.
Background Image Position - The position of the background image, default will be top left. Select an option of keyword pairings to set the position.
Background Image Size - This will change the way the background image displays. 100% by default. Options (Auto, Contain, Cover)
Overlay Tint - Colour dropdown for overlay tint. Options (Primary, Secondary, Heading, Body font, Light grey, Dark grey, White, Black)
Overlay Tint Amount - Select the opacity of the overlay (0 = no tint, 100 = solid colour tint)
Block Font Colour - Adds a class to overwrite the font colour of the block.
VISIBILITY
Hide - Hide this block (useful for working on a block while the site is live)
BLOCK ID
Block ID - Add an ID to target this section with a link or for custom CSS
CUSTOM CLASSES
Custom Classes - Add a custom class to the block