Structuring templates

Structuring templates

To enable users to create mailings and landing pages in a simple and intuitive way, a well-structured template structure is essential. The following describes how you can achieve this.

Defining Containers

To structure the template, the content can be divided into sections. These sections are marked in the editor. For example, a division into introduction, main part and footer is conceivable. Later, it will be possible, for example, to add the contents of the main part to an automatic table of contents.

We create the Header, Footer and Main sections using the [CONTAINER] tag.

Template Source Code
Editor-View
Template Source Code
Example: Create container

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mein Template</title>
  5.     <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. [CONTAINER name='header' label='Header']...[/CONTAINER]

  10. [CONTAINER name='main' label='Hauptteil']...[/CONTAINER]

  12. [CONTAINER name='footer' label='Footer']...[/CONTAINER]
  13. </body>
  14. </html>
Editor-View
Display of the structure in the mailing/landing page layout:

In the element pool of the editor, you can filter by containers. Since containers with the same name can be used multiple times, it is important to reuse a container with an already used name only if it contains the same elements as the first container.

Defining Elements

Elements are added within the containers using the [ELEMENT] tag. The elements can contain articles of a specific type, graphics, or tables, for example. In the header, we want to provide a banner and an editorial element in our example.

Template Source Code
Editor-View
Template Source Code
Example: Define header banner and editorial

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mein Template</title>
  5.     <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. [CONTAINER name='header' label='Header']
  9.   [ELEMENT name='headerbanner' label='Headerbanner' default='true']...[/ELEMENT]
  10.   [ELEMENT name='editorial' label='Editorial' default='true']...[/ELEMENT]
  11. [/CONTAINER]

  13. [CONTAINER name='main' label='Hauptteil']...[/CONTAINER]

  15. [CONTAINER name='footer' label='Footer']...[/CONTAINER]
  16. </body>
  17. </html>
Editor-View
Presentation of the structure in the mailing/landing page layout:

Special instructions can be added within the container using the [TOP]...[/TOP], [BETWEEN]...[/BETWEEN], and [BOTTOM]...[/BOTTOM] tags, for example to represent spacing between consecutive elements.

Example: Adding spacing between elements
  1. [CONTAINER name='header' label='Header']
  2.   [BETWEEN]<br/><br/>[/BETWEEN]
  3.   [ELEMENT name='headerbanner' label='Headerbanner' default='true']...[/ELEMENT]
  4.   [ELEMENT name='editorial' label='Editorial' default='true']...[/ELEMENT]
  5. [/CONTAINER]

Populating Elements

In the next step, we create the template source code for the previously defined elements Headerbanner and Editorial. The source code consists of HTML tags and MWML tags.

Example: Header Banner

The Headerbanner element should contain an editable, linkable graphic as well as an optional caption. For the image, we use an image input. This creates input fields in the mailing/landing page editor for the image URL and the link URL, among other things. The default_href parameter defines the default image URL, and default_url defines the default link URL. In the output, an <img ... /> tag is generated, which is enclosed by a-tags if a link URL is specified.

Template Source Code
Editor-View
Output Source Code
Template Source Code
Element 1: Header banner

  1. [ELEMENT name='headerbanner' label='Headerbanner' default='true']
  2. <!-- Headerbanner -->
  3. <table cellspacing="0" cellpadding="0" width="640" align="center">
  4.     <tr>
  5.         <td>[INPUT  type='a_img'
  6.                     name='image'
  7.                     label='Bild'
  8.                     default_src='https://login.mailingwork.de/placeholder/placeholder/image/640x200'
  9.                     default_href='https://example.com/' /]</td>
  10.     </tr>
  11.     [BLOCK name='caption' label='Bildunterschrift']
  12.     <tr>
  13.         <td>[INPUT  type='span'
  14.                     name='text'
  15.                     label='Text'
  16.                     default='Das ist die Bildunterschrift'
  17.                     rows='2'
  18.                     required='true' /]</td>
  19.     </tr>[/BLOCK]
  20. </table>
  21. [/ELEMENT]

Editor-View

Clicking on Headerbanner opens a window for editing the element. This contains the settings for the image and the caption.


Output Source Code
Generated output of the header banner element with the default values:

  1. <!-- Headerbanner -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">
  3.     <tr>
  4.         <td><a target="_blank" href="https://example.com/" content="4176480"><img alt="" src="https://login.mailingwork.de/placeholder/placeholder/image/640x200"/></a></td>
  5.     </tr>
  6.     <tr>
  7.         <td><span>Das ist die Bildunterschrift</span></td>
  8.     </tr>
  9. </table>
 

Example: Editorial

