Responsive Drag & Drop Email Builder
References for HTML integrators
Where to find the Drag & Drop Email Builder?
Choose the Drag and drop builder by clicking on editor mode located on the right when you create a new message. Once you start using the builder for your new message, this message will always be editable in the builder, you won't be able to edit it with the other 2 editor mode.
This step is where you will find your previously saved templates and where you can choose the template you wish to use for your new message.
For informations about inserting your Google Analytics tags,
see here: FAQ Google Analytics
This little menu is featured in the top left corner of your screen.
- New Workspace
- Clears the whole template to start over
- Save as template
- To save this message as a template, you will be able to choose this specific template for futur messages. It will remain customizable for futur messages.
- New Workspace
We recommend saving all new templates before you leave the Drag & Drop Email Builder. If you need to make modifications for your next message, you won't have to recreate the whole thing.
- Color Undo
- Whenever you change an element's color and wish to go back to the previous one.
- Font text
- The general font used for text elements in your email.
- Font Links
- The general font used for links in your email.
- Font size
- The general size of fonts in your email
- Color Undo
- The theme menu establishes the general colors and font colors of your message. you can establish a Preset, Add custom themes or add a preheader
Drag & Drop Library
The library of drag & drop assets used to build an email.
- Color Picker
- To pick a color not featured in the builder
- Color swatches
- To keep track and access easily previous colors already used.
- To preview your message. It allows you to view the visual of your message on desktop, tablet and mobile device.
Drag and Drop
When you find an interesting asset, you click it and drag it to the box to establish its position. If you have no specific position in mind, just click on it and it will find a spot automatically.
As you enter the Drag & Drop Email Builder, this is the very first menu that will pop-up. It’s the theme menu which decides what font will be used in your emails and the colors.
Text Font family (19 choices)
Links Font family (19 choices)
- Font size: From 8px to 28px
Simply click on the circle to select the color you want. Then click in the square to select the shade of that color.
- Theme Colors:
Email background color
Window background color
Button Background color
Button text color
Images background color
Separator background color
Whenever you select an asset, this menu appears on both sides of it:
Element background color
Text block height
Text block height (small devices)
This option gives you the ability to import the following:
- An image from the content library by clicking on the SELECT FROM LIBRARY button
- To insert an external link directly into the edit field of the source image.
Color (Image background color)
Size (Image Width + Image Height)
Link (+ Google analytics tags)
- This option gives you the ability to link the image to a URL. When clicking on the picture, a page will open. Note that the URL could be a PDF document, a video, an audio clip or a website.
Button text edition
Button width (max: 700px)
Button height (min: 20px max: 250px)
Button color editor
Button text color
Button background color
Link (+Goggle analytics tags)
Determines how your subscribers will navigate your newsletter when viewed on mobile or tablet devices.
Same features as Button
Click on the logo for a menu to appear:
Same features as Image
Used for separating sections of your newsletter.
- Separator Height
- Separator width
- Separator height (small devices)
- Background color
To create a custom block:
- Create your code locally
- Save it as a .tpo file
Upload your file to the eFlyerMaker application using the “Content -> Document Library” section.
Your file will be shown in the Drag & Drop Email Builder interface under the “Custom” panel
- You can save a block within the builder, a block that you have previously personalized by clicking on the save button on the left side of the block. This block will now be in your customs and you'll be able to drag it and change it as much as you want in other templates, while keeping the saved one untouched.
- Source (If you want to replace the images)
- Image background color
- Image dimensions
- Link (+Google Analytics tags)
This unique tool makes it super easy to create an original newsletter that will exceed your expectations, to learn more on how to use this tool, click here.
** Requires activation **
See: MATCHERAnalytics Joins eFlyerMaker