Wix Blocks : Concevoir des panneaux personnalisés pour les boutons de la barre d'action de votre widget

Temps de lecture : 7 min
Wix Blocks est ouvert à tous les utilisateurs de Wix Studio. Pour accéder aux blocs, rejoignez Wix Studio.
Blocks vous permet de créer des panneaux personnalisés pour les barres d'action de votre widget et de ses éléments. Lorsqu'un créateur de site clique sur un bouton d'action (par exemple, le bouton Paramètres), un panneau personnalisé s'ouvre, à la place du panneau par défaut. 

Lorsque vous créez des panneaux personnalisés, vous offrez aux créateurs de sites plus d'options pour travailler avec votre widget, améliorer sa convivialité et les aider à le personnaliser plus facilement sur leur site.

La création de votre panneau se déroule en trois étapes principales :
2. Ajouter du code à votre panneau pour que cela fonctionne.
Remarques
  • Connecter votre panneau : définissez les panneaux qui vont avec quel bouton d'action dans l'onglet Configurer.
  • Directives relatives à l'expérience utilisateur : utilisez notre directives IX pour rendre vos panneaux clairs et efficaces. 

Création de votre panneau

Il existe deux façons de créer un panneau.

Ajouter des éléments à votre panel

Votre panneau est composé d'éléments de panneau, comme des boutons, des séparateurs, des champs données et plus encore. 
Cliquez sur + Ajouter un élément et sélectionnez les éléments que vous souhaitez ajouter à votre panneau. Vous pouvez ajouter le même élément autant de fois que vous le souhaitez. Ensuite, vous pouvez personnaliser le texte et le style du libellé, ainsi que définir les valeurs par défaut. 

Personnaliser votre panneau

Vous disposez de plusieurs options de personnalisation pour les éléments de votre panneau. Vous pouvez modifier le texte du libellé, ajouter des info-bulles, définir des paramètres par défaut et des valeurs. Pour ce faire, vous utilisez la barre d'action connectée à chaque élément.

Options des paramètres

Cliquez sur un élément. Sélectionnez Paramètres ou l'icône settings icon pour personnaliser votre panneau.Voici quelques-unes des options :

Éléments à choix multiple

Si vous choisissez d'ajouter un élément qui a plusieurs options, comme des cases à cocher, des boutons radio ou des listes déroulantes, vous pouvez les configurer en utilisant le bouton Gérer les choix dans la barre d'action qui apparaît lorsque vous sélectionnez l'élément.
Après avoir conçu votre panneau, vous devez ajouter du code pour que cela fonctionne. Vous pouvez ensuite l'ajouter à un bouton d'action et le tester pour voir s'il fonctionne. En savoir plus sur le codage de votre panneau

Renommer, dupliquer ou supprimer votre Panneau

  1. Survolez le nom de votre panneau dans la section Mes panneaux du volet Panneaux en bas à gauche. 
  2. Cliquez sur Plus d'actions  lorsqu'elle apparaît. 
  3. Sélectionnez renommer, dupliquer ou supprimer. 
renommer le panneau de suppression dupliqué

Connecter votre panneau à un bouton d'action

Après avoir créé votre panneau, vous devez le connecter à un bouton de la barre d'action d'un widget ou d'un élément.  
  1. Cliquez sur l'onglet Configuration .
  2. Sélectionnez le widget approprié dans le panneau Widgets
  3. Survolez le bouton auquel vous souhaitez connecter votre panneau, dans le menu Modifier la barre d'actions qui apparaît. Par exemple, s'il s'agit d'un panneau de paramètres, sélectionnez le bouton des paramètres. S'il s'agit d'un panneau de design, sélectionnez le bouton Design. Vous pouvez également ajouter un nouveau bouton, le nommer et le connecter à un panneau.
  4. Cliquez Paramètres du bouton d'action
sélectionnez votre panneau
paramètres du bouton d'action
5. Sélectionnez votre panneau dans la section Mes panneaux
Maintenant que vous avez conçu votre panneau, vous devez lui ajouter du code pour qu'il fonctionne. En savoir plus.
Connecter votre panneau via l'onglet Configuration
Notez que la conception et le codage des panneaux se font dans l'onglet Panneaux . Le choix des panneaux et des boutons se fait dans l'onglet Configuration . Si vous n'êtes pas familier avec l'onglet Configuration , en savoir plus sur la configuration de la barre d'action de votre widget.

Cela vous a-t-il aidé ?