À l' étape précédente, un fichier compressé (zip) a été importé via l'assistant d'importation du chapitre Contenu de Selligent by Zeta, contenant un fichier HTML et des images, pour créer un nouveau template d'e-mail.
Nous allons maintenant personnaliser le contenu de ce template.
Cette opération peut être effectuée de deux manières :
Remarque : en haut, vous pouvez basculer entre le mode Source et le mode Conception.
Mode Source :
Mode Conception :
Personnaliser le contenu en mode Conception
Après l'importation, le template ressemble à ceci en mode Conception :
Cliquez sur l'icône Liens en haut à droite :
Vous remarquerez que les liens suivants sont déjà disponibles (ils ont été importés dans le fichier HTML) :
- Version web – non utilisée pour le moment (cercle rouge avec la valeur 0) – mais nous allons changer cela.
- Afficher cet e-mail dans votre navigateur – le texte permettant d'afficher la version web de l'e-mail, utilisé deux fois (cercle vert avec la valeur 2). Nous allons changer la destination du texte en haut de sorte à le renvoyer au lien Version web ci-dessus.
- Lien 101 – ce lien mène à la page d'accueil de la boutique Parana. Nous souhaitons au moins que le texte de navigation PARANA en haut et l'image dans le corps soient liés à la page d'accueil de la boutique.
- Lien 102 – lien Facebook de Parana ; pour l'icône du réseau social Facebook dans le pied de page du template d'e-mail.
- Lien 103 – lien 'X' (anciennement Twitter) de Parana ; pour l'icône du réseau social 'X' (anciennement Twitter) dans le pied de page du template d'e-mail.
- Lien 104 – lien Google Plus de Parana ; pour l'icône du réseau social Google Plus dans le pied de page du template d'e-mail.
- Lien 105 – lien Youtube de Parana ; pour l'icône du réseau social Youtube dans le pied de page du template d'e-mail.
Remarque : La boutique en ligne Parana est une boutique en ligne fictive destinée à reproduire des cas d'utilisation.
Vous pouvez appliquer la même méthode de travail pour créer un lien vers un autre site web.
Examinons les éléments suivants et voyons si chacun d'entre eux répond à nos exigences :
- Lien vers la version web
- Éléments de navigation supérieurs (Parana, Mode, Maison, Électronique)
- Lien image pour commencer les achats
- Contenu et style du corps du texte « Le printemps est enfin arrivé !... »)
- Icônes de réseaux sociaux dans le pied de page (Facebook, 'X' (anciennement Twitter), etc.)
- Lien de désabonnement
Lien vers la version web
Modifions le texte en haut du template d'e-mail afin qu'il renvoie au lien vers la version web par défaut (ID = 0).
Sélectionnez le texte « Afficher cet e-mail dans votre navigateur » et cliquez sur l'icône Lien suivi.
Dans le pop-up, ajoutez le texte de l'info-bulle et changez le lien pour avoir Version web.
Cliquez sur le bouton Insérer en bas pour appliquer vos changements.
Ce texte renvoie maintenant à la version web.
Éléments de navigation supérieurs
Cliquez sur l'élément Parana dans la section des éléments de navigation supérieurs et vérifiez que le bon lien est déjà appliqué.
Le lien 101 est le bon lien pour la page d'accueil de la boutique en ligne Parana, comme indiqué ici.
Créez maintenant de nouveaux liens pour chacun des autres éléments de navigation supérieurs (pour les lier à la boutique en ligne fictive Parana) :
- Mode – lien vers la section Mode de la boutique en ligne Parana.
Par exemple https://parana.selligent.com/shop/default.aspx?CATIDL3=25 - Maison – lien vers la section Maison de la boutique en ligne Parana.
Par exemple https://parana.selligent.com/shop/default.aspx?CATIDL3=48 - Électronique – lien vers la section Électronique de la boutique en ligne Parana.
Par exemple https://parana.selligent.com/shop/default.aspx?CATIDL3=5
Exemple :
- Sélectionnez le texte Mode et cliquez sur l'icône Lien suivi :
- Dans le pop-up, cliquez sur + pour ajouter un nouveau lien :
- Saisissez un nom de lien, définissez une URL externe comme cible et cliquez sur Ok :
- La valeur du champ Lien est automatiquement mise à jour avec le nom du lien que vous avez saisi. Cliquez sur Insérer :
- Le bon lien est maintenant appliqué au texte Mode.
- Appliquez le même processus aux autres éléments de navigation supérieurs Maison et Électronique (créez de nouveaux liens pour chacun d'eux).
- Dans les propriétés Liens du template d'e-mail, vous pouvez voir que les liens créés sont visibles et utilisés :
Lien image pour commencer les achats
L'image dans le corps du template d’e-mail doit être liée au lien 101, qui mène à la page d'accueil de la boutique Parana.
Sélectionnez l'image et cliquez sur l'icône Lien suivi :
Dans le pop-up, vous pouvez voir qu'elle renvoie déjà au lien 101 comme il convient.
Si ce n'était pas le cas, la mise à jour peut se faire ici :
Cliquez sur Annuler.
Contenu et style du corps du texte
Le texte dans le corps ressemble maintenant à ceci :
Nous voulons qu'il ressemble à ceci :
Par conséquent, nous devrons suivre la procédure suivante :
-
Supprimez les textes de la rubrique 1, de la rubrique 2 et de la rubrique 3 en les sélectionnant et en appuyant sur la touche Suppr ou Retour arrière du clavier.
Supprimez également le lien Commencer à faire vos achats >> (car nous utilisons l'image à cette fin). -
Alignez le texte au centre.
-
Modifiez la police du texte (p. ex. Trebuchet).
La conception ressemble maintenant à ceci :
Icônes de réseaux sociaux dans le pied de page
Le pied de page contient quatre icônes de réseaux sociaux.
Nous souhaitons que chacun d'eux renvoie au réseau social correspondant.
- Facebook – cliquez sur l'icône Facebook dans le pied de page et sur l'icône Lien suivi en haut.
L'icône doit renvoyer à Lien 102.
- 'X' (anciennement Twitter) – cliquez sur l'icône 'X' (anciennement Twitter) dans le pied de page et sur l'icône Lien suivi en haut.
L'icône doit renvoyer à Lien 103.
- Google Plus – cliquez sur l'icône Google Plus dans le pied de page et sur l'icône Lien suivi en haut.
L'icône doit renvoyer à Lien 104.
- Youtube – cliquez sur l'icône Youtube dans le pied de page et sur l'icône Lien suivi en haut.
L'icône doit renvoyer à Lien 105.
Lien de désabonnement
Dans le pied de page du template d'e-mail, à droite, se trouve un texte indiquant Désabonner.
Nous souhaitons le renvoyer à un lien réel permettant aux utilisateurs de se désabonner des communications par e-mail.
Cliquez sur le texte Désabonner et sur l'icône Lien suivi en haut.
Le texte renvoie au lien Afficher cet e-mail dans votre navigateur.
Changeons cela de sorte que le lien renvoie à un lien de désabonnement.
Pour ce faire, cliquez sur l’icône + à droite.
Dans le nouveau pop-up Ajouter un lien qui s’affiche :
- Saisissez un nom pour le lien ;
- Comme destination , sélectionnez URL externe et saisissez une URL dans le champ situé en dessous ;
- Développez la section des paramètres avancés et activez le bouton Lien de désabonnement.
Cliquez ensuite sur Ok.
Le bon lien de désabonnement est maintenant utilisé.
Cliquez sur Insérer.
Le lien de désabonnement est maintenant appliqué au texte de désabonnement.
Personnaliser le contenu en mode Source
Toute personnalisation du contenu effectuée en mode Conception peut également être effectuée en mode Source.
Passez en mode Source (s'il ne s'agit pas encore du mode actif).
Nous allons rapidement passer en revue les modifications déjà été effectuées en mode Conception afin que vous sachiez où les trouver en mode Source.
- Lien vers la version web en mode Source, cela peut être réalisé en définissant le bon lien href dans la balise <a> sur le texte « Afficher cet e-mail dans votre navigateur » correspondant à LIEN(0).
- Éléments de navigation supérieurs (Parana, Mode, Maison, Électronique) – En mode Source, cela peut être fait en définissant le bon lien dans les balises <a> des différents éléments.
– Parana doit renvoyer à LIEN(101) :
- Mode doit renvoyer à LIEN(106), Maison à LIEN(107) et Électronique à LIEN(108) :
- Lien image pour commencer les achats – en mode Source, cela peut être fait en définissant le bon lien href, soit LIEN(101), dans la balise <a> pour l'élément de type image.
- Contenu et style du corps du texte « Le printemps est enfin arrivé !... ») – Le contenu du texte avec le style appliqué peut être vu et édité dans ce paragraphe en mode Source.
- Icônes de réseaux sociaux dans le pied de page (Facebook, 'X' (anciennement Twitter), etc.) –les icônes contenant des liens vers les réseaux sociaux correspondants sont placées dans le pied de page :
- Facebook = LIEN(102)
- Twitter = LIEN(103)
- Google Plus = LIEN(104)
- Youtube = LIEN(105)
- Lien de désabonnement – le lien de désabonnement se trouve également dans le pied de page, juste en dessous. Sa valeur href est LIEN(109), qui est l'URL externe de désabonnement.
Résumé des liens utilisés
Après avoir personnalisé le contenu et ajouté tous les liens, voici l'aperçu de tous les liens utilisés :
Le lien marqué d'un 0 rouge peut être supprimé, car nous ne l'utilisons plus.
Remarque : n'oubliez pas de régulièrementenregistrer votre template d’e-mail.
Comme prochaine étape, nous allons ajouter l'en-tête de l'email.
| ÉTAPES : |
|---|
| 1. Importer un fichier |
| 2. Personnaliser le contenu |
| 3. Ajouter un en-tête d'e-mail |
| 4. Extraire la version texte |
| 5. Tester/afficher l'aperçu du template d'e-mail |
| 6. Créer un journey de base pour envoyer le template d'e-mail aux contacts |
