The landing page editor is a Drag & Drop tool created and edited by Mailify to simplify the creation and publication of a landing page. Its simplicity allows use without technical expertise in HTML or CSS to create a responsive and effective web page.
From a blank page, you can easily and quickly compose a landing page by dragging and dropping modules. Everything is customizable and configurable: graphic style, colors, borders, typography...
Just create your web page, mailify hosts it for you, and you just have to communicate by email!
Creating a landing page
To create a landing, just go to the "Pages and forms" menu, and click on "Create a landing page" after naming and choosing the "Page responsive" type you go to the landing page editor.
You can create your email
- from scratch, and thus create your landing from a blank page and drag the modules
- from an already existing model to modify from an already existing structure, modify the contents and adapt the layout.
From the top of the page, you can:
- view the landing on desktop or mobile by clicking on this icon
- preview your page by clicking on this icon
- work on landing in full screen thus removing the menus and gain in terms of spaces to work on the layout of your web page by clicking on this icon
- reduce the right menu once integrated modules, you gain space to integrate your texts and images by clicking on this icon
Before you start inserting the content of the web page, you must set the layout, theme, colors and settings of the landing. To set it up, go to the "Styles" menu on the right side of the screen.
For the layout, you have the choice between a plain background, a colored background, alternating color blocks, and alternating color blocks in full width. By navigating through the different possibilities, choose the style that best fits your landing.
Themes and color distribution
All the colors of the landing are customizable. Themes are proposed to you to suggest a base of colors. Make your choice:
Each color can then be changed by element from the "Color Distribution". So you can change the colors of all the elements of your email: body, background, border, texts, buttons, titles, links...
you can customize the color by clicking on the corresponding color, choose a color in the palette or fill in the color directly.
Enable or disable the mobile version of your web page
- Change the colors of the main container, the edges, and specify the desired size of the borders
- Set the width of your page to PC version
- Specify the type of lettering that you want to use for H1 and H2 titles, pragraphs and buttons
- Set the space between the blocks of content
- Set the inner margins
Once the structure of the page is created, you can integrate the blocks and contents to create your page.
To integrate the content of your page, you must first choose the blocks: 1 column, 2 columns, 3 columns... Just drag and drop to create the structure of your landing page.
Content represents items you can place in your block columns. To do this, just click the content you wish and drag and drop it in the container of your choice.
Once the module "Image" integrated, you can:
- choose your image by clicking on the first icon
- duplicate the image to reuse it in your page, by clicking on the second icon
- move the image in the structure of the page, by clicking on the third icon
- delete the module, by clicking on the fourth icon
To import an image, you can choose between an image stored on your computer, an image in the image bank, or use an image already hosted by entering a URL.
The image bank
A royalty free image bank is available in Mailify. It has more than 1,000 professional photos to easily illustrate your web pages.
Warning: these images can only be used on Mailify to illustrate your email campaigns, your forms and your landing pages.
To import a photo, simply choose it and click directly on the image.The image editor will be displayed and you can modify the image by cropping, adding a filter, or adding text. Click here to learn more about using the image editor.
Once integrated, you can still edit your image, customize the dimensons, change the alignment, add a link and a caption.
To integrate text, simply drag the text module into a block. Once integrated, you can modify the present text and put it in page:
- typography, size and color of the text
- bold, italic, underline, bar, index
- line spacing
- bulleted or numbered lists
- the type of text: title 1, title 2 or paragraph
- the background color of the text
- a picture
- a link to add or remove
By adding the "Space" module, you automatically add a white space of 20px high. This space is adjustable by just indicating the size of the desired space:
You can add in your layout a module "Separator":
Adjustable when you click on the pen:
You have the option of creating a continuous, dotted line, or double line separator.
You can also add a text box just for the title:
The title automatically takes the size and typography of the "Title" parameters set in the settings. However, you still have the possibility to modify its formatting thanks to the settings palette:
You can integrate a button in the layout of your landing page, it is paramétrable just by clicking on it:
You can :
- change typography, size, color, fat and italics
- add a link to a web page or a published form
- use a theme to change the color of the background and border, and its size
- indicate the position
You can add links to your social networks:
and set them up:
By clicking on the "Add/Remove" button, you have the option to select or deselect social networks:
Then you just have to enter the URL of your page on each network:
A module allows you to add content sharing on social networks. You have the option to set up sharing for LinkedIn, Google+, Twitter and Facebook.
Set up the "Sharing" module by clicking on it and modify the link to share, the text, the typography, the color, the borders and the alignment:
In your landing page, you can integrate an RSS feed thanks to the module provided for this purpose. Once integrated, you can set it by clicking on it:
You can directly integrate a text module with a floating image at the top right. To edit the image, simply click on the Image icon and choose the method of imprt or delete the insertion of an image in the text block.
You have the possibility to integrate on your landing page a Google Maps. to do this, simply drag the Google Maps content and enter the address to display:
And the image is displayed by clicking on "Generate Plan":
You can set the plan poster: size, alignment, and legend.
You can integrate an HTML code content directly to your landing page, either by filling in or copy-pasting the code into the block. You will then have more control and flexibility on the design and structure of the blocks. You still need to be familiar with HTML integration to use this type of content.
It is possible to automatically generate animated Gifs from video content of your choice. To do this, drag and drop this type of content into a block.
In the "URL" field, copy and paste the URL of your video hosted on Youtube, Dailymotion, Vimeo, Twitter, Facebook, Instagram... A link to this URL will automatically be inserted on your video content.
In the "Format" menu, select the format that you want apply to the image of your video. Only the "Animated Gif" format can display an animation. The Jpeg format is displayed as a static image.
The "Button" menu allows you to select the style of the "player" you want to add to your content. You can choose not to use it if you wish. However, a "player" button allows you to clearly indicate that the image (animated or not) is clickable and directs to a video.
The "Start" field allows you to determine from which hour/minute/second of your video you want the image (animated or not) to be captured.
The "Duration" field allows you to determine the duration of your animated Gif (between 1 and 20 seconds).
The "Repeat loop" option allows you to play your animation in loop (option enabled) or stop it at the end of the animation (disabled).
Once these operations are completed, click on "Generate capture". The generation of an animated Gif can take several seconds.
This content automatically includes articles from your blog to your landing pages. You should first configure the Wordpress connector, see this page.
You can enhance your landing page by integrating a form.
When you edit your landing page, just drag and drop form-type content into the block of your choice.
You can then view the space dedicated to your form on your landing page. The space is grayed which means it's empty as no form has been associated yet.
Now click the gray space dedicated to your form, a window opens with a drop-down list presenting all the forms available for your account. All the forms published on your account can be integrated in your landing page regardless of the publication mode chosen (dedicated page, pop-up or block to integrate).
Choose the form you wish to integrate in your landing page from the drop-down list.
You need to have published your form to display it in this list and to integrate it in your landing page.
If you haven't created a form yet, your list will be empty, but you can click the orange button "Create a form".
You'll be redirected to the form creation tool and will leave landing page editing. You'll be able to come back again once you've created and published your form. Once you've created your form, you'll be able to select it from the drop-down list of existing forms.
N.B.: You can only integrate one form per landing page.
Is your landing page ready? You can publish it by clicking "Next" on the top right or "Publication" in the left-side menu.
You'll be redirected to the publishing step for your landing page.
Once you've chosen the domain name you wish, publish your landing page by clicking the green button "Publish the landing page"
Once published, you'll be able to copy your page URL to share it across any communication media you wish: email campaign, social media, etc.