Blocs de l’éditeur par glisser-déposer

Utilisation des blocs de l’éditeur d’e-mail

Les blocs éditeurs sont situés sous la section Contenu des messages e-mail. Pour utiliser un bloc éditeur, glissez un bloc éditeur à l’intérieur d’une colonne dans l’éditeur par glisser-déposer. Il s’ajuste automatiquement à la largeur de la colonne. Chaque bloc éditeur possède ses propres paramètres, tels que le contrôle granulaire sur la marge intérieure.

Pour plus d’informations sur l’utilisation et la personnalisation de ces blocs éditeurs dans votre e-mail, consultez la rubrique Autres personnalisations.

Types

Le tableau suivant décrit comment les utilisateurs peuvent exploiter chaque type de bloc éditeur.

Nom	Description
Titre	Ajoute du texte pour les en-têtes dans l’e-mail.
Paragraphe	Saisit le texte dans son message. Une barre d’outils permet d’utiliser les polices et la fonction d’édition de texte.
Liste	Ajoute une liste à puces.
Bouton	Ajoute un bouton standard. Les propriétés de ce bloc permettent de modifier et de configurer facilement les liens.
Ligne de séparation	Insère une ligne continue, en pointillés ou en tirets pour faciliter l’espacement.
Espaceur	Ajoute de l’espace ou une marge intérieure entre les autres blocs.
Image	Insère une image de la bibliothèque multimédia.
Vidéo	Crée un lien vers le contenu vidéo.
Réseaux sociaux	Insère l’icône de la plateforme des réseaux sociaux. Des images personnalisées peuvent être chargées pour des icônes spécifiques aux marques.
Icônes	Insère une icône. Des images personnalisées peuvent être téléchargées. Une icône de marque substitutive surdimensionnée sera utilisée jusqu’à ce qu’une image soit chargée.
HTML	Insère l’élément HTML brut. Recommandé pour les liquides, tels que le contenu connecté ou les déclarations conditionnelles.
Menu	Crée un menu flexible pour le message que vous créez.

Propriétés

Les détails des propriétés de chaque bloc éditeur sont fournis dans les tableaux suivants.

Titre

Reportez-vous au tableau suivant pour plus de détails sur les propriétés du bloc éditeur de Title.

Propriétés	Description
Titre	Sélectionne le style de titre.
Famille de polices	Il s’agit du style de police pour votre titre.
Poids de la police	Il s’agit de la force globale de la police.
Taille de police	Détermine la taille de votre texte.
Couleur du texte	Modifie la couleur du titre.
Couleur du lien	Modifie la couleur du lien.
Alignement	Déplace le titre vers la gauche, le centre ou la droite.
Hauteur de ligne	Modifie l’espace entre les lignes de texte.
Espacement des lignes	Modifie l’espace entre chaque caractère.
Sens du texte	La valeur par défaut est de gauche à droite, mais elle peut être modifiée pour être de droite à gauche.

Paragraphe

Reportez-vous au tableau suivant pour plus de détails sur les propriétés du bloc éditeur de Paragraph.

Propriétés	Description
Famille de polices	Il s’agit du style de la police de caractères pour votre paragraphe de texte.
Poids de la police	Il s’agit de la force globale de la police.
Taille de police	Détermine la taille de votre texte.
Couleur du texte	Modifie la couleur du titre.
Couleur du lien	Modifie la couleur du lien.
Alignement	Déplace le titre vers la gauche, le centre ou la droite.
Espacement des paragraphes	Modifie l’espace entre les paragraphes.
Hauteur de ligne	Modifie l’espace entre les lignes de texte.
Espacement des lettres	Modifie l’espace entre chaque caractère.
Sens du texte	La valeur par défaut est de gauche à droite, mais elle peut être modifiée pour être de droite à gauche.

Liste

Reportez-vous au tableau suivant pour plus de détails sur les propriétés du bloc éditeur de List.

Propriétés	Description
Type de liste	Il s’agit du type de liste. Elle peut être à puces ou numérotée.
Type de style de liste	Détermine le style de votre liste.
Liste de départ à partir de	Détermine le numéro de départ de votre liste.
Famille de polices	Il s’agit du style de la police de caractères pour votre paragraphe de texte.
Poids de la police	Il s’agit de la force globale de la police.
Taille de police	Détermine la taille de votre texte.
Couleur du texte	Modifie la couleur du titre.
Couleur du lien	Modifie la couleur du lien.
Alignement	Déplace le titre vers la gauche, le centre ou la droite.
Espacement des objets de liste	Modifie l’espace entre les éléments de liste.
Indentation des éléments de la liste	Modifie l’indentation des éléments de liste.
Hauteur de ligne	Modifie l’espace entre les lignes de texte.
Espacement des lettres	Modifie l’espace entre chaque caractère.
Sens du texte	La valeur par défaut est de gauche à droite, mais elle peut être modifiée pour être de droite à gauche.

Ligne de séparation

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Divider.

Propriétés	Description
Transparent	Si activé, les options de « ligne » et de « largeur » sont supprimées.
Line	Les différents formats de lignes, qu’elles soient en pointillés, continues ou discontinues. De plus, vous pouvez modifier l’épaisseur et la couleur de la ligne de séparation.
Largeur	Ajuste l’étendue de la ligne de séparation par incréments de 5.
Alignement	Déplace la ligne à gauche, au centre ou à droite.

Espaceur

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Spacer.

Propriétés	Description
Hauteur	Ajuste la hauteur du bloc d’espacement. La valeur par défaut est 60px.

