Making sections in the editor

Last updated: September 20, 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 all the elements of your page in Landingi editor.

Watch our video tutorial:

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.

Add new section

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. You will see the Add a section window.

(1) In the Templates tab, you can search for a section template by categories.

(2) In the My designs tab, you will find sections you have saved.

(3) In the template selection window, you will see sections thumbnails. Click to choose one of them. You can also use a blank template.

(4) Click Save & close to confirm your choice.

3. To choose a blank template, hover over Choose a blank section button. Choose a section with one, two, three, or four columns.

To learn how to adjust the multi-columns landing page's mobile view, read this guide.

Edit section

Click on the section to start editing. You will see its context menu (1) and toolbar on the right side of the editor (2).

Context menu

The icons in the context menu let you:

  1. duplicate section;
  2. copy section to another landing page (switch to the editor of another landing page and paste the section anywhere using CTLR (CMD) + V);
  3. move section up (impossible with the first section);
  4. move section down (impossible with the last section);
  5. pin section (possible only with the first and last sections);
  6. delete section;
  7. save section (in My designs or as a smart section).

At the bottom of the active section, there are arrows – use them to change the height of the section. You can adjust it also in a right-side toolbar.

Widget toolbar

In the widget toolbar, you can turn on/off mobile or desktop view (by default, the section is visible in both views), change the section height, and pin it (possible only with the first and last sections).

Underneath, you will find tabs with some additional options. You can turn them on or off using the slider located in the right-hand corner of each tab (except the Other tab).

  • Background – choose the style of the section background: full color, gradient, video, or image.
  • Border – adjust the parameters of the frame: thickness, line style, and color.
  • Rounded corners – set specific values to round corners (the value can be the same for all corners or different for each).
  • Other – adjust element name, copy the button ID or add a class.

You can also adjust the width of the whole landing page. Click on the arrow to go back to Page Settings. Then choose your page width.

If you want to create your landing pages more efficiently, check how to make the most use of smart sections.

share

Was this manual helpful?