Passer au contenu principal
Éléments de conception
Mis à jour il y a plus d'un mois

Éléments de conception

Les éléments de conception de l'éditeur d'E-mail et de l'éditeur de Formulaire vous offrent un large éventail de possibilités de conception. Allez-y et amusez-vous à façonner votre Contenu !

Cet article débute par les options générales de conception, présentes dans tous les Éléments de conception. Et continue avec les caractéristiques spécifiques de chaque Éléments.


Dans cet article


À propos des Éléments

Le contenu de l'E-mail est constitué d'Éléments. Dans le panneau Conception (à droite du Canevas), il y a neuf Éléments. Faites glisser et déposez les éléments dans une ligne ou une colonne du canevas.

Chaque Élément dispose d'un ensemble d'options de conception, qui apparaissent sur le Droit quand l'Élément est sélectionné dans le Canevas.

Style, alignements, marges et Cloner

La plupart des Options ont les options de Conception suivantes qui peuvent être ajustées :

  • Marges (padding) - max 100 pixels

  • Alignement - à gauche, au centre ou à droite

  • Style : couleur, bordure, rayon, remplissage et largeur de l'élément.

  • Cloner - pour copier un Élément, sélectionnez l'Élément dans le Canevas et cliquez sur "Cloner" dans le coin inférieur droit.

D'autres caractéristiques de conception de chaque Élément sont présentées dans les descriptions des Éléments ci-dessous !

💡¡ Astuce ! Quand vous ajustez les options de style, tenez les icônes de style et faites-les glisser vers la gauche et la droite - la taille et la forme de l'Éléments dans le Canevas s'ajusteront en conséquence !

Éditeur de texte en ligne

Quand vous utilisez des Éléments contenant du texte (Éléments Texte, Bouton, Liste, Menu et Icônes), éditez le texte avec l'Éditeur de Texte Inline.

Marquez le texte dans l'Éléments pour accéder à l'éditeur en ligne.

Balises de données

Avec les Balises des données, vous pouvez personnaliser l'E-mail avec des données dynamiques (en intégrant des Données Profil dans le Texte). Sélectionnez Balises de données dans le menu déroulant Balises de données.

Par exemple, "Bonjour ##Prénom## !", apparaîtra dans la boîte de réception sous la forme "Bonjour Anna !", si l'Attribut "Prénom" du Profil a la valeur "Anna".

En savoir plus sur la façon dont vous pouvez Personnaliser vos envois en utilisant les Balises des données ici.


Éléments de texte

Faites glisser et déposez un élément Texte dans une Ligne ou une Colonne de votre E-mail.

Utilisez l'éditeur Inline pour modifier l'aspect de votre texte, ajouter des liens et des balises de données.

Hauteur de ligne manuelle

Cochez la case à cocher pour ajuster manuellement la hauteur des lignes (en pixels). De plus, vous pouvez maintenir l'icône d'hauteur de ligne et la faire glisser pour modifier l'espacement (à gauche et à droite pour réduire et augmenter).


Éléments d'image

Placez l'élément Image dans le Canevas. Cliquez sur le bouton Parcourir de l'élément pour afficher les options Image. Accédez à l'élément onglet Upload.

Télécharger une image - trois options

1. Téléchargez l'image depuis votre appareil.

2. Utiliser une image téléchargée dans la galerie d'images du Compte.

3. Image URL

Cochez la case Ajouter à la galerie afin d'enregistrer l'image dans la galerie pour d'autres occasions.

Nous vous recommandons d'utiliser des fichiers images hébergés dans votre propre Domaine, (afin de vous assurer que les fichiers images sont disponibles pour l'E-mail).

Remarque ! Les types de fichiers pris en charge : PNG, JPG, JPEG et GIF

Taille du Fichier : jusqu'à 10 MB, mais nous recommandons 1 MB ou moins pour une meilleure résolution.

Onglet Galerie

Les images enregistrées dans la Galerie sont accessibles à partir de peu d'outils du Compte. De plus, vous pouvez utiliser et stocker des images non seulement pour les e-mails, mais aussi pour l'envoi d'Outils E-mail, de Formulaires et de Pages.

Les images supprimées disparaîtront de la galerie, mais seront toujours présentes dans votre Contenu.

Taille et ET

Sous Style, dans le panneau Conception, définissez la largeur de l'image pour les ordinateurs de bureau et les mobiles.

Ordinateur :

  • Entier - l'image couvre 100 % de la colonne

  • Taille réelle - l'image conserve la même taille que celle que vous avez téléchargée.

  • Largeur personnalisée - Définir la largeur (px). La largeur maximale de l'image est la largeur de la colonne.

    Si la Colonne est de 300px, l'image aura une taille maximale de 300px, même si la Taille Personnalisée est définie à 500px.

Si aucun ajustement n'est effectué, les paramètres resteront à la taille réelle, qui est la taille de l'image téléchargée.

Mobile :

Sous l'onglet Mobile, sélectionnez si la taille de l'image doit suivre les paramètres de l'ordinateur de bureau, être pleine largeur ou conserver la taille réelle (même taille que celle sélectionnée).

Ajouter un Lien et un Texte à toutes les Images

Quand vous avez sélectionné une image, développez les paramètres du Lien.

  1. Ajouter un texte d'image (Alt text pour augmenter l'accessibilité).

  2. Sélectionnez le type de lien et ajoutez l'URL pour connecter l'élément.

