Landingpage Editor

Introduction

The Maileon „Landing Page Editor“ is an editing interface similar to CMS 2.1. It allows you to create pages using a simple drag and drop method. 

This service is available within the Maileon system and is completely customisable down to the last detail. It can be used for subscription / unsubscription pages, profile update pages, and to build up any other landing pages to substitute a form for profile editing, subscriptions, questionnaires etc.  

The “Landing Page Editor” does not require a separate integration with your website. All the pages created here will be accessible through the main subdomain of your Maileon account, using 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 page“ button or the “+” (add tab) sign in the right corner.

Please enter the name of the desired landing page in the marked fields of the pop-up window, and select the type of your page in the dropdown list.

Fill the URL path field to complete the URL of your page. Please choose the same term as the selected type of your landing page. Do not use spaces when you insert the file name of the URL path.

Note: Avoid using underscores for your URL. Google recommends hyphens instead, which makes your website more SEO-friendly. Search Engines are ignoring underscores as normally separated words in URLs will be interpreted as one word.

The type you selected will in the following make the predefined templates available.

Finish the set up of your landing page with a click on „Save page“.

Your page draft is now created and you are directed to the page management list, where you can further edit it by clicking on the button „Edit page“.

A published landing page can be re-drafted at any time.

Template selection

In the “Template selection” part, 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 Scratch”.

The “Pages Library” contains the templates you saved earlier. In this example, the library is empty.

The “Page gallery” contains the sketch templates created by Maileon, which are easy to start working with; modify the template as you desire.

Either way, the editor – in which you can create your own page – will be loaded.

During the editing process please pay attention to the length of your page. Keep it simple and transparent, sharing only the essential information on it. Longer pages require longer loading time, especially while being edited.

The editor

General overview

The following example starts with the template selection „From Scratch“. After clicking the button you will be directed to the Landing Page Editor.

On the left side is the surface where you build your page content and layout. In the top left corner you can switch between the desktop, tablet and mobile view.

When editing, it is important to test all three views in parallel so that any layout discrepancies can be spotted quickly and easily. Here, in the top left corner you find the option to enable the page outline as well.

Use the buttons in the right corner to save or close the document at any point during editing. The rotate buttons are also located here.

On the right are the different templates that can be added to the landing page using drag and drop. Next to the headline „Template” header you find the “Page settings” icon.

It is possible to save your work as a new template or to select the previously saved one by clicking on the three dots in the right corner.

After dropping the element, the right panel changes into settings mode. Now you can format the element as desired. Save your changes by clicking “Save” in the top right corner of the window.

After saving your work the panel switches back to the template view. Now you can add further section elements and refine the layout of your landing page.

These predefined “Content Elements”, “Form Fields” and “Article Templates” help you easily build and customise your landing page via drag and drop.

Use the predefined “Article Templates” in the tool panel serve as initial ideas to facilitate your work and help you  to create your own individual elements. Once you’ve adjusted the settings to your preference, you can save it as a new article template. This way you create your own set of individual templates, for a consistent corporate design.

Editing method

Move the new element by clicking on the blue circle in the middle of the element.

Once you have added a new element to the page, customise it by clicking on it in the editor window. When the element is active, you are able to change the settings in the right panel. The „Block“ and „Text“ settings can be changed separately.

Note: You can only change the label if you have previously selected it.

Modify the text content within the elements separately by selecting them. In addition to the general formatting options, you can also add a link or a contact field.

At this point, it is worth clarifying the difference between the two types of editing: the panel options and the menu bar.

On the right the whole block can be edited with customisable style elements (e.g. size, shading, font etc.) The direct panel settings allow you to edit the interface separately on the selected text block. These settings are override the side menu.

Floating Bar

After you drop an element into the editor, there are two options to arrange it. The icon in the bar above the selected item shows which mode is active. In the static mode („brick wall“ icon) the elements are fixed.

