HTML

The HTML tag can handle a variety of HTML related things. From simple text up to complex content, it has multiple switches to control each HTML tag individually.

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

mode will set different type content control options

• default: basic text formatting, links and placeholders
• full: like default but with images
  
• textonly: will only show placeholders in the toolbar
  
• link: just shows link settings and placeholders
• safelink: No toolbar, can’t remove links, but has sidebar instead

inline=“true” makes item inline and not a block (only inside the editor). this juts fixes visual errors in the editor and wont affect the actual output

replace=“true” will mark all then text if it’s selected for the first time so replacing it, is easier

IMAGE

This is used to make images editable but also to make them browsersafe. Positioning images in emails is not as easy as you might think, therefore the Editor tries to wrap the image inside a table to it can properly align the image. If your image is already wrapped by a table, place the image tag outside of the table and NOT around the image. If you don’t want your image to be wrapped, you can use the “nowrap” option.

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

align=“center|left|right” This will set the default orientation of the image. if non is set, it will try to figure it out.

margin=“10px 20px” sets the images outer margin value (default “0px”)

nowrap=“true” Image will not be wrapped in table thus no alignment is possible

noresize=“true|fasle” Removes resize ability

forcepx=“true” Percentage based images will be converted to px. this generally works best with all email clients.

replace=“true” Opens filebrowser once the image is clicked. One time thing only and used to replace placeholder images.

inline=“true” Makes image (in editor) inline and not a block. this just fixes visual errors in the editor and wont affect the actual output

LOOP / LOOPITEMS

Loop’s create a designated area where the user can drop in new elements from the sidebar. Loops can not be placed between table elements like <table><tr> or <ol><li>

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

loopitem name: if set, makes it an droppable item in the sidebar

loopitem sidebaronly: will only include it in the sidebar but not in the actual content (dafault:false)

loopitem collapsible: will make the buttons collapsible (dafault:false)

STACKS / STACK-ENTRY

Stacks work like Loops but are very limited in their usage. The idea is to give the user a place where he can only and arrange simple elements (HTML, IMAGE, BUTTON, BUTTON, SPACER and DIVIDER). This can be used toe make columns editable without braking 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>

BUTTON

This will create 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!” Default display text

href=“http://example.url”

bgcolor=“#e9703e” Sets the background color

color=“#ffffff” Defines the font color

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

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

SPACER

Generates an editable spacer.

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

size=“20px” sets default height 20px

DIVIDER

Generates an divider line spacer (like <hr>)

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

padding=“20px” sets default height og this element (not the line itself)

width=“20px” The width of the actual line

height=“20px” the height of the actual line

bgcolor=“#ffffff”

color=“#ffffff”

align=“left|center|right|block”

UNSUBSCRIBE

Gives the user an option to choose from predefined unsubscribe messages.
Note: Needs to be prefilled with text

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

ABOUTUS

This will add a section where the user can choose from predefined imprints.

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

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

ONLINEVERSION

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

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

THEMES

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

It works basicly like SASS but will only replace variables.

note: Everything below "*/" will be replaced as its going to 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 set of Presets and prefixes which will help you controlling the type of inputfield.

$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)

Custom Editor settings

This controls the Editor itself and gives you the option to show, hide and force some settings onto the user.
Note: This is best placed in the first line, but will work everywhere else as well.

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

css=“false” Hides the “Design” tab in the main sidebar

settings=“false” Hides the “Settings” tab in sidebar

default-elements=" false" Hides all elements in sidebar

user-elements=“false” Hides all user elements in sidebar

agency-elements=“false” Hides all agency elements in sidebar

custom-elements=“false” Hides all elements except template in sidebar

css-to-inline=“true|false” Forces CSS/styles to inline mode

version=“2.0” Disable old template fallback functions (for example automatic editing of class “body”, “.a”, “.text”)

hideplugins=“edithtml,conditional” tries to hide specific plugins. this is not supported by all plugins

fix-top=“true” adds extra space on the top (only in editor) to fix missing HTML toolbar

image-nowrap=“true” disables Table wrapping of images

image-nohref=“true” disables link settings for all images

loops-collapsible=“true” makes all buttons in loopitems collapsible

Editable CSS / Style

With this you can have editable CSS blocks in the design tab, so users can change their template up to their likening.

Simply place /* @title Display Name */ above a CSS class, and it (and all its values) becomes available under the “Design” tab.

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

Furthermore, you can merge multiple CSS definitions into one 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 class editable to any of your HTML elements inside a <!--#loop#--><!--#/loop#-->, all of its styles become exposed for editing.

By default these will be named “Element #” where # is a number based on the amount of editables you have. You can change that name by adding data-name to the HTML tag as well.

Optional: You can use data-limit-to will only make the listed css styles (comma separated) editable and leave the rest untouched.

Optional: You can use data-style to make additional styles available to the user, without actually writing these values into style until they differ from the original value. Here, it would only be written if background-color was something else then 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">