Aller au contenu principal

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

L'éditeur Drag & Drop [Nouveau design] vous aide à concevoir des emails au design professionnel en toute facilité. Il inclut davantage d’options pour personnaliser vos emails et vous permet de vous assurer que ceux-ci s’affichent parfaitement quel que soit le client de messagerie et l’appareil utilisés.

La section Design de l’éditeur vous permet de définir des styles à appliquer dans tout le template. 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, regardez notre tutoriel vidéo qui explique comment utiliser la section Design du nouvel éditeur Drag & Drop 🚀.

Quels sont les différents paramètres disponibles dans la section Design ?

Les paramètres se composent de quatre parties : Template, Apparence du texte, Boutons et Espacement.

Template

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

Couleur d'arrière-plan

Choisissez une couleur d’arrière-plan à partir de la palette. Pour supprimer la couleur, cliquez sur la palette de couleurs, puis sur Supprimer couleur.

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 de fond, ou saisir directement l’URL de l’image dans le champ Insérer image à partir d'une IRL. Vous pouvez ajuster la position, le motif de répétition et la taille de l’image selon vos préférences.

Couleur du corps

Choisissez une couleur d’arrière-plan qui s’appliquera à la largeur du contenu de votre campagne. Dans notre exemple, la couleur d’arrière-plan du corps est le bleu.

Largeur du corps

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 contenu est illustrée par une flèche jaune dans l’image ci-dessous.

Couleur_et_largeur_du_corps_FR.png

Afficher dans le navigateur

Activez cette option pour permettre à vos destinataires d'afficher votre campagne d'emails dans une version en ligne au cas où ils auraient des difficultés à la visualiser dans leur messagerie. Un lien Afficher dans le navigateur sera automatiquement ajouté en haut de votre email.

DEE_view-browser_EN-US.png

Apparence du texte

Vous pouvez définir l'apparence du texte de tous les styles (paragraphes, entêtes, etc.). Pour chaque style, choisissez une police, sa taille et et sa couleur dans chaque liste. Cliquez sur le nom d'une des polices puis cliquez sur + Gérer les polices si vous souhaitez ajoutez des polices à votre liste depuis Google fonts ou pour choisir des polices de remplacement au cas où vos destinataires ne puissent pas afficher la police que vous aviez choisi en premier.

DDE_text-appearance-fonts_EN-US.gif

Les paramètres communs vous permettent de choisir la hauteur de ligne par défaut ou de créer une hauteur personnalisée, ainsi que de définir 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. Pour ce faire, sélectionnez le texte et choisissez 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, la police n’est pas modifiée lorsque vous sélectionnez une police d’écriture sous Design > Paramètres du texte.

Liens

Vous pouvez définir ici le style et la couleur des liens ajoutés dans les blocs de contenu de type texte.

Dans l’exemple ci-dessous, nous avons sélectionné une couleur pour les liens et ajouté l’option de soulignement.

mceclip1.png

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 une police et sa taille, la largeur du bouton, ses contours, sa couleur, et la taille et la couleur de ses bordures. 

2021-10-26_16-34-04.png

Espacement

Le paramètre Espacement est disponible sous l'onglet Design, mais également lorsque vous cliquez sur un bloc Style. Il vous permet d'ajouter une marge, c'est-à-dire l'espace entre l'élément et la bordure. Vous pouvez modifier individuellement la taille de chacune des quatre marges autour du contenu.

Cliquez sur l'interrupteur Marge intérieure pour l'activer ou la désactiver. 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.

 

2022-02-10_18-23-55 (1).gif

⏩ Et après ?

🤔 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.