Grilles de sections Wix Studio : cellules ou grille CSS ? 🧩

Sur Wix Studio, une page est faite de sections (les grandes bandes horizontales de la page), et chaque section contient des éléments : textes, images, boutons… Ce sont les briques de votre design.

La grille de section sert à organiser ces briques. Il existe deux niveaux : les cellules, simples et parfaites pour débuter, puis la grille CSS, plus souple pour les designs complexes.

En bref : chaque section Wix Studio contient une grille intégrée, avec une seule cellule au départ. Découpez-la en cellules (jusqu'à 16) pour les mises en page simples, et passez à la grille CSS dès que la version mobile doit être vraiment différente.

Grille de section Wix Studio : 3 façons d'organiser une section

Découper une grille de section en cellules

Une cellule est une case de la section. En choisissant une disposition (2 colonnes, 3 colonnes, lignes, collage…), vous découpez la section en plusieurs cellules, puis vous placez vos éléments dans chacune.

1. Sélectionnez la section.

2. Dans l’Inspecteur, partie Mise en page, choisissez une disposition (par exemple 2 colonnes).

3. Réglez les écarts : l’espace entre les cellules, horizontalement et verticalement.

4. Glissez vos éléments dans les cellules.

💡 Une grille de section peut contenir jusqu'à 16 cellules. Vous pouvez les redimensionner, les fusionner, les diviser ou les échanger. Toutes ces manipulations sont détaillées dans la fiche cellules Wix Studio.

Avantages et limites des cellules de la grille de section

Pourquoi cette limite ? Déplacer un élément d’une cellule à une autre modifie la structure de la page. Or, sur Wix Studio, un changement de structure s’applique à tous les breakpoints (ordinateur, tablette, mobile). Vous ne pouvez donc pas mettre un bouton dans la cellule de gauche sur ordinateur et dans celle de droite sur mobile.

👉 En résumé : les cellules suffisent pour des mises en page simples. Pour un design plus complexe ou une version tablette et mobile 100% flexible, passez à la grille CSS.

Grille de section avancée : la grille CSS

Quand vous maîtrisez les cellules, passez au niveau suivant avec la grille CSS (CSS Grid). Le principe :

1. Ajoutez un conteneur (une boîte) dans votre section, et étirez-le.

2. Activez la grille CSS sur ce conteneur.

3. Découpez-le en lignes et colonnes : 2 x 2, 4 x 5…

4. Placez vos éléments dans les cases de la grille.

La différence clé : tous les éléments restent dans le même conteneur. Leur position dans la grille est un simple réglage de mise en page, modifiable à chaque breakpoint. Un bouton peut donc être en haut à droite sur ordinateur et en bas sur mobile. Vous pouvez aussi changer le nombre de lignes et de colonnes par écran.

💡 La grille CSS peut aussi s’activer directement sur une section entière, dans l’Inspecteur, partie Mise en page.

⚠️ Attention : sur une section, la grille CSS ne peut plus être retirée une fois appliquée. Si vous supprimez toutes ses rangées et colonnes, elle revient à une grille 1 x 1.

Cellules ou grille CSS : quelle grille de section choisir ?

Exercice pratique : créer votre première section avec une grille

Cet exercice est tiré de ma formation Wix Studio. Objectif : une section avec un texte à gauche et une image à droite.

1. Créez votre compte Wix Studio, allez dans Mes sites, puis Créer un nouveau site > Modèle vierge Studio.

2. Sélectionnez la section vide au milieu de l'écran, entre le header et le footer. Vérifiez qu'elle apparaît en bas à gauche, dans le fil d'Ariane.

3. En bas de l'Inspecteur (le panneau de droite, que vous pouvez ouvrir avec une flèche), ajoutez des marges intérieures : 10 % sur les côtés, 8 % en haut et en bas.

4. Dans l'Inspecteur, partie Mise en page, cliquez sur l'icône 2 colonnes : la section se découpe en 2 cellules.

5. Juste au-dessus, ajoutez un écart de 50 px* entre les deux cellules.

6. Sélectionnez la cellule de gauche, cliquez sur Ajouter des éléments (icône + en haut à gauche) et ajoutez un titre, un paragraphe et un bouton.

7. Sélectionnez les 3 éléments et cliquez sur Empiler au milieu du canevas.

8. Pile sélectionnée, en haut de l'Inspecteur, indiquez une largeur (L) de 100 %, puis cliquez sur aligner à gauche et centrer verticalement.

9. Plus bas dans l'Inspecteur, alignez les éléments de la pile à gauche et réglez un espacement de 25 px* entre eux.

10. Sélectionnez la cellule de droite et glissez-y une image.

11. Cliquez sur les 2 flèches en haut à droite de l'image pour l'étirer dans la cellule.

12. Cliquez sur Publier en haut à droite, et admirez votre design. 😎

ℹ️ px* : l'astérisque signale une unité responsive de Wix Studio. Vous saisissez une valeur en pixels, et l'éditeur l'adapte à la taille de l'écran. Plus de détails dans la fiche unités de mesure.

Mon avis de webdesigner sur les grilles de sections

Commencez par travailler avec les cellules : elles suffisent pour la plupart des sections simples et permettent de comprendre la logique de Wix Studio. Quand vous vous sentez limité en mobile, notamment pour déplacer un bouton ou une image, c’est le signe qu’il est temps de passer à la grille CSS.

Pour voir comment la grille de section s'articule avec les piles, la flexbox et les breakpoints, lisez mon guide du responsive Wix Studio. Et si vous préférez déléguer, je réalise ce type de mise en page en tant qu'expert Wix Studio.

Questions fréquentes sur la grille de section Wix Studio

Combien de cellules peut contenir une grille de section ?

Jusqu'à 16. Au-delà, créez une autre section ou passez à la grille CSS.

Peut-on revenir aux cellules après être passé à la grille CSS ?

Non, sur une section, la grille CSS ne peut pas être retirée. Si vous hésitez, testez-la d'abord sur un conteneur placé dans la section.

Pourquoi mon élément ne change-t-il pas de cellule sur mobile ?

Parce que changer de cellule modifie la structure de la page, et la structure est commune à tous les breakpoints. Utilisez une grille CSS pour déplacer un élément 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 : à propos des cellules et des grilles, Wix : personnaliser une grille de section, Wix : travailler avec une grille CSS avancée, Wix : designer sur tous les breakpoints.