How to add and use Wrappers

Wrappers are used to encapsulate components within them. Find out more about how to use the varying wrappers below:

1. Expand Wrapper An Expand Wrapper allows content to expand beyond the navigational header, referred to as the 'wings' of a page. Only put additional information here, all essential information should be in a Content Wrapper. 1a. Add from Blocks In the Page Editor, click or drag and drop the Expand Wrapper icon from beneath the Blocks title on the left-hand side of the page. This is the first icon in the Blocks list. 1b. Add page blocks within the Expand Wrapper Once you have added an Expand Wrapper to the Page Editor, you can then add other items within it by selecting the Free Content bar which will expand from one single green bar to three. It's important to note that content kept within this border will flow outside the margins of the page. Typically this wrapper is used for items that you want to draw attention to, for example, a Large Focus Advert. Right-clicking the frame of the wrapper will open up the 'Expand Wrapper options' pop-up. Here you can add System Classes to the block, for example, "margin-all-10px", "centre-object" or "mobile-none". 2. Content Wrapper A Content Wrapper acts as one column and neatly contains whatever is in it to within the margins of a web page. It’s best to build your Blocks within a Content Wrapper so the content is structured. 2a. Add from Blocks In the Page Editor, click or drag and drop the Content Wrapper icon from beneath the Blocks title on the left-hand side of the page. This is the second icon along in the Blocks list. 2b. Add blocks within the Content Wrapper Once you have added a Content Wrapper to the Page Editor, you can then add other items within it by selecting the Free Content bar (the single green bar) which will expand from a single green bar to three when the block item is selected. It's important to note that content kept within this wrapper will be inside the margins of the page. Right-clicking the frame of the wrapper will open up the 'Content Wrapper options' pop-up. Here you can add System Classes to the block, for example, "margin-all-10px", "centre-object" or "mobile-none". 2c. Content wrap an entire page If you forget to add a Content Wrapper before you add your content, click on the fairy wand icon (Wrappers & 'Special Functions) in the toolbar at the top of the page select Wrap Page. From here you can also wrap individual page structures by highlighting the frame of the section you wish to wrap and clicking 'Wrap Selected (Content)'. 3. Group Wrapper A Group Wrapper is used to contain structures and control multiple items as one, for example wrapping text around an image. The Group Wrapper must always be placed within a Content or Expand Wrapper. 3a. Add from Blocks In the Page Editor, click or drag and drop the Group Wrapper icon from beneath the Blocks title on the left-hand side of the page. This is the third icon along in the Blocks list. 3b. Add page blocks within the Group Wrapper Any page block can be added inside a Group Wrapper. Right-clicking the frame of the wrapper will open up the Options pop-up, allowing you to add System Classes to the block, for example "margin-all-10px", "centre-object" or "mobile-none". 3c. Group wrap existing blocks If you forget to add a Group Wrapper before you add your content, highlight the frame of the section you wish to wrap and then click on the fairy wand icon (Wrappers & 'Special Functions) in the toolbar at the top of the page and select Wrap Selected (Group). 4. Background Wrapper A Background Wrapper takes a picture and uses it as the background for the web page or another element on the page, for example, a column. 4a. Add a Background Wrapper from Page Blocks In the Page Editor, click or drag and drop the Group Wrapper icon from beneath the Blocks title on the left-hand side of the page. This is the fourth icon along in the Blocks list. 4b. Add a picture to the Background Wrapper Select the Background Wrapper and right-click on the item to open the ‘Background Wrapper options’ pop-up. Ensure you have a high-res picture saved to your desktop, then drag it onto the ‘Drag Picture Here’ field. You can also add pictures from the CMS Pictures folder by copying and pasting the path directly into the path field or by clicking the '+' icon to open the Hot Directory. Select the ‘Confirm Changes’ button to close the pop-up and return to your canvas. 4c. Configure the Background Wrapper options The default Background Wrapper configurations are: Scale Picture: Selected Auto Adjust Height: Deselected Repeat: No repeat Position: Center top Change these in the ‘Background Wrapper options’ pop-up. Here’s how each field functions: Scale Picture: The picture retains its height, no matter the size of the container. Auto Adjust Height: Sets the height of the container to the height of the picture. Repeat: If the background picture is small it can be repeated multiple times. Select Auto Adjust Height and deselect Scale Picture. Position: A variety of options to position the background picture. Select Auto Adjust Height and deselect Scale Picture.