Editor X : Utiliser des boîtes multi-états
Temps de lecture : 5 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Les boîtes multi-états vous permettent d'afficher différents contenus pour différentes situations dans la même boîte conteneur, en affichant un état à la fois. Choisissez le nombre d'états que votre boîte doit avoir, personnalisez-les complètement et attribuez-leur des identifiants que vous utiliserez plus tard dans votre code.
Votre code définit à quel moment chaque état doit être affiché. Vous pouvez créer des conditions pour que chaque état apparaisse automatiquement, ou laisser les visiteurs naviguer seuls.
Avant de commencer :
- Comme cette fonctionnalité nécessite du code, assurez-vous d'activer le mode développeur (Velo by Wix).
- Les boîtes multi-états sont actuellement en mode bêta dans l'Editor X. Cela signifie que nous travaillons toujours à l'ajout de nouvelles fonctionnalités et à l'amélioration générale de cette fonctionnalité.
Étape 1 | Ajouter une boîte multi-états
La première étape consiste à ajouter une boîte multi-états à votre site directement à partir du panneau Ajouter. Faites glisser la boîte à l'emplacement souhaité sur votre page.
En savoir plus
en haut de l'Editor X.
Utiliser des boîtes multi-états à l'intérieur des répéteurs :
Une fois que vous avez ajouté une boîte multi-états à un élément répéteur, il est automatiquement ajouté au reste des éléments avec exactement le même design – ce qui est particulièrement utile pour les listes contenant des éléments récurrents, comme les FAQ ou les galeries d'articles.
Étape 2 | Ajouter et concevoir les états
Une fois que vous avez ajouté la boîte, personnalisez le design des états qu'elle affiche. Vous pouvez personnaliser ces états comme vous le souhaitez : Utilisez-les pour de petits badges signalant la disponibilité d'un article (par exemple, « Nouveau », « Rupture de stock ») ou créez un design complètement différent pour chaque état.
Cliquez ci-dessous pour savoir comment :
Sélectionner et concevoir un état
Ajouter un état
.Renommer un état
Supprimer un état
Réorganiser les états
vers le haut ou vers le bas pour modifier l'ordre des états.
Conseil de design :
Les états peuvent avoir différentes propriétés de hauteur, ce qui vous permet de révéler des informations supplémentaires par exemple. Cependant, la largeur de vos états reste toujours la même.
Étape 3 | Ajouter du code en mode développeur
La dernière étape pour rendre la boîte multi-états fonctionnelle consiste à ajouter un code qui contrôle le moment où chaque état apparaît.
En utilisant les fonctions et événements disponibles dans Velo API pour les boîtes multi-états, vous pouvez définir et mettre en œuvre des règles pour l'affichage et la navigation dans vos états.
Important :
Lorsque vous ajoutez le code correspondant, assurez-vous d'avoir écrit correctement les identifiants d'état, avec la même orthographe et la même utilisation des majuscules.
Suivant :
En savoir plus sur l'utilisation de votre boîte et code multi-états.
Cela vous a-t-il aidé ?
|