Working with Smart Layouts


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.


Team Members - If your site is using different Team Members, please make sure all Team Members are in the beta program. 



Update all Sections on a page to enable Smart Layout features


  1. Select any Section on a page. 
  2. Click "Section"  in the top left corner of the Section to open the Editing Menu.
  3. Select the "Layout" tab in the Editing Menu.
  4. Read the warning message  and click "Yes, Update this page"
  5. All sections on your page will be updated to include the new Smart Layout features.
  6. Click "Save" to update your page's Sections to Smart Layouts.

You can revert to standard layouts by using the undo shortcut until the page is saved. Once the page is saved you cannot revert back from Smart Layouts


Add Smart Layout Sections

  1. Navigate to the page you would like to edit.
  2. At the top and bottom of each Section will be a + button to add a new Section.
  3. Click the + button to open the Section browser.
  4. Select the Smart Layout Beta library in the left column.
  5. Select a Smart Layout Section to add it to your page.
  6. Click "Save" and "View Live"  to see the Smart Layout section in action.


Columns


With the Smart Layouts feature, Sections now have columns. Every Section has at least one column and can have as many as three . 

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

Columns contain your content (objects, text, images, etc.) and can support either Manual or Automatic (responsive) placement of content . Columns can also support their own background colors and images.

 

Add & Remove Columns

Smart Layouts allow you to add up to three columns to better organize your content. This also helps in the mobile reflow of content.

  1. Select a Section that has been updated with Smart Layouts. 
  2. Click "Section" in the top left corner of the Section to open up the Editing Menu.
  3. Select the "Layout" tab in the Editing Menu
  4. From the dropdown menu, Select the number of columns you would like to be available in the Smart Layout.
  5. You can now add content to each column. 
  6. 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: if you 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.


Auto and Manual Column layout

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


Manual Column layout


Manual layout allows you to move and layer objects freely within the column. Manual layouts and will often require mobile mode edits.


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


Auto Column layout

Auto Layouts are more structured than Manual Layouts. Through the use of padding, spacing, and width settings, you are able to create responsive designs that reflow automatically for different screen sizes. 

Layering and side-by-side content are not currently supported in Auto Layouts. These features are in development.


Change Column Layout

  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 called  "Content Layout". 
  4. Select either Manual or Auto layout. 
  5. Click "Save"  to save changes to your page.


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

Content within a column can be aligned horizontally (left, centre, right) and vertically (top, middle, bottom).

  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.


Custom alignment

Auto columns 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.


Objects within Columns

Objects within auto columns and manual columns behave differently. With manual columns what you see is what you get. With Auto columns, objects can automatically grow and shrink depending on the width of the browser and the column applies content alignment settings like top center or bottom left to all objects within it.


Move objects between Columns

You can move objects like text, images, buttons, galleries etc. between columns within the selected section and other sections. This includes moving objects between columns with 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.

When dragging an object over a Section you will see the Section highlight with a purple overlay. This lets you know which Section the object will move to if is released. 


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. 

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


Adding space between objects in Auto Columns

Every object in an Auto column has a control located near the bottom left of the object that lets you create space below the object. You can also edit the space value in the arrange tab of the Editing Menu.


  1. Select an object. 

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


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


Apply Full width effect to objects

Objects with the Full width setting, adjust to fit the full width of the column they are within. As the column increases and decreases in size they adjust accordingly.

There are many cases where you may want to apply Full width to an object. For example, full width images and galleries that expand to fill the available space.


  1. Select the object you would like to apply Full width to.

  2. In the Editing menu Arrange tab click the Full width Toggle.


Maximum width

Objects can grow and shrink within full width sections. When you apply 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.
  3. Alternatively you can use the Editing Menu to set the maximum width using numeric values.

If you don’t see any control points to edit the width check to see if the Full width toggle is on.


Applying Padding to Columns

Padding can be used in a Smart Layout Column to provide consistent space around the objects within the column. 

  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.



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. Under "Height" you have multiple choices:
    • 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.  
  5. Select the Height choice that suites your design. 
  6. Click "Save"  to save changes to your page.

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


Width Options for Sections

Smart Layout Sections can have different width settings to change how content appears when adjusting the size of your 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. Under "Width" you have multiple choice:
    • Page Width -  Constrains your 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.


Section and Column Background

Smart Layouts offer advanced flexibility for setting backgrounds for both Sections and Columns independently. You can maintain Section backgrounds while also including independent overlaid Column backgrounds.


Set Section background

  1. Select a Section.
  2. Click "Section" in the top left corner of the Section to open the Editing Menu.
  3. Select the Section tab, then select "Section Background".
  4. Choose between a Background Color or a Background image. 
  5. Click "Save"  to save changes to your page.


Set 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.


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!