In this tutorial, we'll help you learn how to use the builder to design your own landing page.
First, take a moment to learn: What is a landing page?
Page-wide settings can be defined at Step 1 - Setup your landing page under Optional settings.
Add a new component
Add a page
To add a new page, on the left sidebar, click on Manage pages tab then on the button + ADD A BLANK PAGE.
Add a section
To add a new section, you have three options:
- On the left sidebar, click on the Add sections tab then on the button + ADD SECTION.
- Alternatively, if your mouse is over a section, underneath you can click on ADD ROW OR SECTION button, then on ADD SECTION. On the left, the menu to add section will be displayed.
- Another way to add a new section is from the Manage Layout tab by clicking on the button + ADD SECTION.
Choose if you want to:
- Add a blank section
- Add a pre-defined section. You can use the drop-down list to filter by type (all, cover, header, forms, features, call to action, testimonials).
Add a row
To add a new row, roll over the section with your mouse. Underneath it you will have a ADD ROW OR SECTION button. Click on it then on ADD ROW.
Choose how many columns your new row should have (between 1 and 4).
Add an element
Click on the ADD ELEMENTS tab. Then simply drag and drop an element into the canvas.
Available elements are listed below. Follow this link for a detailed guide on how to edit component settings.
- Text: simply type your text, then you may edit it using the “Typography” and “Spacing” tabs.
- Image: you can add images to your landing page by adding an URL, uploading an image or selecting an image from the gallery. You can edit using the “Image”, “Style”, “Spacing” and “Alignment” tabs.
- Button: add a CTA and customize the button text. Different actions are possible “Link to a URL”, “Anchor to a section” and “Link to a page in this funnel”. Button’s color, style, spacing, and alignment can be edited.
- Divider: you can add a horizontal divider.
- Form: to add a form, follow this guide.
- Icon: choose and edit an icon from our gallery to include social media icons for example. There are over 1400 different icons that you can choose from.
- Video: You can use a URL from Wista, YouTube, Vimeo, Twitch, Dailymotion, Canal+, Youku, and Coub.
- Logo: you can include your logo by adding an URL or uploading an image.
- Code: add a custom HTML code.
- Cart (coming soon)
Duplicate or delete a component
If you have made a mistake, use the UNDO/REDO buttons at the top right of the builder.
There are two ways to duplicate or delete a component:
- When the edit right sidebar is displayed, at the bottom click on DUPLICATE or DELETE.
- Another way is from the Manage Layout tab by clicking on the paper sheets or bin.
Customize color palette
You can select a preset color, clear color or add a new color.
To use a custom color, click on + ADD COLOR.
Choose a color from the color palette or add a hex code (#RRGGBB).
Click on Save.
Customize mobile display
Thanks to the buttons at the top right, you can test the rendering of your landing page on desktop, tablet, and smartphone.
For each section of your landing page, you can control its visibility by device type within the edit section. You can:
- Hide on Mobile
- Hide on Tablet
- Hide on Desktop
Note that if you hide on Mobile or Tablet, the section will show in preview and in the builder in case you need to make edits. However, on the live page after launching, it will not be displayed.
When you are done designing your landing page, click on NEXT at the bottom right corner to go to Step 3 - Launch your landing page.