Newsletter Editor: Introduction to HTML template creation

Reading time: 6 min

At CleverReach, we offer you a large number of templates that you can easily use and customize. If you would still like to create your own template, you can use these instructions:

Example

Let's start with this simple example. Let's imagine that this is our template and we want to make it as easy as possible for the user to edit:

<html>
<body bgcolor="#ffffff">
    <h1>Daily Newsletter</h1>
    <p>Your daily update for all that is happening with XXXXX</p>
    <table >
        <tr><td>
            <div>
                <h3>did this just happen?</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>You wouldn't believe what just happened. If you want to know more, click the link down below!</p>
                <a href="http://www.example.com">Read more</a>
            </div>
            <div>
                <h3>Wait, this happened too??</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Maybe not as awesome as the previous news, but still very very interesting.</p>
                <a href="http://www.example.com">Read more</a>
            </div>
        </td></tr>
    </table>
</body>
</html>

In this code, only texts, images and links can be edited.

As a rule, we treat text and links as simple HTML, so we can only insert these two main types: HTML and IMAGE

To make the text editable, we wrap it with 
To make images editable, we wrap them with

In our example, this would look like this:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Daily Newsletter<!--#/html#--></h1>
    <p><!--#html#-->Your daily update for all that is happening with ACME<!--#/html#--></p>
    <table >
        <tr><td>
            <div>
                <h3><!--#html#-->did this just happen?<!--#/html#--></h3>
                <!--#image#-->
                    <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->You wouldn't believe what just happened. If you want to know more, click the link down below!<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Read more</a><!--#/html#-->
            </div>
            <div>
                <h3><!--#html#--><!--#/html#-->Wait, this happened too??</h3>
                <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Maybe not as awesome as the previous news, but still very very interesting.<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Read more</a><!--#/html#-->
            </div>
        </td></tr>
    </table>
</body>
</html>

You can now load this template into the editor and click on the text or image areas to edit them.

Note: You can use the source code editor during the creation process and easily switch between the editors (top right) to check your results.

HTML content blocks

The previous method works well if you don't want the user to have too much influence, but it's usually more common to have specific areas where the user can simply drop pre-built HTML bits that contain various forms of layouts.

We call these areas loops. Each content block in it is enclosed by  to keep these elements apart.

In the above example, you can see that there are 2 DIVs there, each representing a content block. Let's add our loop tag and leave out one of the content blocks as they are pretty similar anyway:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Daily Newsletter<!--#/html#--></h1>
    <p><!--#html#-->Your daily update for all that is happening with ACME<!--#/html#--></p>
    <table >
        <tr><td>
        <!--#loop#-->
            <!--#loopitem#-->
                <div>
                    <h3><!--#html#-->did this just happen?<!--#/html#--></h3>
                    <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                    <p><!--#html#-->You wouldn't believe what just happened. If you want to know more, click the link down below!<!--#/html#--></p>
                    <!--#html#--><a href="http://www.example.com">Read more</a><!--#/html#-->
                </div>
            <!--#/loopitem#-->
        <!--#/loop#-->
        </td></tr>
    </table>
</body>
</html>

Note: Loops cannot be placed between similar structures.

Template Tags

This is a list of all available template tags that we use to make templates editable. We have divided them into 3 categories:

Content-related (grundlegende Bearbeitung)
Hilfebezogen (Schaltflächen, Abstandshalter usw.)
Designbezogen (Hilfe bei der Gestaltung Ihrer Vorlage)

Content-related

These tags offer you basic editing options::

HTML

The HTML tag can handle a variety of HTML-related things. From simple text to complex content, it has several options for controlling each HTML tag individually.

<!--#html mode="default" inline="true"#--><!--#/html#-->

mode sets various options for content control

default: basic text formatting, links and placeholders
full: as default, but with pictures
textonly: only displays placeholders in the toolbar
link: only shows link settings and placeholders
safelink: No toolbar, cannot remove links, but has a sidebar instead

inline=“true” makes the element an inline element and not a block (only within the editor). This only fixes visual errors in the editor and does not affect the actual output.

replace=“true” marks the entire text when it is selected for the first time so that it can be replaced more easily.

IMAGES

This is used to make images editable, but also to make them "browser-safe". Positioning images in emails is not as easy as you might think. Therefore, the editor tries to embed the image in a table to align it correctly. If your image is already embedded in a table, place the image tag outside the table and not around the image. If you do not want your image to wrap, you can use the "nowrap" option.

<!--#image align="center" #--><!--#/image#-->

align=“center|left|right” This defines the standard orientation of the image. If none is set, an attempt is made to find it.

margin=“10px 20px” defines the outer edge of the image (default value "0px")

nowrap=“true” The image is not included in the table so that no alignment is possible.

noresize=“true|fasle” Removes the possibility of resizing

forcepx=“true” Percentage images are converted to px. This generally works best with all e-mail clients

replace=“true” Opens the file browser as soon as the image is clicked. Only used once and to replace placeholder images.

inline=“true” Makes the image (in the editor) an inline image and not a block. This only fixes visual errors in the editor and has no effect on the actual output.

LOOP

Schleifen schaffen einen bestimmten Bereich, in dem der Benutzer neue Elemente aus der Seitenleiste einfügen kann. Schleifen können nicht zwischen Tabellenelementen platziert werden wie <table><tr> or <ol><li>

<!--#loop#-->
    <!--#loopitem#-->...<!--#/loopitem#-->
<!--#/loop#-->

loopitem name: if set, makes it a detachable element in the sidebar

loopitem sidebaronly: is only included in the sidebar, but not in the actual content (default:false)

loopitem collapsible: makes the buttons collapsible (default:false)

STACK / STACK INPUT

Stacks work like loops, but are very limited in their use. The idea is to give the user a place where he can arrange only simple elements (HTML, IMAGE, BUTTON, BUTTON, SPACER and DIVIDER). This can be used to make columns editable without breaking the actual columns.

<table>
    <tr>
        <td>
            <!--#stacks#-->
                <!--#stack-entry#--><p>A</p><!--#/stack-entry#-->
                <!--#stack-entry#--><p>B</p><!--#/stack-entry#-->
            <!--#/stacks#-->
        </td>
        <td>
            <!--#stacks#--><!--#/stacks#-->
        </td>
    </tr>
</table>

Helper Tags

These tags are mainly prefabricated elements, ranging from simple spacers to complex elements.

BUTTON

This creates a client-safe HTML button. None of the values are actually required.

<!--#button bgcolor="#e9703e" color="#000000" align="center" text="Read more" #--><!--#/button#-->

text=“Click here!” Standard display text

href=“http://example.url”

bgcolor=“#e9703e” Defines the background color

color=“#ffffff” Defines the font color

align=“center|left|right|block” changes the alignment. Block corresponds to the full width

margin=“10px 10xp 20px 20px” outer margin

SPACER

Creates a editable spacer.

<!--#spacer size="50px"#--><!--#/spacer#-->

size=“20px” sets the default height to 20px

DIVIDER

Creates a separator line spacer (like <hr>)

<!--#divider padding="40px" width="85%" align="center" height="2px" color="#888888" bgcolor="transparent"#--><!--#/divider#-->

padding = “20px” sets the default height of this element (not the row itself)
width = “20px” the width of the current line
height = “20px” the height of the current line
bgcolor = “#ffffff”
color = “#ffffff”
align = “left|center|right|block”

UNSUBSCRIBE

Allows the user to select from predefined logout messages.
Note: Must be prefilled with text

<!--#unsubscribe#-->Please <a href="{UNSUBSCRIBE}">unsubscribe</a> me!<!--#/unsubscribe#-->

ABOUT US

This adds an area in which the user can select from predefined imprints.

Note: This content will be overwritten as soon as you load the template into the editor. If you do not want this, use HTML instead.

<!--#aboutus#--><!--#/aboutus#-->

ONLINEVERSION

Another section for displaying a text and a link to the online version (browser).
Note: Must be prefilled with text

<!--#onlineversion#-->If this message is not displayed properly, <a href="{ONLINE_VERSION}">click here</a> please.<!--#/onlineversion#-->

CSS and Design

These settings focus on design and CSS to provide the user with more and fully customized styling options.

THEMES

This searches for <style data="cr/theme"></style> and then offers a Theming tab under the Design tab on the side. All classes defined here are also appended inline to ensure maximum compatibility.

It essentially works like SASS, but only replaces variables.

Note: Everything below "*/" will be replaced as it will be the rendered CSS output.

<style data="cr/theme">
/*
    $my_var: 15px;
    $slider-Max_width: 600px;
    $quad-Text_to_display: 12px 12px 24px 24px;
    $color-use_me: #ffffff;
    $image-Background_image: https://example.com/batman.png;


    .mytest { 
        width: $my_var; 
        margin: $quad-Text_to_display; 
        background-color: $color-use_me
    }
    .background {url($image-Background_image);}
*/
...
</style>

