MailPlus-template voor BrightEdit

Handleiding: MailPlus-template voor BrightEdit Deze handleiding is bedoeld voor MailPlus Partners en in te zetten voor MailPlus Marcom

Inhoudsopgave Introductie... 1 1 De Template Manager... 2 1.1 Template overzichten... 2 1.2 Handige functionaliteiten... 4 1.3 Bewerken van Layout en contenblokken... 5 2 Templates maken voor BrightEdit... 7 2.1 Structuur BrightEdit-templates... 7 2.2 De verschillende contentblok types... 8 2.3 De HTML-code... 10 2.4 Stappenplan BrightEdit-template maken... 16 3 Templates uploaden... 18 3.1 Layouts... 18 3.2 Contentblokken... 20 4 Best practices... 22

Introductie Marketeers willen een professionele nieuwsbrief, maar geen tijd verspillen aan technische aspecten. MailPlus biedt daarom BrightEdit, een editor die intuïtief, flexibel en volledig met drag & drop-functies werkt. Met deze editor stelt de MailPlus-gebruiker zelf een professioneel e-mail bericht of landingspagina op aan de hand van een template. Deze handleiding geeft uitleg over het maken van een template voor BrightEdit en waar u deze als MailPlus-partner beheert in MailPlus. De handleiding bestaat uit vier delen: 1. De Template Manager In het eerste deel wordt uitgelegd wat u in de Template Manager kunt vinden. 2. Templates maken voor BrightEdit In deel twee wordt uitgelegd hoe u templates voor BrightEdit maakt en welke HTML-codes u hiervoor nodig heeft. Daarnaast kun u hier lezen hoe u een bestaand template geschikt maakt voor BrightEdit. 3. Templates uploaden Is het template gereed? Dan kunt u het uploaden in een MailPlus-account. In hoofdstuk 3 wordt beschreven hoe dit werkt. 4. Best practices Tot slot geven we u tips om nog eenvoudiger met BrightEdit en de Template Manager van MailPlus te werken. Heeft u vragen n.a.v. deze handleiding dan kunt u altijd onze supportafdeling raadplegen: 079-363 12 12 of per e-mail naar support@mailplus.nl. 1

1 De Template Manager In de Template Manager worden de beschikbare templates van een account beheerd. Zodra u de Template Manager opent zie u drie template-overzichten staan. Deze scheiding zorgt ervoor dat er een duidelijk overzicht blijft tussen de verschillende soorten templates in de Template Manager. 1.1 Template overzichten Overzicht templates WYSIGIWYG-editor Het bovenste overzicht laat de gewone stijl templates zien. Hierin staan de e-mail, web en bedankpagina templates die u niet in BrightEdit, maar in de oude WYSIWYG-editor kunt gebruiken. Overzicht templates oude stijl Overzicht templates BrightEdit Overzicht twee toont de beschikbare layouts 1 en de layout-specifieke contentblokken. Zodra u een layout uploadt zoekt MailPlus automatisch of er contentblokken in de layout staan. Is dit het geval dan worden deze ook getoond in het tweede overzicht. Ze worden gemarkeerd door inspringen en dat houdt in dat ze bij een specifieke layout horen en dus een layout-specifiek contentblok zijn. U kunt elke layout of contenblok bekijken, wijzigen of verwijderen. Door op de knop Layout uploaden te klikken kunt u een nieuwe layout (inclusief afbeeldingen en contentblokken) uploaden. 1 ) We gebruiken de term layout om aan te geven dat het template geschikt is voor BrightEdit en zijn contentbloktemplates. 2

Layout-overzicht Algemene contentblokken Het derde overzicht van de Template Manager toont de blokken die u in alle layouts kunt gebruiken. Deze blokken zijn dus niet layout-specifiek. Een eindgebruiker kan deze contentblokken dus in elk bericht of landingspagina inzetten. Hierbij kunt u denken aan de templates voor formulieren, RSS of YouTube-video s. U kunt elk algemeen contentblok bekijken, wijzigen, of verwijderen. Door op de knop Blok uploaden te drukken kunt u een nieuw layout-onafhankelijk contentblok uploaden. Overzicht bloktemplates 3

1.2 Handige functionaliteiten Naast de gebruikelijke functionaliteiten zijn er een drietal handige functionaliteiten. Hieronder een overzicht van de bijbehorende functies: 1 2 3 Handige functionaliteiten 1) Zichtbaar/onzichtbaar In één oogopslag kunt u zien of het template zichtbaar of niet zichtbaar is voor de gebruiker. U kunt de zichtbaarheid instellen door op Wijzigen te klikken. 2) Downloaden Met dit icoon kunt u het template (zonder aparte afbeeldingen-map) als ZIP-bestand downloaden naar uw computer. In dit ZIP-bestand zit de layout.html en het HTML-bestand met contenblokken. 3) Gewijzigd In deze kolom wordt de datum en het tijdstip van de laatste wijziging getoond. 4

1.3 Bewerken van layouts en contentblokken Wilt u een template bewerken, klik dan op de knop WIJZIGEN. Het volgende scherm wordt vervolgens geopend: 1 2 3 4 5 6 Editor Template Manager 1) Type template U kunt hier kiezen tussen e-mail en web. 2) Servicelinks Selecteer hier de afmeld- en/of profielwijzigenpagina van het template. Alle standaard afmeld- en/of profielwijzigenlinks - die in de HTML aangegeven zijn met flexlink:unsubscribe en flexlink: editprofile - zullen naar deze pagina s verwijzen. 5

3) Zichtbaar in MailPlus Vinkje aan of vinkje uit bepaald of de layout zichtbaar en bruikbaar is voor de klant. In het overzicht van de Template Manager ziet u of een template aan/uit staat aan het oog-icoon. 4) Standaard template Geeft aan dat deze layout standaard wordt ingeladen als een nieuw bericht of webpagina wordt aangemaakt in respectievelijk het Message Center of de Page Manager. 5) Iconenbalk TinyMCE editor met bewerkingsopties. 6) Template editor Het scherm waarin de layout bewerkt kan worden. Voor het bewerken van contentblokken wordt een soortgelijke editor geladen. Extra in dit scherm is de mogelijkheid om een contentblok te koppelen aan een specifieke layout of beschikbaar te stellen in alle layouts. 6

2 Templates maken voor BrightEdit Om volledig gebruik te kunnen maken van BrightEdit en zijn functionaliteiten, worden er strictere eisen gesteld aan de templates en de HTML-code. In dit hoofdstuk wordt getoond hoe een BrightEdittemplate is opgebouwd en welke HTML-codes erin moeten en kunnen zitten. Tot slot geven we tips hoe een bestaand template eenvoudig omgezet kan worden om te gebruiken in BrightEdit. 2.1 Structuur BrightEdit-templates In de afbeelding hieronder kunt u zien dat het template is opgebouwd uit een basis structuur met daarin losse tabellen voor de artikelen. Deze artikelen worden in BrightEdit aangeduid als contentblokken. Opbouw HTML template 7

In de layout moet worden gemarkeerd waar contentblokken mogen worden toegevoegd. Bovendien moet het contentblok als zodanig herkend worden, zodat u BrightEdit en al zijn functionaliteiten kunt gebruiken. In het template staat gedefinieerd waar nieuwe contentblokken ingevoegd kunnen worden. Tijdens het invoegen worden deze beschikbare plekken in het template gemarkeerd. Het is ook mogelijk dat uw template contentblokken bevat die niet te verplaatsen zijn, maar wel te bewerken. Wanneer u als gebruiker dit soort contentblokken wilt verplaatsen wordt er geen sleepicoon getoond. Het template bestaat niet alleen uit contentblokken. Een header of footer kunnen als gewoon template-element zijn opgenomen en daardoor niet bewerkbaar zijn voor de gebruiker. Afhankelijk van de opbouw van uw template kunt u dus onbewerkbare elementen hebben. Wanneer het voor de gebruiker toch wenselijk is om deze te bewerking, dient het template aangepast te worden. 2.2 De verschillende contentblok types BrightEdit is te gebruiken in zowel het Message Center als de Page Manager. De beschikbare typen contentblokken verschillen echter. Deze verschillen zijn ontstaan uit de mogelijkheden van een landingspagina ten opzichte van een e-mail bericht. E-mail clients bieden veel minder mogelijkheden dan landingspagina s als het gaat om het type content. Zo werken Flash en Javascript niet in e-mail en wel op landingspagina s. Dit betekent dat u bij het opstellen van een HTML e-mail bericht minder type contenblokken heeft dan bij het opstellen van een webpagina. 8

In BrightEdit kunnen de volgende typen contentblokken worden ingezet, afhankelijk van de MailPlus versie van de klant: Vrije opmaak artikel Dit zijn gewone blokken met titel, tekst en/of afbeeldingen. RSS-feed In dit blok worden RSS-feeds ingeladen. YouTube Voor het invoegen van een videofragment op een pagina in de Page Manager. Dit type is niet beschikbaar in het Message Center. Formulier Dit type gebruikt u wanneer u een formulier wilt plaatsen op een landingspagina. 9

Survey Dit type gebruik u wanneer u een survey wilt plaatsen op een landingspagina. Poll Wanneer u een poll wilt plaatsen op een landingspagina, gebruikt u dit type. Afschrift Wanneer u een afschrift wilt plaatsen van een ingevuld formulier, survey of poll, kunt u dit type contentblok toevoegen. 2.3 De HTML-code In het template van BrightEdit kun u dus verschillende eigenschappen meegeven: Plaatsingsmogelijkheden Wel of niet bewerkbaar maken van contentblok Wel of niet verplaatsen van contentblok Type contentblok Een contentblok Om BrightEdit een contentblok te laten herkennen gebruikt u de volgende code: <div class= MPED_CONTENTBLOCK name= Standaard artikel templatetype= article >. Blok hier.. </div> Let er hierbij op dat u ieder contentblok een name en templatetype meegeeft. De name is ook zichtbaar voor klanten, dus geef deze een logische en nette naam. Voor templatetype het type contentblok heeft u de keuze uit de volgende opties: article form 10

survey poll youtube rss formfeedback Per type contentblok kunt u dus een eigen template maken. Dit zorgt ervoor dat deze als losse contentblokken ook beschikbaar worden gemaakt in de Template Manager. Voor alle soorten formulieren zit er een slimmigheidje in; Als er voor een poll, survey of formulier geen template gevonden wordt, dan wordt het standaard template van het type form gekozen. Dit scheelt u weer 4 x hetzelfde template aanmaken. Dit geldt alleen natuurlijk als de templates voor form, poll en survey hetzelfde zijn. Plek van het contenblok De plek waar contentblokken kunnen worden toegevoegd in het template dient een extra class mee te krijgen: MPED_CONTENT. Deze class voegt u dus toe in de <td> waar verplaatsbare contentblokken in komen te staan. Bij het versturen van een mailing wordt deze class (en niet het element) automatisch weer verwijderd. Dit is dus een bestaand element in het template. Uploaden van een template U dient altijd twee HTML-bestanden aan te maken: 1. layout.html waarin het gehele template staat 2. blocks.html waarin de contentblok templates staan zodat deze als subtemplates geselecteerd kunnen worden door de gebruiker (tijdens het bewerken van een artikel). 11

Een voorbeeld Een simpele layout.html ziet er bijvoorbeeld als volgt uit: Voorbeeld HTML We zien dat in de <td> de class MPED_CONTENT aangeroepen wordt. Gebruikers kunnen dus op deze plaats contentblokken toevoegen, verplaatsen, dupliceren en verwijderen. Belangrijk is dat de class="mped_content" direct opgevolgd wordt door een <div class="mped_contentblock"> zoals in de voorbeeld HTML getoond wordt. 12

Speciale codes Er zijn een aantal bloktemplates waarin content vanuit buiten BrightEdit wordt geladen, zoals vanuit de Form Manager, een formulier afschrift of een YouTube-video. Om deze content te kunnen plaatsen moet de editor natuurlijk wel weten waar het formulier of de YouTube video geplaatst moet worden. Om dat aan te geven worden twee codes gebruikt: 1. ##movie## 2. ##form## De eerste is om de plek aan te geven waar de YouTube-video terecht moet gaan komen. De tweede is om aan te geven waar het formulier, poll, survey of formulier afschrift terecht moet gaan komen. Hieronder is een template voor een contentblok dat kan worden gebruik voor een formulier blok: <div class= MPED_CONTENTBLOCK name= Formulier templatetype= form > <table width= 100% cellspacing= 0 cellpadding= 0 border= 0 > <tbody> <tr> <td> ##form## </td> </tr> </tbody> </table> </div> U kunt natuurlijk dit contentblok verder aanpassen aan de huisstijl van de klant. Social media Het is mogelijk om een trackable link in een contentblok door lezers van een e-mail of landingspagina te laten delen via een sociaal netwerk. De lezer kan op het icoon van Hyves, Facebook, LinkedIn, Twitter en/of Google+ klikken om de link met één van deze netwerken te delen. 13

