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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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:

Relevant Help Articles:

Did this answer your question?