Help logo

How To Guides

Current Lesson
Course Content
Course Content

Page builder 2.0

Enjoy a more flexible way of building landing pages using the new Page builder 2.0!

Any changes you make will be autosaved as you work on your landing page. Also switch between the different screen sizes to create specific content for each, and Publish your page when you are ready to make your changes LIVE!

Style guides and Style libraries

You can have as many style guides as you like and use them for pre-formatting sections, rows, columns, and elements.

You’d normally want to start defininng your style guide first, before you start building your page sections.

Click on Style guide button to customize its colors, fonts, buttons, borders, and shadows.

You’ll notice that in every level or the landing page (sections > rows > columns > elements) there’s a settings button that will open up the format settings on the right sidebar.

We’ll pull the colors set up on the style guide, which you can override/customize using the 3 dots option on the far right for each of them.

To create a new style guide or pick from another existing style guide, click on at the top right.

Then click on Create a new style guide or select from the existing ones.

Style guides are available across your account and can be used in multiple landing pages at the same time.

Warning! If you make any changes to a style guide that is used across multiple landing pages, these changes will apply to them all unless you’ve used custom formatting.

Add a section

The first thing you would be adding to your landing page is a section.

Options will be shown up on the right sidebar. Set the width first:

Then the number of columns you’d like:

Hovering on the section you’ll be able to perform several actions:

  • Open the section settings, duplicate the section, or delete the section.

  • Open the column settings, duplicate the column, delete it, and adjust the column width.

  • Add an element to the column, add a new row, or add a new section.

Add an element

Wherever there’s a plus button, you can add an element to it. Click on it to pick among the different element types!

On the right sidebar you’ll be able to choose between general, media, and form elements.

  • General: Headline, Paragraph, Preheadline, Subheadline.

Type in the text directly on the element preview. Note that when you select the text, a floating text editor will also be displayed for text formatting.

  • Media: Audio, Image, Video.

Pick the media file from your library using the +Add button on the right sidebar. You’ll also have the option to customize other media specific settings like Alt text or Link URL.

  • Form: Button, Input, Order form.

    • Buttons

      There are 4 actions available to fire when someone clicks on a button:

      • Opt-in to a list

      • Go to another URL

      • Open a popup

    Note! When you pick Opt-in to a list, you will need to set up a trigger that will connect the button action with the desired list.

    • Input

      Select the contact field the input will be used for, then choose a label style (Above field, inline, or floating).

      Inputs are generally used alongside buttons to build an opt-in form, but they are not limited to that use case.

    • Order form

      Embed an order form for any of your products. This is a great way of customizing product checkouts.


Add a Popup

With the Page builder 2.0 is really easy to add a popup to your page.

Click on the popup button to customize the popup content, format, and when it should show up.

Reminder! You can also open the popup using the button action: Open a popup.

Last updated 20 Nov 2023.
Previous Lesson Conditional content Next Lesson Create an Affiliate Program
Like
👍 2