Als social media bij een artikel in BrightEdit wordt ingeschakeld, dan worden de standaard social media iconen van MailPlus onderaan het artikel getoond. De social media iconen hoeven dus niet specifiek in een template opgenomen te worden. Deze functie is altijd beschikbaar. Alléén als u uw eigen iconenset wilt gebruiken of een specifieke locatie in het template wilt bepalen, dan dient deze opgenomen te worden in het template. Gebruik hiervoor de volgende code: Voorbeeld HTML-code Social Media iconen in layout.html Het buitenste element in dit geval een div moet de class MPsocialMedia bevatten. Het kan ook een willekeurig ander element zijn, bijvoorbeeld een table. In dit element moeten zes spans opgenomen worden met de juiste ids ( MPtwitter, etc). Deze spans worden automatisch verwijderd uit de e-mail indien de betreffende social media optie niet aan staat voor het artikel. In de span moet een A-element worden opgenomen met het juiste id ( AMPtwitter, etc). Hiervan wordt automatisch de href aangepast door MailPlus. Wat er verder in het A-element of in de SPAN staat maakt niet uit. Dit kunt u dus compleet aanpassen naar de stijl van het template. Indien de social media iconen niet zijn opgenomen in het template en de social media opties worden toch aangeschakeld in BrightEdit, dan wordt automatisch bovenstaande HTML-code onderop toegevoegd aan 14

het artikel (de source van de images bevat dan de server waar de klant op staat). Als een artikel wordt geopend om te wijzigen, dan verschijnt een placeholder-image op de plek waar de social media is opgenomen. De gebruiker kan dan eventueel de social media iconen als geheel verplaatsen naar een andere plek binnen het artikel. Voorbeeld Blocks.html Zoals aangegeven kunt u los een blocks.html aanmaken en uploaden in het ZIP-bestand van uw template. De blocks.html bevat alle losse contentblokken en worden als subtemplates van de layout opgeslagen in de Template Manager. Ook hier kunt u per contentblok social media iconen toevoegen. Hier een voorbeeld: Voorbeeld HTML-code in blocks.hml 15

2.4 Stappenplan BrightEdit-template maken Het maken van een e-mail en webtemplate voor BrightEdit is onder te verdelen in de volgende stappen: Het e-mail template 1. Maak een HTML-template aan en noem deze layout.html; 2. Maak een images-map aan en plaats hierin alle afbeeldingen waarnaar u verwijst vanuit layout.html; 3. In de tabelcellen waar contentblokken in geplaatst kunnen worden zet u class="mped_content" en align="left"; 4. Om ieder contentblok(tabel) plaatst u <div class="mped_ CONTENTBLOCK" name="[unieke naam met beschrijving opbouw artikel" templatetype="article">. Wanneer een blok alleen bewerkbaar hoeft te zijn en verder niet een te kiezen blok hoeft te zijn in MailPlus, kunt u de name en templatetype achterwege laten. Denk bijvoorbeeld aan een inhoudsopgave of een footer met servicelinks; 5. Maak een HTML-bestand aan en noem deze blocks.html (dit wordt het bestand voor de layout-specifieke contentblokken); 6. Verwijder alle HTML en contentblokken die niet als keuze voor contentblok in MailPlus hoeven worden weergegeven; 7. Maak een ZIP-bestand met daarin de images-map, layout.html en blocks.html. 8. Importeer het template via de templatemanager via Layout Uploaden; 9. Test het template in het gebruik vanuit het Message Center. 16

