Column control

Use this guide to add and edit column control.

Column control allows you to organise your content and components into columns on your web pages. 

Features

The component: 

• creates 2 or 3 columns of specified widths
• allows you to add and stack new or existing components inside of it
• can be used on homepage, content page, news articles, events, and the contact page.

Before you start

Navigate to the page where you want to add or edit a column component and you are ready to begin. 

Step 1: Add column component

• Select Drag components here.
• Select the plus icon.

• Select Column from the Insert New Component list.

Step 2: Edit the column component

• Select the Column component.
• Select the spanner icon to choose your column layout. This is the Configure button. 

Step 3: Select the column layout

• Select the Layout of your column. A drop-down will appear with the column layouts that you can choose from.

Option 1: 100%

• Select 100% from the Layout drop-down.
• Select the tick on the top right of the pop-up to save the layout settings.

• 100% column control allows for extra space between components outside of the column, on the top and bottom.

Option 2: 66%/33%

• Select 66%/33% from the Layout drop-down.
• Select the tick on the top right of the pop-up to save the layout settings.

• 66%/33% column control allows components to be displayed side by side, with a wider left column.
• This also allows for extra space between components outside of the column, on the top and bottom.

Option 3: 33%/66%

• Select 33%/66% from the Layout drop-down.
• Select the tick on the top right of the pop-up to save the layout settings.

• 33%/66% allows components to be displayed side by side, with a narrower left column.
• This also allows for extra space between components outside of the column, on the top and bottom.

Option 4: 50%/50%

• This option is only available when adding a column component to content pages, content landing page, homepage and the landing page for news.
  
• Select 50%/50% from the Layout drop-down.

• 50%/50% allows components to be displayed side by side.
• This also allows for extra space between components outside of the column, on the top and bottom.

Option 4: 33%/33%/33%

• This option is only available when adding a column component to the homepage.
• Select 33%/33%/33% from the Layout drop-down.

• 33%/33%/33% allows components to be displayed side by side.
• This also allows for extra space between components outside of the column, on the top and bottom.

Step 4: Add, copy or move components within the column layout

Option 1: Add component

• Select the Drag components here within a column.
• Select the Plus icon.
• Select a component from the Insert New Component list.

Option 2: Copy and paste component

• Select the component you want to copy.
• Select the duplicate pages icon to copy the component. It is next to the spanner icon.

• Select the Drag components here within a column.
• Select the clipboard icon. This is the Paste button.
• A copy of the component will appear. 

Option 3: Move component

• Select the component you want to move.
• Drag and drop the component into its new location within the column. Once you see a blue arrow appearing where you want it to move you can drop it. 

Example of a component inside a column component:

Troubleshooting

• If you change the column layout all components within the column will be hidden. To unhide these components change the column layout back to the previous column layout.
• To add existing components within a column to a new column layout you need to copy and paste components or move components out of the original column layout. Next, you will need to switch to the new column layout and add the components into the new columns.

Publish your changes

• For changes to be updated on your live school website you will need to publish the page. 

 You may also find useful:

• Add, copy, move, delete components