Navigation

The landing page builder consists of 3 main areas:



Top menu (red): This menu is hidden by default, hover over the arrow to make it appear.
Right-side menu (blue): This menu is visible by default and allows you to navigate between the main sections of the builder (templates, sections, elements, layout and options).
Working area (green): This is the main area and where you will see the landing page you are building.

Top Menu

This menu allows you to come back to your list of pages, choose a name for your page, see a preview of the page, save the page you are working on, undo/redo the latest actions, clear the page, display page settings and toggle full-screen (which is not supported in some browsers, we recommend that you use the latest version of Chrome or Firefox).

View Controls

With our page builder, you can control the look of your page from different points of view, to make sure the page looks good on both desktop and mobile (smartphones and tablets). The default view is the desktop view. We try to optimize the page for other views but it’s not always possible so checking all the different views before publishing the page is a good practice.

There are a few shortcuts available to switch between the different views:

CTRL + F1 - Desktop View
CTRL + F2 - Tablet View
CTRL + F3 - Mobile View

Important: Almost anything you do to elements is “view specific”, meaning the changes you do will be applied in the selected view only, with some exceptions.

Non “View Specific” Changes:

The changes made in the desktop view are applied to all views unless other settings have been set in the view.

Example: You have added a red background to a column in desktop view. Result: this column is red in all views. You have added a blue background to a column in tablet view, then you have added a red background to the same column in desktop view. Result: this column is red in desktop and mobile views, but blue on tablet view.

Text content is not view specific.

Href elements, titles, button actions and alt parameters are not view specific.

Font styles inside paragraphs, headlines and lists are not view specific.

The same element cannot be located in 2 different containers in different views.

Edit mode of empty box elements

Hack to Bypass “View Specific” Restrictions

If you need to bypass a restriction, you can copy the element and make the changes you want to do. Once this is done, simply hide the old element in the view you want the new element to be displayed and hide the new element in the 2 other views.

Note: By doing this, you make the code of the landing page a bit more complex, which is not good for speed, so please do this only when necessary.

Working Area

This is the representation of the page you are building. Each element has its own heading. If you hover it, the settings related to that element will be displayed.



Here are a few of the things you can do with elements:

You can drag and drop elements.

Besides the copy and delete buttons, you may see some other options, depending on the element. More information about on-page elements here.

You can change the width and height of columns. These changes are view specific.

You can change the text content including font styles. Double click on the text element to enable the edit mode.

Note: You can’t reposition an element when the edit mode is enabled.

You can click on an element to open the options menu. You will be able to change the style, settings... You may also click on the headline to open the options menu.

You can resize regular elements, using size draggers (lines and dots near borders). This is view specific, which means the element could have a different size in other views.

On-Page Element Settings

In the working area, if you hover an element title, you will see some options. Please note that some of these options are available for certain elements only. The displayed options depend on the element type. To find out feel free to use the pin/unpin button.

Full-Width Button
This button sets the width of the element to 100% of the container. With this option, even if you move the element into a bigger container, the element will use the whole width available. This button also is available for sections.

Copy Button

This button copies the elements (including all its nested elements) and places the copy just after the original element.

Delete Button

This button removes the element and all its nested elements.

Auto Height Button

This button forces the auto-calculation of the height of the element depending on its content, or its meta size in case of an image (in short, it calculates the height based on the width of the image, respecting the aspect ratio). This option button is available for images and empty box elements only. These changes are view specific.

Edit Mode Button

This button turns on/off the edit mode of elements that allow nesting (empty box and carousel). When turned off, if you try to move the element inside a container, it will move the container instead. When turned on, it allows you to reposition elements inside a container. The empty box is the only element that is allowed to be dropped in other containers which are not columns. In other words, an empty box could be placed inside another empty box or carousel.

Pin/Unpin Button

This button allows you to pin/unpin the element to the background. These changes are view specific. When the element is unpinned, it can influence the position of other unpinned elements in the current view, and other views as well if the elements are also unpinned there.

Pinned elements don’t have an influence on the position of other elements and are located exactly where you decide, inside the container. Their size doesn’t depend on the size of the container when the element is pinned. Unpinned elements cannot be bigger than their container.

When the element is pinned, its position is not responsive and always set to be the same, in relation to the borders of the container in which it is located. That’s why it’s important to adjust the position in each view to make sure the position is correct in each view. We recommend that you use unpinned elements where possible as they help with responsiveness.

However, if you want to achieve something possible with pinned elements only, feel free to use them. There will no penalty in terms of performance. You simply need to make sure the element you are pinning is placed properly in all views. You may unpin the element in some view if necessary, since the changes you are making are view specific.

Change Image Button

This button allows you to change the image. Unsurprisingly, it is displayed for image elements only.

Templates

In this tab, you can choose the template you want to use. If you want to start from scratch, click on the “Create New Template” button. The templates have been created using the builder’s functionalities, to make sure you can modify every aspect of the templates without any issue.

Sections

In this tab, you can find some premade sections split by categories. Click on a category, then drag and drop the preview of the section into the working area, where you would like it to be. You can then modify the section as you wish.

Elements & Options

In the Elements tab, you will find the list of elements you can use to build your landing page.

In the Options tab, you will see the options of the elements you have chosen. There are some general properties that you can change for almost any element, like the margin and padding. There are specific properties that may appear depending on the element type in the current view.

Basic Controls

Visibility Controls

This button allows you to control the visibility of an element in different views. If you try to hide the element in all views, the builder will ask you to confirm the removal.

Reset Button

This button allows you to reset the element to the state it was at the start of the current edition. In other words, the element will be restored to the point when you have last opened the options of this element.

Advanced Element Controls

Some elements consist of several similar parts, e.g. social buttons, menus, tabs, carousels… These elements can be extended as well, and have some additional controls:

Copy Styles Button

This button copies the style of one part of the element to another. The available style receivers are highlighted inside the working area.

Note: Styles cannot be copied to the part of another element.

Open Tab Button

As tabs allow you to have nested elements, you can either click on the tab’s headline or click this button to open the panel.

Note: In a carousel, you may click on the name of the slide to open it.

Hover Effects Controls

If you see this trigger near parameters, it means you can control the hover and/or active parameters of the element. These options are only displayed for certain elements (e.g. buttons, menus, tabs) and certain parameters (e.g. font parameters, background parameters, border parameters...).

This option allows you to switch between editing regular styles (displayed by default), hover styles (displayed when the element is hovered) and active styles (displayed when the element is in an active state.

Note: The changes you make are view specific, so you can have different hover effects for the button in different views if necessary.

Note: If you click on this trigger, it will change the styles you are editing. You have to switch it near each group of parameters in order to turn on non-regular modifications (hover or active styles).

Box Size Parameters

These are parameters that have an indirect influence on the size of the element, like paddings, border properties and margins.

Paddings

This is the area around the element. The main difference with margins is that if you change the background, the area determined by the padding will have the same color than the background. Paddings are view specific.

Border

Borders are placed around the padding area. If there is no padding, they would be placed around the element itself. You can control the width, style, color and radius of corners. Border properties are view specific.

Margins

Margins are the area around the element and are not affected by the background.
Margins are view specific.

Background Parameters

All the following properties are view specific.

Background Color & Image

This allows you to change the background color, place an image, or both. The background image could even have a color overlay.

Note: If you set a color overlay without transparency, the result will look the same as if you change the background color.

Gradient Background

For elements like columns, sections, rows and empty boxes, you may choose to have a gradient background.

Tip: A gradient background looks great in combination with other images that use the same color scheme. For example, you may set a gradient background in the section and a background image in the row.



The resulting gradient background could consist of several separated gradient backgrounds that overlap each other, but don’t over-use them as this will have an influence on the performance of the page. There will be no impact on the loading speed.

There are 2 gradient types available: linear and radial.

Linear: You can choose the angle of color distribution.
Radial: You can choose the position and type (circle or ellipse).

Change Headline Tag

This option is available for headlines only. You may indeed change the HTML representation of the headline. It’s a good practice to have different headlines depending on the content, for SEO. The overall font size of the element would be changed according to the new tag. These changes are not view specific.

Text Shadow Parameters

This option is available for headlines only. You may set the text shadow by setting a spread radius, position, blur and shadow color. These parameters are view specific.

Align Parameters

Text Align Parameters

This parameter allows you to align the text inside text elements.

Block Align Parameters

This option is available when the element is unpinned. You may need to align the element inside the container.

Note: You should use this option to align elements inside a container instead of margins, for better responsiveness.

Custom HTML

This option allows you to insert your own HTML code as an element into the template. This option is not view specific.

Alt Parameters

Alt parameters are available for image elements only. They are generally used for SEO, but also for screen readers for people with vision problems. If the image doesn’t load, this alternative text will be displayed instead of the image. Alt parameters are not view specific.

Bootstrap Parameters

Bootstrap parameters are predefined styles that can be applied images. These parameters are view specific.

Box Shadow Parameters

Box shadow parameters are similar to text shadow parameters, except the shadow is added to the element box instead of the text. This option is available for empty boxes, images, columns and sections. These parameters are view specific.

Icon Parameters

You may change the icon. This parameter is not view specific. However, changing the icon color or style is view specific.

Video Elements

There are 3 types of video elements currently supported: Youtube video, Vimeo video and self-hosted video.

All these options allow you to embed a video, as well as autoplay the video and enable infinite playing.

Note: Google Chrome may prevent the video from autoplaying since a setting to not autoplay videos is enabled by default in this browser. Please keep this in mind when you are creating the page.

All the settings described in the paragraph above are not view specific.

Here are a few specificities:

Youtube Video

In addition to the settings described above, you can enable/disable video controls.

Video

In addition to the settings described above, you can enable/disable video controls. You can also mute the video by default and add a custom thumbnail that will be shown before the video starts.

Note: There is also fallback field that will be shown to users who use old browsers. You may modify the text. No matter what the message is, users will see a download link so they can download the video and watch it locally.

Transition Parameters

These parameters allow you to set the time (in milliseconds) and behavior of how all element styles are changed. These parameters are displayed on elements that support hover style modifications. Other elements don’t have them. They are view specific.

Font Parameters

Font parameters allow you to change font, font size, font style, etc. These parameters are view specific.

Platformly Form

You should first select a form and then attach an API key to it.

Note: Without an API key, the form won’t be displayed in the preview and on the live page. The position of the elements which depend on the form position will be recalculated. These settings are not view specific.

Link/Button Actions

There are 3 options available:

Go to URL
Open optin form
Scroll to section

These options are self-explanatory. They are not view specific.

Position Parameters

These parameters allow you to change the position of sub-elements (an element that is part of another element, but not a regular nested one). There are 9 buttons to position an element inside a container. You may also use sliders. These options are available only for the carousel’s left/right buttons and the label of the progress bar. These parameters are view specific.

Layout Parameters (Carousel)

This parameter is available in carousels only. With this slider, you can set the position of the title and body containers. You may hide the title. These parameters are view specific.



Green area: Title
Purple area: Carouse body

You may also change indicators. These parameters are view specific as well.

Note: The style is applied to each slide. If you want to change the background of a specific slide, please open the Slides tab, unhide slide options and change the background.

Note: The content can be inserted into the headline and body of the carousel, and is not modified by the layout controls.

List Markers

You can have different markers applied to the list:

Default list bullets (browser)
Image from the available list
Icon from the available list

You may also change the position of bullets, but keep in mind that some bullets have more positional parameters than others. These parameters are view specific.

List Items (Single Line)

In the Geometry tab of a list element, you can tick a box to display list items on a single line. The wrapping of the list items will be similar to regular text. These parameters are view specific and only support bullets using images or icons.

Basic Progress Bar Parameters

These parameters allow you to specify the value that will be shown in the progress bar. These parameters are not view specific but every other setting described in this paragraph is. You may set the label to be displayed, as well as set its position. There are also extra options that you can use to improve the look of the progress bar.

Countdown Element Specific Parameters

You can set the date and time, as well as the action that must be executed when the time is up. These parameters are not view specific. You may display or hide sections, depending on which view is open.

Example: You have 3 sections and a timer. You may choose to hide section #1 in desktop view when the time is up, and section #3 in mobile view. Let’s imagine 2 users visit your page, and the time is up... The first one, who uses a laptop, will see sections #2 and #3. The second user, who uses an iPhone ,will see sections #1 and #2.

You may also change the styles of numbers and labels of the timer using the options mentioned above.

Page Specific Parameters

You can set a page title, as well as a meta description and even meta keywords. The page title will be shown in the browser’s tab, as well in as search engine results. The meta description may be shown in search engine results as well. These are useful SEO parameters. Meta keywords are obsolete, but you may use this parameter if you want to.

You can also upload a favicon, which is the icon of your site (near the title in the browser’s tab) and insert your own custom JavaScript and CSS into the page, such as a Facebook pixel or Google Analytics code…

Note: Don’t insert a jQuery library among your custom scripts, since it’s already distributed with your page and adding one more could break some functionalities. You can write your JavaScript code using jQuery assuming that the library is already on the page.

Layout

The layout determines the basic look of your page, whether it uses 2-3 columns, or the whole width. The layout consists of 3 main building blocks - columns, rows and sections. In the Layout tab, you can see a simplified representation of the page’s layout.

Unwrapping

As usual, inner elements are hidden by default. To display them, click 3 dots button.

Position Change

If you wish to change the position of a layout element, drag and drop it anywhere you want. The blue placeholder will show you where it will be placed. This will affect the actual page you are editing once the element has been dropped. The only thing to remember is that sections can only hold rows, and rows can only hold columns.

Example: You can drag and drop a row from one section to another, but you cannot drop a column from any row into the section, or put the section into the row.

“Eye” Button

This button allows you to control the visibility of layout elements in different views (desktop, mobile and tablet). This is useful in case you don’t want to display an element in a specific view or at all, for some reason.

Example: We have a countdown on the page and when the time is up, we want to show visitors that the offer is no longer available, so you don’t have to manually change the code at that point in time.

Copy, Delete & Options Buttons

These 3 buttons behave the same way as the ones displayed when you hover an element title.

Width Slider

Only columns have a width slider in the Layout tab. All other layout elements have a width slider under settings. You can read more about column width in the Columns section. Width parameters are view specific.

Columns

Columns are the main containers of your site elements. Almost any element dropped into a page is located inside the column, except layout elements, tabs (the menu can be located in a column but not tabs with content). The width of columns can be set in the working area or in the Layout tab.

The size of the column can be set from 1 to 12, where 12 is 100% of the available width and the 1 is 8.3%.

Columns are placed from left to right. If there is some space available on the right side of the previous column the next one will be placed near the first one.

Example: You have 2 columns, one has a length of 8 and one has a length of 4. As a result, they are placed on one line. However, if you increase the size of the first column to 9, the second column will be placed under the first one, on the left side of the row.

Note: The behavior described above is valid for columns inside a row. Columns in different rows are not affecting each other in any way.

There is a situation when there is enough space to place several columns on the right of the initial column, if the height of the column allows it. Here is an illustration:

Rows

Containers of columns cannot be bigger than the space available inside the section. They are always located at the center of the section and each row is located on its own line. There cannot be 2 rows in one line. In addition to basic options, you can control the width of the row. These options are view specific.

Sections

Sections are used to store rows, and cannot store anything else. Rows are blocks that use the whole line, so it doesn't matter what the size of the row is, the next row will be placed under the first one, and not beside it. They could take up to 100% of the width of the page when the full-width option is turned on. The full-width option is not view specific. However, if you set the size in pixels, you will be able to control the width of the section in different views

Updated on: 18/10/2019