A column is a Container Component. Containers are organized in a hierarchy.

Section(s) > Row(s) > Column(s)

This means you cannot add containers to a column, because they sit at the bottom of the hierarchy. Columns can, however, contain elements - they're the only components that can. There are six columns in this row - the maximum allowed:

The column component is located in the Right Pane - it looks like this:

Adding a Column

Like all components in Landing Lion, you can add a column to any page variant or page template by dragging it from the Right Pane and dropping it on the Canvas.

Whenever you add a column to a row its initial width will be set to the width of its parent row divided by the number of columns in it. You can adjust a column's width.

Selecting a Column

To select a column in Landing Lion the Selection Tool must be set to "Auto" or "Column". 

Editing a Column

Edit a selected column in the Right Pane of the Page Editor:

  1. Full Width On Mobile - toggle this to dictate whether a column should occupy the entire width of its parent row when viewed on a mobile device.
  2. Width - adjust the column's width relative (%) to it's parent row.
  3. Background - add as many backgrounds as you want. Backgrounds stack in the order in which you add them. You can change their order by dragging-and-dropping them.
  4. Padding - pad a column. You can configure how many pixels each padding unit equals under "Page Layout" in your Page's Theme.
  5. Border - borders can be set by either px or %. You can choose which sides have borders and set a radius. You can pick one of the three types of borders: solid, dashed and dotted. Initially, it is set to solid.
  6. Drop Shadow - access drop shadows on the selected column. You can add as many drop shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
  7. Inner Shadow - access inner shadows on the selected column. You can add as many inner shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.

Newly added columns are set to be mobile responsive, seen here:

Every newly added column is initially "Full Width on Mobile" - mobile responsive. This means sibling columns will stack vertically within their parent row - one on top of another - when your page is viewed on a mobile device. Alternatively, you can uncheck "Full Width On Mobile" to scale a column's width relatively. Sibling columns with "Full Width On Mobile" unchecked stay locked in, hand-in-hand, on the same row - never stacking

Duplicating a Column

Duplicate a selected column by clicking this duplicate icon in the Top Right Bar:

🦁 🔑 ⚠️  Lion Key Alert: you can use the keyboard shortcut to duplicate a column (or any component). Use ⌘D for Mac and Ctrl-D for PC.

Removing a Column

Remove a selected column by pressing backspace or clicking this trash icon in the Top Right Bar:

Relevant Help Articles:

Did this answer your question?