Image

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Image. Pour les images dynamiques (images avec Liquid), vous devez définir une image de repli pour utiliser les paramètres de largeur automatique. Pour les spécifications de l’image, reportez-vous aux spécifications de l’image de notre e-mail.

Propriétés	Description
Largeur de l’auto	Modifie la largeur de l’image en pixels.
Alignement	Oriente l’image vers la gauche, le centre ou la droite du bloc.
Image avec du Liquid	Utilisez la logique Liquid pour définir dynamiquement différentes images au sein d’un même bloc de contenu.
URL	Définissez une image en utilisant l’adresse de l’endroit où elle est hébergée.
Texte alternatif	Une courte description de l’image qui donne aux utilisateurs les mêmes informations que celles présentées dans l’image. Ceci est essentiel pour l’accessibilité des lecteurs d’écran ou lorsque l’image ne se charge pas.
Image avec coins arrondis	Rendre l’image avec des coins arrondis. Par défaut, les images sont rendues avec des coins carrés.
Action	Déclenche une action lorsque l’utilisateur clique sur l’image.
Options de blocage	Définit l’espacement autour du bloc d’image.

Vidéo

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Video.

Propriétés	Description
URL	L’URL de la vidéo. Notez que seuls YouTube et Vimeo sont pris en charge.
Titre	Généré automatiquement à partir des métadonnées de la vidéo ou peut être personnalisé.
Jouer à Icon Style	Inclut différentes options pour le bouton de lecture situé en haut d’une image vidéo.
Couleur de l’icône de lecture	Option permettant de sélectionner Clair ou Foncé pour le bouton de lecture.
Jouer la taille de l’icône	Choisissez la taille du pixel pour le bouton de lecture. Les valeurs préfixées vont de 50 px à 80 px (incrémentées de 5 px).

Réseaux sociaux

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Social.

Propriétés	Description
Sélectionnez la collection d’icônes	Définit le style de votre collection d’icônes.
Configurer la collection d’icônes	Défini l’URL pour chaque icône sociale. Inclut le basculeur “ Plus d’options” pour modifier le titre et le texte alternatif.
Alignement	Déplace l’icône sociale vers la gauche, le centre ou la droite.
Espacement des icônes	Détermine l’espacement entre chaque icône sociale.

Icônes

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Icons.

Propriétés	Description
Famille de polices	Il s’agit du style de la police de caractères pour votre paragraphe de texte.
Poids de la police	Il s’agit de la force globale de la police.
Taille de police	Détermine la taille de votre texte.
Couleur du texte	Modifie la couleur du titre.
Couleur du lien	Modifie la couleur du lien.
Alignement	Déplace l’icône vers la gauche, le centre ou la droite.
Espacement des lettres	Modifie l’espace entre chaque caractère.
Taille de l’icône	Détermine la taille de votre icône.
Espacement des icônes	Modifie l’espace de l’icône.
Remplissage de l’icône	Modifie le remplissage de l’icône.

HTML

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de HTML.

propriétés	Description
éditeur html	Saisir l’élément HTML brut.

Menu

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Menu.

Propriétés	Description
Configurer les éléments du menu	Ajouter un élément de menu.
Famille de police	Style à utiliser pour votre menu.
Taille de police	La taille de votre menu.
Couleur du texte	Modifie la couleur du menu.
Couleur du lien	Modifie la couleur du texte du menu.
Alignement	Déplace le menu vers la gauche, le centre ou la droite.
Espacement des lettres	Modifie l’espace entre chaque caractère.
Disposition	Détermine que la mise en page soit horizontale ou verticale.
Séparateur	Ajouter un ou des caractères entre les options de menu.
Menu mobile	Comprend des options pour modifier la taille de l’icône, la couleur et le type d’icône lorsqu’elle est affiché sur un appareil mobile.
Rembourrage de l’article	Modifie le padding en utilisant soit le bouton + ou -, soit en entrant un nombre spécifique.
Tous les côtés	Définit un numéro de remplissage cohérent si le remplissage des éléments est désactivé.

Actions

Vous pouvez assigner une action qui se produit lorsque l’utilisateur appuie sur un bouton, un lien ou une image dans le message. Vous pouvez également utiliser Liquid pour personnaliser les actions. Les tableaux suivants détaillent les actions de chaque bloc éditeur.

Bouton

Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Button.

Propriétés	Description
Type de lien	Détermine l’action lors du clic sur le bouton et définit le protocole approprié.
URL	Dynamique en fonction du type de lien de la page web ouverte.
Courrier à, Objet et Corps	Pour le type de lien Envoyer un e-mail, ceci définit l’adresse e-mail du destinataire, l’objet et le contenu qui s’afficheront dans un projet d’e-mail lorsque l’utilisateur sélectionnera le bouton.
Tél	Pour le type de lien “ Appeler “ et “ Envoyer un SMS”, ce paramètre définit le numéro de téléphone que l’utilisateur appellera ou enverra par SMS lorsqu’il sélectionnera le bouton.
Message	Pour le type de lien Envoyer un SMS, ceci définit le contenu qui s’affichera dans un projet de message SMS lorsque l’utilisateur sélectionnera le bouton.
Options des boutons	Définit diverses options pour les boutons, telles que la police, la largeur, la couleur, etc.
Survol du bouton	Le style du bouton lorsqu’un utilisateur le survole à l’aide d’une souris ou d’un trackpad. Il s’agit de la couleur d’arrière-plan du bouton, de la couleur de la police et des styles de bordure.