Splitter

The Splitter component allows you to divide your Page into columns so you can arrange components side-by-side.

To add a Splitter to your Page, select it from the list of components. A separate 'Columns' area will then appear inside the Splitter component. Pressing the '+ Column' button will add more Columns to your Splitter.

NOTE - You can add as many Columns as you like, but it is recommended that you don't add more than 5 Columns to your Splitter component.

Once you've added a Column you can expand it and see a list of Components that can be added. Select to add the Components you want, and these will render top-to-bottom within the Column.

There is also an option within each Column to set the vertical alignment of the content within the Column. As well as being the same width, each Column in the Splitter will be the same length which is determined by the Column that contains the most content. Use the 'Alignment' setting within each Column to set whether the content in that Column should be anchored to the top, centred or anchored to the end of the Column.

You don't have to enter content into all of the Columns that you create, so you can use the Splitter to add some horizontal padding to your page. See below for some examples.

There are options to set a background and text colour for individual columns on the Splitter that is different from the Theme for your site. This can be helpful to make sections stand out against the normal site background.

To apply a colour, enter the Hex code in the relevant field within that column. Be sure to test your content first on the Stage environment to make sure you're happy with the colours before publishing the page to Production.

There is also an option to add a Background Image to a column. This is useful for a number of different scenarios, especially:

• When you want a column to only contain an image. Using the 'Background Image' option will take your image to the very edges of the column, unlike if you were to use the 'Image' component which will leave some padding below it
• If you want to have a Background that isn't a solid colour, as you can still add components to the column which will appear over the top of the Background image.

There is an option to add gaps between all of the Splitter columns, and to add a margin between the edge of the screen and the outer-most column of the Splitter.

You can choose from one of 8 pre-defined sizes for the gap/margin.

By default, Splitter columns will have no gap between them and will go all the way to the edge of the screen.