Composants de structure structure-components
Utilisez la Composants de structure dans l’espace de conception visuelle pour définir la structure de votre contenu. En ajoutant et en déplaçant des éléments structurels à l’aide de simples actions de glisser-déposer, vous pouvez rapidement définir la structure de votre disposition de contenu. Chaque composant de structure s’étend sur l’espace horizontal et vous pouvez les empiler pour créer la disposition verticalement. Pour former chaque bloc de contenu dont vous avez besoin, divisez chaque composant en colonnes.
Bibliothèque de structures
Dans la partie supérieure de la bibliothèque Composants, la section Structures affiche les composants de structure disponibles :
Ajouter des composants de structure
Lorsque vous concevez le contenu de votre e-mail, page de destination ou fragment, ajoutez chaque composant de structure pour construire la disposition. Faites glisser un élément de la section Structures à gauche et déposez-le sur la zone de travail. Vous pouvez utiliser la barre d’outils pour sélectionner une colonne et utiliser les onglets Paramètres et Styles dans le panneau de droite pour définir les paramètres du composant ou de la colonne sélectionné.
Barre d’outils de composant
La barre d’outils s’affiche dans la zone de travail lorsque vous la sélectionnez. Les outils disponibles permettent de sélectionner facilement une colonne et d’appliquer des fonctions de composant.
Paramètres de composant
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. Par défaut, le système affiche l’onglet Paramètres. Vous pouvez également sélectionner un composant de structure à tout moment pour modifier les paramètres.
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.
En-tête et pied de page
Vous pouvez désigner un composant de structure en tant qu’en-tête ou pied de page HTML dans l’e-mail ou la page de destination. Lorsque le composant de structure est sélectionné dans la zone de travail, cliquez sur l’option En-tête ou Pied de page. Il ne peut y avoir qu’un seul en-tête ou pied de page et l’option n’est pas disponible si un autre composant est affecté.
Vous pouvez supprimer la désignation d’en-tête ou de pied de page en sélectionnant le composant et en cliquant sur l’option permettant de le supprimer.
Colonnes empilées
Pour les écrans ou les fenêtres d’affichage plus petits, les colonnes du composant de structure s’affichent comme empilées, sauf si vous modifiez le paramètre par défaut. Lorsque le composant de structure à plusieurs colonnes est sélectionné, modifiez le paramètre Ne pas empiler de colonnes sur un appareil mobile en déplaçant le curseur de basculement vers la droite.
Styles de composant
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.
Contexte
Lorsque l’onglet Styles est sélectionné dans le panneau de droite, utilisez la section Arrière-plan pour définir la couleur et l’image facultative à utiliser comme arrière-plan pour le composant de structure.
Couleur d’arrière-plan
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.
Image d’arrière-plan background-image
Pour activer les paramètres de l’image d’arrière-plan, déplacez le sélecteur de bascule.
Sélectionnez le type de source de ressource puis sélectionnez le fichier image :
Choisissez ce type pour parcourir et sélectionner une ressource d’image dans la bibliothèque B2B edition Journey Optimizer ou dans l’instance Market Engage connectée.
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.
Choisissez ce type pour parcourir et sélectionner une ressource image dans un référentiel Experience Manager Assets configuré.
Dans la boîte de dialogue Sélectionner Assets, choisissez une image à l’aide des outils disponibles pour localiser la ressource dont vous avez besoin, puis cliquez sur Sélectionner. :
-
Modifiez le Référentiel en haut à droite.
-
Cliquez sur Gérer les ressources en haut à droite pour ouvrir le référentiel Assets dans un autre onglet du navigateur et utiliser les outils de gestion d’AEM Assets.
-
Cliquez sur le sélecteur Type de vue en haut à droite pour remplacer l’affichage par Vue Liste, Vue Grille, Vue Galerie ou Vue Cascade.
-
Cliquez sur l’icône Ordre de tri pour modifier l’ordre de tri entre croissant et décroissant.
-
Cliquez sur la flèche du menu Trier par pour remplacer les critères de tri par Nom, Taille ou Modifié.
-
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.
Choisissez ce type pour sélectionner un fichier dans votre système et l’importer dans la bibliothèque de ressources Journey Optimizer B2B edition.
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.
Utilisez l’option Emplacement de l’image pour choisir le remplissage du composant de structure par l’image. Les paramètres d’emplacement suivent les attributs standard de remplissage et d’alignement des images d’arrière-plan 🔗.
Autres styles
Pour ajuster son affichage dans l’e-mail ou la page de destination, vous pouvez appliquer d’autres styles de composant de structure.
-
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 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.
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.
Colonnes
Utilisez l’outil Sélectionner une colonne de la barre d’outils du composant pour sélectionner une colonne. Vous pouvez ensuite utiliser la barre d’outils des colonnes pour modifier la sélection de colonne, supprimer la colonne ou appliquer des variations de contenu conditionnel à la colonne. Les paramètres de la colonne s’affichent dans les onglets Paramètres et Styles à droite.
Modifier n:n colonnes
Les largeurs des colonnes sont statiques pour la plupart des composants de structure. Lorsque vous ajoutez le composant n:n colonne, vous pouvez modifier le nombre de colonnes et le dimensionnement des colonnes. Le composant n:n colonne commence par cinq colonnes de largeur égale (20 %).
Une fois le composant sélectionné dans la zone de travail, utilisez l’option Nombre de colonnes dans le panneau de droite pour modifier le nombre de colonnes. Cliquez sur les icônes fléchées vers le haut et vers le bas pour augmenter ou diminuer le nombre de colonnes, ou saisissez le nombre dans le champ.
Dans la zone de travail, déplacez l’icône de redimensionnement de colonne pour ajuster la largeur de la colonne sélectionnée. À mesure que vous augmentez ou réduisez la largeur, la colonne adjacente s’ajuste également de sorte que toutes les colonnes occupent 100 % de la largeur du composant.
Styles de colonne
Pour définir les styles à appliquer à cette colonne, sélectionnez-la dans la zone de travail.
-
Couleur d’arrière-plan - 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.
-
Image d’arrière-plan - Pour activer les paramètres d’image d’arrière-plan, déplacez le sélecteur de bascule.
Choisissez le type de source de la ressource et sélectionnez un fichier image.
-
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é.
Développez la section Alignement et sélectionnez l’alignement vertical à utiliser : haut, milieu ou bas. Ce style se traduit par un style CSS vertical-align standard et affecte le positionnement 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.
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.
Arborescence de navigation
Dans l’espace de conception visuelle, vous pouvez accéder aux composants structurels, notamment aux colonnes et au contenu, à l’aide de l’arborescence de navigation. Cliquez sur l’icône Arborescence de navigation (
L’élément Body est la racine de l’arborescence. Cliquez sur l’un des composants ou éléments enfants de colonne de l’arborescence pour le sélectionner sur la zone de travail. Les onglets Paramètres et Styles sur la droite affichent les paramètres de ce composant ou de cette colonne.
