Cellules Wix Studio : structurer vos grilles de section 💡

Les cellules sont les briques de base des grilles de section. Elles définissent où les éléments peuvent se placer et garantissent que le design reste cohérent quand l'écran change (ordinateur, tablette, mobile).

Dès qu’une section contient plusieurs zones (texte + image, colonnes, blocs distincts), les cellules deviennent indispensables.

En bref : une cellule est une case de la grille de section. Vous pouvez en créer jusqu'à 16 par section, les fusionner, les diviser et les échanger. Un élément reste dans sa cellule sur tous les écrans : c'est simple et fiable, mais moins souple qu'une grille CSS.

Comment ajouter des cellules dans Wix Studio ?

1. Sélectionnez une section.

2. Dans l'Inspecteur, partie Mise en page, choisissez une disposition : colonnes, lignes ou collage.

3. Réglez les écarts entre les cellules (espace horizontal et vertical).

4. Placez vos éléments dans les cellules, et non « en flottant » par-dessus.

Fusionner, diviser, échanger : gérer ses cellules

⚠️ Une fusion de cellules s'applique à tous les breakpoints. Au-delà de 16 cellules, créez une nouvelle section ou passez à la grille CSS.

Les cellules et le responsive

Les cellules facilitent énormément le responsive si la grille est bien pensée dès le départ. Une mauvaise structure de cellules entraîne des décalages, des chevauchements ou des ajustements manuels inutiles sur mobile. Elles sont simples à comprendre et suffisent pour rendre responsive un site dont la mise en page n'est pas trop complexe.

Sur tablette et mobile, vous gardez une vraie marge de manœuvre :

• Vous pouvez échanger l'ordre des cellules sur tablette et mobile sans impacter l'ordinateur, en cliquant sur le carré bleu avec les 4 points.

• Vous pouvez passer d'une disposition en colonnes à une disposition en rangées.

La limite : un élément ne peut pas changer de cellule selon l'écran, car ce serait un changement de structure, commun à tous les breakpoints.

Cellules ou conteneurs avec grille CSS : comment choisir ?

Cellules : adaptées aux designers débutants. Vous faites un site au design simple, et la version mobile ne sera pas totalement différente de l'ordinateur, ce qui suffit dans la plupart des cas.

Conteneurs avec grille CSS : vous découpez le conteneur comme un tableau avec la grille CSS (2 x 2, 4 x 6, 8 x 3), de manière distincte sur chaque point de rupture. Vous pouvez alors passer un texte ou une image d'une case à l'autre (alors qu'il resterait bloqué dans une cellule) et rendre un site entièrement responsive, même avec une mise en page complexe. Cette technique demande un peu plus de pratique que les cellules.

Mon avis de webdesigner sur les cellules

Les cellules sont le meilleur point de départ pour apprendre Wix Studio. Elles obligent à penser en structure : chaque élément a sa place, rien ne flotte. Mon conseil : une cellule, un bloc de contenu. Si vous avez un titre, un texte et un bouton dans une cellule, regroupez-les dans une pile plutôt que de les poser librement.

Quand vous commencez à dupliquer des éléments pour les masquer sur mobile, c'est le moment de passer à la grille CSS. Pour voir comment tous les outils s'articulent, lisez mon guide du responsive Wix Studio, ou confiez votre mise en page à un expert Wix Studio.

Questions fréquentes sur les cellules Wix Studio

Combien de cellules peut-on créer dans une section ?

Jusqu'à 16 par grille de section.

Peut-on déplacer un élément dans une autre cellule seulement sur mobile ?

Non, le déplacement s'appliquerait à tous les écrans. Vous pouvez en revanche échanger des cellules entières, ou utiliser une grille CSS.

À 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 : personnaliser une grille de section, Wix : à propos des cellules et des grilles.