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:
- 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.
- Width - adjust the column's width relative (%) to it's parent row.
- 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.
- Padding - pad a column. You can configure how many pixels each padding unit equals under "Page Layout" in your Page's Theme.
- 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.
- 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.
- 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: