Le Maître Addons Widget Builder transforme votre propre HTML, CSS et JavaScript en un véritable widget Elementor, avec des contrôles modifiables dans le panneau Elementor Vous concevez le panneau d'options, le connectez à votre code avec des shortcodes, et le widget se comporte comme n'importe quel élément natif Elementor Pas de PHP, pas de passe-partout de plugin, pas d'éditeur de code séparé à jongler.
Deux systèmes s'exécutent sous tout ce qui est décrit ici : Conditions laissez tout contrôle afficher ou masquer en fonction de la valeur d'un autre champ, et le Moteur de modèles de syntaxe Twig transforme vos noms de champs en jetons, {% if %} chèques, et {% for %} boucles dans les onglets HTML, CSS et JS. Les deux guides couvrent la configuration et les limitations.
Ce guide parcourt le panneau d'options du Widget Builder exactement tel qu'il apparaît à l'écran : ajout d'un nouveau widget, glisser des champs dans les onglets Contenu, Style et Avancé, écriture de code, utilisation des shortcodes dynamiques, chargement des bibliothèques CDN, et enfin exportation ou importation d'un widget en tant que fichier JSON Vous pouvez trouver la fonctionnalité sur le Page du constructeur de widgets et à l'intérieur du plein widgets et extensions liste.
Ce que fait le Widget Builder #
La plupart des addons vous donnent un ensemble fixe de widgets Celui-ci vous donne les outils pour créer le vôtre Vous assemblez un panneau d'options à partir de types de champs prêts à l'emploi (titre, texte, couleur, nombre, dimensions, sélecteur, et plus), déposez votre code et liez les champs à ce code avec de simples jetons de shortcode Enregistrez le widget et Master Addons enregistre à la fois un shortcode et un widget Elementor que vous pouvez glisser sur n'importe quelle page.
Considérez-le comme le pont entre un extrait de style CodePen et un widget Elementor entièrement modifiable Une fois construit, n'importe qui dans votre équipe peut modifier les couleurs, l'espacement et le texte de l'éditeur Elementor sans jamais ouvrir la source.
Avant de commencer #
- WordPress avec le Élémenteur générateur de pages installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- HTML et CSS de base. JavaScript est facultatif et uniquement nécessaire pour les widgets interactifs.
Ouvrez le Widget Builder et ajoutez un nouveau widget #
Depuis le tableau de bord WordPress, rendez-vous sur Modules complémentaires principaux → Créateur de widgets. Cela ouvre le Widgets d'addons principaux écran, qui répertorie tous les widgets personnalisés que vous avez construits ainsi que sa catégorie, son auteur et son shortcode généré En haut, vous verrez trois boutons : Ajouter Nouveau Widget, Importer Widget, et Tutoriel Vidéo.
Cliquez Ajouter Nouveau Widget. UN Créer un nouveau widget la boîte de dialogue apparaît avec deux champs :
- Titre du widget (obligatoire) : un nom descriptif pour votre widget, par exemple “Hero Section” C'est ce que vous rechercherez dans le panneau Elementor plus tard, alors faites-en quelque chose que vous reconnaîtrez.
- Catégorie Widget: la catégorie Elementor sous laquelle le widget est regroupé (Favoris par défaut).Les catégories maintiennent vos widgets personnalisés organisés dans l'éditeur.
Entrez un titre, choisissez une catégorie et cliquez Enregistrer Modifications. Master Addons ouvre l'éditeur Widget Builder pour votre nouveau widget.
À l'intérieur de l'interface Widget Builder #
Le constructeur est divisé en trois zones de travail, de gauche à droite :
- Panneau de champs (à gauche) : une bibliothèque consultable de types de contrôle que vous glissez dans votre widget, tels que Heading, Text, Textarea, URL, Color, Number, Switcher, Select, Choose, WYSIWYG, Code et Date Time.
- Panneau de paramètres (au centre) : le Contenu, Style, et Avancé onglets où vous organisez ces champs en sections Il s'agit du panneau d'options réel que vos utilisateurs verront dans Elementor.
- Panneau de code (à droite) : le HTML, CSS, JS, et COMPREND onglets où vous écrivez le balisage, les styles, les scripts et les références de la bibliothèque.
La barre supérieure contient le nom du widget avec une icône de vitesse de réglage à côté, plus Aperçu et Enregistrer Paramètres boutons.
Construisez le panneau d'options : onglets Contenu, Style et Avancé #
C'est ici que vous concevez les commandes Choisissez un champ dans le panneau de gauche et faites-le glisser dans une section sous le Contenu, Style; ou Avancé onglet. Suivez la même logique Utilisations de l'élémenteur : texte et liens sous Contenu, couleurs et typographie sous Style, espacement et mise en page sous Avancé.
Chaque section a un Titre de la section (l'étiquette indiquée dans l'en-tête de la section) et a Nom de la section(en anglais), un identifiant unique que vous référencerez dans votre code Ajoutez autant de sections et de champs que le widget en a besoin.
Par exemple, déposez a Champ de couleur dans l'onglet Style pour permettre aux utilisateurs de recolorer le widget, et a Champ de dimensions dans l'onglet Avancé pour contrôler le remplissage sur les quatre côtés Chaque type de champ a sa propre documentation si vous voulez la liste complète des options.
Shortcodes dynamiques : connectez des champs à votre code #
C'est la partie qui lie tout ensemble Chaque champ que vous ajoutez génère un jeton shortcodeet ces jetons apparaissent dans le Documentation barre latérale à côté de l'éditeur de code. Ajoutez un champ Couleur et vous obtenez {{color}}. Ajoutez un champ Dimensions et vous obtenez {{dimensions}}.
Déposez ces jetons dans votre HTML, CSS ou JS partout où vous souhaitez que la valeur du champ atterrisse Lorsqu'un utilisateur modifie ce contrôle dans Elementor, Master Addons échange le jeton contre la valeur en direct, de sorte que votre code reste dynamique. Une chose à retenir : le jeton n'existe qu'une fois que le champ correspondant est sur le panneau, alors construisez d'abord le champ, puis référencez son shortcode.
Ajoutez votre HTML, CSS et JS #
Une fois le panneau et les shortcodes prêts, passez aux onglets de code de droite et collez votre balisage, vos styles et vos scripts.
onglet HTML : écrivez la structure du widget et placez les jetons de shortcode à l'endroit où appartiennent les valeurs dynamiques.
Onglet CSS : style le balisage Référencez les mêmes jetons shortcode pour tirer dans les couleurs et les dimensions choisies dans le panneau.
Onglet JS : ajoutez JavaScript pour tout comportement interactif, comme les effets de vol stationnaire ou un curseur. La vanille simple JS fonctionne, tout comme jQuery une fois que vous l'avez chargé sous Inclut.
Si vous avez seulement besoin d'un champ de code à l'intérieur du panneau plutôt que de l'éditeur principal, le Champ code supprime une entrée avec une syntaxe mise en évidence dans vos contrôles.
Comprend : charger les bibliothèques CDN CSS et JS #
Ouvrir le COMPREND onglet pour joindre des bibliothèques externes dont dépend votre widget Il y a deux listes : Bibliothèques CSS et Bibliothèques JS. Pour chacun, vous ajoutez un Poignée (un nom unique) et un URL source ou poignée enregistrée, puis cliquez sur Ajouter CSS ou Ajouter JS.
C'est ainsi que vous inscrivez quelque chose comme Font Awesome depuis un CDN, ou jQuery, sans modifier votre thème Master Addons ne met en file d'attente la bibliothèque que lorsque le widget est réellement sur la page, de sorte que vos autres pages restent propres.
Besoin d'icônes à l'intérieur du widget ? Master Addons expédie également huit fournis bibliothèques d'icônes vous pouvez utiliser sans appel CDN externe.
Paramètres du widget : titre, icône, catégorie et exportation #
Cliquez sur le icône d'engrenage à côté du nom du widget dans la barre supérieure à ouvrir Paramètres du widget dans le panneau de gauche A partir d'ici vous contrôlez comment le widget se présente à l'intérieur d'Elementor :
- Titre du widget : renommer le widget Ce titre s'affiche dans la liste des widgets Elementor.
- Icône du widget : cliquez Changer d'icône pour choisir une icône dans le sélecteur d'icônes Master Addons Vous pouvez utiliser n'importe quelle icône incluse ou une classe Font Awesome.
- Catégorie de widget : choisissez la catégorie Élémenteur sous laquelle le widget apparaît, il se regroupe donc avec les widgets associés.
- Widget d'exportation : exportez toute la configuration du widget sous forme de fichier JSON que vous pouvez enregistrer, sauvegarder ou partager avec n'importe qui.
Le sélecteur d'icônes regroupe des milliers d'icônes dans des catégories telles que Toutes les icônes, les icônes d'élément, les icônes de ligne simple, les icônes de police emblématiques, les icônes linéaires et les icônes de matériau. Filtrez par nom, sélectionnez-en un et cliquez Insérer.
Importer un widget à partir d'un fichier JSON #
Le partage fonctionne dans les deux sens Retour sur le Widgets d'addons principaux écran, cliquez sur le Importer Widget bouton. La boîte de dialogue vous permet de glisser et de déposer un .json déposez, ou parcourez-le Seulement .json les fichiers exportés depuis le Widget Builder sont pris en charge.
Toute personne possédant le fichier JSON d'un widget peut l'importer, le panneau, le code, les inclut, et tout, puis l'utiliser sur son propre site en quelques secondes Cela fait du Widget Builder un moyen bien rangé de réutiliser les widgets à travers les projets ou de les remettre à un client.
Conseils pour créer des widgets personnalisés fiables #
- Nommez clairement les sections. Le nom de la section se retrouve dans votre code, alors gardez-le court et significatif.
- Ajoutez un champ avant de référencer son shortcode. Les jetons n'existent qu'après que le champ correspondant soit sur le panneau.
- Utilisez Aperçu souvent. Vérifiez l'aperçu en direct avant de l'enregistrer afin d'attraper un jeton manquant plus tôt que sur la page en direct.
- Charger les bibliothèques via Inclut, pas en ligne. Il maintient votre code propre et charge les scripts uniquement là où ils sont nécessaires.
- Exportez au fur et à mesure. Une exportation JSON sert également de sauvegarde et de fichier de partage.
- Vous ne voyez pas votre widget dans Elementor ? Vérifiez le guide de dépannage pour les correctifs de visibilité.
Foire aux questions #
Qu'est-ce que le Master Addons Widget Builder ?
Le Widget Builder est un outil dans Master Addons for Elementor qui transforme votre propre HTML, CSS et JavaScript en un widget Elementor modifiable Vous concevez un panneau d'options à partir de champs glisser-déposer et vous le connectez à votre code avec des jetons shortcode, aucun PHP requis.
Comment fonctionnent les shortcodes {{color}} et {{dimensions}} ?
Chaque champ que vous ajoutez au panneau d'options génère un jeton de shortcode, comme {{color}} ou {{dimensions}}. Vous placez le jeton dans votre HTML, CSS ou JS, et Master Addons le remplace par la valeur définie par l'utilisateur dans Elementor, ce qui rend le widget dynamique.
Puis-je ajouter des bibliothèques CSS et JS externes à un widget personnalisé ?
Oui. Ouvrez l'onglet Comprend, ajoutez un handle et une URL source CDN sous Bibliothèques CSS ou Bibliothèques JS, puis cliquez sur Ajouter. Les addons principaux chargent la bibliothèque uniquement sur les pages qui utilisent le widget, afin qu'elle ne ralentisse pas le reste de votre site.
Comment partager un widget Elementor personnalisé ?
Ouvrez Paramètres du widget à partir de l'icône d'engrenage et cliquez sur Exporter le widget pour télécharger un fichier JSON N'importe qui peut alors utiliser le bouton Importer le widget sur l'écran du constructeur de widgets pour faire glisser ce fichier JSON et utiliser le widget sur son propre site.
Le Widget Builder est-il inclus gratuitement ?
Le Widget Builder fait partie de Master Addons for Elementor. Voir le page de tarification pour la répartition actuelle du plan et quelles fonctionnalités sont incluses à chaque niveau.
Envelopper #
Le Master Addons Widget Builder comble l'écart entre un extrait de code et un widget Elementor de production Construisez le panneau, écrivez votre HTML, CSS et JS, connectez-le avec des jetons shortcode, chargez toutes les bibliothèques dont vous avez besoin, puis exportez ou importez le résultat sous forme de JSON Jetez un œil au reste du Bibliothèque de widgets Master Addons pour voir ce que vous pouvez construire d'autre.