Het webtemplate 1. Sla de layout.html en de images-map van het e-mail template op een andere locatie nogmaals op voor je webtemplate; 2. Mits de templatespecifieke blokken van het e-mail template ook geschikt zijn voor het webtemplate, slaat u deze nogmaals als blocks.html op voor uw webtemplate in dezelfde locatie als die van layout.html en de images-map van uw webtemplate; 3. Zet overige variaties contentblokken in uw blocks.html 4. Maak een ZIP-bestand met daarin de images-map, layout.html en blocks.html; 5. Importeer het template via de templatemanager via Layout Uploaden; 6. Test het template in het gebruik vanuit de Page Manager. Bestaande templates geschikt maken voor BrightEdit U kunt zeer eenvoudig bestaande templates van klanten ook geschikt maken voor BrightEdit. Mits de basis van het template al logisch is opgebouwd uit tabellen: 1. Geef de regio aan waar contentblokken mogen worden toegevoegd. D.m.v. MPED_CONTENT 2. Zet om de bestaande artikelen in het template een div MPED_ CONTENTBLOCK met een name en een templatetype 3. Sla het bestand op als layout.html en blocks.html en upload deze in de Template Manager 17

3 Templates uploaden U heeft een layout.html en een block.html voor BrightEdit gemaakt. De volgende stap is om deze templates te uploaden in de Template Manager van MailPlus. 3.1 Layouts Bij het uploaden van layouts zijn de volgende restricties van toepassing: Zonder ZIP-bestand: het template moet layout.html heten. Met ZIP-bestand: moet er altijd een bestand zijn dat layout.html heet. Alle andere.html-bestanden zullen worden doorzocht op contentblokken. Indien de contentblokken een correcte name and templatetype attribuut hebben, worden ze als layoutspecifiek contentblok opgeslagen. De blokken die in layout.html staan worden niet apart als blok opgeslagen, omdat in de layout.html ook standaardblokken kunnen staan. In het ZIP-bestand mogen mappen geen submappen hebben. Om een layout te uploaden gaat u via de Setup Manager naar de Template Manager en klikt u op de knop Layout uploaden in het betreffende overzichtsblok. Wilt u een layout toevoegen, dan verschijnt het volgende scherm: 18

U kunt ervoor kiezen om een nieuwe layout toe te voegen of een bestaande layout te overschrijven. Allereerst gaan we een nieuwe layout toevoegen: U geeft hier een naam aan de layout, selecteert het bestand en kiest vervolgens of het voor e-mail of web is. Klik vervolgens op Layout uploaden. Het template is geupload en verschijnt in het overzichtsscherm: Wilt u een bestaande layout overschrijven, dan klikken we weer op Layout uploaden en kiezen we voor Bestaande layout overschrijven. In het dropdown-menu geeft u aan welke bestaande layout overschreven moet worden. Vervolgens selecteert u het bestand dat de bestaande layout moet vervangen. 19

De al bestaande blokken in deze layout blijven gewoon bestaan, tenzij de name van het contentblok overeenkomt, dan wordt deze ook overschreven. 3.2 Contentblokken Wilt u algemene contenblokken uploaden? Houd dan rekening met het volgende: Alle.html-bestanden die worden geupload en niet layout.html heten, worden doorzocht op blokken. U kunt de afzonderlijke blokken samen in een blocks.html zetten. Een blok moet in HTML beginnen met <div class= MPED_ CONTENTBLOCK name= Standaard artikel templatetype= article > beginnen en uiteraard ook een </div> bevatten. Als er al een blok met die naam in het name attribuut is gedefinieerd, dan wordt dat blok overschreven met de nieuwe HTML. In het ZIP-bestand mogen mappen geen submappen hebben. Klik in het derde overzicht van de Template Manager op de knop BLOK UPLOADEN. Het volgende scherm verschijnt: 20

U hoeft geen naam op te geven omdat hij de name in het bestand overneemt. Selecteer het bestand en klik op Blok uploaden. Vervolgens verschijnt bij het overzichtscherm het toegevoegde contentblok(ken) erbij: 21

4 Best practices Om u nog beter op weg te helpen staan hieronder wat tips: Als de klant zijn header-afbeelding regelmatig wil wijzigen, moet deze ook als contentblok in de layout gemarkeerd worden. Zet dan een <div class= MPED_CONTENTBLOCK > </div> om de header heen. Als u de layout verwijdert, verwijdert u daarmee ook de layoutspecifieke blokken. Het is niet mogelijk om het type blok aan te passen nadat het is aangemaakt. De datum laatst gewijzigd vertelt u welk template het meest actueel is. Doet u liever niet uw bewerkingen in de Template Manager, maar in een softwarepakket als Dreamweaver of Notepad ++? Dan kunt u via de download-knop het template exporteren om te bewerken. Via de functies Layout overschrijven of de HTML-knop kunt u de aangepast HTML weer terugplaatsen in MailPlus. 22