Aller au contenu principal

Éditeur Drag & Drop - Partie 4 : Définir un style de conception pour tout votre email

L'éditeur Drag & Drop facilite la conception d'emails de qualité professionnelle. Il offre plus d'options pour personnaliser votre email et garantit également que votre email s'affiche parfaitement sur n'importe quel client de messagerie et appareil.

Dans cet article, nous verrons comment vous pouvez définir les styles à appliquer dans tout le template à partir de la section Design. Par exemple, vous pouvez définir la couleur et le style du lien (gras, italique) qui s'appliqueront à tous les liens que vous ajouterez au template. Ainsi, vous gagnez du temps et n’avez pas besoin de définir le style pour chaque lien.

Nous avons divisé en plusieurs parties les articles dédiés à l’éditeur Drag & Drop :

Avant toute chose, visionnez notre tutoriel vidéo qui explique comment utiliser l'onglet Design de l'éditeur Drag & Drop 🚀.

Quels sont les différents paramètres disponibles dans l'onglet Design ?

Les paramètres se composent de cinq parties : Bibliothèque de marquesTemplate, Apparence du texte, Boutons et Espacement.

Bibliothèque de marques

brand-library_FR.png Configurez votre bibliothèque de marques pour que chaque nouveau template sélectionné hérite des propriétés de votre marque, telles que le logo, les couleurs, les polices et les liens vers les réseaux sociaux. En plus de vous faire gagner du temps, la Bibliothèque de marques vous permet de maintenir une image de marque cohérente pour vos emails. Pour en savoir plus, consultez notre article Concevoir automatiquement vos emails avec vos éléments de marque à l'aide de la Bibliothèque de marques.

Template

Cette partie vous permet de définir les paramètres d’arrière-plan et de largeur des blocs de contenu.

dde_template-settings_FR.png

Couleur d'arrière-plan

Choisissez la couleur de fond qui sera appliquée à tous les blocs de contenu de votre campagne sur toute la largeur. Si vous voulez uniquement que le corps ait une couleur de fond, choisissez une couleur dans le paramètre Couleur du corps ci-dessous.

dde_background-color_FR.png

Image d’arrière-plan

Vous pouvez ajouter une image à partir de vos fichiers ou des images libres de droit en cliquant sur Ajouter une image d'arrière-plan, ou ajouter directement Insérer une image à partir d'une URL en collant le lien vers l'image dans ce champ. Vous pouvez ajuster la position, la répétition et la taille de l'image selon vos besoins.

dde_background-image_FR.png

Couleur du corps de contenu

Cette option vous permet d'ajouter une couleur d'arrière-plan uniquement à votre corps de contenu, comme dans l'exemple ci-dessous en bleu.

dde_body-color_FR.png

Largeur du corps de contenu

Indiquez la largeur du bloc de contenu en pixels. Par défaut, elle est de 600 px. Lorsque vous modifiez la largeur, les blocs de mise en page et de contenu sont automatiquement redimensionnés. La largeur du corps de contenu est illustrée par une flèche jaune dans l’image ci-dessous.

dde_body-width_FR.png

Afficher dans le navigateur

Activez cette option pour permettre à vos destinataires de consulter une version en ligne de votre campagne email s'ils ont du mal à l'afficher dans leurs clients de messagerie. Un lien Afficher dans le navigateur sera automatiquement ajouté en haut de votre email. Pour en savoir plus, consultez notre article Insérer un lien Afficher dans le navigateur (miroir) dans vos campagnes.

DEE_view-browser_FR.png

Apparence du texte

💡 Bon à savoir
Configurez votre bibliothèque de marques pour choisir les polices à utiliser par défaut pour vos titres et vos paragraphes. Pour en savoir plus, consultez notre article Concevoir automatiquement vos emails avec vos éléments de marque à l'aide de la Bibliothèque de marques.

Vous pouvez choisir l'apparence du texte de tous les styles (paragraphes, titres, etc.). Pour chaque style, définissez la famille de police, la taille et la couleur de police à partir des listes respectives. Cliquez sur le nom de l'une des polices et sur + Gérer les polices si vous souhaitez ajouter des polices provenant de Google Fonts à vos listes, ou choisir des polices de remplacement pour le cas où vos destinataires ne pourraient pas afficher la police que vous avez choisie en premier.

DDE_text-appearance-fonts_FR.gif

Dans les paramètres communs, vous pourrez choisir la hauteur de ligne parmi celles par défaut ou créer une hauteur personnalisée, et choisir le sens d'écriture (de gauche à droite ou de droite à gauche).

Vous pouvez également modifier la police d'un élément spécifique de votre design en sélectionnant le texte et en choisissant une police à partir de la barre de mise en forme en haut du bloc de texte.

❗️Important
Si vous avez modifié la police manuellement en sélectionnant le texte et en utilisant la barre de mise en forme, elle n’est pas modifiée lorsque vous sélectionnez une police sous Design > Apparence du texte.

Boutons

De là, vous pouvez définir le style par défaut de tous les boutons de votre newsletter. Si vous souhaitez changer rapidement l'aspect de tous les boutons, faites-le à partir d'ici !
Vous pouvez choisir le style et la taille de police, la largeur, le rayon, la couleur, ainsi que la taille et la couleur des bordures.  

mceclip0.png

Espacement

Le paramètre d'espacement est disponible dans l'onglet Design, mais aussi lorsque vous cliquez sur un bloc Style. Cela vous permet d'ajouter la Marge intérieure, qui est l'espace entre l'élément et la bordure. Elle se trouve sur les quatre côtés du contenu et la taille de chaque côté peut être modifiée.

Utilisez le bouton Marge intérieure pour l'activer ou la désactiver en un clic. Définissez l'espacement ou la taille de la marge de chaque côté de votre contenu en cliquant sur les boutons +/- ou en saisissant la taille souhaitée dans le champ de texte. 

DEE_padding_FR.gif

⏩ Quelle est la prochaine étape ?

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.

💬 Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 4 sur 22