How to add Multi-columns, Content SlidersTab Panels and Accordions

Page construction blocks allow you to build attractively structured pages. Click on a block icon to add it to the Page Editor, or simply drag and drop into the green Free Content bar.

1. How to add Responsive Multicolumns to the Page Editor A column is a vertical division of a page. They can be adjusted to different widths and have the option of adding styling or class overrides to them. 1a. Add from Blocks When you are in the Page Editor choose from a responsive multicolumn with either 2, 3, or 4 columns. You will find 'multicol' icons in the second row below the Blocks title. If you need to add more columns to a multicol structure, select one of the columns within it and then click on Plus Col in the Blocks options. This will add a new column beside the one that was selected. You can easily add margins to the columns, add system classes, or apply column widths by right-clicking on the multicol block to open the Options pop-up. If you perhaps wanted the first column to be wider than the others, find 'Column Widths (as Grid units)' in the Options pop-up and change the weighting from equal 1:1 to your preferred size and click 'Refresh Columns' for the Page Editor to update and then 'Confirm Changes'.  1b. Adding page blocks to Columns Once the Responsive Multicolumn block has been added to your page, click on a column and drag and drop a block into the green Free Content bar. This could be an image, body text, a video etc. Highlighting the border of a column and right-clicking will open the Column Options pop-up. Tick the Responsive Lock box if you want your columns to hold their structure when viewed on a mobile or tablet device. If left un-ticked the columns will adapt to the device it’s viewed on for example, a block of columns will appear vertically on a mobile screen. 2. How to add a Tab Panel to the Page Editor A Tab Panel is another way of displaying large sections of content. By organising the information into useful, bite-size pieces, the user can click on the labelled tabs and get to what they need quickly. 2a. Adding a Tab Frame When you are in the Page Editor find the Tabs Frame icon below the multicols and either click the icon to add a Tab Frame above the highlighted block in the Page Editor, or drag and drop the icon to your desired location. This will automatically add a Tab Frame containing three tab items to the page. To add more tab items to the frame select the Tab Block icon next to the Tab Frame in the Blocks menu. You can also do this by selecting the Tab Frame and right-clicking the title to display the Options pop-up. You will see 'New Tab' on the left-hand side of the pop-up, and 'Click' on the right. Hit the 'Click' button to add the Tab Block. 2b. Adding content to the Tab Item Once a Tab Frame has been added to your page, highlight one of the Tab Items within it and then add your content inside. Any page block can be added to a Tab Item, except Content Sliders. Tabs should never be used to conceal unnecessary amounts of content. 2c. Adjust the settings of the Tab Frame and Tab Item Once you’ve added content to each Tab Item you can adjust the Tab Frame settings by clicking on the frame so that the border is highlighted, then right-clicking to open the Options pop-up. From here you adjust the Height of the whole block (in pixels) and choose Slider Tabs, Left Tabs or Top Tabs from the Layout drop-down. Right-clicking on the Tab Item opens a separate Options pop-up, from here you can enter the name of the Tab Item into the Label field. Remember to click Confirm Changes once you've finished making amends. 3. How to add an Accordion block to the Page Editor Accordion blocks expand and collapse when clicked, breaking large chunks of content into shorter, collapsible sections. 3a. Add from Blocks When you are in the Page Editor find the Accordion Frame icon to the right of the Tab Block. This icon will add an Accordion Frame containing three Accordion Items to your page. 3b. Adding items to the Accordion block Once you’ve added an Accordion block to the Page Editor, highlight an Accordion Item to add content within each block. Any page block can be added to an Accordion Item. Accordions should never be used to conceal unnecessary amounts of content. 3c. Adjust the settings of the Accordion and Accordion Item Once you’ve added content to each Accordion Item you can adjust the Accordion settings by clicking on the frame so that the border is highlighted, then right-clicking to open the Options pop-up. From here you can add System Classes to the block, for example "margin-all-10px", "centre-object" or "mobile-none". Right-clicking on the Accordion Item opens a separate Options pop-up, from here adjust the Open Height, Close Height and Animation Time (measured in seconds). You can also tick the checkboxes for Unique Open or Default Open (if ticked the Accordion Item selected will be seen as open by default until clicked to close). 4. How to add a Content Slider block to the Page Editor A Content Slider is a list of items in a carousel controlled by navigational arrows or indicator dots. Similar to the large and small focus sliders; you can choose the number of slides shown and whether they appear in a fixed or random order. 4a. Add from Blocks When you are in the Page Editor find the Content Slider Frame icon below the Tabs Frame. The Content Slider Frame will add a Slider Frame containing three Slider Items to your page. To add more Slider Items to the frame, highlight the border of an existing Slider Item and select the Content Slider Item icon within the page Blocks menu. 4b. Adding page blocks to the Content Slider Once you’ve added a Content Slider block to the Page Editor, highlight a Slider Item to add content within each block. Any page block can be added to a Slider Item. A Content Slider could be used for displaying a collection of YouTube videos, Flexible Images with text or a selection of shop products, the possibilities really are endless. Drag and drop the Block into place, or highlight the relevant slider item and click the Block icon you want for it to be added. 4c. Adjusting the settings for Content Sliders To adjust the settings of the Slider Frame, highlight the Frame border and right-click to open the Options pop-up. Customise your slider by selecting the number of slides that show, adding autoplay or choosing infinite scroll, amongst many other configurations. EXTRA TIP For the next Item in the Content Slider to fade before the next appears, highlight the Slider frame, right-click for the Options pop-up and select Yes in the Fade option.