Boîte multi-état Wix Studio : afficher plusieurs contenus au même endroit

Une boîte multi-état est un conteneur qui contient plusieurs versions de son contenu, appelées états. Un seul état est visible à la fois : un badge « Nouveau » ou « Rupture de stock », une étape de formulaire, ou une mise en page entièrement différente.

En bref : ajoutez la boîte depuis les outils de mise en page, créez vos états dans le panneau de gestion des états, puis décidez quand chacun s'affiche. Selon l'aide Wix, ce changement d'état se programme avec du code Velo : si vous débutez, commencez plutôt par les onglets ou l'accordéon.

À quoi sert une boîte multi-état ?

• Afficher plusieurs contenus dans la même zone sans recharger la page.

• Créer un parcours en étapes (questionnaire, mini formulaire, simulateur).

• Changer l'affichage selon une action ou une donnée (stock, statut, choix du visiteur).

• Garder une interface compacte, surtout sur mobile.

Chaque état fonctionne comme une petite page à l'intérieur du bloc : vous y placez du texte, des images, des boutons ou des éléments plus complexes. La boîte fonctionne aussi dans un répéteur : les états s'appliquent alors à chaque élément de la liste.

Comment ajouter une boîte multi-état sur Wix Studio

1. Ouvrez le panneau d'ajout d'éléments, puis les outils de mise en page.

2. Choisissez les boîtes multi-états et glissez-en une sur la page.

3. Ouvrez le panneau de gestion des états pour ajouter un nouvel état, le renommer, le réordonner ou le supprimer.

4. Sélectionnez chaque état et placez-y ses éléments.

5. Donnez à chaque état un identifiant clair (ID), indispensable pour le code.

La largeur de la boîte reste la même pour tous les états, mais la hauteur peut varier. Prévoyez donc des contenus de largeur comparable.

Changer d'état avec Velo

Le changement d'état se déclenche dans le code de la page avec Velo, par exemple au clic sur un bouton. Le principe tient en une ligne : $w("#maBoite").changeState("etape2"). Attention, l'identifiant doit être écrit exactement comme dans l'éditeur, majuscules comprises.

Boîte multi-état, onglets ou accordéon ?

Mon avis de webdesigner sur la boîte multi-état

C'est un outil puissant, mais c'est rarement le bon choix sur un site vitrine. Pour classer du contenu, les onglets font le même travail sans code et sans risque de bug. La boîte multi-état devient intéressante quand l'affichage dépend d'une logique : un simulateur, un formulaire en plusieurs étapes, un statut qui vient du CMS.

Côté SEO, gardez en tête que le contenu important ne doit pas dépendre d'un clic ou d'un script pour être compris. Si vous avez un besoin sur mesure de ce type, je peux le développer dans le cadre de mon offre d'agence Wix.

Questions fréquentes sur la boîte multi-état

Peut-on utiliser une boîte multi-état sans coder ?

Vous pouvez créer et designer les états sans code. En revanche, l'aide Wix décrit le changement d'état via l'API Velo : pour un contenu qui change au clic sans code, les onglets sont plus simples.

Peut-on ajouter une transition entre les états ?

Ce n'est pas proposé nativement : l'ajout d'effets de transition figure dans les demandes de fonctionnalités de Wix.

À 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 boîtes multi-états dans Wix Studio, Wix : demande de transitions pour les boîtes multi-états.