Markup for templates

Summary

EasyEditor provides first-class support for building your templates which is compatible across most, if not all, mobile devices.

In order to mark up your templates in this way, we provide a host of features to help:

  • A CSS inliner so you don't have to inline all your styles manually
  • Blocks of auto-updating CSS to keep your templates up to date
  • Full-width rows or images

The basic template

The best way to get the most up-to-date version of our basic template is to create a new campaign and select one of our 'Start from scratch' templates. Once in EasyEditor, you can use Utilities > Edit source to view the source of that campaign.

<style> blocks

Our templates rely upon upon style blocks.  

Some of the style blocks are auto-updating, meaning that we can keep them up to date when we make changes to EasyEditor. This means, though, that any changes you make to such blocks will be overwritten when you next load your campaign.

You can spot such blocks as they all have the attribute id="editor_required_...".

If you wish to update any styles in those blocks, you should override the values in your own style blocks below them, rather than modifying such blocks directly.

Please also note that we now have a CSS inliner, which makes adding styles to your campaigns much easier. However, you need to be aware of this when adding your own styles, otherwise your campaign may not end up working exactly how you intended when you send it.

Inline blocks can be spotted because they have the attribute ee-render="inline".

Find out more about style blocks in templates and about the CSS inliner.

Default fonts and font styles

You can edit the styles for your default fonts and styles in your campaign by editing the last <style> block in a template. This contains styles for basic font styles in text blocks, as well as the styles for buttons.

For example, you can alter the below line to change the font throughout your campaign:

body, td { font-family: Arial, sans-serif; }

Find out more about the default font styles.

Locking down templates

To lock down your template so that font formatting and style editing is disabled, locate the very first <table> in your campaign, and change the ee-show-font-styles attribute like so:

<table ee-show-font-styles="locked">

Doing this will also remove EasyEditor's 'Background' and 'Colour theme' options in the 'Styles' tab for the template. This prevents colours in the template from being changed this way.

Good to know

If the attribute doesn’t exist, then you can add it and when the campaign is reloaded, font style CSS will be automatically generated.

Email width

As of writing, the email width functionality within EasyEditor itself isn't available for templates taken from the 'Start from scratch' and 'Mobile. Rebooted.' sections of the 'Free templates' library. This will be making a return soon, but for now, 'Changing width in templates' explains how to achieve this with these templates, and any issues you may encounter when doing so.

Please make sure you test thoroughly prior to sending your campaign.

Template markup

If you have marked up classic templates for EasyEditor in the past, then many of the classes used remain the same in the templates under 'Start from scratch' and 'Mobile email. Rebooted.' in the 'Free templates' library. However, the structure of these documents themselves are different to that of classic templates.

Here is a set of guides to help you mark up these templates:

Have more questions? Submit a request

Comments

Powered by Zendesk