Marketing tools – Templates

What is an email template?

Your email template determines the design and structure of your email broadcasts. When you create an email broadcast, it will always use a template, ensuring you get consistency across your email marketing. 

How an email looks when it lands in a supporter’s inbox very much depends on how this template has been built and whether it adheres to best practice in email design. If you are a web designer, you will know the challenges of writing HTML for emails, and testing is paramount. We recommend using a service like Email on Acid, or Litmus to check that your template is rendering well across all the major email clients.

If you are concerned only with content creation, then you will find our marketing tools make email generation a simple and enjoyable task, particularly when accompanied by a rock solid template foundation. If you just want to practice creating content, why not use one of our sample templates and find out just how easy it is, but if you are keen to dig into the templating side of things, read on!

Want to get started quickly? Create from a sample

Open

Sample templates are provided by Engaging Networks to help you get started with the Marketing tools. They are branded with a fictional charity and are designed to allow you to easily change the logo, colors and fonts to make it match your own brand more closely.

Our new Free and Flexible email template replaces the CTA template and newsletter templates. You can use as many or as few of the sample blocks as required. They will work for appeal, engagement and fundraising emails.

Open

The sample templates are unlike the more bespoke templates that an agency might create for you. An agency might ‘hard code’ the brand elements (so they cannot be changed), but with the sample templates,  there are many changes you can make with the Global Replacements.

In the sample templates you can change:

• Logo

• Background colours

• Headings and body text (fonts, sizes and colours)

• Social channels

• CTA buttons

• Footer

In the screengrab above you can see where you can change the button color and the corner radius.

The sample templates come preloaded with all the different Custom block types. We recommend leaving these on the template while updating the Global elements, as this will allow you to see your changes happening in real time.

When you are finished making the changes to your new template, hit ‘Save’ and it will now be available on your list of available templates.

Viewing and editing templates

Go to Marketing tools > components > templates

You can view a list of your templates, with options to:

• Duplicate

• Edit

• Delete

On initial load, you will see your template in HTML view. Among the HTML and CSS, you will see tags which will have been added by the template designer. These tags signify ‘Replacements’ and ‘Containers’.

Exporting and Importing Templates

You have the ability to export and import templates. 

Export Templates
When you click on Marketing Tools, you’ll click to Templates and then select the template you wish to export and click the pencil to edit. You can then choose to include or exclude the custom blocks associated with the template. 

Once you’ve decided on keeping or removing the blocks from the export, you can choose to copy the JSON script or download a JSON file to import.

Importing Templates

Under Marketing Tools > Templates you will select Create Template

and then choose Import Template:

You can then choose the JSON file that you exported previously or paste the JSON that you copied from the template export process. Save and you’re ready to go!

What is a replacement?

A template replacement is a placeholder which allows design elements to be changed in the visual editor. This could be anything from allowing the user to easily modify the colour of a CTA button using a colour picker replacement field type to a text replacement to update the size of the headings.

The different replacement field types currently available are:

• Text

• Rich text editor

• Select

• Link

• Image

• Image URL

• Colour picker

When you create a new replacement, you give it a label (should be descriptive), then the token is generated automatically. You give it a section, which allows you to group them (eg ‘Headings’ would be a good section name for your replacements that allow editing of H1, H2, H3 and H4), then you choose a Field type.

Replacements are a key component of the tools, and allow template designers to lock in the structure and design, and allow content creators to do what they do best (with no fiddly HTML to deal with!). When used on a template as mentioned above, they allow users to modify design and brand elements, but on Custom blocks they allow users to modify the content of broadcast emails.

What is a container?

A container tag places an area on the template where custom blocks can be added to your email broadcasts. Think of it as a workspace for the content creator. Wherever a container is added the user will be able to add, remove and reorder the custom blocks. These custom blocks could be (and this depends on what custom blocks you or your designer creates):

• CTA button

• Body text area

• Full width image

• Two column news with images

• Email sign off with staff photo

Visual view

As well as viewing the template HTML, you can switch to Visual view. This allows you to see the HTML rendered as it will hopefully look when it lands in inboxes. If your template already has custom blocks loaded, you will see them within the container areas.

In this screengrab you can see a selected custom block and the editable areas to the right.

If the designer has not preloaded any custom blocks, and you hover over the main content areas (where the ‘containers’ were added), you will see a plus symbol allowing you to add in blocks from your library.

There is no need to load blocks onto the template, however some might do so to provide layout inspiration to the content creators when they create a broadcast email. You can either provide a blank canvas, or add in all possible blocks for the content creator to pick and choose what they wish for their broadcast.