En ajoutant du texte et des liens aux images, l'E-mail devient plus accessible, cliquable et génère un engagement plus important de la part des Profils !


Éléments du bouton

Faites glisser et déposez un élément Bouton dans votre E-mail.

Lien

N'oubliez pas d'ajouter un Lien au Bouton pour le Connecter à une Page de renvoi ! Marquez le texte et utilisez le symbole de lien dans l'éditeur Inline pour ajouter une URL.

Texte

Écrivez quelque chose (qui incite à cliquer) et utilisez l'éditeur Inline pour en modifier l'aspect.

Style de conception

Concevez l'aspect du bouton à l'aide des options de conception de style situées à droite.

  • Epaisseur et rayon de la Bordure (coins arrondis).

  • Largeur : en nombre de pixels (Adapter) ou Définir une largeur complète couvrant toute la rangée (Entier).

  • Remplissage : espace autour du texte dans le bouton.

  • Couleur de la bordure et du bouton


Éléments de ligne

L'élément Ligne est pratique Quand vous voulez créer des séparations entre les contenus.

Elle peut être dirigée soit verticalement (entre les OU), soit horizontalement (entre les Colonnes).

L'épaisseur et la longueur peuvent être ajustées en faisant glisser les icônes de style vers la gauche et la droite.


Éléments d'espacement

Avec l'Espacement, vous créez de l'espace entre les Éléments.

Ajustez la Taille de l'Espacement en tirant la poignée de l'élément vers le haut et vers le bas. OU utilisez l'icône dans les options de conception ; faites glisser vers la gauche et la droite pour modifier la Taille.


Éléments de la Liste

Créez une liste pour organiser le contenu. Quand vous créez une liste, vous commencez par ajouter des éléments de liste dans les options de Conception à droite.

Créer une liste

  1. Placez un élément Liste dans le Canevas.

  2. Dans les Options de conception (à droite) :

    - développer les éléments de la Liste, cliquer sur +Ajouter un élément

    - continuer à cliquer sur +Ajouter un élément pour atteindre le nombre d'éléments de la liste souhaité. Supprimer avec la croix à droite.

  3. Dans le Canevas :

    - écrire quelque chose dans le texte pour chaque élément de la liste.

    - modifier le texte dans l'éditeur Inline

  4. Paramètres de définition :

    - définir l'espace entre les éléments de la liste

    - choisir des puces, des lettres, des nombres ou personnaliser les éléments

💡¡ Conseil ! Faites en sorte que les éléments de la liste soient cliquables pour augmenter l'engagement !


Éléments du menu

L'élément Menu est idéal pour guider rapidement vos lecteurs vers les différentes parties de votre site Web. Il est entièrement personnalisable, ce qui permet de le concevoir en fonction du reste de votre E-mail.

Créer un Menu :

  1. Placez un élément de Menu dans le Canevas

  2. Dans les Options de conception (à droite) :

    - développer les éléments de menu, cliquer sur +Ajouter un élément

    - continuer à cliquer sur +Ajouter un élément pour atteindre le nombre d'éléments du menu que vous souhaitez Supprimer avec la croix à droite.

  3. Dans le Canevas :

    - écrire quelque chose dans le texte des éléments du menu.

    - modifier le texte avec l'éditeur Inline â€'.

  4. Paramètres de définition :

    Personnalisez le séparateur entre les éléments du menu si vous le souhaitez.


Éléments du menu d'icônes

Utilisez un élément de menu icône pour créer de beaux chemins vers tous vos canaux de médias sociaux et vos informations de contact dans un seul E-mail.

Créer un menu d'icônes :

Placez un élément de menu d'icônes dans le Canevas. Dans les options de Conception (à droite) :

  1. Développez "Contenu", cliquez sur +Ajouter un élément

  2. Sélectionner le service dans le menu déroulant (par exemple Facebook).

  3. Ajouter un URL

  4. Suivre le lien, Encoder les Balises des données et Paramètres avancés des liens - Définir plus ici !

  5. Choisissez parmi les versions Icon Style (couleur et forme)

  6. Expand Style :

    Mise en page pour différents appareils (verticalement ou horizontalement)

    Affichage de l'icône et du texte / Icône uniquement

  7. Définir l'alignement et les paramètres pour compléter l'apparence.


Élément HTML

L'élément HTML vous permet d'utiliser du code HTML dans votre E-mail. En cours d'utilisation pour les tableaux personnalisés ou les tableaux de prix.

Il s'agit d'une fonctionnalité avancée qui nécessite des compétences de codage avancées pour les E-mails. Contactez votre équipe de développement ou de conception pour vous assurer que votre code HTML fonctionne comme prévu. Vous avez besoin d'un coup de main d'un expert ? Contactez votre Compte Manager chez Efficy !

Populations d'un élément HTML

1. Cliquez sur l'élément HTML que vous avez ajouté dans le Canevas.

2. Saisissez le code HTML que vous souhaitez ajouter. (Les liens dans le code HTML ne peuvent pas être suivis)

3. Pour Prévisualiser, cliquez à l'écart de l'élément HTML. â€'

Lisez ici ce qu'est le code HTML pour les E-mails.

htmlElement2.jpg

Étape suivante

Avez-vous trouvé la réponse à votre question ?