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 the dropzones or building blocks in your template, find out more about the structure of our email templates.
Allowing users to edit text and images
Add the following class to the <td> tag or an <img> tag inside a building block:
class="ee_editable"
Remove this class to stop users from editing text and images inside the building block.
This class is added by default when you drag and drop a building block into your campaign.
Allowing users to drag and drop building blocks in elements of a campaign
Add the following class to the <td> tag or a <div> tag inside a building block:
class="ee_dropzone"
Important
Don't nest dropzones directly inside other dropzones.
The only element that can be nested directly inside a dropzone is a building block element.
If you add this class to a
<div>tag, don't add too many inline styles to this tag because inline styles do not render correctly in all email clients.
Allowing users to drag and drop building blocks from one dropzone to another
Add the following class to a building block:
class="ee_element"Important
<table>tags with this class must always be nested between<td>tags that have theee-dropzoneclass.
<div>tags with this class must not have inline styles that affect width, for example border, padding or margin.
Stopping users from resizing images
Add the following class to an <img> tag:
class="ee_noresize"
Allowing users to set the value of an image's width property in pixels
Add the following class to an <img> tag:
class="ee_noresponsiveresize"
Important
If you add this class to an
<img>tag, you should also set the value of the image's max-width property to 100% so that the image does not break the layout of a campaign on mobile devices.
This class is added to an <img> tag automatically when you select the 'Preserve image size' display option in the 'Styles' tab.
Stopping users from editing a campaign in the user interface
Add the following comment under the <body> tag if you want users to be able to edit a campaign only by editing the source code:
<!-- eehtmlonly -->
Stopping users from editing text styles and button styles in a campaign
- Find the main
<table>tag (the first one under the<body>tag - Find the
ee-show-font-stylesattribute and change its value to'locked'
<table ee-show-font-styles="locked">
After changing this value, users will not be able to edit styles in the style manager, nor be able to edit the 'Background' and 'Colour themes' options in the 'Styles' tab.