On the right hand side you will see two tabs: Global and Content.

Global

This is where you can make edits to the templates from any of the replacements within the HTML. So for example if the template designer added a replacement to allow you to change CTA Button colour throughout the template, you would do it under Global. Or if you wanted to change the Logo, and the designer had added an Image type replacement for that, you would also do that here.

Content

This is where you can edit the content in any preloaded custom blocks. So for example, if you wanted to change the default holding text in a Rich text block, you would do it here. 

If you change the content in the custom blocks within the template, it will update the content at the source. Within templates, custom blocks are a shared component. it is only when building a broadcast email that you can update content in a custom block without overwriting the original. 

Editing templates

Understanding HTML structure and syntax is vital if you want to edit the code in your template. If you are comfortable with this, then it is simply a case of making the changes in the HTML, then clicking ‘Save’.

You cannot edit the HTML structure within the visual view. In visual view you will only be able to edit those parts that have replacements attributed to them. 

If your designer created a replacement to allow you to change the logo, then you would do that under the Global tab. In the screengrab below from our sample template, you can see that the logo can be changed, as well as the positioning of it.

Once you have made any changes in visual view, just click ‘Save’.

As with anything in life, always have a back up plan, so we recommend you create a duplicate, then work from this. That means you always have a fallback, should things go badly wrong!

Creating a template from scratch

Create template > Create from scratch

Every designer/developer will have their own way of working, but we would recommend that your HTML is built locally, then pasted into the HTML window when it is ready.

Think of the structure of a template in a modular way:

• HTML

  • Container

    • Custom blocks

      • Replacements

If creating a template where the end user can also modify elements of the brand, it would be like this:

• HTML

  • Replacements (Global)

    • Container

      • Custom blocks

        • Replacements (custom block level)

• The custom blocks are made up of HTML and Replacement tags. The replacements are the areas to be edited by the user when creating their email broadcasts.

If you have experience building templates with our legacy email tools, it might be helpful to think of the custom blocks as the new version of the ‘Editable Repeatable Region’. But with benefits.

Learn more about creating custom blocks here.

If you build your email in an entirety (locally) and add comments in your HTML above and below all the distinct pieces of code that will make up each custom block it is then easy to transfer each element across to create your blocks.

So to summarise, your code will exist in different places in our Marketing tools. Your template (the top and tail) will be saved in ‘Templates’ and your custom blocks will be saved to ‘Custom blocks’. 

Currently it is not possible to see all of your HTML in place, for example if you wanted to copy and paste all your code to put it in another client account. It is therefore important that you keep your local copy of all your HTML and CSS locally.

Copying A Broadcast Email Template to an Email Marketing Automation

It is possible to transfer a broadcast email template to an EMA (Email Marketing Automation) template with a bit of manual copy and pasting. There is a caveat that this process does not move across any tracking links and you will need to add links within the EMA itself to ensure your clicks are tracked.

Copying the marketing tools email template HTML

1. Go to Marketing Tools > Broadcasts > Create Broadcast

2. Create a message using the template you’d like to copy into an automation and save it

3. Navigate to the Testing tab for the broadcast campaign

4. Select the 🔍 to preview the template in your browser

5. In the browser preview, right click and ‘view source’ to see the HTML

6. Copy the HTML

Pasting the HTML into Marketing Automation templates

1. Go to Marketing Tools > Marketing Automations

2. Edit or create a marketing automation journey

3. Add or edit an email in the automation journey

4. Select the Load from Library button

5. Select the New Template button

6. Select the Advanced HTML editor tab and paste in the HTML

7. Name the template and select Save

Template FAQs

How many templates can I have?

You can have as many templates as you wish, however do note that our marketing tools allow enormous flexibility for displaying different types of custom blocks within your broadcast. So rather than having different templates for different types of email, why not just let the custom blocks do the work? The more templates you have, the more you might have to update in future, for example if you wanted to change your organisation’s address in a footer, or updating the unsubscribe information.

How do I get a brand new template built?

If you are starting from scratch, or perhaps you have gone through a rebrand process, we recommend reaching out to one of our accredited partners who will be able to help you get a template created. You could also use one of our sample templates to get started. With our sample templates you can update the brand elements and start sending beautiful responsive emails from the get go.

I have a template in the old email tools, can I use that one?

In short, no. The anatomy of a template is different with the marketing tools. Moving an existing template across is not difficult if you have a decent understanding of HTML and CSS. Depending on the complexity of a template, it can take between an hour to three hours to move all the components across. If this is something you are confident doing, please read the section above called ‘Creating a template from scratch’.