Columns

Columns

Every Section has at least one Column and can have as many as four. 

Columns are presented side by side in desktop and automatically stack in mobile. 

Add & Remove Columns

You can add up to four Columns to better organize your content within a Section. Columns also help in the mobile reflow of content.

1. Select a Section. You can do this by clicking "Section" in the top left corner of the Section to open up the Editing Menu.
2. Select the "Layout" tab in the Editing Menu. 
3. From the dropdown menu, Select the number of columns you would like to be available in the Smart Layout.
4. You can now add content to each column. 
5. Click "Save" and "View Live" to see the Smart layout columns in action.

Adjusting Column widths

If a section has more than one Column you can adjust the percentage width of each Column. By default the Columns are all equal size.

1. Click "Column" in the top left corner of the Section's column to open the Editing Menu. 

2. Select the "Layout" tab in the Editing Menu.

3. Under the heading "Column width", there  is a control that displays the number of Columns and their width percentage.

4. Select the blue bar that is between each Column and drag to adjust the percentage.

5. Also included are links to allow you to make all the columns equal and to flip the Columns.

6. Click "Save" to save changes to your page.

Adding space between Columns

Space can be added between Columns in a Section. This effect is often referred to as "gutters".

1. Click "Column" in the top left corner of the Section's column to open the Editing Menu. 

2. Select the "Layout" tab in the Editing Menu.

3. In the Spacing field enter the pixel value for your desired spacing.

4. Click "Save" to save changes to your page.

Column layout options

Columns can support Manual placement of objects (traditional PageCloud) or Auto placement of objects (Responsive). This provides  flexibility in creating your designs.

1. Click "Column" in the top left corner of the Section's column to open the Editing Menu. 

2. Select the "Column" tab in the Editing Menu.

3. Expand the control "Content Layout". 

4. Select either Manual or Auto layout.

   • Manual Layout allows you to move and layer objects freely within the column. Manual layouts often require additional mobile layout adjustments.

   • Auto Layout is more structured than Manual Layouts. Through the use of padding, spacing, and width settings, you can create responsive designs. Auto Column layouts reflow automatically for different screen sizes. 

5. Click "Save" to save changes to your page.

Content Alignment within Auto Column

Objects within a Column can be aligned horizontally (left, centre, right) and vertically (top, middle, bottom) within the bounds of the Column.

1. Click "Column" in the top left corner of a selected column to open the Editing Menu.

2. Select the "Column" tab in the Editing Menu.

3. Click on the icon that represents the alignment you’d like for the Column.

Applying Padding to Columns

Padding can be used to provide space around objects within Columns. 

1. Ensure the Column is set to Auto Layout. 
2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu.
3. Within the Column tab, move the Padding slider to increase or decrease the Column's padding. 
4. Click "Save" to save changes to your page.

Adding a Column background

1. Click "Column" in the top left corner of the Section's column to open up the Editing Menu. 
2. Select the "Column" tab in the Editing Menu.
3. Under the Column tab, select Column Background. 
4. Choose a Column background:
   • Image -  Select or upload an image to cover the Column.
   • Gradient - Add multi-color gradients for a unique look.
   • Color - a single solid color background.
5. Click "Save" to save changes to your page.

Mobile Column height

In desktop, the height for a Column is determined by the hight of the Section. In mobile layout, since Columns are stacked vertically,  a height control is available for each Column. This allows a Column's height to be adjusted individually within a Section. 

1. Toggle to the Mobile Layout Editor.

2. Click "Column" in the top left corner of a Column to open the Editing Menu.

3. Select the "Column" tab in the Editing Menu.

4. Expand the height control.

5. The options available depend on the type of Columns:

   1. If the section contains only Columns in Auto Layout:

      • Auto - The height of the Section will be based on the content within the Column and any padding added to the content. You can choose to set a Minimum height to ensure the Section is a specific side regardless of content size. 
      • Full Height - The height of the Column will be based on the device. Scrolling will move the visitor to the next Section.  

   2. If the section contains one or more Columns in Manual Layout:

      • Minimum Height - A numeric value that represents the minimum height for the Section. Click the Snap to fit button to reduce the height of the Section to the minimum that will fit the content.  

6. Select the Height choice that suits your design. 

7. Click "Save" to save changes to your page.

Working with Objects in Columns

Objects within Auto layout Columns and Manual layout Columns behave differently. 

Within Auto Columns, objects can automatically grow and shrink depending on the web browser's width and the Column's alignment settings. 

With Columns set to Manual layout you can place objects anywhere within the column and what you see is what you get on the live site.

Move objects between Columns

You can move objects between columns within a selected Section or to other Sections. You can also move objects between Columns set to Auto and Manual layouts.

1. Click and hold  the object you would like to move between Smart Layout Sections. 
2. Drag the object to the new Section.
3. Release the object to add it to the new section. 
4. Click "Save"  to save changes to your page.

Sorting objects -  Auto Column

You can sort objects vertically within Auto Column Layouts using drag  & drop or Move controls in the arrange tab of the Editing Menu.

1. Select the object you’d like to reorder and drag into position. 

2. A visual representation of the select object will help you with positioning.

3. Release the object to add it to the new position.

4. Click "Save" to save changes to your page.

Setting an object's size - Auto Column

Objects within an Auto Column  has a current display size as well as a maximum size. The display width is the current size the object is displayed at in the Column. The maximum size is the largest the object will grow to as the browser window is increased. 

1. Select an object in an Auto Column.
2. Click the "Arrange" tab in the Editing Menu.
3. Under the Size section you can set the Maximum size by adjust the numerical values for Max W (Width) and H (Height)
4. Click "Save" to save changes to your page.

Adding Space below objects - Auto Column

Objects in an Auto Column layouts have a Space Below tool at the bottom left of the object’s wireframe.

1. Select an object in an Auto Column.
2. Click on the Space Below icon on the bottom left of the object's wireframe.
3. Drag up or down to add or reduce the vertical space below the object.

Hide objects in Auto Column Layout

Objects within an Auto Column Layout cannot be hidden in either Desktop or Mobile Layouts. You can hide an entire Section that contains a Columns in Auto Layout

Collapsing Column Height 

You can now collapse your Auto Column height to fit the size of your content in order to create a "Card" effect. This allows your Section to remain at full height, while adjusting the height of the Column. 

Note: The collapse Column height feature will apply to all Columns in your Section, and does not work for Manual Columns.

1. Click on an Auto Column
2. Navigate to the Layout Tab in your Editing Panel 
3. If your Section is not already in Full height, select Full height
4. Once your Section is in Full height, the Collapse Column height will appear and you can toggle On
5. Align your Columns to the top, middle, or bottom of your Section