Templates

Editor: ontwerp

De Template Editor: de werkbalk, het ontwerpgebied, de ontwerpmanager en de pagina's van een brief.

In de Template Editor stel je de inhoud en vormgeving van een uiting samen. Sleep bouwblokken vanuit de rechterzijbalk naar het ontwerpgebied en pas ze daar aan.

Overzicht van de Template Editor met de werkbalk, het ontwerpgebied en de rechterzijbalk — De Template Editor: bovenaan de tabbladen Ontwerp en Instellingen met de acties rechts, links de werkbalk en het ontwerpgebied, rechts de ontwerpmanager.

Navigatie en status

Bovenaan de editor vind je:

een pijl om terug te gaan naar het templateoverzicht;
Ontwerp om de visuele editor te openen;
Instellingen om de template-instellingen te openen;
de status, naam en het tijdstip van de laatste opslag.

Acties

Rechtsboven staan de belangrijkste acties:

Importeer en Exporteer: neem een ontwerp over uit een ander template. Zie .
Versiebeheer: bekijk of herstel een eerdere versie. Zie .
Test e-mail, Test brief of Test sms: verstuur een test of genereer een voorbeeld-pdf.
Activeren: maak het template beschikbaar voor verzending.
Opslaan: sla de wijzigingen direct op. De editor slaat daarnaast automatisch op zodra je iets wijzigt (met een korte vertraging van enkele seconden).

Verstuur altijd een test voordat je een nieuw of aangepast template activeert.

De autosave van templates werkt alleen in de Template Editor. In de editor van Contentblokken is er geen automatisch opslaan. Klik daar altijd zelf op Opslaan.

Elke uiting kent versies. Zolang je werkt, komen je wijzigingen in de conceptversie terecht. Dat staat ook onder de naam bovenaan: Wijzigingen komen in huidige concept versie. Pas als je op Activeren klikt, wordt die versie de actieve versie die bij verzending wordt gebruikt.

Klik op Versiebeheer voor het overzicht van alle versies. Per versie zie je het versienummer, de naam, de status, door wie de versie is bijgewerkt en wanneer dat is gebeurd.

Venster Versiebeheer met per versie het nummer, de naam, de status en wie de versie heeft bijgewerkt — Het venster Versiebeheer met alle versies van de uiting en hun status.

Open je een actief template, dan maakt Send automatisch een nieuwe conceptversie aan. De actieve versie blijft dus ongewijzigd verzonden worden totdat je het nieuwe concept activeert. Je kunt daardoor veilig aan een uiting werken die live in gebruik is.

Ontwerp overnemen

Met Exporteer en Importeer neem je een ontwerp over uit een ander template, bijvoorbeeld om een bestaande e-mail als basis voor een nieuwe te gebruiken, of om een ontwerp naar een andere omgeving over te zetten.

Open het template met het ontwerp dat je wilt overnemen en klik op Exporteer.
Klik in het venster Exporteer template op Kopieer.
Open het template waarin je het ontwerp wilt gebruiken en klik op Importeer.
Plak de gekopieerde projectdata in het veld en klik op Importeer.

Het ontwerp komt binnen als een nieuwe conceptversie; de bestaande actieve versie blijft ongemoeid.

Na het importeren moet je nog twee dingen zelf nalopen, waar de tool ook voor waarschuwt:

Controleer de afbeeldingen. De verwijzingen naar afbeeldingen komen mee zoals ze waren en kunnen naar een plek wijzen die in dit template niet beschikbaar is.
Voeg de contentblokken opnieuw toe. Contentblokken worden niet meegenomen in de export. Sleep ze na het importeren opnieuw op de juiste plek in het ontwerp.

Werkbalk

Welke functies zichtbaar zijn, hangt af van het type uiting. De werkbalk kan de volgende functies bevatten:

Schermgrootte: controleer een e-mail op verschillende schermformaten.
Componentenweergave: toon of verberg de structuur en hulplijnen.
Voorbeeldweergave: bekijk de uiting zoals de ontvanger die ziet.
Volledig scherm: vergroot het ontwerpgebied.
Code bekijken: inspecteer de broncode; bedoeld voor gevorderde gebruikers.
Tekenteller: controleer het aantal tekens in een sms.
Zoom en Handtool: zoom in of uit en verplaats het ontwerp van een brief.
Ongedaan maken en Opnieuw: herstel een eerdere bewerking of voer die opnieuw uit.

Ontwerpgebied

Sleep een element naar het ontwerpgebied om het toe te voegen. Dubbelklik op tekst om deze te bewerken. Selecteer een blok om het te verplaatsen, dupliceren of verwijderen, of om het bovenliggende blok te selecteren.

Ontwerpmanager

De rechterzijbalk bevat de instellingen en bouwblokken voor het ontwerp:

Opmaakinstellingen: stel afmetingen, achtergrondkleuren en randen in.
Geavanceerde instellingen: toon elementen voorwaardelijk of stel een link voor een knop in.
Lagen: bekijk de hiërarchische structuur van de uiting.
Elementenbibliotheek: voeg kolommen, tekst, afbeeldingen, knoppen en andere elementen toe.

Veelgebruikte elementen

Kolommen: maak een indeling met één of meer kolommen. Je kunt kolommen kopiëren of verwijderen.
Tekst: voeg tekst, links en dynamische waarden uit de variabelenlijst toe.
Afbeelding: upload een afbeelding of kies er een uit de bibliotheek.
Knop: stel de doel-URL in via Geavanceerde instellingen.
QR-code: vul de website-URL in waarnaar de code moet verwijzen.
Adresblok: gebruik de vooraf ingestelde indeling voor een C5- of EA5/6-envelop.
Contentblok: hergebruik een centraal beheerd onderdeel, zoals een koptekst, voettekst of handtekening.

