Columns

Columns

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

Columns contain your content (objects, text, images, etc.) and has different placement options.  
Manual column layout allows you to move objects freely (traditional PageCloud). 
Auto column layout provides more structured layouts and allows for more responsive designs.

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


Read up on the power of Columns with our Blog article here.



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.


Columns are removed starting with the furthest-right column, moving from right to left.

Tip: Want to duplicate a column? Use the Duplicate column  + icon on the Column control strip. You can also use the delete button to remove any given column.


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.

 

Tip: You can adjust a column width's right in the editor by dragging the control point on the column divider.


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.


If a section has one or more columns set to Manual layout, the Full Width option is disabled.

Layering of content is not supported in Auto Layouts.

When a column is set to Auto content layout the alignment and padding adjustments will appear in the Column tab in the Editing Menu.


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.

By default, text alignment will mimic the horizontal alignment you’ve selected for the Column. This feature can be toggled off using the “Include text alignment” toggle.

You can override the horizontal alignment of any individual object by selecting the object, and then clicking on the “Custom alignment” toggle found under the Arrange tab.


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.


To apply different padding values to each side expand the Padding control by clicking the dropdown.


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.

Tip: You can apply rounded corners and Shadows to Columns from the Column tab in the Editing Menu


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.

You can select multiple objects at once and also drag objects between columns or sections.


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.

Notice the current display size  is shown below the Max W and H input fields. This shows the current size of an object.


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.


When an object is reordered or moved into another column, it will retain its Space Below spacing.

Tip: You can also edit the Space Below value of an object by Selecting it, then heading to the arrange tab of the Editing Menu.


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
User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!