Elements: Sections

The section will serve as the foundation for creating the landing page, being the container where the elements will be placed. It is important to differentiate the section (essential for placing the other elements) from the area, which is a figure and can be used for various purposes.

If you are going to create a blank page, you should first create a section and then add the sections you consider necessary. 

Usually a basic landing page layout has the following sections:

• Header: It is the top part of the page which normally shows the company logo, slogan, main headlines and phone number.
• Body: This section is the part that has most of your content. It usually includes the title, subtitle, images/videos and call to action buttons.
• Footer: It is the bottom part of the page that normally includes the copyright, phone number, privacy policy and terms & conditions.

You can adapt your design to suit your needs by creating more sections.

Section properties

Refers to geometry, ID/Class, background and edge.

Change a section's dimensions (Geometry)

You can adjust the dimensions, width and height, of any of the sections that you are creating.

1. Drag the section element to your workspace.
2. Double click over the element to edit the properties.
3. Click on the tool icon to edit
4.  Geometry tab.

Change the height and width of the section in the corresponding fields.

To add space between sections simply enter the desired value in the vertical separation field (For example 10px). 

Changing the background of a section.

1. Drag the section element to the workspace.
2. Double click over the element to edit its properties.
3. Click on the Edit icon
4. Click on background. 

You can have a solid or gradient background by using the bar to adjust its opacity.

Changing the edges of a section.

1. First, drag the section element into your workspace.
2. Then, double click over the element to edit the properties.
3. Click on the Edit icon
4. Go to Edge. 

Options:

▪ Edge Color: It allows you to choose a color for the border that surrounds the section.
▪ Edge width: Insert a number to determine the thickness of the edges.
▪ Edge style:  Solid, dashed, dotted, inset, outset, double, groove and ridge.
▪ Rounded corners: Add a value in the Radio section to adjust how rounded you would like the corners of the section to be.

How to add styles to a section (CSS/Class)

From the CSS/Class tab, you can dd styles to your section. To learn more about adding custom CSS to elements, click on the following link: https://mdtr.io/e3ymP 

How to delete a section

1. Double click over the element to edit its properties.
2. Click on the Delete icon  to delete the section.