A row is a Container Component. Containers are organized in a hierarchy.
Section(s) > Row(s) > Column(s)
This means rows contain columns - not sections, rows, or elements. This also means that every row must be in a section. The row component is located in the Right Pane - it looks like this:
Adding a Row
Like all components in Landing Lion, you can add a row to any page variant or page template by dragging it from the Right Pane and dropping it on the Canvas. There is no limit to the number of rows you can add to a page.
Selecting a Row
To select a row in Landing Lion the Selection Tool must be set to Auto or Row.
Editing a Row
Edit a selected row in the Right Pane of the Page Editor:
- Full Width & Stack On Mobile - expand a selected row the full width of a page - ignoring your page layout's minimum width. Toggle "Stack On Mobile" off to prevent this row's columns from stacking when the page is being viewed on a mobile device.
- 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 row. 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 row. 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 row. 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.
Making your rows mobile responsive:
By default, rows are set to be mobile responsive. This means a row's columns will "Stack on Mobile"; toggle this off to keep a row's columns side-by-side on mobile. Toggle the "Full Width" checkbox to force a selected row to ignore the minimum width defined in your page layout.
Below are two images of the same row. The top image has "Full Width" toggled off and the bottom image has "Full Width" toggled on. The bottom image shows how the row is ignoring the minimum width we set in our page layout.
"Full Width" on.
"Full Width" off.
Duplicating a Row
Duplicate a selected row by clicking this duplicate icon in the Top Right Bar:
🦁 🔑 ⚠️ Lion Key Alert: you can use the keyboard shortcut to duplicate a row (or any component). Use ⌘D for Mac and Ctrl-D for PC.
Removing a Row
Remove a selected row by pressing backspace or clicking this trash icon in the Top Right Bar: