Dit artikel bevat informatie met betrekking tot het ontwikkelen van een Layout voor Mailings. We gaan er vanuit dat je bekend met met HTML, CSS en het ontwikkelen van HTML-mailings.
Heb je weinig kennis van HTML en CSS? Via onze mailing generator kun je snel een standaard mailing template maken.
Sinds halverwege 2022 wordt beter gecontroleerd op de waarde van het attribuut data-fieldtype. Onderstaande data-fieldtypes zijn namelijk gewijzigd.
link -> url
textsingle+link -> textsingle+url
image+link -> image+urlen een afwijkende:
data-fieldtype='text' -> data-type='static'Gebruik je een oude template, dan kan het voorkomen dat daar nog een verkeerde data-fieldtype in wordt gebruikt. Het gevolg hiervan zal zijn:
- een verstuurde mailing blijft na verzenden hangen op gepland, of
- een aanpassing aan de mailingtemplate kan niet worden opgeslagen.
De oplossing; pas de template aan. Als voorbeeld data-fieldtype="image+link". Dit moet dan worden data-fieldtype="image+url".
Terminologie
- Containers: Plek waar inhoud kan toegevoegd worden
- Inhoud blok: Artikel dat de gebruiker kan invoeren
- Inhoud blok type: Een Inhoud blok met een bepaalde indeling
- Inhoud velden: Variabele inhoud binnen een Inhoud blok (linkjes, teksten, afbeeldingen)
- Inhoud bron: Module van waaruit de inhoud van een Inhoud blok automatisch gevuld kan worden.
- Attributen: De opties van een element
Algemeen
Het inrichten van Mailings layout doe je onder Mailings > Instellingen > Layouts.
Hoewel Mailings een aantal speciale eisen stelt aan de templates, bestaan ze in de basis gewoon uit HTML. In e-mails kan in het algemeen slechts een subset van HTML gebruikt worden. E-mail programma's ondersteunen slechts een gedeelte van de HTML standaard. Voor meer informatie over de bruikbare HTML en CSS kijk je op: http://www.campaignmonitor.com/css/
CSS <style> elementen neem je op in de <head> sectie
Dit document beschrijft hoe je een standaard HTML e-mail template kunt omzetten naar een voor Mailings geschikte template. Onderstaande template gebruiken we als voorbeeld in deze handleiding.
Onderdelen van een Mailing template
Een Mailing template bestaat uit meerdere onderdelen. De HTML moet Containers, Inhoud blokken en Inhoud velden bevatten.
Containers
Containers zijn plaatsen in de HTML waarin de gebruiker inhoud kan wijzigen. HTML buiten de containers kan niet gewijzigd worden door de gebruiker. In dit voorbeeld kan het logo en de twee teksten gewijzigd worden. De header met de gestreepte balk en de footer met de twee linkjes niet. Dit staat vast in de template.
Inhoud blokken
Een Inhoud blok type is een Inhoud blok dat een bepaalde indeling heeft. Een soort mini-template voor de inhoud binnen de template, soms ook artikelen genoemd. Dit zijn onderdelen die een gebruiker selecteert als hij op de knop Inhoud toevoegen klikt.
Er kunnen meerdere Inhoud blok types gemaakt worden binnen een Container. In het voorbeeld zijn 'Logo', 'Artikel' en 'Artikel met afbeelding' Inhoud blok types.
Inhoud velden
Binnen een Inhoud blok zijn bepaalde stukken HTML te wijzigen door de gebruiker. De zogenaamde Inhoud velden. Dit zijn de losse onderdelen van een mailing zoals titels, teksten, linkjes en afbeeldingen.
Een mailing template maken
Om van een HTML template een geschikte Mailing template te maken, moeten er een aantal specifieke elementen en attributen aan worden toegevoegd. De attributen die nodig zijn, beginnen allemaal met 'data-'. Deze attributen zijn nodig voor herkenning door de Mailing editor. Op basis van deze attributen weet de editor hoe hij met het element om moet gaan (artikel plaatsen, tekst invoeren, ...).
Containers
Binnen de HTML moeten één of meerdere Containers worden gedefinieerd. Hiervoor moet een <div> of <td> element gebruikt worden. Om van een element een Container te maken, zet je er een data-containername attribuut op. Dat ziet er bijvoorbeeld zo uit:
<div data-containername='articles' data-defaulttypes='article article-image-right' data-maxamount='5'></div>Containers zijn de plekken waar de knoppen Inhoud toevoegen verschijnen.
Verplichte attributen
- data-containername: Een unieke naam
Optionele attributen
- data-defaulttypes: Een lijst van Inhoud blok types waarmee deze Container standaard gevuld wordt bij het maken van een nieuwe mailing. Gebruik een spatie-gescheiden lijst van namen die refereren naar de data-typename attributen van de Inhoud blokken (zie volgend hoofdstuk)
- data-maxamount: Het aantal Inhoud blokken dat deze Container maximaal mag bevatten
Inhoud blok types
Binnen de HTML definiëer je de Inhoud blok types binnen een <div> element met id 'types'. Plaats deze onderaan in de body van de HTML. Het resultaat ziet er dan ongeveer zo uit:
<HTML>
<head>
css en dergelijke
</head>
<body>
<table>
basis template en Container(s)
</table>
<div id=’types’ style=’display: none;’>
Hier komen de inhoud blok types
</div>
</body>
</HTML>Binnen deze <div id=’types’> definiëer je de verschillende Inhoud blok types. Dit is telkens een <div> element met een aantal aangepaste attributen met daarin de bijhorende HTML.
<div data-typename='article' data-title='Standaard artikel' data-allowedcontainers='articles' data-copyfrom='content-article news-article'>
Inhoud blok type inhoud HTML
</div>Als gebruiker kies je bij het toevoegen van inhoud uit één van de Inhoud blok types.
Verplichte attributen
- data-typename: De interne naam die het systeem gebruikt om het Inhoud blok type te herkennen. Het is belangrijk dat dit attribuut niet meer gewijzigd wordt in een template nadat er mailings gemaakt zijn op basis van deze template. Er kunnen artikelen verloren gaan als je dit wel doet. Maak een nieuwe versie van een template als je dit toch wil wijzigen
- data-title: De titel die de gebruiker ziet bij het kiezen van een Inhoud blok type
Optionele attributen
-
data-copyfrom: De Inhoud bronnen die beschikbaar zijn bij het invoegen van het Inhoud blok type:
- content-article voor gewone artikelen en/of
- news-article voor nieuwsberichten
- data-allowedcontainers: De naam (data-containername='articles') van de Container(s) waar dit Inhoud blok type in gezet mag worden
Inhoud velden
Binnen een Inhoud blok type kunnen Inhoud velden gedefinieerd worden. Een Inhoud veld is het stuk van de HTML waarin de gebruiker kan bewerken. Er zijn verschillende soorten Inhoud velden.
- textsingle: een éénregelig tekstveld
- textmulti: een meerregelig tekstveld
- html: een HTML veld
- image: een te wijzigen afbeelding. Het is aan te bevelen om bij image elementen altijd een width en eventueel een height in te stellen op de <img> tag.
- url: een <a> waarvan de href te wijzigen is
- textsingle+url: een <a> waarvan zowel de href als de tekst te wijzigen is. Voor dit type moet het data-copyfrom attribuut ook 2 waarden bevatten: data-copyfrom='title+link'
- image+url: een <a> met daarin een <img> waarvan zowel de href als de afbeelding te wijzigen is. Voor dit type moet het data-copyfrom attribuut ook 2 waarden bevatten: data-copyfrom='image+link'. Alle data-attributen staan op het <a> element.
Een HTML element wordt een Inhoud veld door er een data-fieldtype en een data-fieldname attribuut op te zetten. Hieronder staat een voorbeeld van een Inhoud blok type met daarin een aantal mogelijke soorten Inhoud velden.
<div data-typename='article-image-right' data-title='Artikel met afbeelding' data-allowedcontainers='articles' data-copyfrom='content-article news-article'>
<table cellpadding='0' cellspacing='0' border='0' width='540'>
<tr>
<td>
<h2 data-fieldtype='textsingle' data-fieldname='title' data-copyfrom='title' data-maxlength='255'>Lorem Ipsum</h2>
<p data-fieldtype='textmulti' data-fieldname='body' data-copyfrom='intro'>There are many variations of passages of Lorem Ipsum available.</p>
<div data-fieldtype='HTML' data-fieldname='myHTML' data-copyfrom='content'><p>There are many variations of<br />passages of Lorem Ipsum available.</p></div>
<img data-fieldtype='image' data-fieldname='myimage' data-copyfrom='image' src='/download/standaardafbeelding.png' width='200' height='200' data-src-width='400' data-src-height='400' />
<a data-fieldtype='url' data-fieldname='myurl' data-copyfrom='link' href='http://default-url.com'>Lees Meer</a>
<a data-fieldtype='textsingle+url' data-fieldname='mytext+url' data-copyfrom='title+link' href='http://default-url.com'>Read on</a>
</td>
</tr>
</table>
</div>Naargelang het Inhoud veld verschillen de invoer mogelijkheden:
Verplichte Attributen
-
data-fieldtype: het soort veld:
- textsingle
- textmulti
- html
- image
- url
- data-fieldname: de interne naam voor het veld. Uniek binnen het Inhoud blok type. De editor heeft dit nodig om het Inhoud veld te kunnen identificeren
data-fieldtype=’image’
Bij een <img /> tag is het niet verplicht om een width en height attribuut mee te geven. Dit zorgt ervoor dat de afbeelding op de originele grootte in de mailing wordt geplaatst. Door het width attribuut wel mee te geven, wordt de afbeelding naar deze breedte geschaald, met bijpassende hoogte. Hetzelfde geldt voor de hoogte bij het meegeven van het height attribuut. Bij het meegeven van zowel een height als een width attribuut wordt de afbeelding binnen beide afmetingen geschaald. Als de afbeelding naar een andere grootte geschaald moet worden dan deze moet worden weergegeven (bijvoorbeeld voor retina afbeeldingen) kun je dit doen met data-src-width en data-src-height. Dan worden het width en height attribuut genegeerd.
Optionele Attributen
- data-copyfrom: Het veld van de Inhoud bron dat in het Inhoud veld gekopieerd moet worden (zie volgende hoofdstuk voor de mogelijkheden)
- data-copyformat: Met dit attribuut kan aan de Inhoud bron worden meegegeven hoe de inhoud gekopieerd moet worden
- data-maxlength: De maximale lengte van een tekstveld
- data-removable: Als dit attribuut op 'true' staat, kan het veld worden verwijderd (werkt niet bij afbeeldingen)
- data-src-width: Breedte waarnaar de afbeelding geschaald moet worden. Als deze niet is ingevuld word het width attribuut hiervoor gebruikt. Handig voor retina afbeeldingen
- data-src-height: Hoogte waarnaar de afbeelding geschaald moet worden. Als deze niet is ingevuld word het height attribuut hiervoor gebruikt. Handig voor retina afbeeldingen
- data-src-zoom: Standaard wordt scaleType 1 gebruikt om afbeeldingen te herschalen (de afbeelding wordt niet gecropt). Door data-src-zoom op 'true' te zetten wordt scaleType 3 gebruikt (hierbij wordt de afbeelding wel gecropt).
Inhoud bronnen
Bij het invoegen van nieuwe Inhoud blokken kan de gebruiker ervoor kiezen om inhoud te kopiëren uit andere modules. Om dit te laten werken moet aangegeven worden van welke modules inhoud gekopieerd kan worden (de data-copyfrom attributen in het Inhoud blok type) en moet in de template staan welke inhoud waarheen gekopieerd kan worden (de data-copyfrom attributen in de Inhoud velden).
Op dit moment zijn er vijf Inhoud bronnen:
- contentartikelen
- nieuwsartikelen
- weblogberichten
- bijeenkomsten
- community-berichten
Iedere Inhoud bron biedt zijn eigen manier om inhoud te gebruiken en heeft zijn eigen velden die automatisch gevuld kunnen worden.
CMS
Deze Inhoud bron biedt de mogelijkheid om de inhoud van artikelen uit het CMS over te nemen in de mailing. Als het data-copyfrom attribuut van het Inhoud blok type content-article bevat, kan de gebruiker een artikel kiezen waarvan de inhoud wordt overgenomen.
Deze velden zijn beschikbaar:
- Title: de titel van het artikel
- Content: de inhoud van het artikel
- Date: de datum van het artikel
Nieuws
Deze Inhoud bron biedt de mogelijkheid om inhoud van artikelen uit Nieuws over te nemen in de mailing. Als het data-copyfrom attribuut van het Inhoud blok type news-article bevat kan de gebruiker een nieuwsartikel kiezen waarvan de inhoud wordt overgenomen.
De volgende velden zijn beschikbaar:
- Title: de titel van het artikel
- Content: de inhoud van het artikel
- Intro: de introductie tekst van het artikel
- Link: de url naar het nieuws artikel
- Title+link: de titel van het nieuws artikel en als url de url naar het nieuws artikel
- Date: de datum van het artikel
- Date-published: de publicatiedatum van het artikel
- Image: de grote afbeelding van het artikel bedoeld voor data-fieldtype='image'
- Image-small: de kleine afbeelding van het artikel bedoeld voor data-fieldtype='image'
Weblog
Deze Inhoud bron biedt de mogelijkheid om inhoud van berichten uit de Weblog over te nemen in de mailing. Als het data-copyfrom attribuut van het Inhoud blok type weblog-post bevat kan de gebruiker een weblog artikel kiezen waarvan de inhoud wordt overgenomen.
De volgende velden zijn beschikbaar:
- title: de titel van het bericht
- intro: de introductie van het bericht
- content: de inhoud van het bericht
- link: de URL naar het bericht
- date: de datum bij het bericht
- date-published: de publicatiedatum van het bericht
- image: de grote afbeelding van het bericht (bedoeld voor data-fieldtype='image')
- image-small: de kleine afbeelding van het bericht (bedoeld voor data-fieldtype='image')
- author: de volledige naam van de relatie van het bericht (van de eerste auteur indien meerdere)
Bijeenkomsten
Deze Inhoud bron biedt de mogelijkheid om inhoud van een bijeenkomst uit Bijeenkomsten (versie twee) over te nemen in de mailing. Als het data-copyfrom attribuut van het Inhoud blok type 'meeting2-meeting' bevat kan de gebruiker een bijeenkomst kiezen waarvan de inhoud wordt overgenomen.
De volgende velden zijn beschikbaar:
- title: De titel van de bijeenkomst
- intro: De korte omschrijving van de bijeenkomst
- content: De volledige omschrijving van de bijeenkomst
- link: URL naar de detailpagina van een bijeenkomst
- date: De start datum/tijd van een bijeenkomst
- date-end: De eind datum/tijd van een bijeenkomst
- primary-tag: Het eerste label uit de lijst van labels
- tags: Een komma-gescheiden lijst van labels (string)
- location-title: Titel van de locatie
- location-street: Straat en huisnummer van de locatie
- location-postcode: Postcode van de locatie
- location-town: Stad van de locatie
- coverPhotoUrl: URL van de cover foto
- photoUrlOne: URL van de eerste foto
- photoUrlTwo: URL van de tweede foto
- photoUrlThree: URL van de derde foto
Opmerkingen
- De locatie velden bevatten data van de eerste locatie van een bijeenkomst
- Voor nu bieden we maximaal drie foto's uit het setje foto's aan
Community
Deze Inhoud bron biedt de mogelijkheid om inhoud van een bericht uit Community (versie twee) over te nemen in de mailing. Als het data-copyfrom attribuut van het Inhoud blok type community2-message bevat kan de gebruiker een community bericht kiezen waarvan de inhoud wordt overgenomen.
De volgende velden zijn beschikbaar:
- title: de titel van het bericht
- intro: eerste 300 tekens van het bericht
- content: de inhoud van het bericht
- link: de URL naar het bericht
- date: de datum van het bericht
- image: de grote afbeelding van het bericht (bedoeld voor data-fieldtype='image') (indien aanwezig)
- image-small: de kleine afbeelding van het bericht (bedoeld voor data-fieldtype='image') (indien aanwezig)
- filters: de filters van het bericht (komma gescheiden) (indien aanwezig)
- author: de volledige naam van de relatie van het bericht
Veld opmaak
data-copyformat (verplicht)
Dit Inhoud veld attribuut is alleen van toepassing op het kopiëren van datums. Het format van de datum is te specifiëren met de volgende tokens:
- @d: Day of the month (01 - 31)
- @c: Day of the month (1 - 31)
- @D: Full weekday name (Monday - Sunday)
- @m: Month (01 - 12)
- @M: Month name (January - December)
- @y: Short year (11)
- @Y: Full year (2011)
- @h: Hour (01 - 24)
- @i: Minute (01 - 59)
- @s: Second (01 - 59)
Bijvoorbeeld:
<span data-fieldtype='textsingle' data-fieldname='date' data-copyfrom='date' data-copyformat='@D @c @M @Y'>Friday 9 March 2012</span>Inhoudloze blok types
Naast blok types die voorzien zijn van inhoud (zoals hieronder te lezen), zijn er ook blok types zonder inhoud. Dit kunnen bijvoorbeeld artikelen zijn met alleen witruimte. Door data-type='static' toe te voegen, maak je dit mogelijk. Je hoeft binnen deze artikelen geen velden meer te definiëren, zoals je wel moet doen bij blok types die inhoud bevatten.
<div data-type='static' data-typename='article' data-title='Standaard artikel' data-allowedcontainers='articles' data-copyfrom='content-article'>
<span>Artikel zonder inhoud</span>
</div>Volledig HTML voorbeeld
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/HTML4/loose.dtd'><HTML>
<head>
<meta name='generator' content='HTML Tidy, see www.w3.org'>
<title>Mailings2</title>
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.4;
background-color: #eaeaea;
}
* {
font-family: Verdana, sans-serif;
font-size: 12px;
color: #000;
}
a {
color: #818181;
text-decoration: underline;
}
a:hover {
color: #135eaa;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-weight: normal;
color: #000 !important;
}
h1 {
margin: 0 0 10px;
font-size: 26px;
}
h2 {
margin: 0 0 .35em 0;
padding: 0;
font-size: 24px;
}
h3 {
font-size: 20px;
}
p {
margin: 0 0 .7em 0;
padding: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
img {
border: none;
} </style>
</head>
<body bgcolor='#eaeaea' text='#000'>
<table cellpadding='0' cellspacing='0' border='0' align='center' width='600' bgcolor='#ffffff'>
<tr>
<td colspan='3' height='50' bgcolor='#eaeaea'>
</td>
</tr>
<tr>
<td colspan='3' height='50'>
<img src='/l/library/download/urn:uuid:0b894508-cfa2-4092-889f-052cc6d27a19/header.jpg' style='display: block; margin: 0;' />
</td>
</tr>
<tr>
<td width='30'></td>
<td>
<table cellpadding='0' cellspacing='0' border='0' align='center' width='540'>
<tr>
<td colspan='2'>
<div data-containername='logo' data-defaulttypes='logo' data-maxamount='1'></div>
</td>
</tr>
<tr>
<td colspan='2' height='10'></td>
</tr>
<tr>
<td colspan='2'>
<div data-containername='articles' data-defaulttypes='article article-image-right'></div>
</td>
</tr>
<tr>
<td colspan='2' height='15'></td>
</tr>
<tr>
<td colspan='2' height='5' bgcolor='#eaeaea'></td>
</tr>
<tr>
<td colspan='2' height='20'></td>
</tr>
<tr>
<td align='left'><a href='##browserview##' style='font-family: Verdana, sans-serif; color: #818181; text-decoration: underline;'>Bekijk de nieuwsbrief online</a></td>
<td align='right'><a href='##unsubscribe##' style='font-family: Verdana, sans-serif; color: #818181; text-decoration: underline;'>Afmelden voor deze nieuwsbrief</a></td>
</tr>
<tr>
<td colspan='2' height='25'></td>
</tr>
</table>
</td>
<td width='30'></td>
</tr>
<tr>
<td colspan='3' height='50' bgcolor='#eaeaea'>
</td>
</tr>
</table>
<div id='types' style='display: none;'>
<!--
Logo
-->
<div data-typename='logo' data-title='Logo' data-allowedcontainers='logo'>
<img data-fieldtype='image' data-fieldname='image' src='/l/library/download/urn:uuid:c89b11f8-4e19-40fa-b474-646325ab0d53/logo.jpg' />
</div>
<!--
Default article
-->
<div data-typename='article' data-title='Standaard artikel' data-allowedcontainers='articles' data-copyfrom='content-article news-article'>
<table cellpadding='0' cellspacing='0' border='0' width='540'>
<tr>
<td>
<h2 data-fieldtype='textsingle' data-fieldname='title' data-copyfrom='title' data-maxlength='225' style='font-family: Verdana, sans-serif; margin: 0 0 .35em 0; font-size: 24px;'>In condimentum facilisis</h2>
<p data-fieldtype='textmulti' data-fieldname='body' data-copyfrom='intro' style='font-family: Verdana, sans-serif; margin: 0 0 .7em 0; line-height: 1.4em;'>Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod asemper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.</p>
<a data-fieldtype='textsingle+url' data-fieldname='url' data-copyfrom='title+link' href='http://www.procurios.nl' style='font-family: Verdana, sans-serif; color: #818181; text-decoration: underline;'>Lees meer</a>
</td>
</tr>
<tr>
<td height='30'></td>
</tr>
</table>
</div>
<!-- Whitespace article -->
<div data-typename='whitespace' data-title='Witruimte' data-allowedcontainers='' data-type='static'>
<table class='wrapper' cellpadding='0' cellspacing='0' border='0' width='572' style='width: 572px;'>
<tr>
<td class="spacer" height='17'><span style="display: none;"></span></td>
</tr>
</table>
</div>
<!-- End Whitespace article -->
<!--
Article with image
-->
<div data-typename='article-image-right' data-title='Artikel met afbeelding' data-allowedcontainers='articles' data-copyfrom='content-article news-article'>
<table cellpadding='0' cellspacing='0' border='0' width='540'>
<tr>
<td>
<h2 data-fieldtype='textsingle' data-fieldname='title' data-copyfrom='title' data-maxlength='225' style='font-family: Verdana, sans-serif; margin: 0 0 .35em 0; font-size: 24px;'>Aliquam erat</h2>
<p data-fieldtype='textmulti' data-fieldname='body' data-copyfrom='intro' style='font-family: Verdana, sans-serif; margin: 0 0 .7em 0; line-height: 1.4em;'>Morbi a enim in magna semper bibendum. Etiam scelerisque, nunce ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi.</p>
<a data-fieldtype='textsingle+url' data-fieldname='url' data-copyfrom='title+link' href='http://www.procurios.nl' style='font-family: Verdana, sans-serif; color: #818181; text-decoration: underline;'>Lees meer</a>
</td>
<td width='20'></td>
<td><img data-fieldtype='image' data-fieldname='image' data-copyfrom='image-small' width='140' data-src-width='280' style='display: block; margin: 0;' src='/l/library/download/urn:uuid:501adc0f-c1ac-4063-bdf6-8fe56eab0f8b/article-image.jpg' /></td>
</tr>
<tr>
<td height='30' colspan='3'></td>
</tr>
</table>
</div>
</div>
</body>
</HTML>