Manage user actions in email templates

In HTML and CSS for EasyEditor email templates, specific classes, attributes, and comments are used to enable or disable user actions.

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated over a week ago

Before you start

Things you need to know


User actions you can manage

Allow 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.

Allow 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.

Allow 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 the ee-dropzone class.

<div> tags with this class must not have inline styles that affect width, for example border, padding or margin.

Stop users from resizing images

Add the following class to an <img> tag:

class="ee_noresize"

Allow 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.

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

Stop users from editing text styles and button styles in a campaign

  1. Find the main <table> tag (the first one under the <body> tag

  2. Find the ee-show-font-styles attribute 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.

styles.png
styles-2.png
Did this answer your question?