Hvordan gjorde vi det Konvertering av Tuts + e-post til kampanjeovervåkingsmaler

I de to første delene av denne case-serien har vi sett hvordan de nye Envato Tuts + -mailene ble designet, og deretter bygget som statiske HTML / CSS-leveranser. I dette siste stykket av puslespillet, viser jeg deg hvordan vi konverterte disse filene til Kampanje Monitor-maler.

På dette stadiet var det et par lagmedlemmer involvert i prosessen: Cameron og meg. Cam tok ansvar for å integrere fordøyelsen i Campaign Monitor, jeg håndterte nyhetsbrevene, som jeg skal forklare i dette innlegget.

1. Forbered dine filer

Nicole leverte en rekke filer på slutten av byggeprosessen, inkludert HTML, CSS og bildeaktiver. Sammen sørget de for en rekke forskjellige e-posttyper, så jeg trengte å ta bare de brikkene som er nødvendige for nyhetsbrevmalen og jobbe derfra.

Tips: Last ned kildefilene hvis du vil følge med.

Lokal Helt

Foreløpig er stiene i filene alle relative. Det er et par koblinger til CSS-filer, noen koblinger innenfor dem til bilder, og de peker rundt den lokale filkatalogen som vi ser den. For eksempel:

Når vi laster opp filene våre ved slutten av opplæringen, vil kampanjeovervåkingen gjenkjenne alle disse banene og endre dem tilsvarende.

2. Start på toppen

Vår prosess er dette: Vi tar alle de statiske brikkene i vår e-postmal og bytter dem ut for dynamiske utdrag når det er mulig. Scrolling ned, den første skyldige jeg finner er rundt linje 73: en lenke til webversjonen:

Noe som ikke ser riktig ut? Se webversjonen

Den linken vil være annerledes hver gang, så la oss bytte den til CMs dynamiske :

Noe som ikke ser riktig ut? Se webversjonen

Lett som det. neste!

3. Mer Viktige Lenker

De som vi nettopp tok vare på, er en av noen få viktige koblinger som Campaign Monitor tilbyr. Mens vi er i humør, la oss gjøre bruk av en eller to andre. De e-postinnstillinger avsnittet finner du på linje 346, og ser slik ut:

Du abonnerer på dette nyhetsbrevet fordi du er en del av oversettelsesteamet. Ikke helt til din smak? Ikke noe problem: Oppdater e-postinnstillingene dine eller avmeld deg.

La oss bruke  og  for å gjøre den delen dynamisk:

Du abonnerer på dette nyhetsbrevet fordi du er en del av oversettelsesteamet. Ikke helt til din smak? Ikke noe problem: oppdater epostinnstillingene dine eller Avslutte abonnementet.

Det er et par andre viktige lenker, for eksempel , men vi vil ikke gjøre bruk av dem i dette tilfellet.

4. Enkeltlinjer

Den neste tingen vi trenger å delta på er den viktigste e-postoverskriften.

Rundt linje 87 finner du det merket slik:

Oversettelsesprosjekt Nyhetsbrev
 
Måned 20XX

Avsnitt, med klasser av overskrift og h1 eller h2 (takk e-post HTML). Hver av disse må redigeres fra Campaign Monitor, så da vi bare trenger å redigere tekstinnholdet og ingenting annet, kan vi bruke  mal element:

 Oversettelsesprosjekt Nyhetsbrev 
 
 Måned 20XX 

Avsnittene forblir helt intakt, vi legger bare til et redigerbart område innenfor hver enkelt. Hver enkel linje har en valgfri merkelapp attributt, som vil bli hjelpsomt vist fra Kampanje Monitor-editoren:

5. Fler linjer

For innhold som er litt mer komplekst enn overskrifter og straplines, bruker vi element. På linje 134 finner du innholdet i vår "første artikkel" som vi skal bruke som en introduksjon for hver e-post:

I dette oversettelsesprosjektet nyhetsbrev n tempus nunc ullamcorper på. Etiam eget turpis augue. Proin en effektiv masse. I ac augue libero. Nulla i tortor commodo, hendrerit ikke er, plassert nunc.
 
Ian Yates
 Redaktør, Envato Tuts+

La oss gjøre disse to seksjonene dynamiske:

 
I dette oversettelsesprosjektet nyhetsbrev n tempus nunc ullamcorper på. Etiam eget turpis augue. Proin en effektiv masse. I ac augue libero. Nulla i tortor commodo, hendrerit ikke er, plassert nunc.
   
Ian Yates
 Redaktør, Envato Tuts+
 

Disse følger samme mønster som tidligere: redigerbare regioner, med valgfrie etiketter, men denne gangen tillater de oss en WYSIWYG-editor:

6. Redigerbare bilder

Rull ned til linje 168 og du finner et bilde i en tabellcelle, alt i seg selv:

Dette blir en del av en repeterbar seksjon (som vi skal håndtere om et minutt), så la oss først gjøre dette bildet dynamisk. Jeg liker ikke å bruke ordet "ganske enkelt" i opplæringen, men i dette tilfellet vil jeg la det glide: bare legg til redigerbar attributt til bildetaggen. Ferdig!

De bredde Attributt er påkrevd, men src (som gir oss et standardbilde) er valgfritt, som vår venn er merkelapp Egenskap.

Med det gjort, tillater redaktøren oss å fjerne standardbildet, laste opp en ny, legge til alt tekst, og (avgjørende) legge til en lenke.

"Den harde data sier: E-post med bilder konverterer nesten dobbelt så godt." - Chris Hexton, administrerende direktør og medstifter av Vero

Merk: Husk at hvis vi velger å fjerne bildet helt, vil den inneholdende markeringen forbli. Dette kan resultere i store polstrede områder uten innhold, så vurder hvordan du merker bildene dine i designet.

7. Repeterbare områder

Det bildet er en del av en seksjon som vi ønsker å kunne gjenta så mange ganger som nødvendig. Den begynner på linje 146 og slutter på linje 176, med kommentarene:

Som vi gjorde tidligere med andre områder, må vi gjøre overskriften i denne delen a og innholdet a , så gjør det før du går videre.

For å gjøre denne hele klumpen repeterbar, pakker vi de nødvendige brikkene i a element:

Dette gir oss noen ekstra kontroller i redigeringsprogrammet for kampanjeovervåking, slik at vi kan duplisere delen, flytte den (nyttig for omordnet), eller slette den.

Merk: må beholder enten a , en , eller en .

Et annet notat: Du kan ikke hekke elementer!

8. Layout

Nå for en repeterbar seksjon med en forskjell. Det er en emnespesifikke seksjon, og hvert emne har en, med riktig emnefarge.

I tilfelle av vårt oversettelsesprosjekt nyhetsbrev, noen ganger kan vi ha en fotografi og video seksjon, sammen med kode og spillutvikling. Noen ganger kan vi hoppe over kode. Noen ganger kan vi ha alle ni emner. Så hva er det beste å organisere dette? Tast inn element.

Vi kan bruke flere layoutelementer innenfor en enkelt blokkere, slik at hver gang vi dupliserer blokken, får vi et valg av layouter. I vårt tilfelle vil vi velge mellom de tilgjengelige emnene, så vår oppslag vil se litt ut som dette:

    ... 

Der vil du se layoutelementer, hver med en unik etikett.

Viktig: ikke bruk escaped HTML-enheter (som & heller enn &) innenfor layoutetikettene.

Begynn på linje 183 ved å pakke inn våre emneblokker i en . Deretter pakkes hver av emneblokkene i a

9. Last opp til Kampanje Monitor

Alt vårt harde arbeid er gjort, nå må vi laste opp våre filer til Kampanje Monitor for å kunne bruke vår mal i en e-postkampanje!

Gå til kampanjekontrollpanelet til Maler> Importer.

Deretter skriver du inn et navn for malen, velger den ferdige HTML-filen, og velger deretter alle andre nødvendige eiendeler (CSS og bilder) som en zip-fil. 

Filene dine lastes opp og behandles, noe som tar et øyeblikk. Styles vil bli optimalisert (noen inlined, noen injisert i av HTML), og banene blir oppdatert. Når alt er gjort, vil malen være tilgjengelig for å velge når du starter en ny kampanje!

Konklusjon

Det bryter opp denne e-post casestudien; et innblikk i hvordan vi designet og bygget Envato Tuts + e-postene. Jeg håper du likte å følge prosessen, og hvis du trenger epostinspirasjon for ditt neste prosjekt, må du sjekke ut de nyeste e-postmallene som er tilgjengelige på Envato Market!

Webdesign