Message Template Builder guide

To create a new template using the builder, start at the Message Templates screen:

Control > Promote > Message Templates

On the Message Template component, click the Add button:

After this, the Message Template Edit screen will appear:

Here you will assign a Name to the template and select Template Builder (instead of the Code Editor) using the Build Template option.

On the left hand corner we have the following options:

• Desktop
• Tablet
• Mobile

By clicking on each of these icons, you will see what the email might look like on different devices.

Buttons

On the top, right hand side we have the following buttons:

• Clear Canvas:

The bin button.

This will wipe the canvas, leaving it blank.

It will not delete the template.

• View Component:

Shows or hides the dotted line borders to help with laying out the template.
These do not show up on the email message.

• Fullscreen: displays the builder in full screen mode

• View Code: displays the MJML/XHTML code

• Undo: removes the last change made to the template
• Redo: resets the last change made to the template
• Save: saves the changes made to the template

• Preview: preview what the message may look like when sent

This button only appears if you have a Message Campaign which uses this template as it will pull in any dynamic content into the preview, e.g. articles from the Message Content Sections field selected from the Message Campaign

• Preheader text:

Preheader Text or Email Preview Text is a short line of text that appears after the subject line in an email inbox for providing a summary of the contents of the email.

This number of characters may vary on mobile and web email clients depending on the length of your subject line, with most mobile email clients typically displaying 30-55 characters and up to 130 characters on desktop email clients.

Buttons

On the right hand corner we have:

• Content (Open Blocks):

Lists all the available elements you can drag and drop onto the canvas

• Style (Open Style Manager):

Allows you to configure the padding, fonts and styling for each element

• Advanced (Settings):

Adds additional attributes to some of the elements (e.g. add link URLs)

• Layers (Open Layer Manager)

This options helps you identify and style elements and components

Side Menu

Layout

• 1 Column / 2 Columns / 3 Columns:
• Allows you to use multiple columns for layout
• Column:
• Drag and drop additional columns

Basic Elements

• Text:
• Adds text to the canvas
• To create a link, highlight the text and double click
• This will bring up an additional settings bar to format the text and also to replace it with dynamic placeholders (e.g. First Name, Last Name, Company, Date, etc)
• Button:
• Adds a button to the canvas
• In order to add a link, select the component which should highlight it in blue
• Enter the URL (Href) into the Component Settings tab on the side menu
• Image:
• Inserts an image onto the canvas
• To change the default image, double click on the image and select or upload your required image
• Divider:
• Inserts a 1 pixel line divider

• Social Media Group:
• Inserts social media icons onto the canvas
• By default, Facebook and Twitter icons are inserted 
• You can change the URL via Component Settings on the side menu
• Available social media links: Facebook, Twitter, LinkedIn, Instagram, Youtube, Pinterest, Vimeo, Soundcloud, Medium
• Social Media Icon:
• Used to add additional social media icons to the Social Media Group
• You can only drag this into a Social Media Group element
• Spacer:
• Adds additional vertical space between elements
• Use the Style Manager to configure the height (by number of pixels) for the spacer
• Navbar
• Inserts a navigation bar onto the canvas
• To change the link, select the element and enter the URL in the Component Settings

• Navbar Link:
• Adds an additional link to the Navbar
• You can only drag this into the Navbar element

• Message text:
• Dynamic text that is inserted from the Message component from the Message Campaign and Message
  
• Available text options are Header, Default, Footer and Unsubscribe
  

• Section Content One / Section Content Two
• Use these elements to lay out the dynamic articles from the Message Content Section, selected in the Message Campaign
• You only need to select one set of these
• The template will pull in the number of articles defined in the message campaign into the same layout
•  If this message template is selected on a message campaign that has Message Content Sections selected, you will see the dynamic list of articles when you preview the template
• You can move the elements around within the same Section Content block

• Article List One / Article List Two:
• These elements are for laying out the dynamic articles from the Article List 1 and Article List 2 fields on the Message component 
• You can move the elements around within the same Article List block

• Campaign Creatives: Add Campaign Creative
• This inserts a campaign creative into the canvas

• Choose the campaign and then the creative to be used

Control > Promote > Message Campaigns > Message Campaign (Add/Edit)

You can add the newly created message template to a message campaign in the same way you would add a template created with raw HTML or a 3rd party app: by searching and selecting it from the options in the Message Template field.

This also applies to Messages:

Control > Promote > Messages > Message Edit

Affino has included several default message templates:

You can copy and use these with the Message Template Builder.

These are:

• Template Builder: Daily / Weekly News

• Template Builder: Breaking News

• Template Builder: Event Alert

• Template Builder: Job Alert

• Template Builder: Subscription Promotion

• Template Builder: Product

There are 3 Message Template videos at your disposal at the Affino Design Training page:

These are:

• 5 minute build: How to build a new message template in 5 minutes
• Message Templates Pt 1: The first part of a deep dive into the new Message Template builder
• Message Templates Pt 2: The second part of a deep dive into the new Message Template builder