Responsive Template Builder
References for HTML integrators
Where to find the Template builder?
For informations about inserting your Google Analytics tags,
see here: FAQ Google Analytics
This little menu is featured in the top right corner of your screen.
Theme: The theme menu establishes the general font and color of your message.
Preview To preview your message. It allows you to view the visual of your message on desktop, tablet and mobile device.
Import: To import a template you have created and saved in the template builder directly and edit it.
Save: To save a template you have created in the Template builder and go back to it later.
Clear: Clears the whole template to start over
Done: When you're ready to leave the template builder.
You are now exiting the Template Builder and saving it as your current message. You will not be able to modify your work here again. Are you sure you are finished with your design?
Close without saving: When you want to leave the template builder and not use what you've just created.
No: When you want to stay in the template builder
Yes: When you want to leave the template builder and carry your template over to the message editor.
Advice from the pros: We recommend that you save all new templates before you leave the template builder. This way, if you need to add or remove blocks for your next message, you won't have to recreate the whole thing. Enjoy!
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 template 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)
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 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 Template Builder interface under the “Custom” panel
- Source (If you want to replace the images)
- Image background color
- Image dimensions
- Link (+Google Analytics tags)