Comment nous l'avons fait Conversion des Tuts + Emails en modèles de moniteur de campagne

Dans les deux premières parties de cette série d’études de cas, nous avons vu comment les nouveaux emails Envato Tuts + ont été conçus, puis construits sous forme de livrables HTML / CSS statiques. Dans cette dernière pièce du puzzle, je vais vous montrer comment nous avons converti ces fichiers en modèles de Moniteur de campagne..

À ce stade, quelques membres de l'équipe ont participé au processus: Cameron et moi. Cam a pris en charge l'intégration des résumés dans Campaign Monitor, j'ai traité les newsletters, ce que je vais expliquer dans ce post.

1. Préparez vos fichiers

Nicole a livré une série de fichiers à la fin du processus de création, notamment HTML, CSS et des ressources d'image. Ensemble, ils ont pris en charge différents types d’e-mails. Je ne devais donc prendre que les éléments nécessaires pour le modèle de lettre d’information, puis travailler à partir de là..

Pointe: Téléchargez les fichiers sources si vous souhaitez suivre.

Héros local

Actuellement, les chemins dans les fichiers sont tous relatifs. Il existe quelques liens vers des fichiers CSS, y compris des liens vers des images, et ils pointent tous vers le répertoire de fichiers local tel que nous le voyons. Par exemple:

Lorsque nous mettons en ligne nos fichiers à la fin du didacticiel, Campaign Monitor reconnaîtra tous ces chemins et les modifiera en conséquence..

2. Commencez par le haut

Notre processus est le suivant: nous allons prendre tous les éléments statiques de notre modèle de courrier électronique et les échanger contre des extraits dynamiques dans la mesure du possible. En descendant, le premier coupable que je trouve est autour de la ligne 73: un lien vers la version Web:

Quelque chose ne va pas? Voir la version web

Ce lien sera différent à chaque fois, changeons-le pour la dynamique de CM :

Quelque chose ne va pas bien? Voir la version web

Aussi simple que ça. Suivant!

3. Liens plus importants

le dont nous venons de nous occuper est l’un des quelques liens importants mis à disposition par Campaign Monitor. Pendant que nous sommes d'humeur, utilisons un ou deux autres. le Préférences de messagerie Le paragraphe peut être trouvé à la ligne 346 et ressemble à ceci:

Vous êtes abonné à cette newsletter car vous faites partie de l'équipe de traduction. Pas tout à fait à votre goût? Pas de problème: mettez à jour vos préférences de courrier électronique ou désabonnez-vous.

Utilisons  et  rendre cette section dynamique:

Vous êtes abonné à cette newsletter car vous faites partie de l'équipe de traduction. Pas tout à fait à votre goût? Aucun problème: mettre à jour vos préférences de courrier électronique ou Se désabonner.

Il existe quelques autres liens importants, tels que , mais nous ne les utiliserons pas dans ce cas.

4. Lignes simples

La prochaine chose à laquelle nous devons assister est l'en-tête principal de l'e-mail.

Autour de la ligne 87, vous la trouverez marquée comme suit:

Bulletin du projet de traduction
 
Mois 20XX

Paragraphes, avec classes de titre et h1 ou h2 (merci email HTML). Chacun de ces éléments doit pouvoir être modifié à partir de Campaign Monitor. Par conséquent, étant donné que nous n’aurons jamais besoin que de modifier le contenu du texte et rien d’autre, nous pouvons utiliser le  élément de modèle:

 Bulletin du projet de traduction 
 
 Mois 20XX 

Les paragraphes restent parfaitement intacts, nous allons simplement ajouter une région éditable dans chacun d'eux. Chaque une seule ligne a une option étiquette attribut, qui sera utilement affiché à partir de l'éditeur de moniteur de campagne:

5. Lignes multiples

Pour le contenu qui est un peu plus complexe que les titres et les straplines, nous utiliserons le élément. Sur la ligne 134, vous trouverez le contenu de notre «premier article» que nous utiliserons comme introduction pour chaque email:

Dans cette traduction projet lettre d'information n tempus nunc ullamcorper à. Etiam eget turpis augue. Proin a efficitur massa. En acgue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.
 
Ian Yates
 Éditeur, Envato Tuts+

Rendons ces deux sections dynamiques:

 
Dans cette traduction projet lettre d'information n tempus nunc ullamcorper à. Etiam eget turpis augue. Proin a efficitur massa. En acgue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.
   
Ian Yates
 Éditeur, Envato Tuts+
 

Celles-ci suivent le même schéma que précédemment: des régions modifiables, avec des étiquettes facultatives, mais cette fois, elles nous permettent un éditeur WYSIWYG:

6. Images modifiables

Faites défiler jusqu'à la ligne 168 et vous trouverez une image dans une cellule de tableau, toute seule:

Cela fera partie d'une section répétable (que nous traiterons dans une minute), commençons donc par rendre cette image dynamique. Je n'aime pas utiliser le mot «simplement» dans les tutoriels, mais dans ce cas, je le laisse glisser: ajoutez simplement le éditable attribut à la balise image. Terminé!

le largeur attribut est requis, mais le src (qui nous donne une image par défaut) est optionnel, de même que notre ami le étiquette attribut.

Ceci fait, l’éditeur nous permet de supprimer l’image par défaut, d’en télécharger une nouvelle, d’ajouter du texte alternatif et (de manière cruciale) d’ajouter un lien..

«Les données chiffrées indiquent que les courriels contenant des images se transforment presque deux fois plus facilement.» - Chris Hexton, PDG et co-fondateur de Vero

Remarque: gardez à l'esprit que si nous choisissons de supprimer complètement l'image, le balisage contenant restera. Cela peut entraîner de grandes zones matelassées sans contenu. Par conséquent, réfléchissez à la façon dont vous annotez vos images dans la conception..

7. Zones répétables

Cette image fait partie d'une section que nous souhaitons pouvoir répéter autant de fois que nécessaire. Il commence à la ligne 146 et se termine à la ligne 176 avec les commentaires suivants:

Comme nous l’avons déjà fait dans d’autres domaines, nous devons faire de l’intitulé de cette section un et le contenu d'un , alors faites-le avant d'aller plus loin.

Pour rendre tout ce morceau répétable, nous emballons les bits nécessaires dans un élément:

Cela nous donnera quelques contrôles supplémentaires dans l'éditeur de suivi de campagne, nous permettant de dupliquer la section, de la déplacer (utile pour réorganiser) ou de la supprimer..

Remarque: la doit conteneur soit un , une , ou un .

Une autre note: vous ne pouvez pas nicher éléments!

8. mise en page

Maintenant, pour une section répétable avec une différence. C'est une section spécifique à chaque sujet, et chaque sujet en a un, avec la couleur de sujet appropriée.

Dans le cas de notre lettre d'information sur les projets de traduction, nous pourrions parfois inclure une section Photographie et vidéo, ainsi que du code et du développement de jeux. Parfois, nous pouvons ignorer le code. Parfois, nous pouvons présenter les neuf sujets. Alors, quel est le meilleur pour organiser cela? Entrer le élément.

Nous pouvons utiliser plusieurs éléments de mise en page dans un seul bloc, de sorte que chaque fois que nous dupliquons le bloc, nous avons le choix entre plusieurs dispositions. Dans notre cas, nous voulons choisir parmi les sujets disponibles, ainsi notre balisage ressemblera un peu à ceci:

    … 

Vous y verrez des éléments de mise en page, chacun avec une étiquette unique.

Important: ne pas utiliser des entités HTML échappées (comme Et plutôt que Et) dans les étiquettes de mise en page.

Commencez à la ligne 183 en plaçant nos blocs de sujet dans un . Enveloppez ensuite chacun des blocs de sujet dans un

9. Transférer vers le Moniteur de campagne

Tout notre travail est terminé, nous devons maintenant télécharger nos fichiers dans Campaign Monitor afin d'utiliser notre modèle dans une campagne de courrier électronique.!

Dans votre tableau de bord Moniteur de campagne, accédez à Modèles> Importer.

Ensuite, entrez un nom pour votre modèle, sélectionnez votre fichier HTML fini, puis sélectionnez tous les autres éléments nécessaires (CSS et images) en tant que fichier zip. 

Vos fichiers seront téléchargés et traités, ce qui prendra un moment. Les styles seront optimisés (certains en ligne, d’autres injectés dans le du HTML), et les chemins seront mis à jour. Lorsque tout cela est terminé, votre modèle sera disponible pour sélectionner le moment où vous démarrez une nouvelle campagne.!

Conclusion

Cela met fin à cette étude de cas par courrier électronique; un aperçu de la façon dont nous avons conçu et construit les courriels Envato Tuts +. J'espère que vous avez apprécié suivre le processus. Si vous avez besoin d'inspiration pour le courrier électronique de votre prochain projet, veillez à consulter les derniers modèles de courrier électronique disponibles sur Envato Market.!

Création de sites web