In dit artikel een tot in de puntjes uitgedacht Mailchimp template. Je kunt hiermee een Mailchimp template zelf maken. Het thema gaat uit van kennisdeling op basis van zichtbare thema’s, zodat je per nieuwsbrief bijvoorbeeld 3 thema’s laat zien. Alle plaatjes die je nodig hebt, kun je downloaden. Waarbij het nog aan jouw creativiteit ligt om de plaatjes opmaak te geven via gratis infographic tools of Photoshop.
Doordat ik je dit Mailchimp template aanbied, is een Mailchimp ontwerper inhuren niet nodig. Je hebt nu alle juiste elementen en maten gevonden. Ook de pixelmaten van witruimten (dividers e.d.) kun je letterlijk overnemen uit dit standaard mailchimp template met thema’s.
Bijgaand Mailchimp nieuwsbrief ontwerp gaat uit van een nieuwsbrief opzet voor projecten in de non-profit. Er is ook plek voor plaatsen van logo’s van partners in de footer.
Ps. Voor 20 Euro kan ik je het template ook sturen via ‘Mailchimp sharing’; dan kun je makkelijker verder mee.
Voorbeeld Mailchimp template. Met de bouwstenen op deze pagina kun je zelf een Mailchimp template maken waarbij elk bericht een themaplaatje (balk) heeft. Voor Euro 15 Euro kan ik je het template ook sturen. Mail nu naar Gerben.
Mailchimp template maken / zelf je Mailchimp nieuwsbrief ontwerpen
Volg deze stap-voor-stap Mailchimp Nieuwsbrief opzet voor de non-profit. De volgende elementen passen in je nieuwsbrief ontwerp.
Binnen Mailchimp kun je campagnes aanmaken. Een campagne is een versie van je nieuwsbrief. Alvorens je dit kunt doen, moet je onder “Brand”, je merkontwerpen, eerst een template aanmaken voor je nieuwsbrief dat je vaker kunt aanroepen. Je Mailchimp nieuwsbriefontwerp sla je op in Saved Templates uiteindelijk. Dus creëer eerst je standaard email template door naar “Brand/Merk” te gaan.
Onderdelen nieuwsbrief template, 1 t/m 27 Mailchimp elementen
De opbouw van je Mailchimp nieuwsbrief, kun je hier zien.
16 elementen nieuwsbrief non-profit
Waarbij de volgorde van boven naar beneden gaat. Alle elementen worden genoemd. Waar nodig, zie je wat je kunt oploaden. Ik ga er daarbij van uit dat je elk plaatje zelf van een afbeelding voorziet / dus opmaakt. Dit kan in gratis software zoals Infographic software Canva of Visme, via gratis Photo editor, dan wel via Adobe Photoshop.
1. TEXT blok met link: “Bekijk deze nieuwsbrief in je browser”
En de Mailchimp instellingen voor deze strook met klikbare tekst.
Dit blok zit al in Mailchimp. Dit zijn de instellingen, HTML code luidt:
Open <> om deze code te kunnen inplakken:
<a href=”*|ARCHIVE|*” target=”_blank”>Bekijk deze nieuwsbrief in je browser</a>
Vormgeving instelling:
- 1 column element
2. IMAGE blok voor headerafbeelding
Ik geef hier 2 standaardmaten voor een headerfoto in Mailchimp. Groot als je een header met smoel wilt gebruiken, met logo en echte foto voor imago. Maten hieronder. Je kunt ook zakelijker, met ondiepere header in huis vallen, zodat mensen het eerste bericht sneller zien. Een foto zoeken kan via een gratis of betaalde fotobank. Ga voor een catchy foto in je header die niet te vol/druk is, maar wel de kern overbrengt.
Header hoog (1200 – 589 px):
Mailchimp header maat hoog voor met foto en logo erin. Header hoog 1200 – 589 px logo met daarbij echte foto, let erop om onderstrook wit te laten (8 pixels hoog)
Header ondiep (1200×340):
Mailchimp header maat laag voor alleen logo erin. Header laag 1200 – 340 pixels (logo en woord nieuwsbrief en kleurvlakken e.d.)
3. TEXT blok, 1 kolom. Mailchimp instellingen: strook met daarin de publicatiedatum
Open <> om deze code te kunnen inplakken:
<h3 class=”null” style=”text-align: right;”><em>zomer 2020</em></h3>
(op regel 2 witruimte, geen tekens erin zetten maar rij wel open laten, regel 2 bestaat dus)
Style/Settings:
- no font specified
- no size
- no color
- no styles
- no align
- no line height
- 1 column
4. TEXT blok voor kernboodschap over project (1 kolom)
Kernzin/kernboodschap: introductie nieuwsbrief door te openen met uitleg of slogan over wat het project inhoudt of beoogt.
De in te voeren HTML en de benodigde instellingen voor vormgeving, volgen nu.
Voeg 1 column element toe. Open <> om deze code te kunnen inplakken:
<h4 class=”null”><strong><em>Samen aan de slag voor een betere toekomst.</em></strong></h4>
Style/Settings:
- no font specified
- – no size
- no color
- – no styles
- no align
- – no line height
- 1 column
N.B. Doordat zojuist een <h4> kop gebruikt is, geeft dit wat witruimte erna. Dit is de reden dat hierna geen witruimte devider nodig is. Maar in de rest van dit gratis Mailchimp template gaat een divider (14 pixels) vooraf aan de Thema aanduiding (zie element 5. hieronder). Dit om enige witruimte toe te voegen om elementen visueel beter en mooier te scheiden.
5. IMAGE blok. Themastrook 1 (plaatje)(1200×140)
Voeg element toe waar plaatje in kan. 1 column.
Thema strook, icoon links erin, rechts de verklarende tekst. 1200 x 140 pixels.
Style/Setting (1200×140)
- border none
- center
6. IMAGE+TEXT blok. Eerste bericht (plaatje rechts, tekst links)(600x400px)
Voeg element toe waar plaatje in kan. 2 column. Maat voor plaatje is bijvoorbeeld. 600 x 400 px. Binnen Mailchimp kun je nadat plaatje in je template zit. Kiezen voor Edit. Je kunt bijsnijden met wat standaardvormen. Een Headerafbeelding kun je bijsnijden via Pixlr.com/e .
foto voor in Mailchimp bericht, links of rechts van tekst te plaatsen. (600 x 400 px)
Titel
<h1 class=”null”>We zijn weer begonnen?!</h1>
Style/Settings:
- no font no color
- 1column
Text & Image
Gebruik element voor Image & text
Style/Settings:
- settings voor tekst: no colour, no align, no font specified (font stel je in op template niveau, niet in elk onderdeel van de nieuwsbrief, leeg laten dus)
- settings voor plaatje/image: right, 1/2 kolom, align=right
7. DIVIDER STREEP. Mailchimp instellingen: divider/witruimte met streep van 1 px erdoorheen
Witruimte strookje
Divider met lijn erin
Style/Setting
- (lijn is “border top”)
- 18 px
- 18 px
- solid, 1 px
- #8d92af (pas kleur aan)
- backround no color
8. DIVIDER WIT. Alleen wit, dus geen streep in deze divider.
Voeg 1 column element Divider in.
Settings Divider / witruimte
- Padding top 7 px, bottom 7 px.
- Border top none
- backround none
- colour no color
9. Themastrook 2 (plaatje)(1200×140)
Voeg element toe waar plaatje in kan. 1 column.
Thema strook, icoon links erin, rechts de verklarende tekst. 1200×140 pixels
Style/Setting (1200×140)
- border none
- center
10. IMAGE+TEXT blok. Tweede bericht (plaatje links, tekst rechts)(600x400px)
Voeg element toe waar plaatje in kan. 2 column.
foto voor in Mailchimp bericht, links of rechts van tekst te plaatsen (600x400px)
Titel
<h1 class=”null”>We zijn weer begonnen?!</h1>
Style/Settings:
- no font, no color
- 1column
Text & Image
Gebruik element voor Image & text
Style/Settings:
- settings voor tekst: no colour, no align, no font specified (font stel je in op template niveau, niet in elk onderdeel van de nieuwsbrief, leeg laten dus)
- settings voor plaatje/image: left, 1/2 kolom, align=left
11. DIVIDER STREEP. Witruimte doorbroken door streep 1 px.
Witruimte strookje
Divider met lijn erin
Style/Setting
- (lijn is “border top”)
- 18 px
- 18 px
- solid, 1 px
- #8d92af (pas kleur aan)
- backround no color
12. DIVIDER WITRUIMTE blok. Zonder streep/lijn erin.
Voeg 1 column element Devider in.
Settings Divider / witruimte
- Padding top 7 px, bottom 7 px.
- Border top none
- backround none
- colour, no color
13. IMAGE blok. Themastrook 3 (plaatje)(1200×140)
Voeg element toe waar plaatje in kan. 1 column.
Thema strook, icoon links erin, rechts de verklarende tekst. 1200×140 px
Style/Setting (1200×140)
- border none
- center
14. TITLE blok + TEXT+IMAGE blok + TEXT blok. Derde bericht (plaatje op top, 1 alinea blok er nog onder voor tekst)(1000 x 346)
We gaan nu berichtopzet maken waarin heel lang stuk tekst kan. Waarbij introtekst met foto ernaast het begin vormt. 3 blokken nodig.
Ten eerste. je hebt apart blok nodig om daarin de titel te zetten. (bij voorgaande berichten, zat H1-titel in Text gedeelte, nu in apart blok)
TITEL blok. Instellingen Mailchimp:
<h1 class=”null”>We zijn weer begonnen (voorbeeld)?!</h1>
TEXT+IMAGE blok
Ten tweede, voeg nu element toe waar plaatje in kan. 2 column. Dus Image+Text blok er direct onder zetten. Plaatje rechts uitlijnen. Zie fotomaat die eerder al is gebruikt binnen element TEXT+IMAGE.
Ten derde, nog een TEXT BLOK, 1 column. Zodat je daar alle rest van de tekst in kwijt kan bij plaatsing van tekstrijk bericht.
0. DIVIDER STREEP. Witruimte doorbroken door streep 1 px.
Witruimte strookje
Divider met lijn erin
Style/Setting
- (lijn is “border top”)
- 18 px
- 18 px
- solid, 1 px
- #8d92af (pas kleur aan)
- backround no color
15. DIVIDER WITRUIMTE blok. Zonder streep/lijn erin.
Voeg 1 column element Devider in.
Settings Divider / witruimte
- Padding top 7 px, bottom 7 px.
- Border top none
- backround none
- colour, no color
16. IMAGE blok. Themastrook 3 (plaatje)(1200×140)
Voeg element toe waar plaatje in kan. 1 column.
Thema strook, icoon links erin, rechts de verklarende tekst. 1200×140 px
Style/Setting (1200×140)
- border none
- center
17. TEXT blok. Vierde bericht.
Dit is nog een aardige variatie. Alleen tekst, voor als je geen foto hebt of erbij wilt gebruiken. TEXT Blok, 1 kolom.
18. DIVIDER STREEP. Witruimte doorbroken door streep 1 px.
Witruimte strookje
Divider met lijn erin
Style/Setting
- (lijn is “border top”)
- 18 px
- 18 px
- solid, 1 px
- #8d92af (pas kleur aan)
- backround no color
19. DIVIDER WITRUIMTE blok. Zonder streep/lijn erin.
Voeg 1 column element Devider in.
Settings Divider / witruimte
- Padding top 7 px, bottom 7 px.
- Border top none
- backround none
- colour, no color
20. IMAGE blok. Themastrook 3 (plaatje)(1200×140)
Voeg element toe waar plaatje in kan. 1 column.
Thema strook, icoon links erin, rechts de verklarende tekst. 1200×140 px
Style/Setting (1200×140)
- border none
- center
21. IMAGE+TEXT blok. Vijfde bericht.
Dit is nog een aardige variatie. Nu de aandacht vangen met brede foto (op top), en daaronder pas het artkel, dan in 2 kolommen.
Alles blijft 1-kolom. Dit plaatje toevoegen. Plaatje uitlijnen als boven het artikel (met 1 kolom aan tekst).
Fotoformaat in Mailchimp voor bovenop (foto on top), daaronder 2 alinea’s tekst. (1000 x 346 pixels)
Style/Settings:
- no font, no color
- 1column
Foto
Voeg bovenstaand plaatje in, maar dan met inhoud erin.
Style/Settings
- instelling=top
- alignment is center
Tekstblok (Image+Text heeft hier 1 kolom)
1 column.
Style/Settings
- no color
- no align setting
- 1 column
22. DIVIDER STREEP (kopiëer wat je al gemaakt hebt via het plusje in de template)
Witruimte strookje
Divider met lijn erin
Style/Setting
- (lijn is “border top”)
- 18 px
- 18 px
- solid, 1 px
- #8d92af (pas kleur aan)
- backround no color
23. DIVIDER. Alleen wit, geen streep erin.
Voeg 1 column element Divider in.
Settings Divider / witruimte
- Padding top 7 px, bottom 7 px.
- Border top none
- backround none
- colour no color
24. Mailchimp Instellingen: blok “Belangrijke data”, deel tot slot in je nieuwsbrief komende bijeenkomsten (als je die hebt).
Invoegen Bijeenkomsten strook (tekst kun je erin typen), 1 kolom breed
Stijl/Instellingen Mailchimp:
- 14 font verdana #202020
- center
- container style: #e5edf1, border none
- setting 1 column
Voeg element toe waar plaatje in kan. 1 column.
Footer Mailchimp, met daarin meerdere logo’s, of zeer beknopte info over financiers. “Dit project wordt mede mogelijk gemaakt door”… etc.. (1174 – 217 px)
Style/Settings
- Center
- vink aan “Edge to edge”
26. Sociale media deelknoppen Mailchimp toevoegen
Invoegen Sociale media links, kies voor speciaal element voor socials, dus liggende balk uit elementen menu in Mailchimp.
Style/Settings:
- #656565 font not specified
- background no colour
- icon only
- center
- full width
27. Afzender info & in- en uitschrijven opties, logo Mailchimp (bij gratis versie)(automatisch blok)
Dit blok komt onderin je Mailchimp nieuwbrief en laat je automatisch aanmaken. Je ziet allerlei codes en hekjes (#), nu niet aankomen! Als je klaar bent, kies dan voor “Continue” en opslaan van je template.
Mailchimp template opslaan en je acties daarna
Je Mailchimp Template sla je op bij Saved Templates. Daarna komen nog een paar acties om alles goed in te regelen, zodat je regelmatig nieuwsbrieven gaat verzenden en nieuwe lezers erbij krijgt.
- Bij elke nieuwe nieuwsbrief maken, kies je voor “Create Campaign”, dan kies je voor “E-mail” en ga je naar je Saved Templates voor invoegen van je standaard nieuwsbrief ontwerp.
- De nieuwsbrief heeft van Mailchimp een fysiek postadres nodig. Deze kun je instellen via Audience. Dus voor de lijst die je wilt koppelen aan je template. Je postadres toevoegen kan dus niet binnen je template. Dit wordt ingevoegd bij verzenden van een nieuwsbrief editie. Elke nieuwe editie is een “nieuwe campagne”. Dit gaat via de keuze “email” en dan “Saved Templates”.
- Pas dan ga je kijken bij je gebruikersgegevens, of je postadres dus is ingevoerd bij je gebruikersgegevens.
- Maak 1 extra Audience aan met jouw emailadres erin als doelgroep. Dus een verzendlijst met alleen jij erin.
- Je hoofdverzendlijst kun je daarnaast vullen met alle emails van personen die toestemming gaven.
- Na eerste verzending van de nieuwsbrief, kun je ook zien hoe afzenderblok zich gedraagt. Dit blok is dan automatisch gevuld.
- Je kunt binnen Mailchimp een inschrijfformulier maken, of inschrijflink aanmaken, je kunt inschrijfformulier als code embedden in je website pagina, bericht of WordPress widget.
Meer over Mailchimp nieuwsbrieven software
Mogelijk kom je hiermee een stuk dichterbij het maken van je eigen Mailchimp Template. Zie ook Mailchimp handleiding. En alle artikelen op Webredactie Blog over Mailchimp nieuwsbrieven.
Succes.
Gerben G van Dijk.
Het creëren en beheren van content kost vaak meer tijd dan je denkt. Daarom heeft Gerben Webredactie blog opgezet. Hier deelt hij niet alleen praktische handleidingen en online tips met jou, maar ook met zichzelf: "Oh ja, zo moet ik dat aanpakken!".
Naast zijn bijdragen aan Webredactie blog, schrijft Gerben voor Frankwatching.nl en heeft hij een boek over communicatiewerk organiseren op Amazon.com. De afgelopen tijd onderzoekt hij hoe ChatGPT SEO kan bijdragen aan contentcreatie.