Piles Wix Studio : aligner vos éléments sans effort 📚

Une pile (stack en anglais) est un conteneur invisible qui attache plusieurs éléments entre eux, à la verticale ou à l'horizontale, avec un espacement fixe. C'est l'outil le plus simple de Wix Studio pour garder une mise en page propre sur tous les écrans.

En bref : alignez des éléments dans le même parent, sélectionnez-les, puis cliquez sur Empiler. Les éléments restent collés entre eux avec le même écart, et ne se chevauchent plus sur mobile, même si un texte s'allonge.

À quoi sert une pile dans Wix Studio ?

Sans pile, chaque élément est positionné indépendamment dans sa section. Si un titre passe sur deux lignes sur mobile, il peut recouvrir le paragraphe du dessous. Avec une pile, le paragraphe descend avec le titre : l'espacement est conservé.

• un bloc titre, texte et bouton ;

• une rangée de boutons ou d'icônes de réseaux sociaux ;

• une carte avec image, titre et prix ;

• une colonne de coordonnées dans le footer.

Comment créer une pile dans Wix Studio ?

1. Alignez vos éléments les uns sous les autres (ou côte à côte) dans le même parent : même section, même cellule ou même conteneur.

2. Sélectionnez un élément et survolez l'icône Empiler : un aperçu de la pile s'affiche.

3. Cliquez sur l'icône pour créer la pile. Vous pouvez aussi sélectionner plusieurs éléments sur le canevas et cliquer sur Empiler dans l'Inspecteur.

4. Si vos éléments forment un carré (2 x 2), choisissez entre une pile verticale et une pile horizontale.

Pour ajouter un élément, faites-le glisser sur la pile jusqu'au message d'attache. Pour le retirer, faites-le glisser hors de la pile, ou utilisez l'option de détachement dans le menu Plus d'actions. Le bouton pour désempiler supprime la pile et garde les éléments.

Régler une pile : espacement, alignement, ordre

Piles et responsive

Selon Wix, la pile maintient l'espacement entre les éléments, évite les chevauchements sur les petits écrans et permet de personnaliser l'ordre des éléments par breakpoint. Pratique pour faire passer une image sous un texte sur mobile.

Les limites : créer ou défaire une pile est un changement de structure, qui s'applique à tous les écrans. Impossible d'empiler des éléments seulement sur mobile (Wix le recense comme une demande de fonctionnalité). Et une pile ne gère qu'un seul axe : pour une mise en page en lignes et en colonnes, passez à la grille CSS ou à une flexbox.

Mon avis de webdesigner sur les piles

Mon conseil : empilez presque tout. Un titre, un texte, un bouton : une pile. Une liste d'icônes : une pile. C'est la meilleure assurance contre les chevauchements sur mobile, l'un des problèmes les plus fréquents chez les débutants sur Wix Studio.

Attention quand même aux alignements entre cartes : dans un répéteur, des titres de longueurs différentes décalent les images. Dans ce cas, une grille CSS avec une rangée en max-content fait mieux le travail. Pour la vue d'ensemble des outils, voir le guide du responsive Wix Studio. Et si vous préférez qu'un pro s'en occupe, découvrez mon offre de webdesigner freelance.

Questions fréquentes sur les piles Wix Studio

Quelle différence entre une pile et un conteneur ?

La pile aligne automatiquement ses éléments sur un axe, avec un espacement fixe. Le conteneur est une boîte dans laquelle les éléments se positionnent librement, ou selon une grille CSS.

Peut-on empiler des éléments seulement sur mobile ?

Non, l'empilement s'applique à tous les breakpoints. En revanche, l'ordre des éléments dans la pile peut changer selon l'écran.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : empiler des éléments, Wix : choisir entre les outils Flexbox et Grid.