Working with Smart Layouts

Smart Layouts are a collection of new features and functionality now available in Sections. With Smart Layouts, Sections can be divided into Columns in either Manual or Auto Layouts.

Manual Layout Columns offer the same creative freedom you've come to expect from PageCloud.

Auto Layouts are more structured, allowing for new options like full-width and full-height responsive designs.

Smart Layouts open up a large range of new site designs possibilities.


Working with Smart Layouts

Sections, updated to use Smart Layouts, can contain both manual and auto columns. Manual columns offer the same creative freedom you’ve come to expect from PageCloud. 

Alternatively, Auto columns provide additional structure allowing full-width and full-height responsive designs.



Columns

Every Section now has at least one column and can have as many as three . 

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 responsive designs.

Columns are presented horizontally in desktop and automatically stack in mobile.

 

Add & Remove Columns

You can add up to three columns to better organize your content. This also helps 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 action 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 of 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 layouts allow you to move and layer objects freely within the column. Manual layouts often require additional mobile layout adjustments.

    • Auto Layouts are 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 placement. 
  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 between a Background Color or a Background image. 
  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 Columns 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 1 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. 

With Columns set to Auto layout, 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 in Auto Columns 

You can sort objects vertically within Auto columns using drag and drop or the 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.


Adding space between objects in Auto Columns

Objects in an Auto layout column have a space control at the bottom left of the object’s wireframe.

You can also edit the space value in the arrange tab of the Editing Menu.


  1. Select an object. 

  2. Click and drag the space control tool at the bottom left of the object to add or remove space.

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


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

Tip: You can also edit the Space below an object in the arrange tab of the Editing Menu.


Full width objects

Objects can be set to full width within a Column. This allows the object's size to increase and decrease as the Column is adjusted.

  1. Select an object.

  2. In the Editing Menu's  Arrange tab, click to toggle on Full width.

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

Tip:  Full width is a great way to have images and image galleries expand to fill a web browser's width


Maximum width

Objects can grow and shrink within Sections set to Full Width. When applying a width to an object it applies a maximum width. This maximum width lets the browser know that you want this object to expand up to this size, but no further. It’s a great way to apply some limits to keep your design looking the way you want it to no matter the screen size.


  1. Select an object. 
  2. Expand or reduce its width using the control points on the sides of the object to set the maximum width.
    • Alternatively You can use the Editing Menu to set the maximum width using numeric values.
  3. Click "Save" to save changes to your page.

If you do not see control points to edit the width of an object, check to see if the object is set to full width.


Custom alignment

Columns set to Auto Layout apply both a vertical and horizontal alignment to all the objects within them. It is possible to override the horizontal alignment for individual objects using the Custom alignment control.

  1. Select the object you would like to apply a custom alignment to.

  2. In the Editing Menu > Arrange tab, click to toggle on Custom alignment.

  3. Select an alignment option.

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


Section controls


Width Options for Sections

Sections can have different width settings to change how content appears when adjusting the size of your browser window.

  1. Select a Section. 
  2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu.
  3. Select the "Layout" tab in the Editing Menu.
  4. Under "Width" you have multiple choice:
    • Page Width -  Constrains Columns and content to the width set in your Page Settings. The default is 1080px wide. 
    • Full Width - Columns and content adjusts to fit the full width of the web browser. This requires the columns within the Section to be set to "Auto" Layout.

  5. Select the Width choice that suites your design.
  6. Click "Save"  to save changes to your page.


Height Options for Sections

You can adjust the height of a Section to change how content appears when resizing the browser window.

  1. Select a Smart Layout section. 
  2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu
  3. Select the "Layout" tab in the Editing Menu.
  4. Expand "Height" to display your options. The Options available depend on the Column layouts set within the Section. 
    1. If the section contains only Columns in Auto Layout:
      • Auto - The height of the section will be based on the content within the section 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 section will be based on the browser's window. As you expand or contract the browser window, the section will expand or contract. Scrolling will move the visitor to the next section.  
    2. If the section contains 1 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.
  5. Select the Height choice that suites your design. 
  6. Click "Save"  to save changes to your page.

When adjusting the height of a Section using the control points at the bottom of a section, it will automatically apply a minimum height.


Applying Padding to a Section

Section Padding can be used to provide space around the columns within the section.

  1. Select a section. 

  2. Click "Section" in the top left corner of the Section to open up the Editing Menu

  3. Within the Section tab, move the Padding slider to increase or decrease the Sections'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 on the down arrow.


Edit Mobile Mode of Smart Layout

  1. While editing a page, Click  "Mobile Layout" at the top centre of the page. 
  2. You will now be able to edit the mobile mode of a Smart Layout Section. 
  3. Click "Save"  to save changes to your page.

By default, Mobile Mode is disabled. To Activate Mobile Mode, head to the Page Settings > Mobile Tab > Select "Publish Mobile Mode".

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!