Conteneurs Wix Studio : regrouper et organiser vos éléments 📦

Un conteneur (ou boîte) est un élément de mise en page qui en contient d'autres : textes, images, boutons. Dès que vous déposez un élément dedans, le conteneur devient son parent : ils bougent, s'adaptent et se designent ensemble.

En bref : ajoutez un conteneur depuis Ajouter des éléments, rubrique Conteneurs (vide, designé ou avec effet au survol). C'est la brique idéale pour une carte, un bloc autonome ou une grille CSS à l'intérieur d'une section.

À quoi sert un conteneur dans Wix Studio ?

Wix le décrit comme un outil de mise en page simple mais essentiel, idéal pour des mises en page autonomes et séparées à l'intérieur des sections. Quelques exemples :

• une carte service avec fond, bordure et ombre ;

• un encadré de témoignage ;

• un bloc de formulaire mis en valeur ;

• une zone découpée en grille CSS pour une mise en page complexe.

Comment ajouter un conteneur dans Wix Studio ?

1. Cliquez sur Ajouter des éléments, à gauche de l'éditeur.

2. Choisissez Conteneurs, puis un style : vide, designé ou avec effet au survol.

3. Faites glisser le conteneur sur la page.

4. Déposez vos éléments dedans jusqu'au message d'attache : ils sont alors attachés au conteneur et apparaissent sous lui dans le panneau des calques.

Designer un conteneur

Pour un site cohérent, appuyez-vous sur les couleurs des styles du site plutôt que sur des couleurs saisies à la main.

Conteneurs et responsive

Dans l'Inspecteur, vous choisissez comment le conteneur se comporte quand l'écran change :

• mise à l'échelle proportionnelle : il grandit et rétrécit avec l'écran ;

• largeur relative : sa largeur suit celle de son parent ;

• fixe : il garde sa taille ;

• étiré : il occupe toute la largeur disponible.

Surtout, un conteneur peut recevoir une grille CSS avancée : sélectionnez-le, ouvrez le menu Plus d'actions et appliquez une grille CSS avancée, avec une disposition prédéfinie ou l'option Autre. C'est la méthode que je recommande pour les sections complexes : un conteneur élargi au maximum dans la section, découpé en colonnes et en rangées qui changent selon le breakpoint.

Conteneur, pile ou cellule : que choisir ?

• Cellule : pour découper une section en zones.

• Pile : pour aligner des éléments sur un axe avec un espacement fixe.

• Conteneur : pour une boîte autonome avec son propre design, ou pour y appliquer une grille CSS.

Ces outils se combinent : une pile dans un conteneur, un conteneur dans une cellule. Le guide du responsive Wix Studio les compare dans un tableau.

Mon avis de webdesigner sur les conteneurs

Le conteneur est souvent sous-estimé par les débutants, qui posent leurs éléments directement dans la section. Mon conseil : dès qu'un groupe d'éléments forme un bloc visuel (une carte, un encadré), mettez-le dans un conteneur. Vous le déplacerez, le dupliquerez et l'adapterez au mobile d'un seul geste.

Et pour les mises en page ambitieuses, le duo conteneur et grille CSS remplace avantageusement des dizaines de réglages élément par élément. Si vous voulez un site structuré proprement dès le départ, voyez mon offre de création de site vitrine.

Questions fréquentes sur les conteneurs Wix Studio

Quelle différence entre un conteneur et une section ?

La section est une bande horizontale de la page, sur toute sa largeur. Le conteneur est une boîte placée à l'intérieur d'une section, avec sa propre taille et son propre design.

Peut-on appliquer une grille CSS à un conteneur ?

Oui : sélectionnez le conteneur, ouvrez Plus d'actions et appliquez une grille CSS avancée. Choisissez une disposition, ou l'option Autre pour régler vous-même les rangées et les colonnes.

À 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 : utiliser les conteneurs, Wix : choisir entre les outils Flexbox et Grid.