Hur vi gjorde det Konvertera Tuts + Emails till kampanjövervakningsmallar

I de två första delarna av den här fallstudieserien har vi sett hur de nya Envato Tuts + -mailerna designades, och sedan byggdes som statiska HTML / CSS-leveranser. I det här sista stycket av pusslet visar jag dig hur vi konverterade dessa filer till mallar för kampanjövervakning.

Vid detta tillfälle fanns ett par lagmedlemmar involverade i processen: Cameron och jag. Cam tog ansvaret för att integrera digestionerna i Campaign Monitor, jag hanterade nyhetsbreven, som jag förklarar i det här inlägget.

1. Förbered dina filer

Nicole levererade en serie filer i slutet av byggprocessen, inklusive HTML, CSS och bildtillgångar. Tillsammans träffade de ett antal olika e-posttyper, så jag behövde bara ta de bitar som behövs för nyhetsbrevsmallen och arbeta därifrån.

Tips: Ladda ner källfilerna om du vill följa med.

Lokal hjälte

För närvarande är banorna i filerna alla relativa. Det finns ett par länkar till CSS-filer, några länkar inom dem till bilder, och alla pekar runt den lokala filkatalogen som vi ser den. Till exempel:

När vi laddar upp våra filer i slutet av handledningen kommer Campaign Monitor att känna igen alla dessa sökvägar och ändra dem i enlighet därmed.

2. Börja på toppen

Vår process är detta: vi tar alla de statiska bitarna i vår e-postmall och byter dem ut för dynamiska utdrag där det är möjligt. Scrolling ner, den första skyldige jag hittar är runt linje 73: en länk till webbversionen:

Något som inte ser rätt ut? Visa webbversionen

Den länken kommer att vara annorlunda varje gång, så låt oss byta den till CM: s dynamik :

Något som inte ser rätt ut? Visa webbversionen

Lätt som det. Nästa!

3. Mer viktiga länkar

De som vi bara tog hand om är en av några viktiga länkar som görs tillgängliga av Campaign Monitor. Medan vi är i humör, låt oss utnyttja en eller två andra. De E-postinställningar stycke finns på linje 346 och ser så här ut:

Du prenumererar på det här nyhetsbrevet eftersom du är en del av översättningsgruppen. Inte helt till din smak? Inga problem: uppdatera dina e-postinställningar eller avbryt prenumerationen.

Låt oss använda  och  för att göra den sektionen dynamisk:

Du prenumererar på det här nyhetsbrevet eftersom du är en del av översättningsgruppen. Inte helt till din smak? Inga problem: uppdatera dina e-postinställningar eller säga upp.

Det finns några andra viktiga länkar, till exempel , men vi kommer inte att använda dem i det här fallet.

4. Enkla linjer

Nästa sak vi behöver ta del av är den viktigaste e-postadressen.

Runt linje 87 hittar du den märkt så här:

Översättningsprojekt Nyhetsbrev
 
Månad 20XX

Punkter, med klasser av rubrik och h1 eller h2 (tack e-post HTML). Var och en av dem behöver redigeras från Campaign Monitor, så eftersom vi bara behöver redigera textinnehållet och inget annat kan vi använda  mallelement:

 Översättningsprojekt Nyhetsbrev 
 
 Månad 20XX 

Punkterna förblir helt intakta, vi lägger bara till en redigerbar region inom var och en. Varje en kö har en valfri märka attribut som kommer att visas på ett bra sätt från Redigeringsverktyget för Kampanjövervakning:

5. Flerlinjer

För innehåll som är lite mer komplext än rubriker och linjer, använder vi element. På rad 134 hittar du innehållet i vår "första artikel" som vi ska använda som en introduktion för varje mail:

I det här översättningsprojektet nyhetsbrev n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin en effektiv massa. I ac augue libero. Nulla in tortor commodo, hendrerit ej, placerad nunc.
 
Ian Yates
 Redaktör, Envato Tuts+

Låt oss göra dessa två avsnitt dynamiska:

 
I det här översättningsprojektet nyhetsbrev n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin en effektiv massa. I ac augue libero. Nulla in tortor commodo, hendrerit ej, placerad nunc.
   
