With the Columns component, you can add content in side-by-side columns to pages of your website. To get started, click on the Add Content button, then drag the Columns component to a page of your site. Next, click on the component to open the options panel.
Managing Columns
By default, the component includes two columns which are shown in a list in the options panel. To add another column, click the Add button. To remove a column, click the red X on the corner of the column you want to delete.
There are two ways to adjust the size of each column in the component:
- Click on a column in the list, then adjust the Size option. This option provides set proportions to choose from.
- For more fine-grained control, hover over the component. You’ll see vertical lines between each column; click and drag the vertical line to the left or right to adjust the sizes of the columns.
Spacing
To control the spacing between columns, click on the Spacing dropdown and choose a different spacing option. By default this is set to small.
Prevent Collapse on Mobile
On mobile devices and smaller screens, columns will normally stack on top of each other rather than display side-by-side. This helps improve readability when you have reduced width. You can, however, prevent this from happening if readability isn’t a concern. To do that, toggle the Prevent Collapse on Mobile option on.