Wix Blocks : Un flux de travail pour l'appli Blocks

Temps de lecture : 7 min

Wix Blocks est ouvert à tous les utilisateurs de Wix Studio. Pour accéder aux blocs, rejoignez Wix Studio.

Wix Blocks vous permet de créer des applis que vous pouvez utiliser encore et encore sur autant de sites Wix que vous le souhaitez. Ou, vous publiez votre appli sur le Wix App Market et atteignez des millions d'utilisateurs !

Planifier votre appli

Votre application peut inclure :

Vous devez également planifier votre :

Créer une appli

Lorsque vous travaillez sur votre site, vous pouvez ouvrir Wix Blocks depuis l'App Market

pour créer une nouvelle appli.

Suggestion

Lorsque vous choisissez de créer une appli, Wix Blocks s'ouvre automatiquement dans une nouvelle fenêtre. Vous pourrez revenir sur votre site internet pour importer l'appli une fois que vous l'aurez créée.

Choisissez votre type d'appli

Choisissez si vous souhaitez commencer par :

Tableau vierge : ajoutez des widgets à votre appli
Packages de code : ajouter des fichiers et des dossiers de code à votre appli
Élément personnalisé : intégrez votre code HTML
Widget prédéfini

Ajouter des widgets

Les widgets vous permettent d'ajouter l'interface utilisateur à votre appli.

Accédez au panneau Widgets et design dans la structure de l'appli menu.
Cliquez sur + Ajouter un widget pour ajouter votre premier widget.

Ajouter des éléments

Les éléments de design sont les éléments de base de votre widget : éléments de texte, boutons, images, champs de saisie utilisateur et plus encore. Wix Blocks est un espace de travail responsive qui permet de créer des applis qui s'adaptent automatiquement à l'écran ou à l'appareil affiché pour offrir la meilleure expérience utilisateur.

Le panneau Ajouter des éléments vous offre de nombreuses options pour ajouter des éléments de design (également appelés éléments de l'interface utilisateur) à votre widget.

En savoir plus sur l'ajout d'éléments à votre appli.

Ajouter des propriétés et des événements aux éléments

Propriétés vous permet de personnaliser les éléments de votre widget. Par exemple, si un élément est masqué ou non lorsque le widget est chargé. Gestionnaires d'événements vous permettent de déterminer l'interactivité des éléments. Par exemple, ce qui se passe lorsqu'un utilisateur clique sur un bouton. Vous pouvez le faire en sélectionnant votre élément et en cliquant sur les boutons Propriétés et Événements properties and events

en bas.

Étant donné que votre widget sera finalement installé sur un site Wix, il est important de vous assurer qu'il se fond dans les couleurs et les polices du site, qui sont définies dans le thème du site. Assurez-vous de connecter chaque élément au thème de couleur et le thème de texte (typographie).

Vous pouvez ajouter le code Velo à votre widget de la même manière que vous pouvez l'ajouter aux sites Wix (en savoir plus sur Velo by Wix). Pour ajouter du code à votre widget, ouvrez l'onglet Design et utilisez l'éditeur de code en bas.

L'API Widget vous permet d'ajouter des propriétés, des événements et des fonctions à l'ensemble de votre widget. Toute propriété, événement ou fonction que vous ajoutez est ensuite accessible aux créateurs de site qui travaillent avec le widget sur l'Éditeur Wix ou Editor X. Les propriétés apparaîtront dans le panneau Paramètres par défaut de votre widget dans l'Éditeur.

Par exemple, dans notre tutoriel sur le widget de compteur, nous définissons une propriété `step` qui contrôle les incréments du compteur (tels que 1, 2, 3, 4 ou 2, 4, 6, 8).

Pour ajouter des propriétés, des événements et des fonctions à votre API de widget, cliquez sur l'icône Widget Public API

en bas.

En savoir plus sur la définition de l'API de votre widget.

En savoir plus sur l'utilisation de l'API de votre widget lors de la modification d'un site.

Prévisualisez votre widget pour tester son fonctionnement. Votre widget doit fonctionner en mode aperçu exactement comme il le ferait s'il était installé sur un site. Vous pouvez interagir avec votre widget et voir comment il fonctionne. Vous pouvez également tester le thème et les propriétés de l'API.

L'onglet Configuration vous permet de définir l'aspect et le comportement de votre widget et de ses éléments lorsqu'ils sont installés sur un site. Vous pouvez modifier les noms d'affichage, ajouter et supprimer des boutons dans les barres d'action et modifier les paramètres des boutons. Vous pouvez également déterminer si les éléments peuvent être sélectionnés, dupliqués ou supprimés.

En savoir plus sur la configuration de votre widget.

L'onglet Panneaux vous permet de créer des panneaux personnalisés qui s'ouvrent lorsqu'un créateur de site modifie votre widget dans son Éditeur, au lieu de n'importe lequel des panneaux par défaut du widget (tels que Paramètres ou Design).

En savoir plus sur la création de panneaux personnalisés dans Blocs.

Créer des éléments prédéfini de design

Vous pouvez créer plusieurs mises en page et styles pour votre widget en utilisant des éléments prédéfini de design. Lorsque vous créez des designs prédéfinis, votre widget conserve les mêmes éléments et fonctionnalités, mais vous pouvez modifier les couleurs, la mise en page, etc.

Vous pouvez trouver les designs prédéfinis dans le panneau Widgets et design . Si vous travaillez dans l'onglet Design , cliquez sur le bouton Structure de l'appli app structure