Online Support Centre

Follow

Column Splitter widget

A section can be divided into four columns. The Column Splitter widget enables you to split a column further. This allows 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 split.

mceclip0.png

Click on the Design Tab and choose how you want the Column Splitter designed. You have the ability to set a splitter background colour and change the transparency. Select what pixels you want displayed between the widgets and if you want to add a drop shadow or not. 

You can also choose whether you want the widget to appear when viewing the website via mobile. If you don't want the widget to appear when viewing via mobile, tick the "Hide on Mobile" that is displayed in the top right corner of the modal.

Click Save.

mceclip1.png

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 eg. Image.

Select the image to use from your library.

 

The column splitter allows a more compact display of multiple images.

 

TIP: 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 (more like they would appear in a desktop browser). You can achieve this by reducing the number of columns and using Column Splitter instead, then in the settings untick the checkbox 'Stack content on mobile view'. 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 the four images would automatically stack below each other in mobile view. But if you want these four images to appear on a mobile as two images side by side sitting above the over two images side by side, then you can set the section settings to be two columns wide, and use the Column Splitter widget to split both columns further into two. So there would be still end up being four content areas for your four images, but they are now within two Column Splitter widgets. Then untick the checkbox 'Stack content on mobile view' for both Column Splitters and each one will force the images to remain displayed side by side in mobile view (two by two, instead of displaying singly atop each other).

mceclip1.png

You have the ability to change the Background colour of the Column Splitter. To do this, click on the Background tab when in the Column Splitter settings, choose your colour and Set a Transparency, then Save.

mceclip2.png

 

Was this article helpful?
0 out of 0 found this helpful

Comments