Éditeur par glisser-déposer
Les blocs éditeurs sont les différents blocs disponibles dans l’éditeur par glisser-déposer. Cet article de référence comprend une série de vignettes représentant les différents types de contenu que vous pouvez utiliser dans vos messages.
Utilisation des blocs éditeurs d’e-mails
Les blocs éditeurs se trouvent dans la section Contenu des messages d’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 la manière d’utiliser et de personnaliser ces blocs éditeurs dans votre e-mail, veuillez consulter la section Autres personnalisations.
Vous pouvez également ajouter des attributs personnalisés à n’importe quelle URL dans les blocs ImageéditeursText , Button, ou .
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 provenant 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. Vous pouvez télécharger des images personnalisées pour les icônes spécifiques à votre marque. |
| Icônes | Insère une icône. Vous pouvez télécharger des images personnalisées. Braze utilise une marque substitutive surdimensionnée jusqu’à ce que vous téléchargiez une image. |
| HTML | Insère l’élément HTML brut. Recommandé pour Liquid, tel que le contenu connecté ou les instructions 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 | Permet de déplacer le titre vers la gauche, le centre ou la droite. |
| Hauteur de ligne | Modifie l’espace entre les lignes de texte. |
| Interligne | Modifie l’espace entre chaque caractère. |
| Sens du texte | Par défaut, de gauche à droite, mais peut être modifié 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 | Permet de déplacer 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 | Par défaut, de gauche à droite, mais peut être modifié 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 | Permet de déplacer 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 | Par défaut, de gauche à droite, mais peut être modifié 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 contenu liquid ou contenu connecté), il est nécessaire de définir une image de secours afin d’utiliser les paramètres de largeur automatique. Pour les spécifications relatives aux images, veuillez vous référer à nos spécifications relatives aux images dans les e-mails.
| Propriétés | Description |
|---|---|
| Largeur automatique | 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 Liquid Logic pour définir de manière dynamique 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 parvient pas à se charger. |
| Image aux 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. |
Pour Auto Width, le redimensionnement automatique d’images choisit la meilleure taille pour l’image selon une combinaison de largeur d’image et d’espace disponible dans la mise en page :
- Les images plus larges que l’espace disponible seront définies à 100 % de largeur et conserveront cette taille sur les appareils mobiles, utilisant ainsi toute la largeur de l’écran de l’appareil.
- Les images plus petites que l’espace disponible utiliseront la taille normale de l’image pour éviter les effets de distorsion ou les images floues.
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é. |
| Style de l’icône Lecture | Inclut différentes options pour le bouton de lecture situé en haut d’une image vidéo. |
| Couleur de l’icône Lecture | Option permettant de sélectionner Clair ou Foncé pour le bouton de lecture. |
| Taille de l’icône de lecture | 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). |
Les vidéos hébergées par Vimeo ne fonctionneront que si elles sont définies comme publiques. Tous les autres paramètres de sécurité disponibles dans Vimeo (par exemple, « Masquer sur Vimeo.com ») généreront un format de lien différent qui n’est pas pris en charge par ce bloc de contenu. Ces types de liens sont modifiés par le créateur, ce qui empêche Braze de générer une miniature.
Réseaux sociaux
Reportez-vous au tableau suivant pour plus de détails sur le bloc éditeur de Social.
| Propriétés | Description |
|---|---|
| Veuillez sélectionner une 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 | Permet de déplacer l’icône sociale vers la gauche, au centre ou vers 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 | Permet de déplacer l’icône vers la gauche, au centre ou vers 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 des icônes | 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 | Permet de déplacer le menu vers la gauche, au centre ou vers 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. |
| Remplissage des articles | Modifie le padding en utilisant soit le bouton + ou -, soit en entrant un nombre spécifique. |
| Tous les côtés | Définit un nombre de remplissage constant si le remplissage des éléments est désactivé. |
Actions
Vous pouvez attribuer une action qui se produit lorsqu’un utilisateur clique sur un bouton, un lien ou une image dans le message. Vous pouvez également utiliser Liquid pour réaliser la personnalisation des 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 à effectuer lorsque l’on clique sur le bouton et définit le protocole approprié. |
| URL | Dynamique basé sur le type de lien « Ouvrir la page Web ». |
| Destinataire, Objet et Corps du message | Pour le type de lien « Envoyer un e-mail », cela permet de définir l’adresse e-mail du destinataire, l’objet et le contenu qui seront renseignés dans un brouillon d’e-mail lorsque l’utilisateur cliquera sur le bouton. |
| Tél. | Pour le type de lien « Passer un appel » et « Envoyer un SMS », cela permet de définir le numéro de téléphone que l’utilisateur appellera ou auquel il enverra un SMS lorsqu’il sélectionnera le bouton. |
| Message | Pour le type de lien « Envoyer un SMS », cela définit le contenu qui apparaîtra dans un brouillon de message 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 et autres. |
| Bouton au survol | 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. |
Modifier cette page sur GitHub