Les textes

Le “Texte” est un élément de contenu, qui permet d’intégrer des textes dans un email et de les mettre en forme.

Intégrer un texte

Pour ajouter un texte à une section ou un groupe dans l’email, il vous suffit de glisser-déposer l'élément “Texte” que vous trouverez dans l'onglet “Éléments” du volet de conception.

Personnaliser un texte

La mise en forme de votre texte peut se faire de deux façons:

1. Via le “Wysiwyg”

Cet éditeur s'ouvre dès que vous sélectionnez du texte. Cette fonctionnalité vous permet d’appliquer une mise en forme différente sur une partie de votre texte. Vous avez accès à plusieurs options de personnalisation réparties dans plusieurs catégories :

  • Taille de police, qui permet de personnaliser la taille du texte sélectionné.
  •  Couleur de texte, qui permet de personnaliser la couleur du texte sélectionné.
  •  Gras, qui permet de mettre en gras le texte sélectionné.
  •  Italique, qui permet de mettre en italique le texte sélectionné.
  •  Souligner, qui permet de souligner le texte.
  •  Barrer, qui permet de barrer le texte sélectionné.
  •  Liens, ajouter un lien hypertexte qui permet une redirection vers une landing page au clic sur le texte sélectionné.
  •  Indice, permet d’appliquer un format d’indice sur le texte.
  •  Gomme, permet d'effacer la mise en forme appliquée.

2. Via l’onglet “Styles” du volet de conception

Cette méthode est à privilégier pour appliquer une mise en forme du texte sur l’ensemble de votre groupe ou section.

Lorsque vous sélectionnez un Texte et que vous accédez à l’onglet Styles du volet de conception, vous avez alors accès à plusieurs options de personnalisation réparties dans 10 catégories :

  • Conteneur
  • Police
  • Lien
  • Marges
  • Coins arrondis
  • Bordures
  • Alignement de l’élément
  • Etat au survol
  • Attributs HTML personnalisés
  • Contenu dynamique

Conteneur

Cette catégorie vous donne accès aux options suivantes :

  • Largeur, qui permet de personnaliser la largeur de l’élément  Texte en pixels ou en pourcents par rapport à la largeur de l’élément parent.
  • Hauteur, qui permet de personnaliser la hauteur de l’élément  Texte  en pixels.
  • Couleur de fond, qui permet de personnaliser la couleur de fond de l’élément  Texte.
  • Opacité, qui permet de personnaliser l’opacité de l’élément Texte.
  • Masqué sur tablette, qui permet de masquer l’élément  Texte en vue tablette.
  • Masqué sur mobile, qui permet de masquer l’élément Texte  en vue mobile.

Police

Cette catégorie vous permet de mettre en forme la police de votre texte ainsi que son alignement.

Liens

Dans cette catégorie, vous pouvez ajouter un lien de redirection sur le texte. Vous pouvez choisir d’ouvrir le lien dans une nouvelle fenêtre et de l’exclure du tracking.

Marges

Cette catégorie vous permet de jouer sur l’emplacement de l’élément texte au sein de l’élément parent pour le repositionner.

Elle permet de personnaliser les marges en haut, à droite, en bas et à gauche, à l’intérieur de l’élément Texte. Elles peuvent être définies en pixels ou en pourcents de la largeur de l’élément qui contient le Texte.

Coins arrondis

Vous pouvez ajouter des coins arrondis à vos éléments. Vous avez alors la possibilité de définir une valeur d'arrondi unique pour les 4 coins de l’élément ou 1 valeur distincte pour chaque coin. Et ainsi, d’essayer de nouvelles pistes créatives.

Pour plus d’informations sur le fonctionnement des Coins arrondis, vous pouvez vous référer à l’article : Adapter les coins arrondis et les bordures d'un élément

Bordures

Vous pouvez ajouter des bordures autour de l’élément texte. Vous avez alors la possibilité de définir l'épaisseur, la couleur et le type de tracé de manière unique pour les 4 bordures à travers le champ de saisie "Toutes", ou de manière distincte pour chaque bordure à travers les champs : haut, droite, bas, et gauche.

Pour plus d’informations sur le fonctionnement des Bordures, vous pouvez vous référer à l’article : Adapter les coins arrondis et les bordures d'un élément

Alignement de l’élément

Cette catégorie vous permet de modifier l’alignement du texte à travers 3 valeurs : Gauche, Centré ou Droite.

État au survol

Pour plus d’information sur le fonctionnement de l’État au survol, vous pouvez vous référer à l’article : Personnaliser les états au survol

Attributs HTML personnalisés

Pour plus d’informations sur le fonctionnement des attributs HTML personnalisés, vous pouvez vous référer à l’article : Ajouter des attributs HTML personnalisés

Contenu dynamique

Il existe un article expliquant le fonctionnement du contenu dynamique.

Bonnes pratiques pour la mise en forme du texte

Afin d’assurer une lisibilité optimale à votre email (notamment sur mobile), nous vous recommandons de respecter ces quelques règles :

  • Taille de police : 14 à 16 px au minimum pour un texte courant (vous pouvez descendre jusqu’à 12 px pour certains textes courts, pas des paragraphes) 
  • Hauteur de ligne : au minimum, votre taille de police + 2 px. Nous recommandons généralement entre +6 px et + 8 px. Attention : ne descendez pas en dessous de la hauteur de police. 
  • Interlettrage : pensez l’espace entre vos caractères pour une bonne aération de vos paragraphes. L’interlettrage ne peut pas être négatif.

Utiliser deux tailles de polices différentes dans un même paragraphe

Pour cela, vous devez utiliser le Wysiwyg en plus de la taille à renseigner dans les paramètres du panneau de gauche.

Pour obtenir un affichage optimal, nous vous conseillons de :

  1. Renseigner la taille maximale du texte dans le panneau de gauche : cette taille va s'appliquer à l'ensemble de l'élément texte sélectionné.
  2. Sélectionner les phrases, les mots et ou les lettres que vous souhaitez modifier (là où la ou les tailles doivent êtres inférieures)
  3. Renseigner la taille dans le Wysiwyg

Utiliser les polices personnalisées dans le Designer

L’Email Builder vous permet d’utiliser des polices qui vous sont spécifiques. Gardez à l’idée toutefois qu’elles ne pourront s’afficher dans toutes les configurations, et donc à définir un fallback (police de substitution).

Utiliser les & avec Adobe Campaign

Pour forcer l'encodage du caractère "&" il suffit de le précéder d'un backslash. Vous pouvez écrire directement le backslash suivi du "&" dans un élément texte : \&.

Exemple : CLICK \& COLLECT

Voici le raccourci clavier à utiliser pour faire un backslash :

  • Sur Mac - Option + Shift + :
  • Sur PC - Alt Gr + 8