Mettre en forme les campagnes e-mail

Modifiez les polices, les couleurs, les marges intérieures et les autres paramètres de style de votre campagne pour qu’elle corresponde à votre site ou votre marque.

Dernière mise à jour le 5 décembre 2024

Chaque campagne e-mail est divisée en plusieurs champs. Bien que vous puissiez styliser la plupart des champs séparément, certains paramètres de style influent sur toute votre campagne. Cela crée un style homogène qui contribue à l'uniformité de l'image de marque.

Ces styles généraux sont appliqués dans l'intégralité de chaque campagne :

Vous pouvez appliquer automatiquement les paramètres de style de votre site web à votre campagne ou définir ces styles manuellement. Vous pouvez également enregistrer et réutiliser les couleurs pour n’importe quel élément, ou dupliquer une campagne pour réutiliser tous ses paramètres de style dans un nouveau brouillon.

Astuce

pour ajuster les styles généraux, cliquez à l’extérieur des sections (l’arrière-plan des e-mails).

Appliquer des styles de site web

Si vous souhaitez que votre campagne corresponde à l’esthétique de votre site web, vous pouvez insérer automatiquement le logo de votre site et appliquer des couleurs en fonction de la palette de couleurs de votre site. Pour ce faire :

  1. Lorsque vous modifiez le brouillon de votre campagne, cliquez sur Style dans le panneau de droite.
  2. Cliquez sur Un rendu similaire à celui de votre site en un clin d’œil. Si ce bouton n’apparaît pas, il se peut que les paramètres de style d’une section de contenu soient ouverts. Cliquez dans la zone située en dehors du brouillon de contenu pour afficher les styles généraux des e-mails.
  3. Pour insérer le logo de votre site, cliquez sur Insérer un logo. Cette option est désactivée si vous n’avez pas ajouté le logo de votre site.
  4. Pour modifier les couleurs de la campagne, cliquez sur l’un des thèmes de couleurs. Pour modifier ces thèmes, modifiez la palette de couleurs de votre site.

Une fois ces modifications effectuées, vous pouvez rétablir les paramètres précédents en cliquant sur la flèche Annuler. Pour supprimer le logo, cliquez sur le logo dans l’aperçu de votre campagne et sélectionnez Texte dans le panneau de droite.

Choisissez vos Polices de Caractères

Dans n'importe quel Champ, cliquez sur Ensemble de Polices de Caractères pour définir les Polices de Caractères pour tout le Texte d'une campagne.

Les ensembles de Polices de Caractères sont des combinaisons de Polices, soigneusement choisies par nos designers pour être agréables à regarder et aider vos Abonnés à se concentrer sur votre message. Parcourez les options pour trouver un ensemble de Polices de Caractères qui correspond au ton et au Contenu de votre campagne.

Il n'existe aucun moyen de modifier les Polices de Caractères d'un même ensemble. Nos ensemble de Polices sont choisies dans le but d'apparaître comme uniformes dans de nombreux clients de messagerie. La plupart des clients de messagerie mobile, par exemple, ne prennent pas en charge les Polices de Caractères utilisées sur le Web, et les remplacent par leurs propres Polices par défaut. Les Polices de Caractères de nos ensembles sont sélectionnées pour être compatibles au maximum, pour que vous soyez sûr que ce que vous voyez dans votre brouillon est aussi similaire que possible à ce que vos Abonnés verront dans leur Boîte de réception.

Si vous avez besoin d'une autre Police de Caractères à un endroit particulier, envisagez de l'ajouter en tant qu'Image, ou d'utiliser une couleur ou un certain type de formatage pour faire ressortir votre Texte.

Par exemple, dans la mise en page Bloom, « Bloom » est une image ajoutée à l'en-tête, et « extra special » (dans son propre champ Texte) est en rose et en italique pour qu'il puisse ressortir :

bloom.png

Définissez la taille de vos Textes

