Introduction
Find out how to create your own e-mail templates. See the template administration function in the main menu under Account under the Mailing Templates tab.
If you program your newsletter template by yourself, we cannot provide free support for HTML coding or display optimization support for e-mail clients. We can, of course, create a customized template for you. Just get in touch.
Source code sample template
You will find the source codes for a sample template at https://gist.github.com/2837443. Please visit this site for a better understanding of the information below, which often refers back to this info. You can also download the template files from that site.
The principle of elements
In the simplest case, a template consists of plain HTML source code. However, it can also include special placeholders, called elements. When you use templates, elements let you edit the content easily with our editor.
The three elements, with examples of integration
Text elements
Text elements only let you modify text later on in the editor. The format is already specified.
<chamtxt linkstyle="text-decoration:none;">A text element</chamtxt>
HTML element
HTML elements also let you adapt the formatting and alignment in our WYSIWYG editor.
<chamhtml>A HTML element</chamhtml>
Image Element
Image elements let users upload and import their own pictures using the editor.
<chamimg><img class="cham_img" width="100"></chamimg>
Sections that can and can’t be edited
The file 01 Template Quellcode.html forms the backbone of the template. It contains plain HTML code, as well as the elements described above.
Sections that cannot be edited using the editor
Areas that are permanently integrated in the template and are not be modified with the editor are entered directly as HTML code. For example, see line 15for an image that is an integral part of the template.
Sections that should be able to be edited using the editor
Lines 21 and 22, however, include a text element enclosed by the cham placeholder text. The design of this text element is predefined in the TD and cannot be changed later in the editor. The placeholder contains predefined text. You can click on this later on in the editor and change it to your requirements. You can also insert HTML and image elements anywhere you like, and these can be also changed in the editor.
The module principle
Modules are no more than HTML snippets that users can insert later dynamically in the editor at certain points in the template. Modules can therefore contain plain HTML source code, and optionally one or more of the above elements. You can create as many different modules as you like in your user account.
Placing modules in source code
For the editor to know where users can insert modules, mark this in the source code as follows:
<chammodule>
Nested modules
Nested modules are also possible. Module placeholders can be installed both in the main source (01 Template Quellcode.html) and in the modules themselves. You could therefore insert <chammodule> inside the module Table-Of-Contents. This allows you to place another module such as TOC-Entry inside the module Table-Of-Contents when using our mailing editor. To let the editor know that the module TOC-Entry can be placed inside of Table-Of-Contents, designate the module as follows:
Table-Of-Contents::TOC-Entry
What is the difference between modules and elements?
Elements are contents that users can change in the editor (text, HTML or images). A module, on the other hand, is a combination of conventional HTML and dynamic content, meaning it can consist of several elements.Modules can also be moved. If users, for example, insert an editorial module and several article modules in a module placeholder, they can then change the sequence as they wish using drag and drop.
Storing and using image files
To store image files (no image elements), you can use your own server and simply link accordingly, e.g. http://www.yourdomain.com/images/image1.jpg.
Formatting hyperlinks
CSS information must always be defined inline. Some freemailers ignore formatting defined in the header. The template definition therefore includes a hyperlink style text field. All CSS entries made here are automatically adapted for each a-tag in the mailing.
Example:
color:#a93f28; text-decoration:none;
Miscellaneous
Can I pre-assign other elements with content?
Yes, you can. For text and HTML elements, see examples above in the section on the three elements. For the image element, just enter the src attribute for the image file’s path
CSS Styles for Responsive Design
When programming a responsive template, use the Responsive CSS form field for your CSS code. The tags <style type=”text/css”> and </style> must not be entered here as they will automatically be inserted.
Why is my data ignored in the header section?
The first time you save a mailing in the mailing editor, everything in your code above <body> is replaced by a standard that ensures consistent display and encoding (UTF-8) of the mailing. Regardless of this, some freemailers ignore CSS values written inline.