A section can be divided into four columns. The Column Splitter widget enables you to split a column further, allowing you to display more than four columns of content.
To get started, click the +ADD CONTENT button.
Select the Column Splitter widget from the widget menu.
Next, select how you would like the column to be split.
Clicking on the Design tab allows customisation of the splitter background colour and transparency. Here you can also alter the widget padding and drop shadows.
If you don't want the widget to appear when viewing the website via mobile, tick the Hide on Mobile that is displayed in the top right corner of the modal.
Then click Save.
You can now add content to the separate columns within the Column Splitter. Simply click +ADD CONTENT, then select the widget you wish to display, e.g. the Image widget.
Then select the image to use from your library.
The column splitter allows a more compact display of multiple images.
Note: You can use the Column Splitter widget to control how content appears on a phone or tablet. For example, if you simply use ordinary (unsplit) columns in a page section, then the content of each column will automatically stack down under each other in mobile view. In some instances you may prefer some content to not stack in mobile view, and instead stay side by side (as they would appear on a desktop browser). You can achieve this by reducing the number of columns and using Column Splitter instead, then un-tick the checkbox 'Stack content on mobile view' in the settings. This forces the content within each splitter column to remain side by side in mobile view (you will not see any difference in appearance in desktop view).
For example, say you wish to display four images side by side within a section in desktop view. Normally, you would set the section settings to be four columns wide, and in mobile view these four images would automatically stack below each other in four rows. However, you may instead wish to display these four images in only two rows, giving a more compact look. To do this, simply use a Column Splitter widget in each of your two sections and add your four images, remembering to untick the checkbox 'Stack content on mobile view' for both of your Column Splitters. This will force the images to remain displayed side by side in mobile view (two by two, instead of displaying the four images stacked one below the other).
You also have the ability to change the Background colour of the Column Splitter. To do this, click on the Design tab when in the Column Splitter settings, choose your desired colour and transparency, then Save.
