Landing Page Editor - Documentation
- Balázs Árva (Unlicensed)
Table of contents:
- 1 Introduction
- 2 Page creation
- 2.1 Template selection
- 2.2 The editor
- 2.3 Floating Bar
- 2.4 Page Settings
- 2.5 Form element
Introduction
With the Maileon’s “Landing Page Editor” tool you can create pages, with an easy drag&drop editor. Each page you create will be available through the main subdomain of your Maileon account with the URL ending you add when you create the specific page.
Page creation
To create a new page, navigate to Pages » Page Management, then click on the “Create new page” button. First, you have to give the Name and the URL path of you page, while you select the type of your page as well.
The type you select will make the pre-defined templates available
Template selection
In the template selection part, you can choose from different templates that were created for the specific page type you selected. However, you can also choose a blank page and start to build up your page from 0.
Either way, the editor will be loaded, where you can create your own page.
The editor
On the left side of the screen, you find the exact page you will customize here. On the right side, you find a panel where you reach the different elements and its settings.
Right Panel
In the right panel you can add new Section elements to the page, that will make the layout of your landing page
Next to the Sections, you can add different Content elements to your landing page here with a drag&drop method.
You can drop these elements to each sections you previously add to the page.
In the right panel, you can also find pre-defined Article Templates, that you can drop in the editor. These templates were created in order to build up your page easier.
After you added a new element to the page, you can customize that when clicking in it in the editor. When the element is active, you will be able to change the settings of it in the right panel. As you can see, here you can modify the actual element’s settings (like Display, Spacing, Background, Border and Text settings).
Floating Bar
If you would like to move, duplicate or delete the element, you can do it with clicking on the specific icon in the floating bar above the mentioned element.
In this bar, you find an “up arrow” icon as well, which means you can select the parent item of the currently active element. When you click it, the outlines will change and you will be able to modify the settings of the parent element.
(Hint: you also see the parent elements in the right panel above the settings.)
Page Settings
In the Page Settings, you are able to change the global settings of the page (for example: background color, font size, link color, etc.)
Next to that, you can add the Meta tags of your page here, like Title, Description and Language.
You can also insert the different Analytics ID-s here in the Page settings to connect your landing page with the different analysis softwares.
If you use the landing page for subscription, or for profile updating, then you can add the settings of the contacts in the Page settings part. You can enable DOI process after the subscription here and you can add the permission of the contacts here as well.
Form element
You are able to add a Form element to your page if you would like to create a subscription, or profile update page. Once you added the Form element, an Email input field and a checkbox will be added to your landing page. You can change the “Success Page” and “Error Page URL” in the right panel, when the whole Form element is selected, above the usual settings.
Add new fields
You can add new Input fields and Checkboxes to the Form from the “Content elements” in the right panel. You just need to to drop these fields in your form.
When the Input Field is active, you can change its settings in the right side. You can also connect it with an existing Maileon contact field, so when a visitor fill out the form, the form datas will be saved in the contact fields you add here.
If you would like to use a hidden field, you have to uncheck the “Visible” checkbox in the right panel after you selected the field you would like to hide.