Sections, rows, columns and elements are the items that compose your landing page. In this article, we'll help you get understand the structure of the landing page. You'll learn how to add, move, duplicate or delete new items.
We've created a series of articles to help you build your landing pages.
- Preface: What is a Landing Page?
- Part 1: Set up your Landing Page
- Part 2: Define the structure on your Landing Page - YOU ARE HERE
- Part 3: Edit the settings of all the elements of your Landing Page
- Part 4: Add a form & use advanced options
- Part 5: Publish your Landing Page
In this article we will see:
- Layout of your landing page
- Add a section, column or row
- Move sections, rows, columns and elements
- Duplicate or delete sections, rows, columns and elements
Layout of your landing page
Let’s learn how to structure a landing page created with our builder. Here is the structure of the landing page:
|Section > Rows > Columns > Elements|
Each page is composed of sections, which makes the builder easy to use and flexible. For example, you'll can have a Header section, a Body section and a Footer Section.
You can choose two types of sections to add to your design:
- You can Add a blank section to fully customize it from scratch
- We also offer pre-made sections that can be added to build your landing page.
You can rename each sections to make it even clearer when building your landing page. To do so, just click the section and fill the Name this section field in the right panel.
You can also name a section in Sections > Section X > ⚙️. The edit section will appear on the right.
Rows and columns
Inside a section are rows that can be divided into several columns.
Inside columns, you can add Elements such as text, image, CTA button, divider, form, icon, video, logo and HTML code. For more information, see our detailed guide to using the page-builder and elements.
Here's a recap of the structure starting from Layout to Sections to Rows to Columns:
Add a section, column or row
There are different ways to add rows or sections. You can do it directly on the design or via the left panel (either Sections or Layout).
Add a section or row directly from the design
- Hover over a section with your mouse.
- At the bottom of the section, you will have a ADD ROW OR SECTION button.
- Click on it, then on ADD ROW or ADD SECTION
- For Rows: choose which template your new row should have (up to 4 columns)
- For Sections: the left panel opens, and you can choose to Add a Blank Section or a pre-made section from the list. Sections can also be added directly from the Sections panel on the left and will be added just above the footer section or at the end of your design if you started from scratch.
You cannot add columns from there, please check the following section to know how to add columns.
Add a section, column or row from the Layout panel
You can also add sections or rows directly from the Layout panel when you navigate within the structure. At each step, you'll see either a + Add section, + Add column or + Add row button.
Move sections, rows, columns and elements
Now that you know how to add sections, rows and columns, you might want to reorganize them while creating your design. To move things around, you need to go to the Layout panel.
From there, you can simply drag and drop the different elements. Example below with the elements of a column:
Duplicate or delete sections, rows, columns and elements
Every item from your landing page can be duplicated.
- You can duplicate sections, rows, columns and elements from the Layout panel by clicking the Duplicate icon when hovering over the element.
- You can also duplicate a section or element from the Edit panel on the right when you click the section or element. In the bottom-right corner, you'll find the Duplicate option.
Add a page
To add a new page, on the left sidebar, click on Pages tab then on the button + ADD A BLANK PAGE. Learn more on Sub-pages here.