Cum am făcut-o Conversia e-mailurilor Tuts + în șabloanele de monitorizare a campaniei

În primele două părți ale seriei de studii de caz, am văzut cum au fost proiectate noile e-mailuri Envato Tuts +, apoi au fost construite ca rezultate statice HTML / CSS. În această piesă finală a puzzle-ului, vă voi arăta cum am convertit aceste fișiere în șabloane de monitorizare a campaniei.

În acest stadiu au fost implicați doi membri ai echipei: Cameron și cu mine. Cam sa ocupat de integrarea digesturilor în Monitorul de campanie, am gestionat buletinele de știri, pe care le voi explica în acest post.

1. Pregătiți-vă fișierele

Nicole a dat o serie de fișiere la sfârșitul procesului de construire, incluzând HTML, CSS și activele imaginilor. Împreună, acestea au furnizat un număr de tipuri de e-mailuri diferite, așa că a trebuit să iau doar biții necesari pentru șablonul newsletter-ului și să lucrez de acolo.

Bacsis: Descărcați fișierele sursă dacă doriți să le urmați.

Eroul local

În prezent, căile din fișiere sunt toate relative. Există câteva linkuri către fișierele CSS, unele linkuri din cadrul acestora către imagini și toate acestea fac referire la directorul de fișiere local așa cum îl vedem. De exemplu:

Când încărcăm fișierele noastre la sfârșitul tutorialului, Monitorul de campanie va recunoaște toate aceste căi și le va modifica în consecință.

2. Începeți din partea de sus

Procesul nostru este următorul: vom prelua toate fragmentele statice ale șablonului nostru de e-mail și le vom schimba pentru fragmente dinamice ori de câte ori este posibil. Derularea în jos, primul vinovat pe care îl găsesc este în jurul liniei 73: un link către versiunea web:

Ceva nu arata bine? Vizualizați versiunea web

Această legătură va fi diferită de fiecare dată, așa că haideți să o schimbăm pentru dinamica CM :

Ceva nu arata bine? Vizualizați versiunea web

Ușor ca asta. Următor →!

3. Legături mai importante

pe care tocmai am avut grijă este una dintre câteva link-uri importante puse la dispoziție de Monitorul de Campanie. În timp ce suntem în dispoziție, să folosim unul sau doi alții. preferinte de email paragraful poate fi găsit la linia 346 și arată astfel:

V-ați abonat la acest newsletter deoarece sunteți membru al echipei de traducere. Nu vă place foarte mult? Nicio problemă: actualizați preferințele de e-mail sau dezabonați.

Să folosim  și  pentru a face această secțiune dinamică:

V-ați abonat la acest newsletter deoarece sunteți membru al echipei de traducere. Nu vă place foarte mult? Nici o problema: actualizați preferințele dvs. de e-mail sau de dezabonare.

Există câteva alte linkuri importante, cum ar fi , dar nu le vom folosi în acest caz.

4. Linii unice

Următorul lucru la care trebuie să participăm este titlul principal de e-mail.

În jurul liniei 87 veți găsi că este marcat așa:

Proiectul de traducere
 
Luna 20XX

Paragrafe, cu clase de rubrică și h1 sau h2 (mulțumesc e-mail HTML). Fiecare dintre acestea trebuie să poată fi editabil din cadrul campaniei Monitor, astfel că, având în vedere că vom avea nevoie doar de a edita conținutul textului și nimic altceva, putem folosi  elementul șablon:

 Proiectul de traducere 
 
 Luna 20XX 

Paragrafele rămân perfect intacte, vom adăuga o regiune editabilă în cadrul fiecăruia. Fiecare o singura linie are un opțional eticheta atribut, care va fi afișat cu ușurință din editorul Monitor Campanie:

5. Multiple linii

Pentru conținut care este puțin mai complex decât titlurile și strategiile, vom folosi element. Pe linia 134 veți găsi conținutul primului nostru articol pe care îl vom folosi ca introducere pentru fiecare e-mail:

În acest newsletter de proiecte de traducere n tempus nunc ullamcorper la. Etiam eget turpis augue. Proin a massive efficitur. În acel moment libero. Nulla în tortor commodo, hendrerit nisl non, placerat nunc.
 
Ian Yates
 Editor, Envato Tuts+

Să facem dinamic aceste două secțiuni:

 
În acest newsletter de proiecte de traducere n tempus nunc ullamcorper la. Etiam eget turpis augue. Proin a massive efficitur. În acel moment libero. Nulla în tortor commodo, hendrerit nisl non, placerat nunc.
   
Ian Yates
 Editor, Envato Tuts+
 

Acestea urmează același model ca înainte: regiuni editabile, cu etichete opționale - dar de data aceasta ne permit un editor WYSIWYG:

6. Imagini editabile

Derulați în jos până la linia 168 și veți găsi o imagine într-o celulă de tabel, toate singure:

Acest lucru va face parte dintr-o secțiune repetabilă (la care ne vom ocupa într-un minut), așa că mai întâi să facem dinamica acestei imagini. Nu-mi place să folosesc cuvântul "pur și simplu" în tutoriale, dar în acest caz o să-l las să alunece: pur și simplu adăugați editabil atribuiți etichetei imaginii. Terminat!

lăţime este necesar atributul, dar src (care ne oferă o imagine implicită) este opțională, așa cum este și prietenul nostru eticheta atribut.

Cu acest lucru, editorul ne permite să eliminăm imaginea implicită, să încărcăm o imagine nouă, să adăugăm alt text și să adăugăm (în mod crucial) un link.

"Datele greșite spun: e-mailurile cu imagini convertesc aproape de două ori mai bine" - Chris Hexton, CEO și co-fondator al companiei Vero

Notă: rețineți că, dacă alegem să eliminăm complet imaginea, marcajul care conține va rămâne. Acest lucru poate duce la suprafețe mari căptușite fără conținut, deci luați în considerare modul în care marcați imaginile în proiect.

7. Zone repetate

Această imagine face parte dintr-o secțiune pe care dorim să o putem repeta de câte ori este necesar. Începe pe linia 146 și se termină pe linia 176, cu comentariile:

Așa cum am făcut mai devreme cu alte domenii, trebuie să facem titlul din această secțiune a și conținutul a , așa că faceți asta înainte de a merge mai departe.

Pentru a face ca întreaga bucată să fie repetată, împachetăm biții necesari într-o element:

Acest lucru ne va oferi niște controale suplimentare în editorul Monitor Campanie, permițându-ne să duplicăm secțiunea, să o mutăm (utilă pentru rearanjare) sau să o ștergem.

Notă: trebuie sa container fie a , A , sau an .

O altă notă: nu poți cuibui element!

8. Aspect

Acum pentru o secțiune repetabilă cu o diferență. Este o secțiune specifică subiectului și fiecare subiect are unul, cu culoarea subiectului potrivită.

În cazul newsletter-ului nostru de traducere, uneori putem include o secțiune Fotografie & Video, împreună cu Codul și Dezvoltarea jocurilor. Uneori putem trece peste Cod. Uneori s-ar putea să prezentăm toate cele nouă subiecte. Deci, ce e mai bine să organizezi asta? Introduceți element.

Putem folosi mai multe elemente de aspect într-un singur bloc, astfel încât de fiecare dată când duplicăm blocul, ni se oferă o varietate de machete. În cazul nostru, dorim să alegem dintre subiectele disponibile, astfel încât marcajul nostru va arăta cam așa:

    ... 

Acolo veți vedea elemente de aspect, fiecare cu o etichetă unică.

Important: nu face utilizați entități HTML evitate (cum ar fi & Decat &) în etichetele layout-ului.

Începeți pe linia 183 prin împachetarea blocurilor noastre de subiecte în a . Apoi, înfășurați fiecare dintre blocurile de subiecte în a

9. Încărcați în Monitorul de campanie

Toate eforturile depuse sunt făcute, acum trebuie să încărcăm fișierele noastre în Monitor Campaign pentru a folosi șablonul nostru într-o campanie de e-mail!

În tabloul de bord al monitorizării campaniei, mergeți la Șabloane> Import.

Apoi, introduceți un nume pentru șablon, selectați fișierul HTML finit, apoi selectați toate celelalte elemente necesare (CSS și imagini) ca fișier zip. 

Fișierele dvs. vor fi încărcate și procesate, ceea ce va dura un moment. Stilurile vor fi optimizate (unele inline, unele injectate în din HTML), iar căile vor fi actualizate. După ce ați terminat, șablonul dvs. va fi disponibil pentru a selecta când începeți o nouă campanie!

Concluzie

Acest lucru împrăștie acest studiu de caz de e-mail; o perspectivă asupra modului în care am proiectat și construit e-mailurile Envato Tuts +. Sper că v-ați bucurat de urmărirea procesului și dacă aveți nevoie de inspirație de e-mail pentru următorul proiect, asigurați-vă că ați verificat cele mai recente șabloane de e-mail disponibile pe Envato Market!

Web design