Experiencing an issue?

Adding Columns

Column Components create structure on your webpage. Like Sections, the Column Component is a building block for pages. Columns create space for images, text, headings, and other content.

For best display results on all devices, including mobile, use columns to create horizontal spaces. Ideally, content is structured to be viewed from left to right, not from top to bottom. Content in vertical columns may not display well on mobile screens.

See Also

 

 

1  Adding a Column Component

The Column Component is in the Drag and Drop Panel on the left-hand side of the screen inside the Edit Content area.

  1. Click WEBSITE on the top menu bar. 
  2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
  3. Hover your mouse pointer on a page.
  4. Click the Edit button. The Edit Content area opens.
  5. Drag a Column Component on to the page. The Columns Picker panel opens.
  6. Select the number of columns (or cells) you want to create inside the Column Component.
  7. Customise column width, if required.
  8. Click OK.  

 

2  Working with the Columns Picker

Use the Columns Picker to configure the column pattern you want.

Column Templates

The Columns Picker opens with a two-column template. There are 5 additional templates at the bottom of the panel. Click a template to place it in the panel with grey bars.

Grey Bars

The Columns Picker has 12 grey vertical bars. The bars visually illustrate how space is allocated to each column.

Device Display

Click a button at the top of the picker to see how the selected template appears on desktop computers, tablets, and phones.

 

columns-1b.png

 

3  Resizing column width

Change the amount of space allocated to each column by clicking the plus (+) and minus (-) buttons on a column.

  1. Hover the mouse pointer on a green column.
  2. Click the plus (+) or minus (-) buttons to increase or decrease the column width.
Note:  For best display results, the width of all columns combined should include the 12 grey bars.


columns-2b.png

 

4  Creating a new template

If you need a different layout, create a new column pattern with the Template button.

  1. Click the Template button. That removes the current column template.
  2. Move the mouse pointer to the left side of the panel and then click the box with a dotted border. That inserts a single column one grey bar wide. The box with a dotted border moves to the next bar.
  3. Click the box with a dotted border to insert a new column.
  4. Click the plus (+) or minus (-) buttons on each column to increase or decrease its width.
  5. Click OK to save.

column-giff.gif 

 

5  Customizing Column Component settings

You can modify the appearance of a Column Component.

  1. Hover the mouse pointer on the Column Component. The green toolbar displays.
  2. Click the Settings button on the toolbar. The Columns Settings panel opens.

columns-xx1.png

 

Edit Column Layout

Click to open the Columns Picker panel and modify the current layout.

Background

Change the colour of the entire Column Component. Choose one of your branding colours (if selected) or a colour from the palette. For information about branding colours, see:

Advanced

Click the Advanced tab to customise CSS and visibility. To learn about custom styling with ID and Class Name selectors, see:

Component Visibility

Control which devices display the content. The default is all devices. To learn about component visibility settings, see:

 

6  Customising individual column settings

You can modify the appearance of individual columns inside the Column Component.

  1. Hover the mouse pointer on the Column Component. The green toolbar displays.
  2. Click the Settings button on the toolbar. The Settings panel opens with one tab for each column.
  3. Click an individual column tab. A Column Settings panel opens.

columns-x3.png

 

Background

Place a solid colour or image in the column background.

To change the background colour of a column, click the colour tab. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. 

To insert a background image, upload a picture from your computer, or insert an image from the File Manager. For information about images, see:

Visibility

Column visibility lets you control which devices display that content. The default is all devices. To learn about visibility settings, see Customising Component Visibility.

Padding

Adjust the column’s Top-Bottom (T-B) or Left-Right (L-R) padding. Padding is the space between the outside edge of an image and the inside walls of the Image Component.

 

column-1a.png

If you find this article useful, you may also be interested in the following: 

Related articles