Making sections in the editor

Last updated: January 12, 2021 Written by: Avatar Justyna
share
Table of contents
share
Table of contents

Sections are one of the basic elements of your landing page – they hold the elements.

You can watch a short video tutorial on how to work with sections:

1. Section workspace

A section workspace is an area that will be visible on any monitor, regardless of its resolution. It is located between two blue, dashed lines.

Elements from the widget bar can be placed only within the section area, between the blue dashed lines.

2. Add sections

1. On the left side of the editor, find the Section widget, then drag and drop it into the active area of your landing page.

2. Pick the number of columns. Elements in the section with division into columns are prearranged. The columns are arranged one above the other in the mobile view, starting from left to right vertically. You can move them freely – this does not affect the layout of the columns in the desktop view.

Desktop view –  a section with three columns

Mobile view

To read more about the mobile view, please check this article.

3. Adjust the size

1. You can adjust the height of the sections in two ways. Click on a section. You will see a context menu of the selected section (1) and a widget toolbar (2).

You can also right click on the section to see the context menu.

2. Change the height of the section in the toolbar or use the arrows.

3. You can also adjust the width of the whole landing page. Go to Page Settings and choose one of four different widths.

4. Section background

You can choose from four types of background – solid color, gradient, image, and video (YouTube or Vimeo). Select Full width (1) if you want the background to be spread over the entire section width. Find out more about the background here.

5. Fixed sections

You can pin the first and last sections at the top or bottom of the landing page. That way, the section will remain visible when you scroll through the page. For example, you can pin the menu at the top of the page, and the newsletter sign-up form or contact details at the very bottom.

The pin is located in the context menu (1) and the toolbar (2).

6. Copy section to another landing page

You can copy a section and place it on another landing page with just a few steps.

Only the layout and widgets of the section can be copied. The background will be adjusted to the background of the other landing page.

1. Click on the section and click on the second tile in the context menu.

2. Now, you can switch to the editor of another landing page to place the section. Paste it anywhere using CTLR +V.

7. Hide sections

You can hide a section on a landing page, so it's not visible on the desktop or mobile view.

1. Click on the section you want to hide.

2. In the panel on the right, click on the icon of the monitor (for desktop view) (1) or smartphone (for mobile view) (2), depending on where you want to hide the section. White icon means that the section is not visible in the selected view.

TIP: Plan the layout of the elements on your landing page carefully and choose the right number of columns in the sections – this way, your landing page displayed on different views will look equally impressive!

share

Was this manual helpful?