The Editorial element should be able to contain a salutation, an introductory text, a call-to-action link, and a signature. Depending on the degree of freedom to be allowed, there are two ways to structure the module:

Static editorial
Modular editorial
Static editorial
The structure of the element is predefined. For example, if there is to be an (optional) headline, an (optional) text and an (optional) button and these components are always to be displayed in the specified order.
Modular editorial
If the number and order of the article content is to be dynamic, it is advisable to create a modular structure. For example, if one (or more) buttons are to be added below the text, which in turn can be followed by a text.

Static Editorial

With a static structure, the [BLOCK] and [INPUT /] tags are added directly within the [ELEMENT] tag.

Template Source Code
Editor-View
Output Source Code
Template Source Code
Example: static editorial

  1. [ELEMENT name='editorial' label='Editorial' default='true']
  2. <!-- Editorial -->
  3. <table cellspacing="0" cellpadding="0" width="640" align="center">

  5. <!-- Headline -->
  6. [BLOCK name='content' label='Inhalt' independent='true']
  7. <tr>
  8.   <td>[INPUT  name='headline'
  9.               label='Headline 1'
  10.               type='h1'
  11.               default='Headline 1'
  12.               rows='2'
  13.               required='true' /]</td>
  14. </tr>[/BLOCK]

  16. <!-- Text -->
  17. [BLOCK name='content' label='Inhalt' independent='true']
  18.   <tr>
  19.     <td>[INPUT  name='text'
  20.                 label='Text'
  21.                 type='span'
  22.                 default='Das ist der Artikeltext'
  23.                 required='true' /]</td>
  24.   </tr>[/BLOCK]

  26. <!-- Button -->
  27. [BLOCK name='content' label='Inhalt' independent='true']
  28.   <tr>
  29.     <td>[INPUT  type='a'
  30.                 name='button'
  31.                 label='Button'
  32.                 attributes='class="btn"' 
  33.                 default_href='#'
  34.                 default_text='Weiterlesen'
  35.                 required='true' /]</td>
  36.   </tr>[/BLOCK]

  38. </table>
  39. [/ELEMENT]

Editor-View
Click on “Editorial” to open the window for editing the element.

Output Source Code
Generated output of the editorial element with the default values:

  1. <!-- Editorial -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">

  4.   <!-- Headline -->
  5.   <tr>
  6.     <td><h1>Headline 1</h1></td>
  7.   </tr>

  9.   <!-- Text -->
  10.   <tr>
  11.     <td><span>Das ist der Artikeltext</span></td>
  12.   </tr>

  14.   <!-- Button -->
  15.   <tr>
  16.     <td><a class="btn" href="#" content="4176528">Weiterlesen</a></td>
  17.   </tr>
  18. </table>
 

Modular Editorial

For a modular editorial, a [CONTAINER] is defined within the Editorial element. The article components Headline, Text, and Button are added as elements within it.

Template Source Code
Editor-View
Output Source Code
Template Source Code
Example: Modular editorial

  1. [ELEMENT name='editorial' label='Editorial' default='true']
  2. <!-- Editorial -->
  3. <table cellspacing="0" cellpadding="0" width="640" align="center">
  4.   <tr>
  5.     <td>
  6.       [CONTAINER name='editorial' label='Editorial']

  8. [ELEMENT name='headline' label='Headline' default='true']
  9. <table cellspacing="0" cellpadding="0" width="100%">
  10.   <tr>
  11.     <td>[INPUT name='text' label='Text' type='h1' rows='2' default='Headline' /]</td>
  12.   </tr>
  13. </table>[/ELEMENT]

  15. [ELEMENT name='text' label='Text' default='true']
  16. <table cellspacing="0" cellpadding="0" width="100%">
  17.   <tr>
  18.     <td>[INPUT  name='text'
  19.                 label='Text'
  20.                 type='span'
  21.                 default='Das ist der Artikeltext' /]</td>
  22.   </tr>
  23. </table>[/ELEMENT]

  25. [ELEMENT name='button' label='Button' default='true']
  26. <table cellspacing="0" cellpadding="0" width="100%">
  27.   <tr>
  28.     <td>
  29.       [INPUT  type='a'
  30.               name='button'
  31.               label='Button'
  32.               attributes='class="btn"' 
  33.               default_href='#'
  34.               default_text='Weiterlesen' /]
  35.       </td>
  36.   </tr>
  37. </table>[/ELEMENT]

  39.       [/CONTAINER]
  40.     </td>
  41.   </tr>
  42. </table>
  43. [/ELEMENT]
