Éditeur Studio : Empiler des éléments
8 min
Dans cet article
- Appliquer une pile
- Passer de la pile horizontale à la pile verticale
- Gérer une pile
- Concevoir le design d'une pile
- Ajuster la mise en page de la 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. Une pile est un conteneur Flexbox qui "accompagne (hug)" un groupe d'éléments - afin qu'ils restent dans l'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
Lorsque les éléments sont placés l'un à côté de l'autre (dans le même élément parent), l'option pour les Empiler apparaît. En fonction de l'ordre dans lequel vous placez les éléments, vous pouvez les Empiler horizontalement ou verticalement.
Bon à savoir :
- Si les éléments sont placés sous une forme carrée (ex. 2 x 2 éléments), les options de pile verticale et horizontale sont disponibles pour que vous puissiez choisir.
- Vous pouvez utiliser le check-list responsive pour détecter les opportunités d'Empiler des éléments côte à côte, en vous assurant qu'ils ne se chevauchent jamais par inadvertance.
Pour appliquer une pile :
- Accédez à votre éditeur.
- Alignez les éléments que vous souhaitez Empiler.
- Sélectionnez l'un des éléments.
- Survolez l'icône Empiler
(horizontal) /
(vertical) pour prévisualiser à quoi ressemblera la pile.
Remarque : Les icônes de la pile disponibles (horizontal ou vertical) dépendent de la façon dont vous avez aligné les éléments. - Cliquez sur l'icône Pile pour l'appliquer.
- (Facultatif) Faites glisser la ligne entre les éléments pour configurer les marges.
Le saviez-vous ?
Vous pouvez également créer des marges négatives pour faire chevaucher intentionnellement les éléments.
Passer de la pile horizontale à la pile verticale
Vous n'aimez pas la mise en page d'une pile ? Vous pouvez toujours le faire passer de horizontal à vertical (et vice versa) pour les aligner comme vous le souhaitez. Cela réorganise automatiquement les éléments pour qu'ils soient dans le bon ordre.
Pour changer la mise en page d'une pile :
- Sélectionnez la stylisation dans votre Éditeur.
- Cliquez sur le menu déroulant.
- Sélectionnez Horizontal ou Vertical.
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 bouton Déplacer vers la gauche 
/ Déplacer vers la droite 
icônes.
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. Vous pouvez également ajuster son opacité et ajouter un effet de verre.
- 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 :
- Faites passer la mise en page de la pile de horizontal à vertical ou inversement.
- (horizontal uniquement) Changez la direction de gauche à droite à droite à gauche 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.