Ian Yates
 Redaktör, Envato Tuts+
 

Dessa följer samma mönster som tidigare: Redigerbara regioner, med valfria etiketter, men den här gången tillåter de oss en WYSIWYG-editor:

6. Redigerbara bilder

Bläddra ner till linje 168 och du hittar en bild i en tabellcell, allt i sig:

Detta kommer att ingå i en repeterbar sektion (som vi ska hantera om en minut) så låt oss först göra denna bild dynamisk. Jag gillar inte att använda ordet "helt enkelt" i handledning, men i det här fallet låter jag det glida: lägg bara till redigerbar attribut till bildtaggen. Gjort!

De bredd Attribut krävs, men src (vilket ger oss en standardbild) är valfri, liksom vår vän märka attribut.

Med det gjort, tillåter redaktören oss att ta bort standardbilden, ladda upp en ny, lägga till alt text och (väsentligt) lägga till en länk.

"De hårda uppgifterna säger: E-postmeddelanden med bilder konverterar nästan dubbelt så mycket." - Chris Hexton, VD och medgrundare av Vero

Notera: Tänk på att om vi väljer att ta bort bilden helt, kommer den innehålla markeringen att förbli. Detta kan resultera i stora vadderade områden utan innehåll, så se hur du markerar dina bilder i designen.

7. Repeterbara områden

Den bilden är en del av en sektion som vi vill kunna upprepa så många gånger som behövs. Det börjar på rad 146 och slutar på rad 176, med kommentarerna:

Som vi gjorde tidigare med andra områden måste vi göra rubriken inom detta avsnitt a och innehållet a , så gör det innan du går längre.

För att göra hela denna bit repeterbar sätter vi in ​​de nödvändiga bitarna i a element:

Detta ger oss några extra kontroller i Redigeringsverktyget för kampanjen, så att vi kan kopiera sektionen, flytta den (användbar för omregistrering) eller radera den.

Notera: måste behållare antingen a , en , eller en .

En annan anteckning: Du kan inte bo element!

8. Layout

Nu för en repeterbar sektion med en skillnad. Det är en ämnesspecifik sektion, och varje ämne har en, med lämplig ämnesfärg.

När det gäller vårt översättningsprojektnyhetsbrev, kan vi ibland ha en bild- och videosektion, tillsammans med kod och spelutveckling. Ibland kan vi hoppa över kod. Ibland kan vi ha alla nio ämnen. Så vad är det bästa för att organisera detta? Gå in i element.

Vi kan använda flera layoutelement inom en enda blockera, så att vi varje gång vi duplicerar blocket får ett val av layouter. I vårt fall vill vi välja mellan de tillgängliga ämnena, så vår markering kommer att se lite ut så här:

    ... 

Där ser du layoutelement, var och en med en unik etikett.

Viktig: inte använd escaped HTML-enheter (som & hellre än &) inom layoutetiketterna.

Börja på rad 183 genom att förpacka våra ämnesblock i en . Vrid sedan var och en av ämnesblocken i a

9. Ladda upp till kampanjövervakaren

Allt vårt hårda arbete är klart, nu måste vi ladda upp våra filer till kampanjövervakningen för att kunna använda vår mall i en e-postkampanj!

Gå till din kampanjövervakning på instrumentpanelen Mallar> Importera.

Ange sedan ett namn för din mall, välj din färdiga HTML-fil och välj sedan alla andra nödvändiga tillgångar (CSS och bilder) som en zip-fil. 

Dina filer laddas upp och bearbetas vilket tar en stund. Styles kommer att optimeras (vissa inlines, några injiceras i av HTML), och banor uppdateras. När allt är klart kommer din mall att vara tillgänglig för att välja när du startar en ny kampanj!

Slutsats

Det handlar om denna e-post fallstudie; En inblick i hur vi konstruerade och byggde Envato Tuts + e-postmeddelanden. Jag hoppas att du njöt av att följa processen, och om du behöver epostinspiration för ditt nästa projekt, se till att du kolla in de senaste e-mallarna på Envato Market!

Webbdesign