Editor-View
Output Source Code
Generated output of the editorial element with the default values:

  1. <!-- Editorial -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">
  3.   <tr>
  4.     <td>

  6. <table cellspacing="0" cellpadding="0" width="100%">
  7.   <tr>
  8.     <td><h1>Headline 1</h1></td>
  9.   </tr>
  10. </table>
  11. <table cellspacing="0" cellpadding="0" width="100%">
  12.   <tr>
  13.     <td><span>Das ist der Artikeltext</span></td>
  14.   </tr>
  15. </table>
  16. <table cellspacing="0" cellpadding="0" width="100%">
  17.   <tr>
  18.     <td>
  19.       <a class="btn" href="#" content="4176628">Weiterlesen</a>
  20.       </td>
  21.   </tr>
  22. </table>
  23.     </td>
  24.   </tr>
  25. </table>
 

Example: Teaser Article in the Main Section

Within the main section, we want to add a teaser article. This should be in two columns. The teaser image is located in the left column. The right column should be fillable with the following article components: Headline, Headline 2, Text, and Button.

Template Source Code
Editor-View
Output Source Code
Template Source Code
Example: Element teaser article

  1. [CONTAINER name='main' label='Hauptteil']

  3. [ELEMENT name='teaser-article' label='Teaser-Artikel' default='true']
  4. <!-- Teaser-Artikel -->
  5. <table cellspacing="0" cellpadding="0" width="640" align="center">
  6.   <tr>
  7.     <td style="width: 200px;" valign="top">
  8.       [INPUT type='img' name='image' label='Bild' default_src='https://login.mailingwork.de/placeholder/placeholder/image/200x120' /]
  9.     </td>
  10.     <td style="width: 20px;"></td>
  11.     <td style="width: 420px;" valign="top">
  12.       <!-- container teaser-article -->
  13.       [CONTAINER name='teaser-article' label='Teaser-Artikel']

  15. [ELEMENT name='headline' label='Headline' default='true']
  16. <table cellspacing="0" cellpadding="0" width="100%">
  17.   <tr>
  18.     <td>[INPUT name='text' label='Text' type='h1' rows='2' default='Headline' /]</td>
  19.   </tr>
  20. </table>[/ELEMENT]

  22. [ELEMENT name='headline2' label='Headline 2']
  23. <table cellspacing="0" cellpadding="0" width="100%">
  24.   <tr>
  25.     <td>[INPUT name='text' label='Text' type='h2' rows='2' default='Headline 2' /]</td>
  26.   </tr>
  27. </table>[/ELEMENT]

  29. [ELEMENT name='text' label='Text' default='true']
  30. <table cellspacing="0" cellpadding="0" width="100%">
  31.   <tr>
  32.     <td>[INPUT  name='text' label='Text' type='span' default='Das ist der Artikeltext' /]</td>
  33.   </tr>
  34. </table>[/ELEMENT]

  36. [ELEMENT name='button' label='Button' default='true']
  37. <table cellspacing="0" cellpadding="0" width="100%">
  38.   <tr>
  39.     <td>
  40.       [INPUT type='a' name='button' label='Button' attributes='class="btn"' default_href='#' default_text='Weiterlesen' /]
  41.       </td>
  42.   </tr>
  43. </table>[/ELEMENT]

  45.       [/CONTAINER]
  46.     </td>
  47.   </tr>
  48. </table>
  49. [/ELEMENT]

  51. [/CONTAINER]
Editor-View

The “Teaser article” container appears in the filter drop-down of the element pool:


If you filter on the container, all elements that occur in the container are displayed.
Output Source Code
Generated output of the article element with the default values:

  1. <!-- Teaser-Artikel -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">
  3.   <tr>
  4.       <td style="width: 200px;">
  5.           <img alt="" src="https://login.mailingwork.de/placeholder/placeholder/image/200x120" />
  6.       </td>
  7.       <td style="width: 20px;"></td>
  8.       <td style="width: 420px;">

  10.           <!-- container teaser-article -->
  11.           <table cellspacing="0" cellpadding="0" width="100%">
  12.               <tr>
  13.                   <td>
  14.                       <h1>Headline</h1>
  15.                   </td>
  16.               </tr>
  17.           </table>
  18.           <table cellspacing="0" cellpadding="0" width="100%">
  19.               <tr>
  20.                   <td><span>Das ist der Artikeltext</span></td>
  21.               </tr>
  22.           </table>
  23.           <table cellspacing="0" cellpadding="0" width="100%">
  24.               <tr>
  25.                   <td>
  26.                       <a class="btn" comment="" href="#" content="4176804">Weiterlesen</a>
  27.                   </td>
  28.               </tr>
  29.           </table>
  30.       </td>
  31.   </tr>
  32. </table>
In the next step, learn how to optimize email or landing page templates for the editor: