Éditeur Studio : Empiler des éléments
6 min
Dans cet article
- Appliquer une pile
- Changer la direction de la pile
- Gérer une pile
- Concevoir le design d'une pile
- Ajuster la mise en page de la pile
Une pile est un conteneur Flexbox qui "accompagne (hug)" un groupe d'éléments, qu'ils soient dans un ordre vertical ou horizontal. Cela garantit que les éléments restent en ordre, avec l'espacement que vous définissez, et ne se chevauchent jamais.
Cela dit, vous pouvez utiliser des marges négatives pour faire se chevaucher intentionnellement des éléments.
Gérer les éléments qui se chevauchent ?
Consultez notre vidéo de dépannage pour savoir ce qu'il faut vérifier et comment résoudre ce problème .
Appliquer une pile
L'empilement d'éléments est un moyen rapide d'organiser votre design avec un espacement cohérent, créant ainsi une mise en page propre et soignée. Lorsque vous sélectionnez plusieurs éléments qui sont côte à côte (dans le même élément parent), l'option de les empiler apparaît.
Pour appliquer une pile :
- Accédez à votre éditeur.
- Cliquez sur un élément que vous souhaitez voir dans la pile.
- Maintenez la touche Maj enfoncée et sélectionnez les autres éléments de la pile.
- Cliquez sur Empiler.
- (Facultatif) Faites glisser la ligne entre les éléments pour configurer les marges.
Suggestion :
Vous pouvez également créer des marges négatives pour faire chevaucher intentionnellement les éléments.
Changer la direction de la pile
Lorsque vous empilez des éléments, la direction est automatiquement déterminée par l'ordre des éléments. Si les éléments sont disposés verticalement, par exemple, la pile sera verticale.
Dans tous les cas, vous pouvez toujours changer la direction à l'aide du menu déroulant. Cela réorganise automatiquement les éléments afin qu'ils soient dans le bon ordre.
Gérer une pile
Vous pouvez personnaliser la pile pour l'adapter au nouveau contenu et aux nouvelles exigences. Ajoutez plus d'éléments à la pile, déplacez-les en un clique et détachez les éléments qui ne sont plus nécessaires.
Pour gérer une pile :
- Accédez à votre éditeur.
- Sélectionnez la pile appropriée.
- Choix de la étape suivante :
Ajouter un élément à la pile
Détacher un élément de la pile
. Ensuite, cliquez sur Détacher de la pile.
Réorganiser les éléments dans la pile
/ Descendre 
, ou le Déplacer vers la gauche 
/ Déplacer vers la droite 
.
Défaire la pile d'éléments
Concevoir le design d'une pile
La pile n'a pas besoin d'être transparente – vous pouvez la concevoir pour faire ressortir le contenu sur la page. Ajoutez une couleur d'arrière-plan, une bordure et une ombre. Vous pouvez également rendre les angles de la pile plus ronds ou carrés.
Pour concevoir une pile :
- Accédez à votre éditeur.
- Sélectionnez la pile appropriée.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- Utilisez les options disponibles sous Design pour personnaliser la pile :
- Définissez la couleur d'arrière-plan et son opacité.
- Ajoutez une bordure pour encadrer la pile.
- Choisissez un rayon pour les angles.
- Activez l'ombre et gérez ses paramètres comme son angle, sa distance, sa taille, etc.
Ajuster la mise en page de la pile
Ajustez la mise en page de la pile pour vous assurer que chaque élément est espacé, aligné et rempli d'une manière qui correspond à votre vision créative ou aux besoins de vos clients.
Pour ajuster la mise en page de la pile :
- Accédez à votre éditeur.
- Sélectionnez la pile appropriée.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.
- Faites défiler la page jusqu'à Mise en page.
- Utilisez les options disponibles pour ajuster la mise en page de la pile :
- Changez la direction de Horizontal à Vertical ou inversement.
- Saisissez une valeur sous Espacement des éléments pour créer des marges égales entre les éléments de la pile (ex. éléments).
- Choisissez un alignement pour les éléments de la pile : Gauche, Droite, Centre ou Justifié.
- Ajoutez un remplissage sur les côtés.
Le saviez-vous ?
Vous pouvez ajuster la marge intérieure et l'espacement directement sur la toile. Faites glisser la ligne entre les éléments ou cliquez deux fois sur la ligne si vous préférez saisir une valeur précise. Vous pouvez même changer l'unité de taille si nécessaire.