Landing pages - Part 2: Define the structure on your Landing Page

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. 

💡 Good to know
Landing pages are available for Premium and Enterprise plans.

In this article we will see:

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

Sections

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:

  1. You can Add a blank section to fully customize it from scratch
  2. We also offer pre-made sections that can be added to build your landing page.

Structure_1_EN.png

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 field Name this section on the right pannel.

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:

2020-11-06_16-30-15__1_.gif

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

  1. Hover over a section with your mouse.
  2. At the bottom of the section it you will have a ADD ROW OR SECTION button.
  3. Click on it then on ADD ROW or ADD SECTION
    Add_row_or_section_EN.png
  4. For Rows: choose which template your new row should have (up to 4 columns)
  5. 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.
  6. Voilà!

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. 

add_row_section_from_layout.png

Move sections, rows, columns and elements

Now that you know how to add sections, rows and columns, you might want to reorganise 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:

Drag_and_drop_structure_gif__1_.gif

💡 Good to know
If you're not sure which section/row/column/element you're moving, note that the said block will be animated on your design each time you hover the element on the list.

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. At the bottom-right corner, you'll find the Duplicate option.

Duplicate_EN.png

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.

⏩ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.