A section is a Container Component. Containers are organized in a hierarchy.
Section(s) > Row(s) > Column(s)
This means sections contain rows - not columns or elements. There is no limit to the number of sections that can be added to a page; however, you must have at least one. If you start from a blank page template don't fret - we add the required section for you.
The section component is located in the Right Pane - it looks like this:
Adding a Section
Like all components in Landing Lion, you can add a section to any page variant or page template by dragging it from the Right Pane and dropping it on the Canvas.
Selecting a Section
To select a section in Landing Lion the Selection Tool must be set to Auto or Section.
Editing a Section
Edit a selected section in the Right Pane of the Page Editor:
- Id - this id will set the HTML id on the selected section. A newly added section does not have an id set. Ids have to be unique to the page variant or page template you are currently editing.
- 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 - adjust the selected section's padding. 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 section. 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 section. 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.
Using ids to your advantage:
A section can have an id. This id pairs one-to-one with the section's HTML id. Each id must be unique to the page variant or page template you are currently editing.
Ids can be used for a variety of reasons - such as jump-to-section navigation or selectors for embedded styles. You should set an id for every section in every page. You'll thank yourself in the long run - trust us.
Duplicating a Section
Duplicate a selected section by clicking this duplicate icon in the Top Right Bar:
🦁 🔑 ⚠️ Lion Key Alert: you can use the keyboard shortcut to duplicate a section (or any component). Use ⌘D for Mac and Ctrl-D for PC.
Removing a Section
Remove a selected section by pressing backspace or clicking this trash icon in the Top Right Bar: