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 forme 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.

Bibliothèque de structures structure-library

Dans la partie supérieure de la bibliothèque Composants, la section Structures affiche les composants de structure disponibles :

Icône

Composant

Description

Colonne 1:1

Conteneur à une seule colonne qui remplit la largeur de l’espace.

1:2 colonne gauche

Conteneur à deux colonnes qui utilise un rapport de 1:2 pour remplir la largeur de l’espace. La première colonne (à gauche) occupe un tiers de la largeur et la seconde (à droite) occupe les deux tiers restants.

1:3 colonne gauche

Conteneur à deux colonnes qui utilise un rapport de 1:3 pour remplir la largeur de l’espace. La première colonne (à gauche) occupe un quart de la largeur et la seconde (à droite) occupe les trois quarts restants.

Colonne 2:1 droite

Conteneur à deux colonnes qui utilise un rapport de 2:1 pour remplir la largeur de l’espace. La première colonne (à gauche) occupe les deux tiers de la largeur et la seconde (à droite) occupe le tiers restant.

Colonne 2:2

Conteneur à deux colonnes qui utilise un rapport de 2:2 pour remplir la largeur de l’espace. Les colonnes de gauche et de droite ont la même largeur.

3:1 colonne droite

Conteneur à deux colonnes qui utilise un rapport de 3:1 pour remplir la largeur de l’espace. La première colonne (gauche) occupe les trois quarts (75 %) de la largeur et la seconde (droite) occupe le quart restant (25 %).

Icône de colonne

Colonne 3:3

Conteneur à trois colonnes qui utilise un rapport de 3:3 pour remplir la largeur de l’espace. Les trois colonnes ont la même largeur.

Colonne 4:4

Conteneur à quatre colonnes qui utilise un rapport de 4:4 pour remplir la largeur de l’espace. Les quatre colonnes ont la même largeur.

n:n colonne

Structure de colonnes personnalisable qui remplit l’espace en fonction des colonnes que vous définissez. Vous définissez le nombre de colonnes (entre deux et dix) et définissez la largeur de chaque colonne individuellement. En savoir plus

Ajouter des composants de structure add-structure-components

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é.

{width="800" modal="regular"}

Barre d’outils de composant component-toolbar

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.

{width="150"}

Outil

Nom

Utilisation

{width="40"}

Activer le contenu conditionnel

(E-mails et fragments) Activez les variantes conditionnelles pour le composant.

{width="100"}

Sélectionner une colonne

Sélectionnez une colonne par numéro. Lorsque la colonne est sélectionnée, vous pouvez appliquer des paramètres et des styles de colonne.

{width="40"}

Dupliquer

Créez une copie du composant et ajoutez-la directement sous .

{width="40"}

Supprimer

Supprimez le composant .

Paramètres de composant component-settings

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. L’onglet Paramètres s’affiche par défaut. 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.

{width="400" modal="regular"}

Choisissez un autre paramètre pour rendre le composant exclusif par type d’appareil :

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é.

{width="600" modal="regular"}

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 stacked-columns

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.

{width="250"}

Styles de composant component-styles

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 background

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.

{width="300"}

Image d’arrière-plan background-image

Déplacez le sélecteur pour activer les paramètres de l’image d’arrière-plan.

{width="250"}

Cliquez sur Sélectionner une ressource pour ouvrir le sélecteur de ressources, où vous pouvez choisir une image dans la bibliothèque Assets.

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 🔗.

{width="250"}

Autres styles other-styles

Vous pouvez appliquer d’autres styles de composant de structure pour ajuster son affichage dans l’e-mail ou la page de destination. Pour définir un style qui va au-delà de ces options intégrées, consultez la section ​ Ajouter un CSS personnalisé pour votre contenu ​.

Colonnes columns

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.

{width="500"}

Outil

Nom

Utilisation

—

Effacer la colonne

Effacez le contenu de la colonne. Reportez-vous au premier outil de la figure de la barre d’outils Colonne .

{width="40"}

Activer le contenu conditionnel

(E-mails et fragments) Activez les variantes conditionnelles pour la colonne.

{width="100"}

Sélectionner une colonne

Sélectionnez une colonne par numéro. Lorsque la colonne est sélectionnée, vous pouvez appliquer des paramètres et des styles.

Modifier n:n colonnes change-nn-columns

Les largeurs de colonne 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.

{width="650" modal="regular"}

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.

{width="500" modal="regular"}

Styles de colonne column-styles

Lorsque la colonne est sélectionnée dans la zone de travail, vous pouvez définir des styles à appliquer à cette colonne.

Arborescence de navigation navigation-tree

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 ( ) à gauche pour afficher l’arborescence.

{width="800" modal="regular"}

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.

{width="800" modal="regular"}