Dans n'importe quel Champ, cliquez sur Tailles de Polices de Caractères pour définir la taille de tout le Texte de votre campagne.

  • Utilisez le curseur Taille de la Police de Caractères de base pour choisir la taille du corps du Texte de votre campagne.
  • Utilisez le curseur Échelle de type pour définir le contraste de la taille du Texte. par exemple, si vous choisissez une échelle relativement petite, votre email aura l'air « plat » et les en-têtes auront l'air légèrement plus grands que le Texte du paragraphe. À l'inverse, une échelle plus grande aura pour effet de faire paraître vos En-têtes relativement plus grands.
font-size.png

Il existe cependant des exceptions. Le Texte de l'en-tête a ses propres paramètres de taille, et la taille des éléments suivants est actuellement fixe :

  • Texte des boutons
  • Titre des Articles et des produits
  • Dates des articles
  • Prix des produits
  • Texte du pied de page, y compris votre adresse et le lien de désabonnement

Modifiez vos couleurs

Lorsque vous cliquez sur un élément pour modifier sa couleur, par exemple l'arrière-plan d'un contenu ou la couleur d'un lien, deux options s'affichent, la Palette d'e-mails et la Palette du site. Elles contiennent des échantillons de couleurs correspondantes dans des cercles.

Palette d’e-mails

Les couleurs actuellement utilisées dans la campagne apparaissent dans l'outil Palette d'e-mails.

  • Pour utiliser une couleur existante, cliquez sur l’échantillon correspondant.
  • Pour ajouter une nouvelle couleur, cliquez dans le sélecteur de couleurs pour trouver la couleur souhaitée, puis cliquez sur + dans l’échantillon qui s’affiche.
  • Pour supprimer une couleur, cliquez sur l’échantillon, puis sur X dans l’échantillon.
adjust-colors.gif

Astuce

Si vous connaissez la valeur de la couleur que vous souhaitez utiliser, vous pouvez la saisir dans le champ Valeur. Vous pouvez ainsi copier les couleurs exactes utilisées dans d’autres paramètres de style. Le champ Valeur accepte les codes HEX et RVB.

color_code.jpg

Palette du site

Les couleurs utilisées dans les styles du site apparaissent dans l’outil Palette du site. Vous pouvez utiliser cette option pour vous assurer que vos campagnes correspondent au branding de votre site.

  • Pour utiliser une couleur de la Palette du site, cliquez sur l'échantillon. Cela l'ajoutera à votre Palette d'e-mails.
  • Il n'est pas possible de modifier ou de supprimer directement les couleurs de la Palette du site. Vous pouvez néanmoins, modifier les couleurs de votre site dans les styles du site.

J'ai supprimé un échantillon de couleur dans la Palette d'e-mails par erreur

Si cette couleur est utilisée dans une autre section, vous pouvez la rajouter à vos principaux échantillons de couleur. Par exemple, si vous supprimez un échantillon de couleur qui est également utilisé pour vos boutons dʼarticles de blog :

  1. Cliquez sur la section Article de blog.
  2. Cliquez sur Détails.
  3. Cliquez sur Couleur des boutons.
  4. Cliquez sur + dans lʼéchantillon correspondant à cette couleur et elle apparaîtra à nouveau dans dʼautres zones de style de couleur.

Si la couleur n’est utilisée nulle part dans votre campagne, il n’existe actuellement aucun moyen de la récupérer. Par mesure de précaution, vous pouvez écrire le code HEX des couleurs que vous utilisez au cas où vous supprimeriez accidentellement un échantillon.

Couleurs d’arrière-plan

Il existe trois types de paramètres de couleur dʼarrière-plan :

  • Arrière-plan des e-mails : couleur dʼarrière-plan de la zone entourant le contenu. Si les deux styles ci-dessous sont définis sur Transparent, il sʼagit de la couleur qui sʼaffiche derrière le contenu de la campagne.
  • Arrière-plan du contenu : couleur dʼarrière-plan derrière toutes les sections dʼune campagne. Si la couleur de la section est définie sur Transparent, il sʼagit de la couleur qui sʼaffiche derrière la section. Si toutes les sections ont des paramètres de couleur uniques, il se peut que cette couleur ne sʼaffiche nulle part.
  • Couleur de la section : couleur dʼarrière-plan dʼune section individuelle. Vous pouvez personnaliser chaque section individuellement. Si la couleur de la section est définie sur transparente, lʼarrière-plan du contenu ou l’arrière-plan de l’e-mail apparaîtra alors derrière la section.