Move, duplicate or delete the elements freely and place them anywhere in the freehand mode („butterfly” icon).

Note: According to the set movement if you place a new element in the editor and click on the brick wall icon, it jumps to the top left corner.

If all elements in the interface are in “butterfly” and one is in static mode, it will pop up in the top left corner of the editor. The reason for this is because the code is changing and the element loses its spacing.

Switch it to “butterfly” mode or edit it by the “Alignment” in the “Spacing” menu bar.

The two modes can be switched by clicking on the icons in the Floating Bar above it. When the icon turns into „butterfly“ mode, it’s freely movable.

Important: Hold ALT (“option”) key for static positioning. Move elements around freely in this mode.

Here you have the opportunity for the “Toggle spacing visibility”, or “Bring forward” / “Send backward” the item.

Select the parent item of the currently active element with the “uparrow” icon. When you click it, the outlines will change and you will be able to modify the settings.

Note: The parent item can also be found in the “Toggle tree view “ icon  in the bottom right corner of the screen. Please see below for more information.

Mobile view check

The mobile view does not always adopt the style notes and layout set up in the desktop view. Instead, the elements may appear one below the other. Therefore, during the editing process please always check the mobile view in parallel with the desktop editing.

Utilize the freehand mode to easily rearrange the elements that may overlap in the mobile view, if necessary.

This example shows the difference between the mobile and desktop view.

Desktop

Mobile

Form element

In the “Article Templates” 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 add the “Form” element, an email input field and a checkbox will be added to your landing page.

Select the “Form” type by clicking “Submit.” In all cases – except for unsubscribing – this is the „Signup“.

After selecting the appropriate “Form”, click on the icon in the right corner of the screen. It opens the “Global Settings”.

Here you have the opportunity to

• customise the “success page” and “error page” in “Form Defaults” area,
• copy a unique URL (eg. from your website),
• or link previously created pages by the Landing Page Editor.

Add new fields

Add new input fields and checkboxes to the form from the “Content elements” in the right panel. Fill in these fields in your  form.

The input field can be duplicated by clicking on the field and using the duplicate block icon. After duplicating, edit the block or the field directly.

When the input field is active, you can also change its settings in the right panel. The input field can be linked to an existing Maileon contact field as well: when the user fills the form, the data is saved in the contact fields you add here.

If you are using a hidden field, you need to drag the “Visible” slider in the right panel after selecting the field you want to hide.

Toggle tree view

By clicking on the “Toggle tree view” button in the bottom right corner, the tree view shows how the elements are structurally stacked on the landing page.

Use the eye icons in the branch diagram to create hidden fields. This can be adjusted separately in the mobile and tablet settings. As indicated earlier, hidden fields can also be created in the right panel by using the “Visible” checkbox after selecting the field you want to hide.

Note: In Usercase 2 hidden fields are further discussed through a practical example.

Page settings

In “Page settings” you are able to change the global settings of the page (eg. background color, font size, link color etc.).

Next to that, please add the Meta tags of your page here, like title, description and language.

Different Analytics IDs can also be inserted in the “Page settings” to link the landing page to different analytics software.

If you use the landing page for subscription or for profile updating, enter your contact settings in the “Page settings” section. Enable the DOI process after subscribing and add the permissions for contacts here.

Create additional pages

Add more pages to the landing page using the “+” (add tab) icon on the left of the screen.

Edit the page freely or clone the content of the previous pages and save your own template.

Finishing up

Save the landing page at any point of the editing process. When it’s ready, publish it to your account’s “Pages” list with a single click. Mini statistics about usage, visits and submissions are also provided here.

At the end of the process, you receive two links to your landing page. The general link at the top of the page is useful for other interfaces, such as social media.

The parameterised link at the bottom of the page is for newsletters, eg. to implement a profile page with the right authentication / parameters.

Please note: This documentation is a general description of the Landing Page Editor. For further informations please find the usercases with the Frequently Asked Questions here,  or contact with our Client Service team.