Example email/landing page template

Example email/landing page template

The following template provides the element Article - Text with Headline. This consists of a headline and a text. Click on the icons in the template source code to see a description.

Info
Email templates consist of an HTML part and a text part. This section exclusively describes the HTML part. The creation of the text part is explained here.
Template source code
Editor-View
Output source code
Template source code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mein erstes Template</title>
  5.     <meta charset="UTF-8">
  6.     <style>
  7.       body { font-family: Arial, sans-serif; }
  8.     </style>
  9. </head>
  10. <body>
  11.   [CONTAINER name='contents' label='Inhalte']
  12.       [BETWEEN]<br /><br />[/BETWEEN]

  14.       [ELEMENT name='article' label='Artikel - Text mit Headline' default='true']
  15.       <table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
  16.         <tr>
  17.           <td>
  18.             [BLOCK name='headline' label='Headline']
  19.             <h1>[INPUT name='text'
  20.                       label='Text'
  21.                       type='span'
  22.                       rows='2'
  23.                       default='Headline'
  24.                       required='true' /]</h1>[/BLOCK]

  26.             <p>[INPUT name='text' label='Text' type='span' rows='8' default='Das ist der Artikeltext.' /]</p>
  27.           </td>
  28.         </tr>
  29.       </table>            
  30.       [/ELEMENT]
  31.   [/CONTAINER]
  32. </body>
  33. </html>
Editor-View
Left: Mailing or landing page structure. The element Article - text with headline is automatically added to the content when the mail/landing page is created due to the attribute default='true'.

Center: Mailing/landing page preview

Right: Element pool. Contains a list of all elements available in the template.


Click on Article - Text with headline in structure to open the window for editing:



Output source code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mein erstes Template</title>
  5.     <meta charset="UTF-8">
  6.     <style>
  7.       body { font-family: Arial, sans-serif; }
  8.     </style>
  9. </head>
  10. <body>
  11.   <table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
  12.     <tr>
  13.         <td>
  14.           <h1><span>Headline</span></h1>
  15.           <p><span>Das ist der Artikeltext.</span></p>
  16.       </td>
  17.     </tr>
  18.   </table>
  19. </body>
  20. </html>

Rules

  1. The following tags may be used directly in the container [CONTAINER]...[/CONTAINER]: [ELEMENT]...[/ELEMENT], [TOP]...[/TOP], [BETWEEN]...[/BETWEEN] and [BOTTOM]...[/BOTTOM].
  2. Containers and elements with the same name may be defined multiple times.
  3. Elements must always be defined within containers.
  4. Elements can be nested: they can contain containers with elements.
  5. Blocks [BLOCK] and input fields [INPUT /] can also be used outside of containers and elements. If these are placed outside, the inputs are displayed in the editor (tab "Contents") under "Global Adjustments".
  6. Each [BLOCK] must contain at least one [INPUT /]. However, it is possible to define an [INPUT /] without a [BLOCK].
In the next step, learn how to structure email or landing page templates effectively: