Understanding The Page Builder In 1 Minute
A landing page is basically made up of 3 components:
- Page background
- Content background
- Content rows
Content rows are further classified into 3 types:
- 1-column row (content will auto resize to match any device)
- 2-column row (the columns will auto stack up in mobile devices)
- ad widget row (special row only for LeadsLeap ad widget)
To edit Page and Content backgrounds, click (1). The editors are shown in (2).
Don't just read this guide. As you read, try it!
To add a new row, click (3).
To sort or delete a row, mouseover the row layout and the editing buttons will be shown (see arrow 4).
To edit the elements in each row, simply click on the element itself. The editor will automatically be shown in the Element Editor on the right.
To sort the elements in each row, you may do so within the Element Editor on the right. More details on how to use the Element Editor is given below. (Please note that sorting of element is only within each row/column. Sorting cannot be done across different rows/columns.)
To move an element from one row/column to another row/column, simply dragging the element into another row/column.
How To Use The Element Editor (On The Right)
To show the Element Editor of any element you want to edit, simply click the element.
Try clicking any element now, for example, click the headline in this template.
When you do that, you will see the editor for the headline being shown in the Element Editor on the right.
Read on to learn how to use the Element Editor.
To add a new element, use these buttons:
|- Add a new Text element to your design.|
|- Add a new Hyperlink element to your design.|
|- Add a new Icon element to your design. We use Fontawesome icon. If you are familiar with it, you can enter the icon class directly.|
|- Add a new Background element to your design. You can style the background with color, gradient or image.|
|- Add a new Image element to your design.|
|- Add a new Line element to your design.|
|- Add a Custom Code to your design. It includes video, social network plugins, iframe, hidden element etc.|
|- Add a Button element. You can set the function of this button to submit the form, to close the widget, or to navigate to another website.|
|- Add a new Input field so that you can collect more data from the subscriber.|
To edit the elements, use this buttons:
|- Hide/unhide the element.|
|- Duplicate the element, so that you don't have to style a similar element all over again.|
|- Sort the stack order of the html elements. To bring an element in front of another element, sort its editor lower than the editor of the other element, vice versa.|
|- Delete the element.|
|- Lock several elements together so that you can move them at the same time. You can set up to 9 different lock groups.|
How do I....
|Know which editor is for which html element||Simply mouseover the html element and its editor will also be highlighted, vice versa.|
|Open an element editor||1) Click on the element editor itself, or
2) Click on the html element.
|Move an element in front of / behind another element||Sort the editor of the element. To bring an element in front of another element, sort its editor lower than the editor of the other element, vice versa.|
|Move an element||
1) Simply Drag and move the element, or
2) Change the Top Offset and Left Offset parameters in the element editor, or
3) Click on the element and mouseover it, then use the up/down/left/right buttons on the keyboard to move. (The mouse MUST be over the element all the time while moving.)
|Group move elements||Lock the elements together by clicking the button. Then move any of the elements using method
1 or 3 above. The other elements in the same group will move at the same time.
(Note: Changing the Top Offset and Left Offset parameters will only affect the position of that element, even if it is group locked.)
|Cancel a group move||Unlock the element by clicking the button before moving it.|
|Resize an element||1) Change the Width and Height parameters in the element editor, or
2) Resize the element by dragging the corners.
|Group resize elements||Not possible.|
|Adjust color transparency||In the color palette, scroll the transparency bar.