Een adresblok heeft geen zichtbare selectierand. Selecteer het veld en gebruik de prullenbak linksboven om het te verwijderen.

Tips voor het werken in de editor

Een QR-code met een persoonlijke link

Bij een brief, een e-mail en een contentblok staat in de blokkenzijbalk een blok QR-code. Sleep dat naar je ontwerp; er verschijnt dan het venster QR code toevoegen, waarin je één van twee dingen invult:

een vaste URL, die voor iedere ontvanger gelijk is;
een Variabele URL: een variabele waarin per ontvanger een eigen link is aangeleverd.

Die tweede optie is vooral voor brieven waardevol. Een gedrukte brief heeft geen aanklikbare link, maar met een QR-code op een variabele URL stuur je iedere ontvanger naar zijn eigen pagina: een afspraak verzetten of een meterstand doorgeven. Laat het bronsysteem de complete link aanleveren en verwijs in de QR-code naar die variabele.

Bekijk het resultaat voordat je activeert

De voorbeeldweergave laat de uiting zien zoals de ontvanger die krijgt, zonder de hulplijnen en de blokranden van het ontwerpgebied. Wissel bij een e-mail daarna met de schermgroottes naar tablet en mobiel: veel ontvangers openen e-mail op hun telefoon, en een indeling met kolommen naast elkaar valt daar anders uit.

Een voorbeeldweergave vervangt geen test e-mail. Pas in een echt e-mailprogramma zie je hoe lettertypen, afbeeldingen en afstanden er werkelijk uitkomen. Verstuur dus altijd een test voordat je activeert.

Werk met contentblokken in plaats van kopiëren

Komt een onderdeel in meerdere uitingen terug (een logo met huisstijlbalk, een afsluiting met contactgegevens, een verplichte voettekst), maak er dan een contentblok van in plaats van het per template op te bouwen. Wijzigt het later, dan pas je het op één plek aan.

De code bekijken

Met Code bekijken open je de broncode van het ontwerp. Dat is bedoeld om te controleren, niet om in te werken.

Bij een e-mail is die code geen gewone HTML maar MJML: een opmaaktaal die speciaal is gemaakt om e-mail in alle mailprogramma's gelijk te laten weergeven. Send zet die bij verzending om naar de HTML die de ontvanger binnenkrijgt. Je ziet in de code dus tags als <mj-section> en <mj-text> in plaats van <div> en <p>.

Zoomen in een brief

Bij een brief werk je op een vaste paginamaat. Gebruik de zoom om het geheel te overzien of juist op een detail in te gaan, en de handtool om over de pagina te schuiven zonder per ongeluk een blok te verplaatsen.

Gereserveerde zones op de eerste pagina van een brief

Op de eerste pagina van een brief liggen twee vakken vast die je niet kunt selecteren, verplaatsen of opmaken:

het adresvenster, dat overeenkomt met het venster in de envelop. Daarin staan de adresvariabelen al klaar: [[name]], [[street]], [[houseNumber]], [[houseNumberAddon]], [[houseNumberAddonExtra]], [[postalCode]] en [[city]];
een vak rechtsboven op de pagina, waar de drukker zijn eigen code plaatst voor de postverwerking.

Zet geen eigen inhoud op deze twee plekken. Ze zijn vergrendeld, dus je kunt ze niet per ongeluk aanpassen, maar je kunt er wel een blok bovenop leggen. Gebeurt dat, dan overlapt jouw tekst met het adres of met de code van de drukker en kan de brief onbezorgbaar worden.

Zet de componentenweergave aan om te zien waar die zones liggen: het adresvenster krijgt een groene omlijning en het vak van de drukker wordt rood gemarkeerd. In de voorbeeldweergave en op de uiteindelijke brief zijn die markeringen niet te zien. Controleer met de componentenweergave aan of je ontwerp er netjes buiten blijft.

De adresvariabelen in het venster worden gevuld uit de ontvangervelden van de variabelenlijst. Zorg dus dat de variabelen voor naam, straat, huisnummer, postcode en woonplaats aan het juiste Ontvanger veld zijn gekoppeld. Zie Variabelen.

Als je iets niet meer terugvindt

De ontwerpmanager rechts toont de structuur van je uiting als een boom. Dat is de snelste manier om een blok te selecteren dat achter iets anders ligt of te klein is geworden om aan te klikken. Klik je in het ontwerpgebied per ongeluk het verkeerde blok aan, dan selecteer je via de boom het bovenliggende blok.

Is er iets misgegaan, gebruik dan Ongedaan maken en niet Opslaan. Bedenk daarbij dat de editor automatisch opslaat: sluit je het tabblad na een misser, dan is die misser dus bewaard. Wil je terug naar een eerdere toestand, dan kun je via een eerdere versie bekijken.

Pagina’s van een brief

Bij een brief kun je meerdere pagina’s beheren:

Klik op Toevoegen om een pagina te maken.
Selecteer een pagina om deze in het ontwerpgebied te openen.
Gebruik de kopieerknop om een pagina te dupliceren.
Gebruik de prullenbak naast de paginanaam om een pagina te verwijderen.

Voice-uitingen

Bij een voice-uiting selecteer je de variabelen die tijdens het afspelen van het bericht worden uitgesproken.

Contentblokken

Herbruikbare onderdelen van een uiting beheren.

Editor: instellingen

De configuratie-instellingen van een template, waaronder de verzendwijze.