(DEPRECATED) Marking up dropzones and elements

EasyEditor features various drag and drop features. The items that can be dragged and dropped are referred to as elements. The places on the email where elements can be placed (or dropped) are called dropzones.

Having dropzones (and therefore drag-and-drop features) is not a requirement, but may help you to lay out your email as required.

There is no limit to the number of dropzones you can have.

Creating a dropzone

To make a dropzone use:

<td class="ee_dropzone">
 [Elements can be dropped in here]
</td>

Anything then dropped into this dropzone will be scaled to fit the width of this dropzone.

The rules:

 There are a few rules when creating dropzones:

  • A dropzone must be a block level element that can contain other block level elements. Principally, for emails, this means the td tag.
  • If you put anything inside a dropzone, it must be an element (see below). Anything else will cause problems with drag and drop, and may be removed.

Elements

The most simple elements are the ones you will find in the elements bar in the left-hand section of EasyEditor. Once you have created an empty dropzone, you will instantly be able to drop stuff from the side-bar, right into your email.

However, you may wish to pre-populate your email with your own elements. The most simple element would look like this:

<table class="ee_element">
 <tr>
  <td>This is my element</td>
 </tr>
</table>

The rules:

There are a few rules when creating dropzones:

  • Elements must be block-level HTML elements (tables, divs or otherwise).
  • Elements must be placed directly inside a dropzone - they must be a direct child of the dropzone.
  • Elements may themselves contain dropzones (dropzones can be nested!)

Borders and padding

Adding borders and padding to EasyEditor elements can be tricky, if you want to be sure it renders the same in all email clients.

If you want your borders and padding to be a fixed non-editable part of your template, then create them in the HTML; if, however, you want the user to be able to edit the borders and padding in EasyEditor you will need to use the following classes:

  • ee_borders
  • ee_bdr

To be editable borders and padding are added separately to each side of an element using border-top-width, border-top-color, border-left-width, border-left-color and so on. In most cases it will be easier to add borders and padding once the template has been loaded into EasyEditor to ensure that they remain editable.

Have more questions? Submit a request

Comments