Getting started with the Landing Page Editor

In this tutorial, we'll look at the most common steps for creating a simple landing page with a registration form.

Something you should consider first is that the form should be created previously in the Subscribers>>Signup forms menu, as it will be these already created forms that will be inserted into the landing pages.

Step 1: Setting up the landing page

To do this, click on the Landing page option in the main menu and then click on the +Add button.

After that, the system will display a window in which you can select one of the templates that will be the basis of your landing page. Among them is an empty template called Blank.

Select one of them by clicking on Select template and a pop-up window will be displayed in which you have to choose a name to identify the landing page. (Choose a name for your new landing page:) and click Save. With that, you've created the basis of your landing page, now just make the relevant changes.

IMPORTANT: To save the changes you have made, you can click on the blue Save button at any time.

Step 2: The main screen

Now we'll look in detail at the options you can use in the main window once you've created the landing page:

It is divided into three main sections, starting from the left:

Elements section: these are the different blocks that can be added to the landing page.
Content: this is a viewing and working area where we can add content to the landing page.
Options: the right-hand column will show the different options for the selected element or for the page as a whole if there is no element selected.

We will now work with these options.

Step 3: Selecting the background color

One of the first options we can use is to select the background color of the whole page:

The background color for your landing page can be chosen in the right-hand column, in the Document section and then in the Background Color option. This selection will change the background color of the landing page.

Step 4: Selecting the background color of the main container

Now let's take a look at another of the editor's main tools, the List View:

The List View is displayed by clicking on one of the icons in the top left area, the fourth icon. Clicking on it will show us a list of all the landing page elements organized hierarchically.

This will allow us to show the block options for each of the elements (in the Block tab on the right-hand side) and even move them so that they are displayed before or after them in the editor. Group them together, etc.

Once the element has been selected, we'll see how the right-hand column shows the options for that particular block. For example, we can select a different color for the text (Color) or change the width (Dimensions).

The default structure displayed once the landing page has been created is as follows

A larger main column
With another smaller internal column

This is done so that the inner column always remains centered on the screen. You can see two values in the right-hand column:

Content: This would be the width of the content.
Width: This is the maximum width of the column.

This way, by defining a slightly smaller content width, we would have a margin between the edge of the container and the content itself.

In the image above, we can see how some parameters and the basic content have been set, with a slightly larger width than the default.

Step 5: dragging elements

Now let's see how to add new elements to the workspace:

The first thing to do is select the element, in this case a separator, and drag it with the mouse to the desired location.

As you move the mouse around the content area, you'll see a blue bar indicating the desired location for the content.

Step 6: Structuring the content

One of the easiest ways to structure the landing page is to use columns:

A useful option is the three-column option, as it will allow us to use the middle column as a content separator:

After adding the columns, we can go to the List View and select the middle column; on the right, in the block column, we'll have the field Empty width. But if we set a Width of 30px here, this column will be reduced and can act as a separator

Next, click on the plus symbol to add content to the columns.

The selection allows you to choose from the available blocks, in this case, for example, a paragraph.

In the example, we've also added a "List" element below the paragraph. You can continue adding elements to this column.

Now we'll add a form to the third column by selecting that column, clicking on "+" and selecting Sign up form:

As we mentioned earlier, we'll be able to choose from the existing forms in the account from the drop-down menu that allows us to select a form from those we've already created (Select a Form):

And it will be added as follows:

IMPORTANT: You can't change the background color or any other visual aspect of your signup form when creating a landing page. This should be done when creating the signup form, which you did before creating the landing page. Any changes made to the signup form will be reflected on the landing page.

Step 7: adding images

First, we'll add two more columns and, once they've been created, we can click on their respective "+" signs to add content to them. Now let's add an image with text next to it.

We'll use the left column to add an image and the right column to add a paragraph.

You can use an image that has already been uploaded (Media Library) or upload a file from your computer (Upload).

When you click on the image, two circles are displayed which allow you to drag it to give it the size you want.

On the right, in the block options, you can also change the width or set an alternative text attribute.

At this point, we'll add text to the right-hand column by clicking on "+" and selecting Paragraph; after that, we can add the desired text.

Step 8: Adding a button

Finally, we'll add a button just below the two columns. To do this, click on Buttons (in the Design option) and the button will be displayed in black just below and with the text Add text...

Click on Add text and just above you will see the options for modifying the button, from left to right: Select buttons, Button, Drag, Change element justification, Change vertical alignment, Align, Link, Bold, Italic, More and Options.

You can make any changes you like. In our example, we've aligned it to the center, changed the text to Click to buy, set the text to black and set the background to white.

Now all you have to do is click Save and your landing page will be ready.