Use the landing page builder

Overview

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?

Good to know: Landing pages are available for Premium plans and above.

Edit settings

Page-wide settings can be defined at Step 1 - Setup your landing page under Optional settings.

To give you a better understanding of how a page is structured, see Step 2 - Design your landing page.

The Manage Layout tab helps you navigate between sections, rows, and columns. To edit their settings, take a look at our guide Edit landing page component settings.

Good to know: To quickly move from a component to another, hold the shift key on your keyboard and (at the same time) click on the component that you want to edit.

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:

  1. On the left sidebar, click on the Add sections tab then on the button + ADD SECTION.
  2. 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.
  3. 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.
hmRyt0krhnlrDkfT86vzuCxyOWntjI80OHbs5kp6BhGGJeyFzy0rlB7LqCTZHHA4nwmf8MhvZYJ501_Nmv74aDMHMsLYxymgvvZ128wa4ZrgeRc0NJ3d3u-BaeFDZAoaW6On_MCx.png

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.8cJg2eiGoh8FuPx3AoLKVJUGGgGLo3p2tSiseGM2a1xOjthvEHbV_PvyoMYn8PwIkuCB9980pzsYKeNAvTO1e-REYxXtz0whiAVnW_42NxqzMMaTAdHxgmXPRoe1so-GwqplpZdF.png
  • 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.
customize-color-1.png

To use a custom color, click on + ADD COLOR.

Choose a color from the color palette or add a hex code (#RRGGBB).

customize-color-2.png

Click on Save.

Customize mobile display

customize-color-3.png

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.