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!
Access 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.
Once the block (es) integrated, you can slip there the desired contents: image, texts, separator, title, button...
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:
Share on social networks
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:
The RSS feed
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:
The floating image
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.
Your landing page is ready? You can publish it by clicking "Next" at the top right or "Publishing" in the left menu.