- 1 Where are the pages in my account?
- 2 Template Selection
- 3 Device editor
- 4 Collection of ready-made sections
- 5 Adding New Widgets
- 6 Moving items
- 7 Changing design elements
- 8 Delay before showing (widget or entire section)
- 9 Site settings
- 10 Creating a page through an HTML editor
- 11 Working in the mobile version of the page builder
- 12 FAQ (frequently asked questions)
Where are the pages in my account?
All operations with pages are made in the section “Websites -> Pages”.
For each site, the default Home page is:
You can edit it or create a new page using the “Add page” button, the address of which will be compiled from the main domain and page ID:
The next step is to select one of the predefined templates or create your own from scratch. Each of the templates can be previewed and decided whether it fits for your page or not. To do this, hover over any of the images and click the “View” button:
On the opened page, you can open a preview of the template and see how it will look on the computer or on mobile devices. Also, you can move on to creating a page on the selected template if you already understood that the template suits you:
The editor of the template designer takes up the entire width of the screen. The controls are at the bottom:
- On the left – page settings
- On the right – adding new items
Left panel buttons:
The page is divided into three logical parts: the header, the main content and the basement.
In each of the parts, you can add the appropriate sections.
Inside the section there are widgets.
Collection of ready-made sections
Large blocks of pages – sections – are divided into categories by content type: promo, content, cap, footer, goods, etc. Finished sections will speed up the development of the site.
To select them and add them to the page, click on the “Add item” button at the bottom right:
Adding New Widgets
To add a widget to the page, a section should be placed and selected (by clicking the left mouse button). Adding new widgets occurs by clicking on the button “Add item”. On the panel that appears on the right, you must select the “WIDGETS” tab, hold down the desired widget and drag it to the desired location in the section.
The insertion point is marked with a blue line.
To move a section or widget, click on the block header. While holding the element with the left mouse button, move it to the desired location:
Changing design elements
Click on the desired item – the settings for this item will appear in the right panel. There are ready-made styles that help save time on design development for each element. In the html/css tab, you can add CSS classes to the block.
Delay before showing (widget or entire section)
For sections and widgets, the “Visibility” setting and the “Show widget with a delay off” option to it are provided. It is convenient and can have a positive effect on conversion, for example, in such a case:
- You create a page with a video in which you offer your service / product.
The video is just over 2 minutes long, at the end you offer an order at a discounted price.
- At the moment of the offer, a form of payment appears (configured to appear with a delay just using this setting).
- Additionally, a Timer is installed on the page, which, after a specified time, hides the current page and shows another – with the offer of the same product at the regular price.
That is, the setting is appropriate to use for auto sales. For live events there is an “Interactive” setting.
Setting the checkbox “compress images when loading” will allow compressing any image to compress it as much as possible without loss of quality. This will help the page load faster.
By default, image compression is enabled for all pages, but you can turn it off by clicking on the “gear” when editing a page. Then, on the “images” tab, you need to uncheck the “compress images when loading” checkbox.
When loading an image into the constructor, it is immediately saved on our servers in several resolutions. Visitors to your pages see the option that is most suitable for their device.
If the “compress images when loading” checkbox is unchecked, then users of desktop devices (computers, laptops and netbooks) will be shown the original image size and quality, and mobile device users will still see a more suitable option for their phone or tablet model, but without compression.
Creating a page through an HTML editor
Sometimes you need to order a landing page from a third-party specialist (layout designer), then to use these pages in our service. For this, it is possible to add a landing page by inserting code received from a specialist through the Html editor.
The html editor is in the same place as the rest of the templates.
When you select the Html editor, a page opens with a field into which you need to insert the page code received from a specialist and save the changes.
This means that if for the whole site (in the settings) you have, for example, a Google Analytics counter, then on this page it will need to be placed separately (the one who created the page can do this at your request).
Working in the mobile version of the page builder
Sometimes you need to edit a page with only a mobile device at hand.
In the constructor, you can add, delete sections and widgets, make changes to the settings of widgets from mobile devices.
FAQ (frequently asked questions)
In the settings of the text widget, it is possible to set different indents for the desktop and mobile versions separately.
Open the widget “text” settings and set the necessary indent values.
In the settings of the “text” widget it is possible to set a different font size.
Open the settings for the “text” widget and set the required values for the selected font.
In the section settings it is possible to set different styles for the section outline (frame).
You can choose different types of Section Stroke, line thickness, line color, internal and external margins from the content, the presence of a shadow, its color and width.
In the settings of the widget “Form” in the item “Design settings” there is an opportunity to enter additional text that will be placed below the title block on the button, with the ability to set the font height. The top line text is edited directly on the button.
En la configuración de la sección es posible establecer diferentes estilos para el contorno de la sección (marco).
Puede elegir diferentes tipos de Trazo de Sección, grosor de línea, color de línea, márgenes internos y externos del contenido, la presencia de una sombra, su color y ancho.