Aperçu rapide

Les cadres définissent des zones structurées dans un ShoutOut de mise en page dynamique et agissent comme des conteneurs pour les widgets. Les cadres vous permettent de contrôler la mise en page, l'alignement, l'espacement et la réactivité tout en organisant le contenu dans le canevas.

Cet article explique comment ajouter, styliser, redimensionner et gérer les cadres, y compris le comportement de la mise en page, les règles d'espacement et les options d'alignement.

Style du cadre

Vous pouvez personnaliser l'apparence d'un cadre à partir de l'onglet Style dans le sac de propriétés.

Vous pouvez configurer :

• Rayon de coin
• Largeur et couleur de la bordure
• Couleur de remplissage

Ajout de cadres

Vous pouvez ajouter des cadres des manières suivantes :

• Dupliquer un cadre existant
• Sélectionnez l'icône plus qui apparaît lorsque vous survolez le bord externe du canevas

Comportement et limites du cadre :

• Jusqu'à quatre cadres peuvent être ajoutés dans une seule ligne
• Il n'y a pas de limite au nombre de cadres verticaux
• Lorsque des cadres sont ajoutés ou supprimés, la largeur du canevas est divisée également afin que tous les cadres soient de la même taille
• La largeur de cadre minimale est de 10 % du canevas

Mise en page et redimensionnement

Les cadres prennent en charge le redimensionnement horizontal réactif en fonction de leur relation avec les cadres adjacents.

Redimensionnement des cadres

• Redimensionnez un cadre en faisant glisser le bord partagé avec un autre cadre
• Les cadres peuvent être redimensionnés uniquement à partir d'un côté qui est partagé avec un autre cadre
• La largeur du cadre est calculée sous forme de pourcentage de la largeur de la toile
• Un cadre ne peut pas être redimensionné plus petit que son contenu

Alignement du cadre

Les contrôles d'alignement sont disponibles lorsque les cadres dans la même ligne contiennent différentes quantités de contenu.

Vous pouvez :

• Aligner les éléments verticalement dans un cadre
• Aligner les éléments horizontalement dans un cadre

Espacement du widget

Les cadres contrôlent l'espacement vertical par défaut entre les widgets.

Vous pouvez :

• Ajustez l'espacement vertical par défaut entre les widgets au niveau du cadre
• Remplacer l'espacement pour un widget spécifique au niveau du widget

Déplacement des cadres

Vous pouvez repositionner les cadres dans le canevas en les faisant glisser et en les déposant.

Les cadres peuvent être déplacés :

• Horizontalement
• Verticalement

Espacement interne

L'espacement interne définit la distance entre les bords du cadre et les widgets à l'intérieur.

Pour ajuster l'espacement interne :

• Sélectionnez le cadre
• Définissez une valeur d'espacement uniforme pour tous les côtés ou
• Sélectionnez l'icône des bordures pour contrôler l'espacement par côté

Si un widget couvre entièrement le cadre et empêche la sélection du cadre :

• Utilisez les breadcrumbs pour basculer entre le widget et le cadre

Notes techniques

• Jusqu'à quatre widgets peuvent être ajoutés dans une rangée à l'intérieur d'un cadre