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:
- Preface: What is a landing page?
- Part 1: Set up your landing page
- Part 2: Define the structure of your landing page - YOU ARE HERE
- Part 3: Edit the settings of all the elements of your landing page
- Part 4: Add a form to your landing page and use advanced options
- Part 5: Publish your landing page
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:
New 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:
- 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:
- Header
- Cover
- Benefits
- Features
- Video
- Social proof
- Call-to-action
- Team
- Footer
- Testimonials
- Forms
- FAQs
- How it works
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.
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.
Swap a section
To replace an entire section of your design with a blank or pre-made section of your choice:
- Directly from your design, click on Section and select the 🔁 Swap Section icon.
- Select a blank or pre-made section to replace it.
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.
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.
Resize an element
To resize an element in your landing page:
- Hover over the element you want to resize.
- Grab the blue bottom-right corner of the element and drag it over to the desired size.
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:
- 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, 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
- 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 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:
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?
- Part 3: Edit the settings of all the elements of your landing page
- Part 4: Add a form to your landing page and use advanced options
- Part 5: Publish your landing page
- Are landing pages SEO-friendly?
- Duplicate an existing landing page
- Manage sub-pages within your landing page
🤔 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.