Email templates editable regions

For Email Templates to have regions that are editable in the email builder, they need to be marked in the HTML via DIVs of certain classes. If you do not mark any regions, then your templates will not be editable.

Note that there are two types of email template – a newer template design that uses the email-builder, and an older one that templates made before November 2017 will use. The old “legacy” code will still work but we advise you use the new code as described below. This document describes the code for the new templates first, with the legacy later on.

Droppable regions

Droppable regions are the most basic region – you can only drag components (text or image blocks) into your template via the editor if an area has been marked as being “droppable”. If no region has been marked as droppable, the toolbar will not be available. However you can still edit existing blocks.

How do I mark a region as droppable?

In the HTML, surround the region to be droppable in a div:

CODE

<div class="en__component en__component--droppable ui-sortable">
  <!-- YOUR EMAIL TEMPLATE -->
</div>

Here’s another example – a draggable region with two components inside it:

CODE

<div class="en__component en__component--droppable ui-sortable">
  <div class="en__component en__component--imageblock">
    <img src="https://your.site/image.jpg" />
  </div>
  <div class="en__component en__component--textblock">
    <p>This is the content that will be editable</p>
  </div>
</div>

Editable regions

When you add a text or image block to your template, it adds this information to the HTML for text blocks:

CODE

<div class="en__component en__component--textblock">
   <p>This is the content that will be editable</p>
</div>

and for image blocks:

CODE

<div class="en__component en__component--imageblock">
  <img src="https://your.site/image.jpg" />
</div>

These classes instruct the email editor what type of block the region should be editable by. For example, a text block region would look like this in the editor:

Repeatable regions

Repeatable regions allow the user to easily duplicate, or remove, groups of content in their email. One example of this is in our Newsletter sample template, where a story area (which includes an image, title and description) can be repeated as desired via the + button (or removed via the – button).

These repeatable blocks can be dragged and reordered as desired by hovering on the intended block to move, clicking on the Repeatable area (i.e. the four arrow ✣ icon) and dragging to the area desired on the email template.

Repeatable regions can surround multiple blocks and other content. Here’s an example of the HTML:

CODE

<div class="en__component en__component--repeatable">
    <div class="en__component en__component--imageblock">
        <img src="https://your.site/path/to/editable/image.jpg" />
    </div>
    <div class="en__component en__component--textblock">
        <p>this is the content that will be editable</p>
    </div>
</div>

Legacy templates

Legacy templates are marked as LT in the template list. These are templates created before November 2017’s software update. They are fully compatible with the software. If you previously used editable regions in these templates, they are equivalent to the new editable regions and will act in the same way. For reference, the old tags are:

[Legacy] Editable area (now replaced by the text block region – see above)

This makes everything within the div editable.

CODE

<div en-editable="true">
 ...
</div>

[Legacy] Image only (now replaced by the image block region – see above)

This creates an area that only an image can be inserted too. Clicking into this area allow you to insert an image from your Engaging Networks library.

CODE

<div en-image="true">
  ...
</div>

[Legacy] Repeatable regions (now updated – see above)

A ‘repeatable region’ creates an area that can be duplicated. Note that either an en-editable and/or en-image region must be place within a repeatable area.

CODE

<div en-repeatable="true">
  ...
</div>

[Legacy] Example Snippets

The examples below are snippets of html, which would be parts of an entire template.

[Legacy] Setting an editable ‘image only’ region

CODE

<td>
  <div en-image="true"><img src="https://placehold.it/200x50/" /></div>
</td>

[Legacy] Setting an editable region, which allow images or text updates

CODE

<td>
  <div en-editable="true">
    <p>This line the only one that is editable.</p>
  </div>
</td>

[Legacy] A repeatable region that has an editable region inside

CODE

<div en-repeatable="true">
  <p>This line of text will be in-editable.</p>
  <div en-editable="true">
    <p>Example: I have made this line the only one that is editable.</p>
  </div>
</div>