Landing pages - Part 2: Define the structure of your landing page

💡 Good to know
Landing pages are available for Business and Enterprise offers.

In this article, we'll explain how to structure your landing page. You can structure your landing page by adding, moving, duplicating, and deleting pages, sections, and elements.

We've created a series of articles to help you build your landing pages:

Good to know

The New landing page editor offers a different structure from the Classic landing page editor. Make sure you are checking the right section of this article based on the landing page editor you are using:

mceclip6.png

mceclip6.png

New landing page editor

Classic landing page editor

New landing page editor

A landing page is composed of pages, sections, and elements.

Pages

You can add additional pages to your landing page, such as a thank-you page, which you can link to your main landing page. To add a new page, click + Create a new page from the Pages panel.

To learn more about sub-pages, check our dedicated article Manage sub-pages within your landing page.

Sections

Inside a page, you can add sections to organize your content, such as a Header section, a Body section, and a Footer section. You can add a section to your page from the Sections or Layout panels. 

You can add different types of sections 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:
    • Header
    • Cover
    • Benefits
    • Features
    • Video
    • Social proof
    • Call-to-action
    • Team
    • Footer
    • Testimonials
    • Forms
    • FAQs
    • How it works
💡 Good to know
All new sections will appear at the bottom of your design.

Rename a section

To rename a section of your landing page, click a section and enter a name in the Name this section field. Renaming your sections is useful to have a clear overview of the structure of your landing page.

Move a section

To reorganize your design, you can move around the sections of your landing page. From the Layout panel, drag and drop the section in the desired order.

move_section.gif

💡 Good to know
If you're not sure which section you need to move, note that when you are hovering over a section in the list, it will be animated in your design.

Duplicate a section

To duplicate and reuse a section in your landing page:

  • From the Layout panel, hover over a section and click the Duplicate icon.
  • From your design, click Section and select the Copy Section icon.
💡 Good to know
The duplicated section will appear at the bottom of your design.

Swap a section

To replace an entire section of your design with a blank or pre-made section of your choice:

  1. Directly from your design, click on Section and select the 🔁 Swap Section icon.
  2. Select a blank or pre-made section to replace it.
💡 Good to know

Swapping a section will erase all its content. This change can only be reverted using the ⟲ Undo button.

Delete a section

To delete a section from your landing page:

  • Directly from your design, select an element and click on the 🗑️ Delete icon.
  • From your design, click Section and select the 🗑️ Delete Section icon.

Elements

Inside a section, you can add Elements such as a container, text, button, image, video, divider, logo, icon, code, and form. To learn more about the types of elements available in a landing page and how to edit their settings, check Part 3: Edit the settings of all the elements of your landing page.

To add an element in a section, click + Elements and drag and drop the element of your choice in the section.

add_elements.gif

Move an element

To reorganize your design, you can move around the elements of your landing page. To move an element, drag and drop it where you want it to be on your landing page.

move_element.gif

Resize an element

To resize an element in your landing page:

  1. Hover over the element you want to resize.
  2. Grab the blue bottom-right corner of the element and drag it over to the desired size.

    resize_element.gif

Duplicate an element

To duplicate and reuse an element in your landing page, select it and click the Duplicate icon.

Delete an element

To delete an element from your landing page, select it and click the 🗑️ Delete icon.

Classic landing page editor

Layout of your landing page

Let’s learn how to structure a landing page created with our editor. Here is the structure of the landing page:

Section > Rows > Columns > Elements

Sections

Each page is composed of sections, which makes the landing page editor easy to use and flexible. For example, you'll 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.

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, check out our dedicated article Part 3: Edit the settings of all the elements of your landing page.

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, you will have a ADD ROW OR SECTION button.
  3. Click on it, then on ADD ROW or ADD SECTION

  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.

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 navigating 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:

move_section_classic.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. 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 the Pages tab then on the button + Create a new 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.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

💬 Was this article helpful?

1 out of 4 found this helpful