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 blocs 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 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.
Si vous souhaitez garder les mêmes options pour la version web et mobile, cliquez simplement sur la croix de la popup.
Éditer les styles d'un module
Pour customiser votre e-mail, vous avez la possibilité de modifier de nombreux paramètres du module, comme certaines couleurs, ou mettre en place des bordures Pour ce faire, cliquez sur le pictogramme "Éditer les styles" 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 :
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 (voir la section "Éditer les styles globaux" par après).
-
La couleur du contenu : ceci vous permet de modifier la couleur de remplissage du bloc en lui-même.
Par défaut les couleurs initiales du template sont utilisées. Celles-ci sont paramétrées dans les styles globaux (voir la section "Éditer les styles globaux" par après). Si vous customisez la couleur d'un bloc, la case "Utiliser la valeur globale du template" sera automatiquement décochée. Il suffit de la recocher pour rétablir la couleur initiale.
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 blocs, 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 blocs 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é.
Éditer les styles de bouton
Dans tous les blocs contenant des boutons de type "call to action", vous avez également la possibilité de customiser l'apparence de ceux-ci. Cette option n'est pas définie dans les styles du module, mais directement sur chaque bouton du bloc.
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, comme mettre le texte en gras ou en italique.
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 fond du bouton. Si vous voulez un bouton uniforme, gardez la couleur de la bordure identique à celle du fond, ou sélectionnez le style "Aucune bordure".
Exemple de bouton arrondi avec une bordure :
Par défaut, tous les bouton prennent la valeur définie dans les styles globaux de l'email.
Si vous modifiez un paramètre, la case "Utiliser la valeur globale du template" sera automatiquement décochée. Il suffit de la recocher pour rétablir la valeur initiale.
Pour modifier les styles globaux, et donc définir le style de tous vos boutons d'un coup, veuillez vous référer à la section suivante.
Éditer les styles globaux
Cliquez sur "Styles Globaux" à côté de la librairie de modules pour appliquer des paramètres de style à la totalité de l'e-mail.
Les styles de chaque module/bouton restent modifiable individuellement, mais ils prendront par défaut la valeur définie dans les styles globaux.
Couleurs du template
Ceci vous permet d'enregistrer des couleurs à utiliser dans l'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 par coeur le code RGB de telle nuance de bleu, en la définissant une fois dans les couleurs du templates, elle sera disponible 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 bloc) ainsi que les espacements de manière uniforme (voir "Éditer les styles d'un module" ci-dessus pour plus de détails).
La différence ici est que ces couleurs 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 également 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, 1 style dit "en ligne" (permettant de modifier le style d'un fragment de texte en particulier sans modifier tout le style du paragraphe), 1 style pour les liens et 1 style pour les boutons sont disponibles. Si vous utilisez un template de design personnalisé, d'autres styles peuvent être disponibles.
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.
Les intitulés des styles sont une suggestion sur leur usage, mais si vous avez besoin de 2 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 bouton
Ceci vous permet de modifier les styles de tous les boutons "call to action" de votre e-mail à la fois (voir "Éditer les styles de bouton" ci-dessus pour plus de détails).
Lorsque vous customisez le style d'un module ou d'un bouton individuel, vous avez toujours la possibilité de revenir en un clic aux styles globaux du template en recochant la case "Utiliser la valeur globale du template".
Editer le style des modules dynamique
Editer le 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.
Un menu spécifique au style du bouton, s'ouvrira alors dans l'onglet de gauche.
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 fixes.
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
Pour plusieurs options vous avez également la possibilité d'appliquer vos modifications à la version web uniquement, ou appliquer les mêmes modifications pour la version web et mobile.
Les options pour lesquelles il est possible d'appliquer des modifications différentes pour la version web ou mobile sont facilement identifiables via une icône web ou mobile qui change selon la version dans laquelle vous éditez.
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 blocs 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
Vous pouvez définir des options de comportement de survol pour votre bouton et choisir d'activer ou non la fonctionnalité.
Cette option vous permet de mettre en avant votre bouton lorsque l'un de vos profils survolera celui-ci avec sa souris.
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 :
Les options de positionnement
Vous pouvez également modifier l'alignement de votre bouton dans le bloc et choisir de le cacher ou non pour l'une ou l'autre version.
Là aussi, vous pouvez définir des options différentes selon la version web ou mobile.
Si vous choisissez de cacher certains éléments pour l'une ou l'autre version, vous pouvez voir le rendu de chaque version avec les boutons cachés 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 le bouton est caché.
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".
Editer le 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".
Un menu spécifique au style de l'image, s'ouvrira alors dans l'onglet de gauche.
Depuis ce menu, vous pourrez définir différents paramètres pour votre image :
- La taille
- La bordure
- Et des options de bloc
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 image.
Le pourcentage choisi correspond au pourcentage que l'image occupe par rapport à la largeur du module.
Pour les blocs multi-colonnes, le pourcentage défini, correspond au pourcentage occupé sur la largeur de la colonne.
La bordure
Cette option vous permet de définir le rayon de bordure de votre image.
Le rayon de bordure permet de définir 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 de votre image dans le bloc et choisir de la cacher ou non pour l'une ou l'autre version.
Là aussi, vous pouvez définir des options différentes selon la version web ou mobile.
Si vous choisissez de cacher certains éléments pour l'une ou l'autre version, 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".
Editer le style de texte
Lorsque que vous ajoutez un bloc de texte 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).
Vous pouvez également choisir de cacher le bloc de texte pour la version web ou mobile.
Si vous choisissez de cacher certains éléments pour l'une ou l'autre version, 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.
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 important de la conception de vos e-mails.
Un enjeu, mais aussi un challenge, car de tous 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 bien connu de Microsoft, à savoir... Word, le traitement de texte.
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, y compris l'extension de la liste en été 2022, 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 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.