1. Text Over Image
This help video shows how to create a box style layout with text over a background image.
To add a Text Over Image box layout to your page:
- Select the page that you’d like to add the text over image box layout to.
- Click on the ‘+Add Element’ Icon on the Page's Header Bar
- Drag and Drop the Text Over Image icon (under Box Layouts) to the area of the page required.
- Open Single Box Edit by hovering your mouse over a box and clicking the edit icon.
- Create and edit a new box
- Click 'Apply'
You have now added a text over image box layout to your page.
While the style editor allows you to set a site wide overlay filter, each box allows you to override the degree of transparency for each individual box set if you so choose.
Box Overlay colour
The overlay is quite important on this box set, as otherwise the text inside the box can be quite difficult to read. The colour of this filter feeds from the style editor options for the overlay colour.
- To change this overlay colour hover over the box set and you will see: in the right corner.
- Click this icon to open style options
- Scroll down to 'Background overlay colour and select your colour
- Next select 'Background overlay opacity' to change the level of transparency of the overlay colour.
It is important to note these styles control the design of any boxes across the site using this same layout.
Box Over Image Settings
|Boxes per row
||This sets the number of boxes that will appear in a row before wrapping to the next row.
||The height the image will appear on desktop and table.
|Mobile img height
||The height the image will appear on a mobile device. This can be quite important as otherwise images may be too large on mobile.
- Auto: Having auto set automatically sizes your boxes to fit the width of the section they sit within
- Fixed: Fixed allows you to control the width of the box. When selected, 2 more options appear:
- A width slider/field for you to enter the width of each box
- Alignment: This controls the position the boxes align on the page.
||This controls how much spacing sits around the outside of the box
|Box filter overlay
||This controls the % of transparency of the overlay on the box. The base color for the overlay is taken from the box styles.
|Space around text
||Vertical: This controls the space inside the content area on the left and right.
Horizontal: This controls the space inside the content area on the top and bottom.
||The alignment of the contents of the box. This also aligns the button if there is one.