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 située au bas 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. Elle comprend des fonctionnalités de formatage et fonctionnelles qui s’appliquent au type de composant.
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 (URL externe ou page de destination) 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 (URL externe ou page de destination) du texte ou de 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
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 Style à 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.
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.
Conteneur
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.
Une fois l’onglet Styles sélectionné dans le panneau de droite, utilisez la section Arrière-plan pour définir la couleur d’arrière-plan du composant.
Cochez la case et 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.
-
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Bordure et définissez les options d’affichage d’une bordure pour le composant :
-
Déplacez le bouton (bascule) vers la droite pour activer les options d’affichage des bordures et les définir en fonction de vos critères de conception :
- Pour définir la couleur de la bordure, cochez la case et 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.
-
Pour définir la Taille de la bordure (largeur de ligne), cliquez sur les icônes de flèche vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Pour définir le style de bordure, choisissez une valeur dans la liste des valeurs de
border-styleCSS standard. -
Pour déterminer l’emplacement d’affichage de la bordure, cochez chaque case Position de la bordure.
-
Pour le rayon de la bordure, définissez la valeur numérique en fonction de la courbe que vous souhaitez pour les coins.
Une valeur de 0 (par défaut) génère un coin carré.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Taille et définissez les options de hauteur et de largeur du composant :
-
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.
-
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge et définissez les options d’espacement des marges dans le composant structurel. Ce style réplique le paramètre margin CSS, qui contrôle l’espace à l’extérieur d’une bordure de composant, le séparant des autres composants. Cela crée un espace autour du composant afin d’influencer son positionnement et la mise en page du contenu environnant.
Définissez les valeurs de marge en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir les marges supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir les marges gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir chaque marge sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge intérieure et définissez les options de marge intérieure dans le composant structurel. Ce style réplique le paramètre padding CSS, qui correspond à l’espace entre le contenu d’un composant et sa bordure. La marge intérieure fournit un espacement interne que vous pouvez utiliser pour contrôler la distance entre le contenu et la bordure du composant.
Définissez les valeurs de marge intérieure en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge intérieure pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge intérieure différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir la marge intérieure supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir la marge intérieure gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir la marge intérieure de chaque côté sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Bouton
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 #.
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.
Définir les options de lien
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 de la mise en forme 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.
Une fois l’onglet Styles sélectionné dans le panneau de droite, utilisez la section Arrière-plan pour définir la couleur d’arrière-plan du composant.
Cochez la case et 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.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Texte et définissez les options des styles de texte des composants :
-
Famille de polices - Cliquez sur l’icône de flèche vers le bas pour sélectionner une famille de polices pour le texte au sein du composant.
-
Taille de police - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire la taille de la police, ou saisissez une valeur. Pour les valeurs saisies, vous pouvez utiliser des décimales.
-
Hauteur de la ligne - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou diminuer la hauteur de la ligne, ou saisissez une valeur. Pour les valeurs saisies, vous pouvez utiliser des décimales.
-
Styles de texte - Sélectionnez l’icône du style de texte : Gras, Italique, Souligné ou Barré.
-
Alignement du texte - Sélectionnez l’icône pour l’alignement horizontal du texte : Gauche, Centré, Droite ou Justifié.
-
Couleur de la police - Cliquez sur le carré de couleur pour choisir une couleur de police 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.
-
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Bordure et définissez les options d’affichage d’une bordure pour le composant :
-
Déplacez le bouton (bascule) vers la droite pour activer les options d’affichage des bordures et les définir en fonction de vos critères de conception :
- Pour définir la couleur de la bordure, cochez la case et 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.
-
Pour définir la Taille de la bordure (largeur de ligne), cliquez sur les icônes de flèche vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Pour définir le style de bordure, choisissez une valeur dans la liste des valeurs de
border-styleCSS standard. -
Pour déterminer l’emplacement d’affichage de la bordure, cochez chaque case Position de la bordure.
-
Pour le rayon de la bordure, définissez la valeur numérique en fonction de la courbe que vous souhaitez pour les coins.
Une valeur de 0 (par défaut) génère un coin carré.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Taille et définissez les options de hauteur et de largeur du composant :
-
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.
-
+++Alignement
+++
+++Marge du bouton
+++
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge et définissez les options d’espacement des marges dans le composant structurel. Ce style réplique le paramètre margin CSS, qui contrôle l’espace à l’extérieur d’une bordure de composant, le séparant des autres composants. Cela crée un espace autour du composant afin d’influencer son positionnement et la mise en page du contenu environnant.
Définissez les valeurs de marge en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir les marges supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir les marges gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir chaque marge sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge intérieure et définissez les options de marge intérieure dans le composant structurel. Ce style réplique le paramètre padding CSS, qui correspond à l’espace entre le contenu d’un composant et sa bordure. La marge intérieure fournit un espacement interne que vous pouvez utiliser pour contrôler la distance entre le contenu et la bordure du composant.
Définissez les valeurs de marge intérieure en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge intérieure pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge intérieure différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir la marge intérieure supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir la marge intérieure gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir la marge intérieure de chaque côté sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Pour appliquer d’autres attributs compatibles CSS avec les valeurs , utilisez les paramètres de style Avancé. Vous pouvez modifier les valeurs des attributs existants ou en ajouter de nouveaux. La mise en forme est appliquée au composant à l’aide du modèle d’héritage CSS pour les composants parents-enfants (éléments).
Les attributs affichés reflètent les styles actuellement définis pour le composant. Vous pouvez modifier les valeurs en fonction des définitions CSS . Cliquez sur l’icône Ajouter (+) pour ajouter un nouvel attribut de style au composant.
Texte
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.
Une fois l’onglet Styles sélectionné dans le panneau de droite, utilisez la section Arrière-plan pour définir la couleur d’arrière-plan du composant.
Cochez la case et 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.
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.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Texte et définissez les options des styles de texte des composants :
-
Famille de polices - Cliquez sur l’icône de flèche vers le bas pour sélectionner une famille de polices pour le texte au sein du composant.
-
Taille de police - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire la taille de la police, ou saisissez une valeur. Pour les valeurs saisies, vous pouvez utiliser des décimales.
-
Hauteur de la ligne - Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou diminuer la hauteur de la ligne, ou saisissez une valeur. Pour les valeurs saisies, vous pouvez utiliser des décimales.
-
Styles de texte - Sélectionnez l’icône du style de texte : Gras, Italique, Souligné ou Barré.
-
Alignement du texte - Sélectionnez l’icône pour l’alignement horizontal du texte : Gauche, Centré, Droite ou Justifié.
-
Couleur de la police - Cliquez sur le carré de couleur pour choisir une couleur de police 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.
-
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Bordure et définissez les options d’affichage d’une bordure pour le composant :
-
Déplacez le bouton (bascule) vers la droite pour activer les options d’affichage des bordures et les définir en fonction de vos critères de conception :
- Pour définir la couleur de la bordure, cochez la case et 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.
-
Pour définir la Taille de la bordure (largeur de ligne), cliquez sur les icônes de flèche vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Pour définir le style de bordure, choisissez une valeur dans la liste des valeurs de
border-styleCSS standard. -
Pour déterminer l’emplacement d’affichage de la bordure, cochez chaque case Position de la bordure.
-
Pour le rayon de la bordure, définissez la valeur numérique en fonction de la courbe que vous souhaitez pour les coins.
Une valeur de 0 (par défaut) génère un coin carré.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Taille et définissez les options de hauteur et de largeur du composant :
-
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.
-
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge et définissez les options d’espacement des marges dans le composant structurel. Ce style réplique le paramètre margin CSS, qui contrôle l’espace à l’extérieur d’une bordure de composant, le séparant des autres composants. Cela crée un espace autour du composant afin d’influencer son positionnement et la mise en page du contenu environnant.
Définissez les valeurs de marge en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir les marges supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir les marges gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir chaque marge sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge intérieure et définissez les options de marge intérieure dans le composant structurel. Ce style réplique le paramètre padding CSS, qui correspond à l’espace entre le contenu d’un composant et sa bordure. La marge intérieure fournit un espacement interne que vous pouvez utiliser pour contrôler la distance entre le contenu et la bordure du composant.
Définissez les valeurs de marge intérieure en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge intérieure pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge intérieure différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir la marge intérieure supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir la marge intérieure gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir la marge intérieure de chaque côté sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Pour appliquer d’autres attributs compatibles CSS avec les valeurs , utilisez les paramètres de style Avancé. Vous pouvez modifier les valeurs des attributs existants ou en ajouter de nouveaux. La mise en forme est appliquée au composant à l’aide du modèle d’héritage CSS pour les composants parents-enfants (éléments).
Les attributs affichés reflètent les styles actuellement définis pour le composant. Vous pouvez modifier les valeurs en fonction des définitions CSS . Cliquez sur l’icône Ajouter (+) pour ajouter un nouvel attribut de style au composant.
Diviseur
Ajoutez un composant Diviseur pour incorporer une division linéaire entre les sections de votre contenu.
Une fois l’onglet Styles sélectionné dans le panneau de droite, utilisez la section Arrière-plan pour définir la couleur d’arrière-plan du composant.
Cochez la case et 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.
+++Ligne
+++
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Taille et définissez les options de hauteur et de largeur du composant :
-
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.
-
Développez la section Alignement et sélectionnez l’alignement horizontal à utiliser : gauche, centre ou droite. Ce style se traduit par un style CSS text-align standard et affecte la manière dont le composant est positionné dans le composant conteneur.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge et définissez les options d’espacement des marges dans le composant structurel. Ce style réplique le paramètre margin CSS, qui contrôle l’espace à l’extérieur d’une bordure de composant, le séparant des autres composants. Cela crée un espace autour du composant afin d’influencer son positionnement et la mise en page du contenu environnant.
Définissez les valeurs de marge en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir les marges supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir les marges gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir chaque marge sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge intérieure et définissez les options de marge intérieure dans le composant structurel. Ce style réplique le paramètre padding CSS, qui correspond à l’espace entre le contenu d’un composant et sa bordure. La marge intérieure fournit un espacement interne que vous pouvez utiliser pour contrôler la distance entre le contenu et la bordure du composant.
Définissez les valeurs de marge intérieure en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge intérieure pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge intérieure différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir la marge intérieure supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir la marge intérieure gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir la marge intérieure de chaque côté sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Pour appliquer d’autres attributs compatibles CSS avec les valeurs , utilisez les paramètres de style Avancé. Vous pouvez modifier les valeurs des attributs existants ou en ajouter de nouveaux. La mise en forme est appliquée au composant à l’aide du modèle d’héritage CSS pour les composants parents-enfants (éléments).
Les attributs affichés reflètent les styles actuellement définis pour le composant. Vous pouvez modifier les valeurs en fonction des définitions CSS . Cliquez sur l’icône Ajouter (+) pour ajouter un nouvel attribut de style au composant.
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.
Boîte de dialogue Modifier HTML
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 :
Une fois l’onglet Styles sélectionné dans le panneau de droite, utilisez la section Arrière-plan pour définir la couleur d’arrière-plan du composant.
Cochez la case et 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.
-
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Bordure et définissez les options d’affichage d’une bordure pour le composant :
-
Déplacez le bouton (bascule) vers la droite pour activer les options d’affichage des bordures et les définir en fonction de vos critères de conception :
- Pour définir la couleur de la bordure, cochez la case et 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.
-
Pour définir la Taille de la bordure (largeur de ligne), cliquez sur les icônes de flèche vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Pour définir le style de bordure, choisissez une valeur dans la liste des valeurs de
border-styleCSS standard. -
Pour déterminer l’emplacement d’affichage de la bordure, cochez chaque case Position de la bordure.
-
Pour le rayon de la bordure, définissez la valeur numérique en fonction de la courbe que vous souhaitez pour les coins.
Une valeur de 0 (par défaut) génère un coin carré.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Taille et définissez les options de hauteur et de largeur du composant :
-
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.
-
Développez la section Alignement et choisissez l’alignement horizontal et vertical à utiliser. Les styles d’alignement affectent la manière dont le composant HTML est positionné dans le composant conteneur (structurel ou conteneur).
L’alignement horizontal se traduit par un style CSS text-align standard et vous pouvez choisir entre gauche, centre ou droite. L’alignement vertical se traduit par le style standard vertical-align CSS et vous pouvez choisir entre le haut, le milieu et le bas.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge et définissez les options d’espacement des marges dans le composant structurel. Ce style réplique le paramètre margin CSS, qui contrôle l’espace à l’extérieur d’une bordure de composant, le séparant des autres composants. Cela crée un espace autour du composant afin d’influencer son positionnement et la mise en page du contenu environnant.
Définissez les valeurs de marge en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir les marges supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir les marges gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir chaque marge sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Dans le panneau de droite avec l’onglet Styles sélectionné, développez la section Marge intérieure et définissez les options de marge intérieure dans le composant structurel. Ce style réplique le paramètre padding CSS, qui correspond à l’espace entre le contenu d’un composant et sa bordure. La marge intérieure fournit un espacement interne que vous pouvez utiliser pour contrôler la distance entre le contenu et la bordure du composant.
Définissez les valeurs de marge intérieure en pixels en fonction de vos besoins de conception. Vous pouvez définir la marge intérieure pour tous les côtés, le coin supérieur inférieur, le coin gauche droit ou chaque côté du composant indépendamment :
-
Tous les côtés - Pour définir une valeur à appliquer à tous les côtés, désélectionnez la case Marge intérieure différente pour chaque côté. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Haut et bas - Pour définir la marge intérieure supérieure et inférieure sur la même valeur, définissez l’icône Verrouillé entre les paramètres supérieur et inférieur. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Gauche-droite - Pour définir la marge intérieure gauche et droite sur la même valeur, définissez l’icône Verrouillé entre les paramètres gauche et droite. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
-
Indépendant - Pour définir la marge intérieure de chaque côté sur une valeur indépendante, définissez l’icône Déverrouillé entre les paramètres supérieur et inférieur et entre la gauche et la droite. Pour chaque paramètre, cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou réduire le nombre de pixels.
Pour appliquer d’autres attributs compatibles CSS avec les valeurs , utilisez les paramètres de style Avancé. Vous pouvez modifier les valeurs des attributs existants ou en ajouter de nouveaux. La mise en forme est appliquée au composant à l’aide du modèle d’héritage CSS pour les composants parents-enfants (éléments).
Les attributs affichés reflètent les styles actuellement définis pour le composant. Vous pouvez modifier les valeurs en fonction des définitions CSS . Cliquez sur l’icône Ajouter (+) pour ajouter un nouvel attribut de style au composant.
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é.
Ajout de la ressource image
Sélectionnez le type de source de ressource puis sélectionnez un fichier image :