Dans l'éditeur Responsive Design, vous pouvez construire des modèles ou des e-mails à partir de composants de mise en page et de contenu en faisant glisser ces derniers et en les déposant sur le message.
- Les composants Lignes dans la fenêtre de droite permettent de définir le nombre de lignes et de colonnes à insérer dans le template/l'e-mail
- Les composants Contenu permettent de définir le type de contenu à afficher réellement.
Mise en page et contenu de base
La mise en page du template/de l'e-mail Selligent par défaut est la suivante:
Le contenu comprend les blocs constitutifs suivants:
En-tête — S'affiche en haut du message. L'en-tête contient par défaut une ligne et deux colonnes avec des composants Texte déjà positionnés: un texte de résumé court et un lien de version web. Vous pouvez ajouter d'autres éléments et supprimer ceux proposés par défaut.
Corps — Contient le contenu réel du e-mail. Par défaut, le corps est vide. Vous pouvez d'abord ajouter des composants Ligne, puis y ajouter des composants Contenu. Vous pouvez également ajouter directement des lignes de contenu avec du contenu par défaut dans le corps. Cliquez sur le bouton bascule 'Avec le contenu par défaut' pour afficher cette option.
Pied de page — S'affiche au bas de la page. Est généralement identique pour plusieurs templates/e-mails. Le pied de page contient un composant Texte par défaut. Vous pouvez apporter des modifications au pied de page par défaut en éditant son contenu, en le supprimant ou en rajoutant un nouveau contenu.
Sur la droite de la fenêtre, dans la fenêtre Liens, s'affiche un lien par défaut pour chaque template/e-mail:
Version Web — Ce lien est ajouté aux e-mails pour permettre aux contacts de lire l'e-mail dans un navigateur web s'ils ne peuvent le visualiser correctement dans leur client de messagerie. Si vous créez un nouveau template/e-mail, le lien Version web est créé par défaut dans la fenêtre Liens et se place dans l'en-tête. Il est inutile d'afficher le lien Version web si vous visualisez déjà l'e-mail dans un navigateur web. Une contrainte de visibilité peut s'ajouter, ici SYSTEM.MAIL=1, pour un affichage dans le client de messagerie uniquement et non dans le navigateur.
Remarque Technique: lorsqu'un template/e-mailest créé, un lien Se désinscrire de la liste est ajouté automatiquement.
Le lien possède l’ID=9 mais n’est pas listé avec les autres liens du e-mail.
Celui-ci est utilisé par certains clients de messagerie web afin de fournir à l’utilisateur une option supplémentaire de désinscription.
Un lien « Se désinscrire de la liste » est ajouté dans l’intitulé de l’e-mail.
Lorsque le client destinataire détecte ce lien, il ajoute généralement une ligne de texte comportant un lien au-dessus de l’e-mail « Vous êtes inscrit à cette liste de diffusion. Se désinscrire. »
En cliquant sur ce lien, le contact se désinscrit de la liste d’audiences complète (champ OPTOUT défini sur 9).
Le client de messagerie électronique doit prendre en charge le standard « list-unsubscribe ».Le lien Se désinscrire ne remplace pas le lien de désinscription obligatoire dans vos e-mails.
(Cliquez ici pour des informations supplémentaires sur les liens des e-mails).
Ajouter des lignes et des colonnes
Le corps ne contient pas de contenu lorsque le template/e-mail est créé pour la première fois.Chaque partie du e-mail doit contenir au moins une ligne. Vous pouvez ajouter de nouvelles lignes en les déposant dans le canevas à partir de la fenêtre Composants sur la droite.
Les lignes obligatoires doivent être ajoutées aux sections indiquant « Déposer les lignes ici » lors du survol du pointeur. Des lignes supplémentaires peuvent également être ajoutées à l'en-tête et au pied de page.
Utiliser les lignes avec ou sans contenu par défaut
Comme indiqué auparavant, vous pouvez ajouter des lignes avec ou sans contenu à l'aide du bouton bascule « Avec contenu par défaut » située dans la fenêtre Composants de la section LIGNES.
Désactivé — Lorsque l'option est désactivée, vous pouvez glisser-déposer des lignes vides comprenant une à quatre colonnes sur le canevas. Vous pouvez ensuite insérer plusieurs composants Contenu dans chacune des colonnes d'une ligne.
Remarque: Utilisez au moins deux colonnes pour les appareils mobiles afin de vous assurer que le contenu s'affichera correctement.
Activé — Lorsque l'option est activée, vous pouvez glisser-déposer des lignes comprenant un contenu par défaut, comme des conteneurs d'image et de texte, sur le canevas. Ces lignes se composent d'une ou deux colonnes en fonction du type de contenu sélectionné. Utilisez cette option si vous souhaitez créer rapidement du contenu qui occupe la ligne entière.
- Texte — Permet d'ajouter une ligne d'une colonne dans laquelle vous pouvez ajouter du texte à personnaliser et pour lequel vous pouvez définir le style.
- Image — Permet d'insérer un composant Image dans la ligne et de sélectionner l'image que vous souhaitez utiliser.
- Texte + image — Propose plusieurs mises en page possibles associant texte et image dans une boîte de contenu, comme illustré dans l'image du bouton Composant.
Exemple:
Ce template est conçu pour être utilisé comme base de tous les messages. Nous devons donc définir l'en-tête et le pied de page et nous les verrouillerons au niveau du template. Ajoutons donc une ligne avec trois colonnes pour l'en-tête, une pour le logo Parana, une pour la date d'édition et une pour les hyperliens vers des sections spécifiques du site Web. Dans le pied de page, nous allons ajouter une ligne avec deux colonnes et supprimer le contenu par défaut.
Une autre ligne est ajoutée au corps du template. Elle contient le texte introductif.
Le résultat se présente comme suit:
Lorsque vous survolez les différents blocs ajoutés, les libellés indiquent de déposer du contenu.
Remarque: Lorsque vous ajoutez du contenu à la conception, la section dans laquelle le contenu est déposé est mise en surbrillance bleue.
Pour accéder aux propriétés ou paramètres des lignes, colonnes et composants, un code couleur est utilisé pour les différentes icônes de la conception. Les icônes s'affichent lorsque vous passez votre souris sur l'élément. Cliquez dessus pour accéder aux options de l'élément correspondant:
- Jaune — Permet de sélectionner la colonne et donne accès aux propriétés de Style (affichées dans la fenêtre de droite), aux options d'affichage et à la disposition des colonnes (verticale ou horizontale).
Vous pouvez définir des options de style pour le contenu et définir sur quels appareils le contenu de la colonne doit s'afficher. Si plusieurs composants Contenu sont alignés horizontalement dans la colonne, vous pouvez définir comment ils doivent s'afficher sur les appareils mobiles: horizontalement - l'un à côté de l'autre ou verticalement - l'un en dessous de l'autre.
- Sarcelle — Permet de sélectionner la ligne et donne accès aux options de mise en page de la ligne et au menu déroulant:
Le menu déroulant vous permet de gérer les contraintes de visibilité, de dupliquer la ligne, de verrouiller ou déverrouiller la ligne, de définir sur quels appareils la ligne doit s'afficher ou de supprimer la ligne.
- Vert — Permet de sélectionner le composant de contenu et donne accès aux propriétés de contenu et au menu déroulant.
Remarque: Pour désélectionner un composant, une ligne ou une colonne (et ainsi fermer la Fenêtre Propriétés), vous pouvez cliquer en dehors de la conception du e-mail, cliquer sur l'icône Fermer au-dessus de la fenêtre Propriétés ou appuyer sur Echap.
Ajouter des composants de contenu
Vous pouvez ajouter des composants de contenu à une ligne ou à une colonne d'une ligne.
Si une ligne ou colonne ne contient pas de contenu, un texte s'affiche lorsque vous passez dessus, vous invitant à déposer du contenu dans la ligne ou la colonne.
Vous pouvez aligner le contenu verticalement ou horizontalement. Ceci est défini par la sélection de disposition des colonnes dans les propriétés des colonnes. La disposition des colonnes horizontales ne fonctionne que pour les boutons, les images et le texte.
- Disposition verticale des colonnes
Lorsque vous déposez un composant de contenu sur une colonne, la barre verte horizontale s'affiche automatiquement. Le nouveau composant de contenu est ajouté au-dessus/au-dessous d'un autre composant. Tous les autres composants ajoutés par la suite seront automatiquement ajoutés au-dessus/au-dessous d'un autre composant. Lors de l'ajout vertical de composants de contenu, tout type de contenu peut être ajouté et différents types peuvent être mélangés dans la même colonne.
- Disposition horizontale des colonnes
Lorsque vous déposez un composant de contenu sur la colonne, une barre verte verticale s'affiche automatiquement. Le nouveau composant de contenu est ajouté à gauche/droite d'un autre composant. Tous les autres composants ajoutés par la suite sera automatiquement ajouté à gauche/droite d'un autre composant. Lors de l'ajout horizontal de composants de contenu, seuls les composants texte, image et bouton peuvent être utilisés.
Chaque composant ne pourra l'être ajouté qu'à la fin de la ligne horizontale ou entre des composants déjà positionnés (c'est le cas pour les dispositions de colonnes horizontales et verticales):
Par conséquent, les contenus sont placés (horizontalement), les uns à côté des autres.
Remarque: Si vous ajoutez des composants Texte horizontalement, vous pouvez adapter la largeur de l'élément de texte dans la fenêtre Propriétés. Par défaut, la largeur est définie sur 100px.
Comportement mobile
Si votre e-mail doit s'afficher sur des appareils mobiles, vous devez préciser comment le contenu de la colonne devra s'afficher: horizontalement ou verticalement.
Exemple: Si vous sélectionnez cette option, le contenu d'un e-mail comprenant trois images horizontales s'affichera verticalement.
Remarque: Vous pouvez ajouter au maximum 10 composants de contenu au sein d'une seule et même colonne.
Remarque technique:
Lorsque vous ajoutez des composants horizontalement dans une colonne, ce sont les options d'alignement de la colonne qui s'appliquent, et non celles du composant. De manière plus spécifique, l'alignement des boutons défini dans le style global sera également écrasé. Lorqu'une largeur fixe est définie pour les composants, elle s'applique dans la colonne. Les composants dont la largeur est de 100% seront divisés de manière égale dans l'espace restant.
Éditer des composants de contenu
Passez la souris sur un composant pour accéder aux opérations suivantes:
— Supprimer le composant
— Accéder à la fenêtre Propriétés du composant
— Déplacer le composant vers son nouvel emplacement
Cliquez avec le bouton droit sur un composant de contenu pour accéder aux éléments suivants :
- Éditer la contrainte de visibilité — Permet de définir une contrainte sur le composant. La boîte de dialogue Contrainte de visibilité s'affiche.
- Copier/coller/effacer — Permet de modifier la contrainte de visibilité
- Dupliquer l'élément — Permet de créer une copie du composant juste en dessous du composant sélectionné. Si une contrainte de visibilité est définie pour le composant, elle est également disponible dans le doublon.
- Supprimer — Permet de supprimer l'élément.
- Verrouiller/Déverrouiller l'élément — Permet de verrouiller ou déverrouiller le composant pour permettre ou non son édition par l'utilisateur qui crée un journey à l'aide de ce template. Cette option concerne uniquement les templates et non les messages.
- Afficher sur — Permet de sélectionner les appareils sur lesquels le composant doit s'afficher: tous les appareils, mobile ou PC.
- Copier le contenu vers d'autres langues — Copier le contenu du composant dans d'autres langues. (uniquement si d'autres langues ont été sélectionnées pour votre environnement)
Exemple:
Ajoutons les composants suivants à notre conception:
* Dans l'en-tête, ajoutez une image du logo Parana, un texte pour la date d'édition et les points d'entrée du site Web.
* Dans le corps, ajoutez un texte pour l'introduction et un Répéteur contenant les éléments de cette lettre d'informations.
* Dans le pied de page, ajoutez le lien de désabonnement Parana et une image pour les méthodes de paiement autorisées.
Le résultat se présente comme suit:
