A web page consists of different groupings of elements - a section. To start creating a design, you will need to create a page section.
A section is a part of a webpage that has several other elements: text, image, button, etc. Your page can consist of one or several sections.
How to add a section
Go to Websites and click the Funnels tab, then click the "Design" button for the page you wish to create (or Create new page and select blank template). Click on the green button to create your first section.
How to configure a section
Click on the newly created section which will open a menu with two tabs: General settings and Container.
General settings
Height - You can choose "Manual" which allows you to use your mouse to adjust the height of the section up or down as desired, or choose "Minimum 100% of the window" which will make the height of the section equal to the height of the page editor window. With this option you will be able to increase the height but not reduce.
Background color - Select the background color of the section. You can choose a color from the palette, adjust the transparency, and save the created background color.
Background image - Set a background image. First you will need to upload an image from your computer and then you can set it as a background image.
Filling - This is the placement of the background image inside the section. It has 4 options: auto - places the image automatically inside the section (the upper left corner of the picture coincides with the upper left corner of the section), manually - you can set the picture inside the section as you like, fit - place the whole picture inside the section, cover - place the picture so that it fills the entire section.
Repeat - This will create a repetition of a picture within a single section. There are 4 options: no repetition - the picture does not repeat, repetition - the picture repeats repeatedly and fills the section completely, repeating horizontally - the picture only repeats horizontally, repeating vertically - the picture repeats vertically.
Position - You can adjust the alignment of the image to be more centered, left, top, etc.
Brightness - By moving the slider you can change the brightness of the background and the background image inside the section. The other elements in the section will not change color and brightness.
Container
The Container tab is for more advanced users. A container is a part of a web page that includes several elements (button, icon, text, image, etc.). In the container, you can change the width of the web page, the background for the container and add a background image for the container.
Width - You can select "Auto" and the width and width of the section will automatically add indents to the right and to the left or "Full width" which will allow the elements on the page to be placed across the entire width of the section without indents.
Background color - Allows you to select a background color for the container. You can choose a color from the palette, adjust the transparency and save the created background color.
Background image - You can set the background image for the container. It will override the background image for that section. To do this, upload an image from your computer and set it as a background image.
Safe Zone
The page section contains a highlighted zone — the safe zone. This defines the visible portion of the webpage for all types of screens. Since screen sizes on each device are different, the site will be displayed differently: on the computer the visible area of the site will be much larger than on the mobile device.
The safe zone is the part of the page that the visitor sees regardless of the device from which he visits the site. It has a fixed width of 1120px. All items located in this zone will be visible to the visitor.
We recommend that you place information and items within the safe zone. But if you are sure that your visitors come to the site from computers and have sufficient screen size, then you can place items outside this area.
To change the width of a webpage, go to the "Container" tab and select width "Full width".
How to rearrange sections
You can change the order of the sections on your page. To do this, click the "Move up" / "Move down" button, which is located on the border of the selected section.
