Mise en page

Aperçu

Le composant Avonni Layout est conçu pour optimiser et rationaliser la présentation du contenu sur votre site Experience Cloud. Offrant un mélange d'options d'alignement et d'affichage, il garantit que le contenu de votre site soit organisé, réactif et adapté à différentes tailles d'appareils.

Ce composant utilise des slots 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 grille	Apprenez à créer une mise en page en grille dynamique avec les composants Avonni pour présenter des produits ou des fonctionnalités.
Configuration d'Avonni Layout pour être responsable	Apprenez à créer des mises en page responsives 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 assurer un alignement cohérent du contenu, 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.
Tirer vers la limite	Permet au contenu de s'étendre vers les limites de la mise en page.	Utilisez cette option pour créer des mises en page qui maximisent l'espace, améliorant la visibilité et la présentation des éléments de contenu.
Lignes multiples	Permet d'accueillir du contenu sur plusieurs lignes.	Activez cette fonctionnalité lorsque votre mise en page exige la répartition du contenu en séquence verticale, facilitant une présentation structurée et organisée.
Afficher en tant que section	Définissez la mise en page pour qu'elle apparaisse comme une section distincte dans la page.	Définissez la mise en page pour qu'elle apparaisse comme une section distincte dans la page.
Disposition en colonnes	Déterminez la manière dont le contenu est affiché au sein des 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 la disposition des colonnes

Les paramètres de la disposition des colonnes offrent une flexibilité dans l'organisation du contenu de la page, garantissant qu'il s'adapte de manière réactive aux différentes tailles d'écran et appareils tout en conservant une apparence propre et structurée.

Type

Détermine la nature de la disposition 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 des 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 requise.

• Utilisation : Choisir Flexible pour des mises en page fluides qui doivent s'adapter à 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 combien d'espace chaque colonne doit occuper. Par exemple, définir une taille de 4 dans une grille de 12 unités signifierait 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 :

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

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

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

Les paramètres de disposition 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.