Markup for templates

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">

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.

    • Related Articles

    • EasyEditor template markup - an overview

      EasyEditor template markup is HTML and CSS that controls how your users can interact with your content in EasyEditor. For example, you can use EasyEditor template markup to do the following: Create your own button styles Allow or prevent users from ...
    • Uploading your own HTML email templates

      To upload a template, if enabled on your account, you will need an HTML file and the relevant images at point of upload. These can be individual files or a zip file. Browse to find files for uploaded including one HTML file and any images that are ...
    • Adding HTML to email templates

      Summary Recommended starting point We recommend using our 'Start from scratch' templates as a starting point to create your own email templates. These email templates include the most up-to-date HTML and CSS that make your email campaigns responsive ...
    • Adding CSS to email templates

      Summary EasyEditor uses classes, attributes, and comments to enable certain features in the user interface. If you want to add your own CSS rules to your email templates, you need to put your styles in the correct internal stylesheets. Otherwise ...
    • Managing user actions in email templates

      Summary When you're writing HTML and CSS for EasyEditor email templates, you must use specific classes, attributes, and comments to either enable or disable actions in the user interface. Structure of email templates If you're having trouble finding ...