We offer a range of presets and prefixes that you can use to control the type of input field.

$slider- uses a slider instead of an input

$quad- displays quad input field (f.e. for margins and paddings)

$color- will result in a color picker

$image- returns an image selector

$my_var results in an input field which is labled My var. The "_" is generaly replaced with " " (space)

User-defined editor settings

This controls the editor itself and gives you the option of showing and hiding some settings.
Note: This should ideally be in the first line, but also works everywhere else.

<!--#template css="false" settings="false" #-->

css = “false” Hides the Design tab in the main sidebar
settings = “false” Hides the Settings tab in the sidebar
default-elements = "false" Hides all elements in the sidebar
user-elements = “false” Hides all user elements in the sidebar
agency-elements = “false” Hides all agency elements in the page area
custom-elements = “false” Hides all elements except the template in the sidebar
css-to-inline = “true|false” Forces CSS/styles in inline mode
version = “2.0” Deactivation of old fallback functions for templates (e.g. automatic editing of the classes "body", ".a", ".text")
hideplugins = “edithtml,conditional” Requests to hide certain plugins. This is not supported by all plugins
fix-top = “true” Adds additional space at the top (only in the editor) to fix the missing HTML toolbar
image-nowrap = “true” Deactivates the table wrapping of images
image-nohref = “true” Deactivates the link settings for all images
loops-collapsible = "true” Makes all buttons in loop items collapsible

Editierbares CSS / Style

This allows you to have editable CSS blocks in the design tab so that users can modify their template to their liking.

Place /* @title Display Name */ above a CSS class to make it (and all its values) available under the Design tab.

<style>
    /*  @title Display Name */
    .exampleclass {
    background-color: #080708 !important;
    color: #ffeeff;
    padding: 5px;
    margin: 10px 5px;
}
</style>

You can also combine several CSS definitions into a group by adding @group mygroupname to the comment.

<style>
    /*  @title margins and paddings
        @group My custom group 
    */
    .exampleclass1 {
    padding: 5px;
    margin: 10px 5px;
    }

    /*  @title mostly colors
        @group My custom group 
    */
    .exampleclass2 {
    background-color: #080708 !important;
    color: #ffeeff;
}

</style>

.editable

If you add one of your HTML elements within a , all styles are released for editing.

By default, these are named "Element #", where # is a number that depends on the number of editable elements you have. You can change this name by adding data-name .

Optional: You can usedata-limit-to to make only the listed CSS styles (separated by commas) editable and leave the rest untouched.

Optional: You can use data-style to provide the user with additional styles without actually writing these values in style, as long as they do not differ from the original value. Here it would only be written if background-color was something other than inherit .

<td style="padding: 10px 20px;text-direction:ltr;" data-style="background-color:inherit;" data-limit-to="padding,background-color" class="editable" data-name="Container">

Decremented tags

The following tags are obsolete and are automatically converted to their newer counterparts.

 wird 
 wird 
 wird 
 wird 
 wird

Help & Support

If you have any questions or need assistance, please contact our service team. They’ll be there for you.

Newsletter Editor: Introduction to HTML template creation

Example

HTML content blocks

Template Tags

Content-related

HTML

IMAGES

LOOP

STACK / STACK INPUT

Helper Tags

BUTTON

SPACER

DIVIDER

UNSUBSCRIBE

ABOUT US

ONLINEVERSION

CSS and Design

THEMES

User-defined editor settings

Editierbares CSS / Style

.editable

Decremented tags

Help & Support

<%= previousTitle %>

<%= nextTitle %>

Our Webinars

<%= block.name %>

Topics

<%= block.name %>

Got more questions?

Topics

Search

Example

HTML content blocks

Template Tags

Content-related

HTML

IMAGES

LOOP

STACK / STACK INPUT

Helper Tags

BUTTON

SPACER

DIVIDER

UNSUBSCRIBE

ABOUT US

ONLINEVERSION

CSS and Design

THEMES

User-defined editor settings

Editierbares CSS / Style

.editable

Decremented tags

Help & Support

<%= previousTitle %>

<%= nextTitle %>

Our Webinars

<%= block.name %>

Topics

<%= block.name %>

Got more questions?

Topics

Categories