Avec le nouveau constructeur d’emails, tu peux créer de magnifiques emails brandés directement depuis le back-office, sans outil externe ni compétences techniques !
Premiers pas
Pour commencer, rends-toi dans Animation > Community emails > + Create new email.
En choisissant Build from scratch, tu entreras dans un éditeur en glisser-déposer où tu pourras librement concevoir ton email à l’aide de blocs et de mises en page prédéfinies. Voici à quoi cela ressemble :
Si tu choisis Build from existing file, tu ne pourras importer que du HTML ou utiliser un éditeur standard.
Commence par remplir l'objet de l'e-mail. Attention, celle-ci ne doit pas ressembler à un spam. Évite les majuscules excessives, les mots qui déclenchent les filtres anti-spam (ex : "gratuit") et les points d'exclamation. Sois clair et précis quant au contenu de l'e-mail.
Style global
Pour modifier l’apparence globale de ton email :
- Clique sur l’icône croix violette
en haut à gauche pour ouvrir Layers.
- Puis sélectionne la section Body dans le panneau affiché à gauche de l’éditeur.
- Tu peux personnaliser la largeur générale de l’email et sa couleur d’arrière-plan.
- Dans le panneau à gauche de l’éditeur, tu peux aussi sélectionner des éléments individuels de ton email pour personnaliser leur apparence ou les réorganiser.
Blocs Layout
Dans Blocks > Layout, dans le menu à gauche de l’éditeur visuel, tu peux directement configurer la mise en page en colonnes de l’email. Plusieurs types sont disponibles (nombre de colonnes, répartition des tailles).
Pour les insérer, clique sur la mise en page souhaitée et fais-la glisser à l’endroit voulu dans l’email.
Tous les blocs de contenu ci-dessous doivent être glissés dans un Layout (sauf Hero et HTML, qui sont expliqués plus bas dans l'article).
Blocs Content
Avant d'ajouter des blocs de contenu à l'email, il est important de savoir que le header et le footer de la communauté sont automatiquement ajoutés aux Community Emails. Tu construis donc le corps de l'email.
Clique sur chaque type d’élément personnalisable pour en savoir plus :
Ajoute n’importe quel contenu textuel à ton email. Pour ajouter ou modifier un bloc de texte :
- Glisse un bloc Text à l’endroit souhaité dans ton email.
- Clique sur le texte dans l’éditeur visuel pour écrire ton message.
- Utilise le panneau de droite Properties pour modifier la taille et l’espacement de l’élément, ainsi que la typographie (police, taille, couleur, etc.) et les décorations (couleur d’arrière-plan).
Quelles sont les spécifications à connaître ?
- Il est préférable de laisser par défaut auto dans Properties > Size (panneau à droite de l’éditeur visuel) pour ne pas risquer de “couper" le bloc de texte.
- Il n’est pas possible d’importer une police.
- Pour garantir que ton texte soit lisible selon les couleurs que tu choisis, tu peux vérifier le taux de contraste sur ce site (normes WCAG / RGAA).
Exemple :
Encourage l’action avec un call-to-action (CTA) clair et cliquable. Pour ajouter ou modifier un bouton :
- Glisse un bloc Button à l’endroit souhaité dans ton email.
- Modifie le texte du bouton dans l’éditeur visuel pour ajouter ton CTA.
- Ajoute un lien de redirection en haut du panneau Properties.
- Utilise le panneau de droite Properties pour modifier la typographie (police, taille, couleur, alignement), les bordures (rayon, largeur, style, couleur) et les décorations (couleur d’arrière-plan du bouton et de l’élément).
Quelles sont les spécifications à connaître ?
- Pour une lisibilité optimale, il est préférable de laisser la largeur et la hauteur du bouton en auto (Properties > Size).
- Le premier champ de couleur d’arrière-plan est pour le bouton, et le second pour l’élément complet.
Exemple :
Améliore visuellement ton email ou renforce ton identité de marque. Pour ajouter ou modifier une image :
- Glisse un bloc Image à l’endroit souhaité dans ton email.
- Choisis une image déjà chargée dans le back-office ou sélectionne-en une nouvelle.
- Ajuste la taille et le style dans le panneau Properties (lien, taille, alignement, bordures, couleur de fond).
Quelles sont les spécifications à connaître ?
- Le champ Alt (panneau Properties) te permet d’ajouter une description, utile en cas de connexion lente ou pour améliorer l’accessibilité (lecteurs d’écran).
- Dans Properties > Size, la largeur et la hauteur sont réglées sur auto par défaut. Utilise la taille en % pour que l’image occupe 100% du bloc et s’adapte automatiquement à l'appareil de l’utilisateur, c’est une bonne pratique responsive. Si tu dois modifier les réglages de largeur ou hauteur, ne modifie qu’un seul des deux pour éviter de déformer l’image.
Exemple :
&
Structure visuellement ton e-mail, sépare les sections et crée des espacements. Un Divider est une ligne horizontale utilisée pour séparer les blocs, tandis qu'un Spacer ajoute un espace vide vertical entre les blocs. Pour les ajouter ou modifier :
- Glisse un bloc Divider ou Spacer dans ton email.
- Dans le panneau à droite Properties, choisis l'épaisseur, la longueur, la couleur et l'alignement du Divider, définis la hauteur et la couleur d'arrière-plan facultative du Spacer.
Exemple de Divider :
Exemple de Spacer:
&
Connecte facilement les liens vers les réseaux sociaux de la marque à ton email. Utilise le bloc Social comme conteneur, puis ajoute des Social Element (icône + texte facultatif). Pour les ajouter ou modifier :
- Glisse le bloc Social à l'endroit souhaité dans ton email.
- Ensuite, glisse un bloc Social Element à l'intérieur si tu as besoin de + de 3 liens.
- Pour chaque réseau, ajoute les liens, icônes et textes dans le panneau Properties.
Quelles sont les spécifications à connaître ?
- Le texte facultatif accompagnant l'icône est ajouté dans Properties > Content.
- Assurez-vous que toutes vos icônes ont des liens corrects.
Exemple :
Ajoute un menu de navigation. Cela peut être utile si tu veux permettre aux membres d'accéder à des parties de la communauté ou des liens externes directement à partir de l'email. Pour l'ajouter ou le modifier :
- Glisse le bloc Navbar à l’endroit souhaité dans ton email.
- Pour chaque section, définis le lien (href), les paramètres de remplissage et de typographie dans le panneau Properties.
Quelles sont les spécifications à connaître ?
- Sur les appareils mobiles, la barre de navigation peut s'afficher de manière incorrecte ou apparaître à la verticale : les éléments doivent être courts et clairs, tu peux aussi activer l'option Hamburger dans les propriétés en cliquant directement sur la section Navbar.
Exemple :
Attire l'attention avec une combinaison visuelle et un message percutants, parfaits pour l'en-tête de l'e-mail. Cela permet de gagner du temps pour avoir une mise en forme rapide. Pour l'ajouter ou le modifier :
- Glisse le bloc Hero à l'endroit souhaité dans ton email.
- Personnalise chaque section du bloc Hero (image, logo, titre, texte, CTA, couleur ou image d'arrière-plan) dans le panneau Properties.
Quelles sont les spécifications à connaître ?
- Ajoute un arrière-plan coloré au texte s'il n'est pas suffisamment visible sur l'image.
- Le texte doit être court et dynamique de préférence, afin de capter l'attention des lecteurs dès les premières secondes.
Exemple :
Insére des extraits de code avancés et personnalisés en HTML pour intégrer des éléments externes. Pour les ajouter ou les modifier :
- Fais glisser un bloc HTML à l'emplacement souhaité dans l'e-mail.
- Colle le code HTML préparé à l'aide de l'icône Code
.
Quelles sont les spécifications à connaître ?
- Vérifiez l'affichage visuel de votre code HTML.
Exemple :
Aperçu, test et export
Aperçu : Une fois que tu as créé ton email, tu peux l’apercevoir de deux façons :
- Teste le rendu sur ordinateur ou mobile en utilisant le menu déroulant en haut de l’éditeur
- Fais défiler vers le bas dans le back office jusqu’à la section Email preview et clique sur l’icône ordinateur ou mobile
Test : Si le résultat te convient, tu peux maintenant tester l’email en cliquant sur “Test email” en bas de page dans le back office. Il sera envoyé à l’adresse email du compte ayant demandé le test.
Export : Tu peux aussi exporter le HTML de l’email pour garder une version (par exemple, un modèle global, ou avant de faire des modifications si tu veux conserver l’état actuel). Pour ça, clique sur l’icône Code puis sur les doubles carrés
pour copier le code HTML.
Programmation, destinataires et envoi
Une fois que ton email est rédigé et relu, il est temps de l’envoyer. Voici les dernières étapes à suivre :
-
Programme ton email
Choisis Send immediately ou Set date and time si tu veux planifier l’envoi.
Les emails programmés s’affichent dans Animation > Community emails > Scheduled. -
Choisis les destinataires
Clique sur Select recipients en bas de la page back office pour afficher le tableau de tri des utilisateurs.
Tu peux utiliser les champs souhaités et les filtrer pour mieux cibler ton audience. -
Envoie l’email
Quand tout est prêt, clique sur Send email to X members.
Il sera envoyé selon les réglages choisis : immédiatement ou plus tard, automatiquement par le système.
FAQ
Oui ! Tu peux enregistrer une colonne, un bloc ou un élément pour le réutiliser dans le même email. Voici comment faire :
- Clique sur l’élément que tu veux enregistrer.
- Clique sur les trois petits points verticaux ⁝.
- Sélectionne Create Symbol.
Tu retrouveras ensuite ton élément dans l’onglet Symbols (en haut de la colonne Blocs). Il suffit de le glisser-déposer dans ton email pour le réutiliser.
Oui, tous les blocs du builder sont responsive par défaut. Sur mobile, certains éléments (comme les barres de navigation ou les colonnes) se réorganisent automatiquement en pile verticale pour une meilleure lisibilité.
Pense à utiliser l’icône à droite de la section Preview email dans le back office.
Bien sûr. Survole le bloc voulu, puis clique sur le double carré Duplicate qui apparaît dans les options du bloc. Tu peux aussi le faire depuis le panneau Layers en haut à gauche.
Oui, totalement ! Voici comment faire :
- Crée un email (spécifiquement pour faire un template) ou choisis un e-mail que tu as déjà envoyé ou programmé.
- Clique sur les 3 points à droite, puis sur Use as a template (à partir des onglets Scheduled ou Sent).
Oui, mais attention : ça peut parfois ajouter des styles indésirables (polices, marges, couleurs, etc.). Le mieux est de rédiger directement dans le builder ou de coller en texte brut (Cmd+Maj+V | Ctrl+Maj+V).