Responsive Template Builder

References for HTML integrators

See: Responsive Template Builder components

Where to find the Template builder?

For informations about inserting your Google Analytics tags,
see here: FAQ Google Analytics

Main menu

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.

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.

Theme

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.

Theme Format

• Text Font family (19 choices)
  

• Links Font family (19 choices)
  

Colors

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
  

• Text color
  

• Links color
  

• Button Background color
  

• Button text color
  

• Images background color
  

• Separator background color
  

Asset menu

Whenever you select an asset, this menu appears on both sides of it:

Text

• Text color
  

• Element background color
  

• Alignement
  

• Text block height
  

• Text block height (small devices)
  

Images

• Source

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.
  

• Align
  

• 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.
  

Buttons

• Button text edition
  

• Button alignement
  

• Button format
  

• Button width (max: 700px)
  

• Button height (min: 20px max: 250px)
  

• Button text
  

• Font family
  

• Font size
  

• Button color editor
  

• Button text color
  

• Button background color
  

• Link (+Goggle analytics tags)
  

Navigation

Determines how your subscribers will navigate your newsletter when viewed on mobile or tablet devices.

• Same features as Button
  

Logo

Click on the logo for a menu to appear:

• Same features as Image
  

Separators

Used for separating sections of your newsletter.

• Separator Height
• Separator width
• Separator height (small devices)
• Background color

Custom

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

Features:

• Source (If you want to replace the images)
• Align
• Image background color
• Image dimensions
• Link (+Google Analytics tags)