EasyEditor tags and classes

Summary

Here you will find the markup and tags you will use most when coding your EasyEditor HTML email templates:

Editable image and text

class="ee_editable"

Allows text or images to be edited.

Application: td, img

Dropzone

class="ee_dropzone"

Allows you to drop block elements into this specific area of the document.

Application: td

Dragable block element

class="ee_element"

Allows a block element to be dragged and dropped from one dropzone to another; must always be nested inside a dropzone.

Application: table

Images that cannot be resized

class="ee_noresize"

Restricts an image from being resized (e.g. a logo or banner).

Application: img

Non-responsive images (pixel widths)

class="ee_noresponsiveresize"

For images larger than 100px wide, percents are used for scaling.  This class allows pixel widths to be used instead. You should also add the style max-width: 100%; so that it doesn't break the layout on mobile devices.

Application: img

HTML-Only campaigns

<!-- eehtmlonly -->

Add this comment to the top of your campaign (just inside the <body> tag) if you do not want your campaign to be editable using EasyEditor.

Using this mode, the campaign will only be editable using our HTML source editor only.

Columns & complex layouts

There are many different classes for creating columns and complex layouts in EasyEditor.  For best results, refer back to the main mark-up guide to gain an understanding of these, and how the new templates work.  Building a layout inside the editor first, and then modifying that HTML/CSS is a good way to construct complex layouts that work inside the editor.

Classes you may come across are:

  • row - to define a row in a column block
  • ee_columns - which outlines to the editor that the columns can be scales
  • row-inner - the container that contains the columns themselves
  • stack-column - a column that will stack on a mobile device
  • no-stack-column - a column that does not stack on a mobile device
  • col-inner - the container within a column

Editable buttons

For best results, please copy the HTML generated by the editor, and then copy that into your own campaigns.  Additionally, buttons can largely be styled using CSS, so touching the HTML should not be as necessary.

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk