Here you will find the markup and tags you will use most when coding your EasyEditor HTML email templates:
Editable image and text
Allows text or images to be edited.
Application: td, img
Allows you to drop block elements into this specific area of the document.
Dragable block element
Allows a block element to be dragged and dropped from one dropzone to another; must always be nested inside a dropzone.
Images that cannot be resized
Restricts an image from being resized (e.g. a logo or banner).
Non-responsive images (pixel widths)
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.
<!-- 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
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.