AX - Mise en page

Aperçu

AX - Mise en page est un composant Experience Cloud qui organise d'autres composants en lignes et colonnes structurées avec des tailles et un alignement flexibles sur les pages des sites Experience.

Utilisez-le pour créer des mises en page multi-colonnes, des grilles réactives ou des structures de page personnalisées en faisant glisser et déposant des composants dans les sections de mise en page. Contrôlez la largeur des colonnes, l'espacement, l'alignement et le comportement responsif pour différentes tailles d'écran dans Experience Builder.

Parfait pour les mises en page de tableaux de bord, les sections de formulaires, les grilles de contenu, les tableaux de comparaison, ou partout où votre portail a besoin d'une organisation de contenu structurée en plusieurs colonnes qui s'adapte au mobile et au bureau.

Ce composant utilise des emplacements pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.

🎥 Tutoriels

Nom	Description
Créer une mise en page en grille	Apprenez à créer une mise en grille dynamique avec les composants Avonni pour présenter des produits ou des fonctionnalités.
Configurer Avonni Layout pour être responsable	Apprenez à créer des mises en page réactives et conviviales avec Avonni Layout dans Experience Cloud sur divers appareils.

Propriétés

Nom	Description	Utilisation
Alignement horizontal	Ajustez l'alignement horizontal du contenu au sein de la mise en page	Utilisez ce paramètre pour garantir que le contenu s'aligne de manière cohérente, en maintenant une apparence équilibrée et harmonieuse dans toute la mise en page.
Alignement vertical	Manipulez l'alignement vertical du contenu au sein de la mise en page.	Optimisez le positionnement vertical du contenu, en veillant à ce qu'il soit présenté de manière visuellement attrayante et en accord avec les objectifs de conception globaux.
Étendre jusqu'aux bords	Permet au contenu de s'étendre vers les limites de la mise en page.	Utilisez cette option pour concevoir des mises en page qui maximisent l'espace, améliorant la visibilité et la présentation des éléments de contenu.
Plusieurs lignes	Permet l'accueil du contenu sur plusieurs lignes.	Activez cette fonctionnalité lorsque votre mise en page nécessite la répartition du contenu en séquence verticale, facilitant une présentation structurée et organisée.
Afficher comme section	Définissez la mise en page pour qu'elle se manifeste comme une section distincte au sein de la page.	Définissez la mise en page pour qu'elle se manifeste comme une section distincte au sein de la page.
Mise en page des colonnes	Déterminez la manière dont le contenu est affiché dans les colonnes.	Personnalisez la configuration des colonnes pour établir une structure en grille, favorisant un agencement systématique et soigné du contenu pour une navigation visuelle améliorée.

Paramètres de mise en page des colonnes

Les paramètres de mise en page des colonnes offrent de la flexibilité pour organiser le contenu de la page, en veillant à ce qu'il s'adapte de manière réactive à différentes tailles d'écran et appareils tout en conservant une apparence propre et structurée.

Type

Détermine la nature de la mise en page des colonnes.

• Options :

  • Flexible: Les colonnes de ce type de mise en page ajustent leur taille dynamiquement en fonction du contenu et de l'espace d'écran disponible. Cette option est idéale pour les conceptions responsives où la mise en page doit s'adapter à différentes tailles d'appareils.

  • Fixe: Cette option maintient une taille constante pour les colonnes, indépendamment de la taille de l'écran ou du volume de contenu. Les colonnes fixes sont utiles lorsqu'une mise en page uniforme et cohérente est nécessaire.

• Utilisation : Choisissez Flexible pour des mises en page fluides qui doivent s'ajuster à différentes tailles d'écran, et Fixe pour des mises en page qui nécessitent une cohérence dans la largeur des colonnes.

Taille

Définit la largeur des colonnes au sein de la grille. Le système de grille est généralement basé sur une structure de 12 unités.

• Plage : 1 à 12, où chaque unité représente une proportion de la largeur totale disponible.

• Utilisation : Attribuez une taille pour définir l'espace que chaque colonne doit occuper. Par exemple, définir une taille de 4 dans une grille de 12 unités signifie que la colonne occupe un tiers de l'espace horizontal disponible.

Décalage d'alignement

Ajuste la position de la colonne dans son conteneur.

• Options :

  • Gauche: Décale la colonne vers le bord gauche du conteneur.

  • Droite: Déplace la colonne vers le bord droit.

  • Haut: Aligne la colonne plus près du haut du conteneur.

  • Bas: Positionne la colonne près du bas du conteneur.

• Utilisation : Utilisez ce paramètre pour affiner la position des colonnes par rapport à leur environnement, améliorant l'attrait visuel et l'équilibre spatial de la mise en page.

Espacement intérieur (padding)

Contrôle l'espacement interne de la colonne.

• Options :

  • Horizontal: Ajuste le padding sur les côtés gauche et droit de la colonne.

  • Autour: Ajoute du padding sur tous les côtés de la colonne.

• Utilisation : Appliquez du padding pour créer de l'espace à l'intérieur de la colonne, en veillant à ce que le contenu ne soit pas collé aux bords, améliorant la lisibilité et l'esthétique visuelle.

Les paramètres de mise en page des colonnes du composant Avonni Layout sont essentiels pour créer des mises en page soignées et fonctionnelles sur les sites Salesforce Experience Cloud.