Composants de contenu content-components
Lorsque vous concevez du contenu pour des e-mails, des pages de destination, des modèles et des fragments visuels, utilisez les composants de contenu pour ajouter des éléments de conception visuelle.
Vous pouvez ajouter autant de composants de contenu que nécessaire dans un ou plusieurs composants de structure, ce qui permet de définir la disposition.
Bibliothèque de contenus
La section Contenu de la bibliothèque de composants affiche les composants de contenu disponibles :
Barres d’outils des composants de contenu
Chaque type de composant de contenu affiche une barre d’outils lorsque vous le sélectionnez dans la zone de travail. Les outils disponibles, qui varient selon le type de composant, permettent d’utiliser facilement le composant directement dans le contenu rendu. La barre d’outils comprend des fonctionnalités de formatage et fonctionnelles applicables au type de composant.
{width="450"}
Outils de formatage
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Appliquez le gras, l’italique, le soulignement, le trait barré, l’exposant ou l’indice à la chaîne de texte sélectionnée. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Appliquez un type d’alignement horizontal au contenu du composant. Choisissez gauche, centré, droite ou justifié. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Appliquez une mise en forme de liste ordonnée ou non au texte du composant. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Appliquez une mise en forme au niveau du titre au paragraphe pour l'emplacement du curseur. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Appliquer la taille de police à un texte sélectionné. Cliquez sur l’outil et choisissez la taille ou saisissez la valeur px. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Appliquer une couleur de police au texte sélectionné. Sélectionnez une couleur dans le sélecteur et utilisez le curseur de couleur et le champ de couleur pour sélectionner la couleur. Vous pouvez également saisir une valeur RGB, HSL, HSB ou hexadécimale connue. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Créez un lien cliquable pour le texte ou l’élément sélectionné.
|
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Outil | Utilisation | Composants |
|
|
Supprimez le lien cliquable pour le texte ou l’élément sélectionné. |
|
Outils fonctionnels
Ajouter un composant de contenu à votre conception
-
Dans l’espace de conception visuelle, utilisez un modèle existant ou ajoutez les composants de structure nécessaires dans une zone de travail vide pour définir la disposition.
-
Dans la bibliothèque Composants, saisissez la Poignée de glisser
pour le composant de contenu de votre choix, puis faites-la glisser et déposez-la sur les composants de structure.
Vous pouvez ajouter plusieurs composants dans un seul composant de structure et dans chaque colonne d’un composant de structure.
-
Ajustez l’affichage du composant à l’aide des onglets Paramètres et Styles sur la droite, ou de la barre d’outils contextuelle affichée dans la zone de travail.
Par exemple, vous pouvez modifier le style de texte, la marge intérieure ou la marge du composant.
Lorsque vous travaillez sur votre conception, vous pouvez également supprimer ou dupliquer un composant à l’aide des outils Supprimer et Dupliquer dans la section Outils fonctionnels.
Paramètres et styles des composants de contenu
Après avoir ajouté un composant, il est sélectionné dans l’espace de conception visuelle et ses propriétés s’affichent dans le panneau de droite. Vous pouvez également sélectionner un composant à tout moment pour modifier les paramètres et les styles. De nombreux paramètres et styles sont spécifiques au composant, mais vous pouvez appliquer certains paramètres et styles standard aux composants de contenu sélectionnés.
Options d’affichage
Si vous souhaitez exclure le composant de l’affichage du bureau ou de l’appareil mobile, modifiez le paramètre Options d’affichage. La valeur par défaut, Afficher sur tous les appareils, active l’affichage sur tous les appareils. Choisissez un autre paramètre pour rendre le composant exclusif par type d’appareil :
- Afficher uniquement sur les appareils de bureau - Sélectionnez ce paramètre lorsque vous souhaitez afficher le composant sur les appareils de bureau et l’exclure pour les appareils mobiles.
- Afficher uniquement sur les appareils mobiles - Sélectionnez ce paramètre lorsque vous souhaitez afficher le composant sur les appareils mobiles, tels que les téléphones et les tablettes, et l’exclure pour les ordinateurs de bureau.
{width="400" modal="regular"}
Conteneur container
Utilisez un conteneur pour appliquer un style spécifique à un groupe de composants de contenu. Ajoutez un composant Conteneur, puis ajoutez d’autres composants de contenu à l’intérieur. Ce composant est similaire à la manière dont vous pouvez utiliser un élément div dans HTML. Vous pouvez appliquer au conteneur un style distinct qui diffère du style appliqué aux composants de contenu qu’il contient.
Par exemple, ajoutez un composant Conteneur, puis ajoutez un composant Bouton à l’intérieur de ce conteneur. Vous pouvez utiliser un style de zone spécifique pour le conteneur et appliquer un style au bouton et à son arrière-plan selon vos besoins.
{width="600" modal="regular"}
Bouton button
Utilisez le composant Button pour insérer un ou plusieurs boutons cliquables dans votre contenu. Utilisez des boutons pour rediriger les visiteurs de pages ou les destinataires d’e-mails vers le contenu complémentaire (page de destination publiée ou lien externe).
Ajouter le texte du bouton
Lorsque le composant Bouton s’affiche dans la zone de travail, la barre d’outils comprend des options de mise en forme de texte, ainsi que des options de personnalisation et des variantes conditionnelles. Pour plus d’informations sur les options de la barre d’outils de l’éditeur, voir Barres d’outils des composants de contenu .
Lorsque vous saisissez le texte du libellé du bouton et définissez la mise en forme, le bouton se redimensionne pour s’adapter au contenu.
{width="500" modal="regular"}
Définir les options de lien button-set-link-options
Dans l’onglet Paramètres, utilisez les options Lien pour définir le texte du bouton, la destination du lien et le comportement du navigateur pour charger la page cible.
-
Définissez le Type pour le lien :
-
Lien externe - Choisissez ce type pour utiliser une URL standard comme destination du lien.
Dans Url, saisissez l’URL de destination du lien. Cliquez sur l’icône Personnaliser (
-
Page de destination - Choisissez ce type pour sélectionner une page de destination publiée dans l’instance Marketo Engage connectée.
Pour l’option Page de destination, sélectionnez la page de destination publiée. Cliquez sur l’icône Sélectionner une page (
-
-
Pour Libellé, saisissez le texte à afficher dans le bouton.
Le dimensionnement du bouton s’ajuste en fonction du texte et du style que vous avez définis.
-
Pour Target, choisissez comment la destination liée est redirigée à partir de l’e-mail ou de la page :
- Aucune - Ouvre le lien à l’aide du navigateur par défaut ou du comportement du client (par défaut).
- Vide - Ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.
- Self - Ouvre le lien dans le même cadre.
- Parent - Ouvre le lien dans le cadre parent.
- Haut - Ouvre le lien dans le corps complet de la fenêtre.
Définition des styles
Personnalisez le style du bouton dans l’onglet Styles.
Texte text
Utilisez le composant Texte pour insérer un bloc de texte dans votre contenu. Lorsque le composant de texte est sélectionné dans la zone de travail, saisissez le texte et utilisez les options de la barre d’outils pour ajouter une mise en forme et des options intégrées, y compris des jetons de personnalisation et des variantes conditionnelles.
Personnalisez le style du composant de texte dans l’onglet Styles.
Ces styles sont appliqués à l’ensemble du bloc de texte. Vous pouvez appliquer un style intégré à une chaîne de texte sélectionnée.
{{styles-text}}
Diviseur divider
Ajoutez un composant Diviseur pour incorporer une division linéaire entre les sections de votre contenu.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Ligne et définissez les options de hauteur et de largeur du composant :
-
Couleur - Cliquez sur le carré de couleur pour choisir une couleur dans le sélecteur. Vous pouvez choisir une couleur en entrant une valeur RGB, HSL, HSB ou hexadécimale connue. Vous pouvez également utiliser le curseur de couleur et le champ de couleur pour sélectionner la couleur.
-
Hauteur - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels. Une valeur vide (Auto) est la valeur par défaut et dimensionne la hauteur de l’élément en fonction de son contenu.
-
Largeur - Utilisez le bouton (bascule) pour définir la largeur en pixels ou en pourcentage.
- Pour un pourcentage de largeur, utilisez le curseur pour définir la valeur de pourcentage. Le pourcentage détermine la taille de l’élément en fonction de la zone de contenu du bloc conteneur, ce qui exclut la marge intérieure et les bordures. Par exemple, une valeur de 50 définit la largeur de l’élément sur 50 % de la largeur du contenu du bloc qui le contient.
- Pour une largeur en pixels, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels. Une valeur vide (Auto) est la valeur par défaut et dimensionne la largeur de l’élément en fonction de son contenu.
-
Style - Sélectionnez une valeur dans la liste des valeurs de
line-styleCSS standard, telles que Continu, Pointillé et Tiret.
HTML html
Utilisez le composant HTML pour ajouter des parties de votre HTML existant. Ce composant permet de créer facilement des éléments modulaires d’HTML qui réutilisent votre contenu externe.
-
Sélectionnez le composant sur la zone de travail et cliquez sur l’icône Afficher le code source dans la barre d’outils.
-
Collez l’HTML dans la zone de texte, puis cliquez sur Enregistrer.
Si l’HTML est valide, elle effectue le rendu de l’élément sur la zone de travail. S’il s’agit d’un élément qui correspond à l’un des autres composants de contenu, vous pouvez modifier les paramètres et les styles dans le panneau de droite en fonction du type de composant. Dans le cas contraire, il reste en tant que composant HTML.
Pour un composant HTML, vous pouvez définir les styles suivants pour l’ensemble du composant HTML dans le panneau de droite :
Image image
Utilisez le composant Image pour insérer une ressource image dans votre contenu. Lorsque le composant Image est sélectionné dans la zone de travail, vous pouvez ajouter ou modifier le fichier de ressource image affiché.
{width="400" modal="regular"}
Ajout de la ressource image add-image-asset
Choisissez une méthode pour ajouter la ressource image :
-
Sélectionner une ressource - Choisissez ce type pour parcourir et sélectionner une ressource image dans la bibliothèque Assets Marketo Optimizer.
Dans la boîte de dialogue, vous pouvez choisir une image dans le référentiel sélectionné. Cliquez sur Sélectionner pour ajouter la ressource.
Plusieurs outils sont disponibles pour vous aider à localiser la ressource dont vous avez besoin :
-
Cliquez sur l’icône Filtrer en haut à gauche pour filtrer les éléments affichés en fonction de vos critères.
-
Saisissez du texte dans le champ Rechercher pour filtrer les éléments affichés afin qu’ils correspondent au nom de la ressource.
-
-
Importer un média - Choisissez ce type pour sélectionner un fichier dans votre système et l’importer dans la bibliothèque de ressources Marketo Optimizer.
Dans la boîte de dialogue Télécharger l’image, effectuez un glisser-déposer d’un fichier de votre système dans la zone de fichier. La taille de fichier maximale est de 100 Mo.
Les noms de fichier des images sélectionnées s’affichent dans la boîte de dialogue. Les noms de fichiers de ressources doivent être uniques (dans plusieurs dossiers) et, si un fichier portant ce nom existe déjà, un message s’affiche. Les noms peuvent contenir au maximum 100 caractères et ne peuvent pas contenir de caractères spéciaux (par exemple
;,:,\et|).Cliquez sur Importer.
Vous pouvez ajouter un titre d’image et un texte secondaire pour l’image dans le panneau de droite.
{width="250"}
Définir les options de lien image-set-link-options
Dans l’onglet Paramètres, utilisez les options Lien pour lier l’image à une destination et le comportement du navigateur pour charger la page cible.
-
Définissez le Type pour le lien :
-
Lien externe - Choisissez ce type pour utiliser une URL standard comme destination du lien.
Dans Url, saisissez l’URL de destination du lien. Cliquez sur l’icône Personnaliser (
-
Page de destination - Choisissez ce type pour sélectionner une page de destination publiée dans l’instance Marketo Engage connectée.
Pour l’option Page de destination, sélectionnez la page de destination publiée. Cliquez sur l’icône Sélectionner une page (
-
-
Pour Libellé, vous pouvez éventuellement saisir un texte descriptif pour le lien de l’image.
-
Pour Target, choisissez comment la destination liée est redirigée à partir de l’e-mail ou de la page :
- Aucune - Ouvre le lien à l’aide du navigateur par défaut ou du comportement du client (par défaut).
- Vide - Ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.
- Self - Ouvre le lien dans le même cadre.
- Parent - Ouvre le lien dans le cadre parent.
- Haut - Ouvre le lien dans le corps complet de la fenêtre.
Définition des styles
Définissez les styles du composant d’image dans le panneau de droite.
Social social
Utilisez le composant Social pour insérer des liens vers des pages de réseaux sociaux dans votre contenu. Il comprend trois types de médias sociaux par défaut, mais vous pouvez les ajouter ou les supprimer en fonction de vos besoins.
{width="600" modal="regular"}
-
Pour ajouter un type de réseau social, cliquez sur l’icône Ajouter ( + ) et choisissez un type de réseau social à ajouter.
-
Pour supprimer un type de réseau social, cliquez sur le X en regard de l’icône de réseau social.
Développez la carte pour chaque type de réseau social afin de définir les options :
- URL - Saisissez l’URL du réseau social que vous souhaitez lier au graphique ou à l’icône du réseau social.
- - Si vous souhaitez utiliser votre propre image au lieu de la valeur par défaut, choisissez une ressource d’image. Vous pouvez sélectionner une image dans la bibliothèque Assets ou importer un fichier image à partir de votre système. Pour plus d’informations sur la sélection et l’importation de ressources d’image🔗 consultez les informations sur les composants d’image .
- Texte secondaire - Saisissez le texte secondaire de l’image affichée.
{width="250"}
Pour définir une taille d’affichage cohérente pour tous les graphiques des réseaux sociaux, définissez la Taille des images.
Vous pouvez définir les options de style suivantes pour le composant Social :
Formulaire (pages de destination uniquement) form
Utilisez le composant Formulaire pour ajouter un formulaire publié à une page de destination ou à un modèle de page de destination. Pour plus d’informations sur la création et la publication de formulaires, voir 🔗.
-
Cliquez sur l’outil Formulaire dans la barre d’outils du composant, ou utilisez les propriétés Incorporer le formulaire à droite pour sélectionner le formulaire publié.
-
Si vous souhaitez remplacer le type de suivi par défaut pour le formulaire, modifiez le paramètre en fonction des exigences de la page ou du modèle.
Cette page est également appelée page de remerciement pour le formulaire. Ce paramètre détermine ce qui se passe lorsqu’un visiteur envoie le formulaire :
-
Rester sur la page - Sélectionnez cette option pour que le visiteur reste sur la même page lors de l’envoi du formulaire.
-
Page de destination - Sélectionnez cette option pour sélectionner n’importe quelle page de destination Marketo Optimizer ou Marketo Engage comme suite.
-
URL externe - Sélectionnez cette option pour spécifier n’importe quelle URL comme page de suivi. Une fois que le visiteur a envoyé le formulaire, le navigateur charge l’URL désignée.
note tip TIP Si vous souhaitez utiliser le formulaire pour télécharger un fichier, vous pouvez spécifier une URL pour le fichier hébergé. Avec cette configuration, le bouton d’envoi fonctionne comme un bouton de téléchargement.
-
Si nécessaire, sélectionnez l’onglet Styles dans le panneau de droite pour définir les marges du formulaire dans le composant de structure.
{{styles-margin}}