Pour définir l'arrière-plan de l'e-mail et l'arrière-plan du contenu, cliquez sur la zone en dehors des sections, puis cliquez sur les options du panneau latéral. Pour définir la couleur d'une section, cliquez dessus, puis cliquez sur Couleur de la section.

Important :

  • Pour les sections Image, la couleur d’arrière-plan n’apparaît que derrière les légendes et les zones contenant des images transparentes. Par exemple, si vous avez sélectionné la disposition de la section Image En dessous et masqué les légendes, la couleur de l’arrière-plan ne sera pas visible.
  • Étant donné que les e-mails occupent en général l’intégralité des écrans mobiles, il est possible que la couleur d’arrière-plan des e-mails ne soit pas visible sur certains appareils.
  • Pour créer un arrière-plan transparent, sélectionnez l’échantillon avec les lignes en diagonale situé à gauche.
transparent_color.jpg

Styliser les Liens Hypertexte

Les liens hypertexte suivent l’ensemble des polices que vous avez définies ainsi que leur taille générale. Pour définir la couleur de tous les liens de votre campagne, cliquez à l’extérieur des sections, puis cliquez sur Couleur des liens.

Astuce

les liens Afficher dans le navigateur ont leur propre option de couleur, car ils s’affichent au-dessus de la couleur d’arrière-plan de l’en-tête.

style-a-link.png

La marge intérieure

Pour modifier l'espace blanc autour du texte et des images, cliquez sur n'importe quelle section pour afficher les options de marge intérieure. L'apparence de la marge intérieure peut varier en fonction de l'appareil. Par exemple, les images de campagne n'ont pas de marge intérieure sur les appareils mobiles pour garantir un contenu visible et clair sur les petits écrans.

S'il y a trop ou trop peu de marge intérieure, essayez différents paramètres jusqu'à ce que vous trouviez l'apparence idéale pour vos besoins. Gardez à l'esprit que vos campagnes peuvent présenter de légères différences d'apparence, selon la façon dont vos abonnés visualisent la campagne.

Astuce

vous pouvez ajouter plus d'espace blanc au-dessus et sous les Champs à l'aider des

Design réactif

Le design réactif intégré des Campagnes e-mail redimensionne vos images et votre texte en fonction de l’écran de l’utilisateur. Que vos abonnés utilisent un ordinateur ou consultent leurs e-mails sur un smartphone pendant qu’ils attendent leur train, le design réactif contribue à optimiser l’apparence de votre campagne en toutes circonstances.

  • Les Polices de Caractères sont légèrement agrandies sur les Appareils Mobiles pour qu'elles soient plus lisibles sur un plus petit écran.
  • Pour les sections Blog, Produits et Image, les images et le texte s’empilent dans les navigateurs et sur les écrans étroits afin que votre contenu reste visible.

Styliser un Champ

À lʼexception des styles généraux mentionnés ci-dessus, chaque section est personnalisée séparément. Cliquez sur une section dans lʼaperçu à gauche, puis utilisez le panneau de droite pour la personnaliser. Pour plus dʼaide, consultez nos conseils sur la création et la personnalisation de chaque type de section :

Réutiliser un style

Pour réutiliser une campagne déjà envoyée ainsi que tous ses paramètres de style en tant que template :

  1. Ouvrez le tableau de bord Campagnes e-mail.
  2. Cliquez sur Envoyé.
  3. Cliquez sur l'icône Réutiliser le modèle sur la campagne contenant le style que vous souhaitez réutiliser.
  4. Sélectionnez le type d'automatisation.

La disposition apparaît sous la forme d’un nouveau brouillon, que vous pouvez utiliser comme point de départ pour une nouvelle campagne. Pour en savoir plus, consultez l’article Créer une campagne e-mail.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.