HTML Markup Guide

This markup guide enables email coders to customise Email Templates so that they are compatible with the drag & drop Email Designer feature.

Using Template markup in this way is best done by developers - this guide is intended for experienced email coders that are familiar with building Email Templates.

Coder Hints & Tips

Protected Sections

Content only becomes editable after adding Email Designer attributes to HTML source code.

This means by default all content within an Email Template is 'protected' and not editable through the Email Designer.

Define drop zones where content can be added and within that what can be edited using the attributes detailed below.

Drop Zones

Drop zones are used to define areas where content can be dragged, dropped and edited.

There's no limit to the number of drop zones within an Email Template and using multiple declarations should provide enough flexibility to cater for a wide range of layouts.

Properties

Attribute key name is data-ed-zone and requires a string value that is used as a label within the Email Designer UI.

Setting a label is optional but recommended to make it easier for users to identify when constructing the Template.

This attribute is supported on the following tags:

  • td

Child Attributes

There are no related attributes.

Basic Email

This example defines one drop zone.


    <!-- Drop Zone Wrapper -->
    <table width="580" align="center">
        <tr>
            <td width="580" valign="top" data-ed-zone="Main content area">

            <!-- Drop sections into here -->

            </td>
        </tr>
    </table>
    <!-- End Drop Zone Wrapper -->

Email With Sidebar

Two drop zones for creating a layout that uses a sidebar.


    <!-- Drop Zone Wrapper -->
    <table width="600">
        <tr>
            <td width="150" valign="top" data-ed-zone="Sidebar content">

            <!-- Drop sections into here -->

            </td>
            <td width="450" valign="top" data-ed-zone="Main content area">

            <!-- Drop sections into here -->

            </td>
        </tr>
    </table>
    <!-- End Drop Zone Wrapper -->

Coder Notes

  • Setting align centre on the main table will generally gives the best positioning within email apps and the Email Designer.
  • Setting valign top on a container will ensure content positions correctly within the Email Designer.

Sections

Sections are the building blocks within drop zones. They are basically sub-layouts that span the full width of the zone and can contain other editable content such as images, text, links and buttons.

Properties

Attribute key name is data-ed-section and requires a string value that is used as a label within the Email Designer UI.

This attribute is supported on the following tags:

  • div

Child Attributes

Info
Use the data-ed-info attribute and add a string value to provide additional info about the section. This info displays in the left panel within the Email Designer UI.

Category
Use the data-ed-section-category attribute and add a string value to provide a category name for the section. This builds up a section category filter within the Email Designer UI, making it easier to manage Templates with many sections.

Priority
Use the data-ed-section-priority attribute and add a numerical value to provide a priority for the section. This allows control over the order in which the sections appear within the Email Designer UI. Ensure to specify a priority for all sections used within the Template when using this feature.

Show as Default
Set the data-ed-default attribute to "true" if you want to display it within the content when the Template is first loaded.

Set the value to "false" if you want the section to appear within a list of sections that can be optionally dragged onto the Template.

Hiding Sections
Set the data-ed-hide attribute to hide sections as the display mode changes.

Use the values below to control display or do not include the attribute to show sections in every display mode:

  • NONE - always display the section
  • VIEW_ONLINE - hide in view online page
  • SOCIAL - hide in social sharing pages
  • ALL - Only show in email version

Thumbnail
Use the data-ed-section-image attribute to upload a thumbnail representation of the section. This is displayed next to the section within the Email Designer UI making it easier to identifier sections.

Example Usage


    <!-- Section Wrapper -->
    <table width="580" align="center">
        <tr>
            <td width="580" valign="top" data-ed-zone="Pre-header and view online link">
                <div data-ed-hide="ALL">
                    Can't view this email properly? <a href="{?$view_online?}">View it in your browser</a>.
                </div>
            </td>
        </tr>
        <tr>
            <td width="580" valign="top" data-ed-zone="Main content area">
                <div data-ed-section="Header" data-ed-info="Header section" data-ed-default="true">
                    <!-- HTML goes here -->
                </div>

                <div data-ed-section="Headline" data-ed-info="Hero image and description" data-ed-default="true">
                    <!-- HTML goes here -->
                </div>

                <div data-ed-section="Recent Blog Posts" data-ed-info="5 Recent blog posts with image, title and text" data-ed-default="true">
                    <!-- HTML goes here -->
                </div>

                <div data-ed-section="Popular Products" data-ed-info="Three product images, info and buy buttons" data-ed-default="true">
                    <!-- HTML goes here -->
                </div>

                <div data-ed-section="Featured Product" data-ed-info="Large product image, description and button" data-ed-default="true">
                    <!-- HTML goes here -->
                </div>
            </td>
        </tr>
        <tr data-ed-section="Footer links">
            <td width="580" valign="top">
                <div>
                    <!-- Fixed terms and conditions and social links  -->
                </div>
            </td>
        </tr>
    </table>
    <!-- End Section Wrapper -->

Coder Notes

  • All markup using the data-ed-section attribute will be made available as drag & drop sections
  • Any sections that are created without the data-ed-default attribute won't appear in a newly created Template and need to be dragged into place

Headings & Text

Use this attribute to enable editing of titles or text within a section.

Properties

Attribute key name is data-ed-text and requires a string value that is used as a label within the Email Designer UI.

This attribute is supported on the following tags:

  • address
  • article
  • aside
  • blockquote
  • body
  • details
  • div
  • fieldset
  • figcaption
  • footer
  • form
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • header
  • hgroup
  • nav
  • p
  • pre
  • span

Child Attributes

There are no related attributes.

Example Usage


    <!-- Section Wrapper -->
    <table width="580" align="center">
        <tr>
            <td width="580" valign="top" data-ed-zone="Main content area">

                <!-- Protected pre-header text -->
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                </div>

                <!-- Editable heading -->
                <h1 data-ed-text="Main heading">
                    MONTHLY NEWSLETTER
                </h1>

                <!-- Editable body text -->
                <div data-ed-text="Strap line">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                </div>

                <!-- Protected terms and conditions, opt-out etc. -->
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                </div>

            </td>
        </tr>
    </table>
    <!-- End Section Wrapper -->

Coder Notes

  • If the data-ed-text attribute isn't declared the related content will not be editable.

Compatibility & Troubleshooting

  • Your content must be compatible with regard to correct nesting of block level elements.
  • The email editor inserts a div within any element targeted with data-ed-text to allow typing.
  • Be aware that if you have placed data-ed-text on an inline element such as a span it will have a div inserted within, which will affect the layout.
  • Elements targeted with data-ed-text should not be nested beneath elements that do not support nested div's within, such as p tags. Instead consider replacing the parent p tag with a div and using CSS to style accordingly.

Images

Use this attribute to enable editing of images within a section.

Properties

Attribute key name is data-ed-image and requires a string value that is used as a label within the Email Designer UI.

This attribute is supported on the following tags:

  • img

Child Attributes

Image Size
Use the data-ed-size attribute and add a numerical value to specify the maximum display width for images. Setting the size attribute helps to avoid pixelation as media queries alter the display on mobile devices.

Example Usage


    <!-- Section Wrapper -->
    <table width="580" align="center">
        <tr>
            <td width="580" valign="top" data-ed-zone="Main content area">
                <!-- Start product promotion content block -->
                <div data-ed-section="Featured promotion" data-ed-info="Product Image, information and buy button">
                    <table>
                        <tr>
                            <td>
                                <img data-ed-image="Product image" data-ed-size="560" src="/email_designer/placeholder/280x180.png?data-ed-info=Just a placeholder" alt="Just a placeholder" border="0">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div data-ed-text="Product information">Product info</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a data-ed-action="Buy now link" href="">BUY NOW</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- Start product promotion content block -->
            </td>
        </tr>
    </table>
    <!-- End Section Wrapper -->

Coder Notes

Link, Button & Click Actions

Use this attribute to enable the link and text on buttons to be edited.

Properties

Attribute key name is data-ed-action and requires a string value that is used as a label within the Email Designer UI.

Using this attribute results in the related markup being wrapped within an anchor tag in order to create the click action.

This attribute is only supported on A tags.

Child Attributes

There are no related attributes.

Example Usage


    <!-- Section Wrapper -->
    <table width="580" align="center">
        <tr>
            <td width="580" valign="top" data-ed-zone="Main content area">
                
                <!-- Button with customisable text -->

                <a data-ed-action="" href="#">
                    <button data-ed-action="" width="150" height="40">
                        <div data-ed-text="Buy now button">
                            Buy Now
                        </div>
                    </button>
                </a>
                <!-- End button with customisable text -->

            </td>
        </tr>
    </table>
    <!-- End Section Wrapper -->

Coder Notes

  • If the data-ed-action attribute isn't declared the related content will not be editable.

Related Pages