Editer les styles
L'aspect de vos campagnes joue un rôle clé dans la manière dont elles sont perçues par votre audience. Pour vous aider à rester fidèle à votre image de marque et à créer des emails attrayants, l'éditeur Actito vous permet de personnaliser facilement le style de vos modules, boutons et même le design global du template.
De la définition des couleurs et des marges à la modification des bordures et à l'affinage des boutons "Call to action", vous pouvez modifier chaque détail directement dans l'éditeur (sans aucun code). Et si vous souhaitez une uniformisation, les paramètres de style globaux vous permettent d'appliquer des modifications à l'ensemble de votre email en quelques clics seulement.
Certaines options présentées ci-dessous, telles que les styles de boutons, sont disponibles par défaut dans les templates standards et modules de la librairie de modules qui contiennent des boutons "Call to actions".
Si vous souhaitez bénéficier de ces fonctionnalités pour vos templates personnalisés, nous vous invitons à contacter votre gestionnaire de compte.
L'éditeur e-mail vous permet de personnaliser les styles de votre e-mail à trois niveaux :
-
Styles globaux : vous permettent de définir l'apparence générale de l'e-mail. Les options définies ici s’appliquent par défaut à l’ensemble du template.
-
Styles des modules standards : vous permettent de définir le style d'un module en particulier, sans que ces changements ne s'appliquent à l'ensemble du template.
-
Styles des modules dynamiques : comme pour les modules standards, ils vous permettent de définir le style d'un module en particulier. Toutefois, ces modules vous offrent des options supplémentaires telles que visibilité conditionnelle (desktop / mobile), effets de survol, variations de style selon le contenu...
Éditer les styles globaux
L'onglet "Styles globaux" vous permet de définir les styles de design généraux qui s'appliquent à tous les modules de votre e-mail, vous garantissant ainsi une apparence uniformisée pour l'ensemble de votre campagne.
Par défaut, tous les modules prendront la valeur définie dans les styles globaux, mais vous pouvez toujours personnaliser individuellement des modules spécifiques afin d'adapter leur apparence selon vos besoins. Dans ce cas, la case "Utiliser la valeur globale du template" sera automatiquement décochée. Il suffit de la recocher pour rétablir les paramètres initiaux (ou définis dans l'onglet des styles globaux).
Pour la plupart des paramètres, vous pouvez appliquer différents styles selon que votre e-mail soit destiné à la version web ou mobile
Couleurs du template
Ceci vous permet d'enregistrer des couleurs à utiliser dans votre e-mail. C'est très pratique si votre organisation utilise certaines nuances de couleur spécifique dans sa charte graphique (pas besoin de retenir le code RGB). En les définissant une fois dans les couleurs du templates, ces couleurs seront disponibles dans chaque picker de couleur de l'e-mail.
Styles du module
Cela permet de définir les couleurs (d'arrière-plan global et du contenu de module) ainsi que l'espacement et les bordures de manière uniforme ou spécifique pour chaque bord.
Les couleurs définies ici sont appliquées à l'ensemble de l'e-mail, donc la couleur d'arrière-plan correspond à la "couleur de ligne" pour tous les modules.
Styles de texte
Cela permet de définir des styles de texte applicables à l'ensemble de votre template. Par défaut, 3 styles de titre, 1 style pour les paragraphes et 1 style pour les liens.
Pour chaque style, vous avez la possibilité de paramétrer :
- la couleur du texte
- sa taille en pixels
- la police du texte, parmi une liste étendue de polices pré-sélectionnées compatibles avec les différents moteurs e-mails. Si vous bénéficiez d'un template personnalisé, d'autres polices peuvent être disponibles.
- le style de police (gras, italique, souligné, barré)
- l'alignement (gauche, centré, droite ou justifié)
Les intitulés des styles sont une suggestion sur leur usage, mais si vous avez besoin de deux polices différentes pour votre corps de texte, rien ne vous empêche d'utiliser le style "Heading 3" à cet effet, par exemple.
En effet, vous pouvez directement changer le style d'un morceau de texte dans le corps du template, ou en appliquez un s'il n'a pas de style par défaut.
Styles de bouton
Ceci vous permet de modifier les styles de tous les boutons "call to action" de votre e-mail à la fois.
Vous pourrez définir :
- la couleur d'arrière-plan
- un style de texte
- les spécificités des bordures (si vous en incluez)
Dans tous les modules contenant des boutons de type "call to action", vous avez également la possibilité de customiser leur apparence individuellement.
Cliquez sur l'icône de droite pour y accéder.
Arrière-plan
Ceci vous permet de modifier la couleur de fond principale du bouton, en utilisant le picker de couleur identique à celui utilisé dans la gestion des styles du module.
Texte
Cela permet de modifier le style du texte du bouton, c'est-à-dire sa police, la couleur et la taille du texte, ainsi que les différents effets de styles.
Bordure
Deux paramètres importants sont définis dans cet encadré :
-
Le rayon de bordure permet de définir l'arrondi des coins du bouton. En le définissant à 0 pixel, le bouton aura des angles droits. En augmentant ce rayon, vous arrondirez les coins du bouton, pour obtenir un bouton plus ou moins ovale selon la valeur choisie.
-
Le style de bordure permet de définir le contour du bouton, ce qui comprend la couleur du contour, son épaisseur et le style de trait. Cela vous permet d'afficher des boutons avec un contour différent du de l'arrière-plan du bouton. Si vous voulez un bouton uniforme, gardez la couleur de la bordure identique à celle de l'arrière-plan, ou définissez une bordure de 0 pixel.
Exemple de bouton arrondi avec une bordure :
Éditer les styles d'un module (standard ou dynamique)
Pour aller plus loin dans la customisation de votre e-mail, vous avez la possibilité d'éditer de nombreux paramètres de style pour chaque module en particulier.
Pour ce faire, cliquez sur le bouton "Éditer le style" qui est affiché dans le coin supérieur droit des chaque module individuel.
Ce bouton ouvrira l'éditeur des styles sur la gauche de l'écran :
Depuis cet éditeur, vous pourrez définir :
- Les couleurs d'arrière-plan
- L'espacement
- Les bordures
Couleur d'arrière plan
Vous pourrez éditer :
-
La couleur de la ligne : il s'agit de la couleur d'arrière plan de l'e-mail, qui est affichée de chaque côté du corps de l'e-mail. Ce bouton ne permet que de modifier la couleur de la fraction de l'arrière-plan directement adjacente au module édité. Pour changer la couleur de tout l'arrière-plan à la fois, il est nécessaire de se rendre dans les styles globaux.
-
La couleur du contenu : ceci vous permet de modifier la couleur de remplissage du bloc en lui-même.
Le picker de couleur vous permet de sélectionner la couleur directement dans une palette, ou de renseigner un code au format hexadécimal ou RGB. Les dernières couleurs utilisées ainsi que les couleurs du template sont gardées en mémoire.
Espacement
L'espacement d'un bloc vous permet de régler l'alignement du contenu d'un bloc par rapport à l'arrière-plan et aux autres modules, c'est-à-dire à quel point le contenu est centré par rapport aux contours du bloc.
Ceci est particulièrement visible pour les images, par exemple.
L'espacement à gauche et à droite va rajouter une marge sur les côtés, avec la "couleur du contenu". Souvent, on préférera aligner l'image au centre en définissant le même espace des deux côtés, mais ils peuvent être définis indépendamment.
L'espacement en haut et en bas permet de rajouter une marge de la "couleur du contenu" entre le contenu du module et le bloc précédent/suivant.
L'espacement maximum est de 200 pixels.
Bordure
L'éditeur des styles du module vous permet également de paramétrer une bordure autour du bloc (pour encadrer une image ou un morceau de texte, par exemple).
Vous avez la possibilité de paramétrer :
- La couleur de la bordure
- Son épaisseur (en pixels)
- Son style (simple, pointillé, double...)
Pour encore plus de customisation, vous pouvez activer le bouton "Plus d'options" pour avoir la possibilité de définir un style de bordure spécifique pour chaque côté du bloc.
Vos modifications seront sauvegardées lorsque vous cliquez sur le bouton "Sauver" en bas ou si vous cliquez dans l'éditeur.
Les options d'espacement et de bordure nécessitent que le bloc aient été codé spécifiquement. Elles peuvent ne pas être disponibles dans certains modules aux designs plus simples ou dans des templates personnalisés réalisés avant la sortie de ces fonctionnalités. Veuillez contacter votre gestionnaire de compte si vous désirez une mise à jour de votre template personnalisé.
Spécificités des modules dynamiques
Les modules dynamiques vous permettent une plus grande flexibilité dans la customisation de vos e-mails.
Avec ces modules, vous pouvez :
- Editer la structure du module en y ajoutant les éléments que vous souhaitez (Zone de texte, Titre, Bouton "Call to action", Image, Social, Evaluation)
- Définir un style spécifique pour la version web ou mobile.
- Choisir les éléments à afficher selon la version (web ou mobile).
- Appliquer facilement l'identité visuelle de votre marque à l'ensemble de l'e-mail.
Style de texte et titre
Lorsque que vous ajoutez un élément de texte ou titre dans un module dynamique, vous pourrez en éditer le style.
Pour ce faire, cliquez à un endroit dans votre texte.
Un menu spécifique s'ouvrira dans le panneau lateral de gauche, vous permettant de définir :
- Les styles de texte
- Des options de bloc
Text styles
Depuis ce menu, vous pourrez définir les options de mise en forme du texte de votre contenu et choisir l'alignement et l'espacement qui conviennent le mieux à votre design.
Vous trouverez des options de paramètres pour :
- Le style de texte: Titre 1, titre 2 ou paragraphe tels qu'ils sont définis dans le menu de "Styles globaux". Veuillez noter que pour le style de texte, il n'est pas possible de définir deux styles différents pour la version web et mobile
- L'alignement : à gauche, centré, à droite ou justifié
- La hauteur de ligne : compact (1), normal, confortable (1.5) ou spacieuse (2)
Pour des raisons d'accessibilité, nous vous recommandons d'utiliser l'alignement à gauche.
Options de bloc
Ce menu vous permet de définir un espacement pour les côtés de votre texte et de choisir de masquer ou non votre texte pour l'une ou l'autre version.
Avec la fonction "Plus d'options", vous aurez la possibilité d'appliquer un espacement différent pour chaque côté.
Si cette fonction est désactivée, l'espacement que vous définissez sera appliqué à chacun des côtés (gauche, droit, bas et haut).
Style de boutons
Lorsque vous ajoutez un bouton dans un module dynamique, vous pouvez éditez le style du bouton.
Comme pour les autres modules, rendez-vous dans l'éditeur de style du bouton.
Depuis ce menu vous pourrez changer différents paramètres : la couleur d'arrière-plan, la taille du texte, … comme pour les boutons des modules standards.
En plus des options de styles classiques, une série d'options supplémentaires, spécifiques au modules dynamiques, s'offrent à vous :
- La taille
- L'espacement
- Le survol
- Et des options de positionnement
La taille
Vous pouvez choisir de garder la largeur automatique ou choisir une taille spécifique. Lorsque vous cochez l'option, une menu spécifique s'affichera vous permettant de choisir la taille de votre bouton.
Le pourcentage choisi correspond au pourcentage que le bouton occupe par rapport à la largeur du module.
Pour les modules multi-colonnes, le pourcentage défini, correspond au pourcentage occupé sur la largeur de la colonne.
L'espacement
Vous pouvez choisir de définir l'espacement global du bouton, par rapport à tous les côté. Cet espacement se définit en pixel.
Si vous souhaitez définir un espacement spécifique pour chaque côté du bouton, veillez à cocher "Plus d'options".
Un menu s'affichera vous permettant de définir un espacement spécifique pour chaque côté du bouton.
Le survol
afin de mettre en avant votre bouton "call to action", vous pouvez définir des options de comportement de survol et choisir d'activer ou non la fonctionnalité.
Vous pouvez définir une couleur, police et un style de police particulier pour le survol.
Les options de survol ne sont pas supportés en version mobile et ne sont pas non plus supportés par tous les services de messagerie, notamment Outlook. Cela signifie que les profils sur mobile ou dont le gestionnaire email ne supporte les designs de survol, verront le bouton standard en passant leur souris dessus.
Survoler un bouton dans l'éditeur email vous donne accès aux différents menus d'actions disponibles pour ce bouton. Pour voir le rendu des options de survol définies, quittez l'éditeur e-mail :
Options de bloc
Vous pouvez également modifier l'alignement et l'espacement de votre bouton dans le bloc et choisir de le cacher ou non pour l'une ou l'autre version.
Style d'une image
Lorsque vous ajoutez une image dans un module dynamique, vous pouvez éditer son style.
Pour ce faire, cliquez sur "Editer les styles de l'image".
Depuis ce menu, vous pourrez définir différents paramètres pour votre image :
- La taille
- La bordure
- Et des options de bloc
Styles de l'image
Depuis cet onglet, vous pouvez définir:
- Taille : vous permet de garder la largeur automatique ou choisir une taille spécifique. Le pourcentage choisi correspond au pourcentage que l'image occupe par rapport à la largeur du module.
Pour les modules multi-colonnes, le pourcentage défini, correspond au pourcentage occupé sur la largeur de la colonne.
- Bordure: vous permet de définir le rayon de bordure de votre image, qui correspond à l'arrondi des coins de votre image. En le définissant à 0 pixel, votre image aura des angles droits. En augmentant ce rayon, vous arrondirez les coins de votre image, pour obtenir un rendu plus ou moins arrondi selon la valeur choisie.
Veuillez noter que Outlook ne supporte pas tous les styles des bordures dans les e-mails. Si vous appliquez des styles de bordures (boutons et images) dans votre campagne, le message peut ne pas apparaître comme attendu pour les profils qui le lisent dans Outlook.
Les options de bloc
Vous pouvez également modifier l'alignement et l'espacement de votre image dans le bloc et choisir de la cacher ou non pour l'une ou l'autre version.
Style d'évaluation et social
Lorsque vous ajoutez un élément social ou évaluation dans un module dynamique, vous pouvez éditer son style.
Pour ce faire, cliquez sur l'icône "Editer les styles".
Depuis le menu, vous pouvez définir l'alignement et l'espacement de vos éléments dans le module dynamique ainsi que choisir de les cacher ou non pour l'une ou l'autre version.
Définir des styles selon la version (mobile ou web)
L'éditeur vous permet également d'appliquer des paramètres de styles différents selon la version web ou mobile de votre email.
Vous pouvez facilement identifier les paramètres pour lesquels il est possible de définir des styles différents selon les versions, grâce à la présence d'une icône ("ordinateur" pour la version web ou l'icône "mobile" pour la version mobile) présente à côté du paramètre.
Pour définir des options différentes pour la version mobile, rendez-vous simplement sur la version mobile de l'éditeur et définissez les options que vous souhaitez lui donner.
Une petite popup "Mobile" apparaitra à côté de chacun des menus, pour vous indiquer que les options définies s'applique à la version mobile.
Adapter votre design à chaque appareil n'est pas seulement une question de style, il s'agit également d'accessibilité et de lisibilité. Une taille de police ou un contraste de couleurs parfait sur un écran d'ordinateur peut être plus difficile à lire sur mobile, et vice-versa. Définir des styles différents pour les deux versions vous permet de créer une expérience optimale pour chaque écran.
Si vous souhaitez garder le même design pour les deux versions, il vous suffit de cliquer sur la croix à côté de "Version mobile" pour appliquer le même style à tous les appareils.
Version mobile et Web pour les modules dynamiques
Pour les modules dynamiques, vous avez également la possibilité de masquer certains éléments pour la version Web ou mobile
Si vous choisissez de cacher certains éléments, vous pouvez voir le rendu de chaque version avec les images cachées en cliquant sur l'option "Afficher les éléments cachés"
Vous verrez alors que les éléments cachés de la version dans laquelle vous travaillez, sont grisés.
Lorsque vous passez votre souris sur un élément grisé, un cadre bleu apparait pour vous indiquer la version pour laquelle l'image est cachée.
Si vous souhaitez voir le rendu final de vos versions, sans les éléments cachés, cliquez simplement sur l'option "Ne pas afficher les éléments cachés".
Limitations Outlook
Outlook est la messagerie d'entreprise par excellence. Si elle est moins présente dans un contexte B2C, la compatibilité avec Outlook n'en reste pas moins un enjeu (et challenge) important de la conception de vos e-mails.
De tout le marché, Outlook est la messagerie offrant le moins de compatibilité avec les fonctionnalité modernes du monde de l'e-mail. En effet, le moteur de cette messagerie est basé sur un autre logiciel de traitement de texte bien connu de Microsoft : Word.
Cela implique des contraintes et des limitations sur ce qui est possible dans les différentes modifications de style (sans qu'elles soient liées à l'éditeur Actito, mais bien aux fonctionnalités compatibles avec Outlook).
Polices
Toutes les polices disponibles sont des polices dites "web safe", c'est-à-dire qu'elles sont pré-installées sur tous les systèmes d'exploitation. Les polices dites "google fonts" proposent plus de possibilités mais aussi une bien moins grande compatibilité, si bien qu'elles nécessitent toujours une police de remplacement. Elles ne sont pas disponibles par défaut dans l'éditeur mais uniquement sur demande dans les templates personnalisés.
Boutons
Si un bouton est laissé sans lien, Outlook va casser l’affichage comme si le texte collait aux bords.
Les rayons de bordure (coins arrondis) ne sont pas toujours pris en charge.
Les boutons avec deux lignes de texte pourraient afficher un "double-bouton" (le bouton double de volume en hauteur).
Bordures/Espacement
L'affichage des bordures en bas et les bordures à droites peut causer des problèmes d'affichage : pas d'affichage pour une bordure de 1 pixel, affichage de moitié (1 pixel) pour une bordure de 2 pixels, etc.
Il en va de même pour les bordures des boutons.