Comment créer un widget Elementor personnalisé sans aucune connaissance en codage

Les widgets Elementor permettent d'ajouter des éléments de création de page tels qu'un menu de navigation, un bouton, une zone d'image, une section FAQ et bien d'autres. Bien que plusieurs modules complémentaires Elementor soient fournis avec des widgets Elementor, il est peu probable que vous obteniez tous les widgets requis dans ces modules complémentaires.

C'est là que vous avez besoin de widgets Elementor personnalisés pour répondre à vos besoins. ElementsKit possède les fonctionnalités nécessaires pour vous aider à créer les widgets requis en un rien de temps.

Cet article vous expliquera comment créer un widget Elementor personnalisé sans coder selon une méthode minimaliste.

Allons-y… maintenant !

Qu'est-ce qu'un widget ?

Le widget fait référence à une petite application GUI utilisée pour effectuer une tâche spécifique. Un widget peut être n'importe quel élément de votre site Web tel qu'un bouton, une case à cocher, une boîte de dialogue, une barre de défilement, un champ de recherche, une carte, une horloge, un compteur de visiteurs, etc.

Considérons le constructeur de pages Elementor comme exemple. Ce constructeur de pages est équipé de nombreux widgets intégrés. Vous pouvez ajouter les meilleurs widgets Elementor gratuits pour concevoir votre page Web.

Cependant, vous pouvez également créer un widget personnalisé pour Elementor si nécessaire. Et le Générateur de widgets ElementsKit vous y aidera !

Avantages de l'utilisation d'ElementsKit Widget Builder pour créer des widgets personnalisés

Nous savons tous que les widgets ajoutent d’excellentes fonctionnalités aux sites Web. Mais trouver un widget approprié pour accomplir votre tâche personnalisée est presque impossible. Dans ce cas, vous n’avez pas d’autre choix que de créer un widget personnalisé.

Et les générateurs de widgets rendent ce processus de création de widgets personnalisés plus facile que jamais. Jetons un coup d'œil aux principaux avantages de l'utilisation d'un générateur de widgets.

• Créez des widgets personnalisés sans aucune connaissance en codage
• Les widgets sont complètement réactifs
• Créez visuellement les widgets en glissant et déposant les éléments
• Prend en charge le contenu structuré
• Comprend un éditeur de code autonome
• Prend en charge plusieurs types de champs, etc.

Ce sont les principaux avantages du générateur de widgets ElementsKit. 

Comment créer un widget Elementor personnalisé avec ElementsKit (gratuit) ?

Un widget entièrement fonctionnel peut dynamiser votre expérience de création de sites Web. Il est donc essentiel de créer votre widget Elementor personnalisé pour votre site Web.

Désireux de savoir comment créer un widget Elementor personnalisé ? Voici le processus étape par étape pour créer un widget Elementor personnalisé gratuit à l'aide du générateur de widgets ElementsKit.

Prérequis

Pour créer un widget personnalisé Elementor, vous aurez besoin des plugins suivants –

• Élémentor
• ElementsKit

Une fois ces outils installés et activés sur votre site WordPress, il est temps de commencer à créer le widget personnalisé Elementor.

Étape #1 : Activez le générateur de widgets

Pour démarrer le processus de création de widgets, assurez-vous d'avoir activé le module Widget Builder à partir du panneau du tableau de bord.

Pour l'activer, accédez au panneau du tableau de bord ElementsKit, puis cliquez sur MODULES. Dans la section modules, repérez le module « Widget Builder » et activez-le.

Voici le processus pour vérifier si le générateur de widgets est activé ou désactivé :

Activer le générateur de widgets

N'oubliez pas de cliquer sur le 'Sauvegarder les modifications' après avoir allumé ou éteint un module.

Étape #2 : créer un widget

Pour créer un nouveau widget, passez à ElementsKit > Générateur de widgets. Sur la nouvelle page, vous remarquerez un nouveau bouton appelé «Ajouter un nouveau». Cliquer sur ce bouton créera un nouveau widget sur votre panneau de gauche Elementor.

Création d'un nouveau widget

Vous pouvez désormais personnaliser le titre, l'icône et la catégorie du widget à partir de cette page. Mettez un titre et une icône de widget sur votre widget personnalisé. Vous pouvez utiliser n’importe quelle icône de la bibliothèque d’icônes Font Awesome.

Personnalisation du titre et de l'icône du widget

Lorsque vous nommez votre widget, assurez-vous qu'il reste pertinent par rapport à votre tâche. Et ajoutez une icône pertinente à votre widget.

Étape #3 : personnalisation du nouveau widget

Le développement du widget Elementor est terminé, il est maintenant temps de le personnaliser. Vous n'avez pas besoin de connaissances approfondies en codage pour créer un nouveau widget personnalisé pour Elementor. Le générateur de widgets ElementsKit rend le processus plus fluide que jamais. 

Faites simplement glisser le widget ElementsKit depuis le panneau de gauche et déposez-le sur le panneau du milieu. Le widget déposé créera automatiquement une variable sur le tableau de droite.

Cliquez sur cette variable et elle sera automatiquement incluse dans l'éditeur de code. Vous pouvez ajouter des balises HTML, CSS et JavaScript supplémentaires via l'éditeur de code si nécessaire.

Après avoir créé un nouveau widget ou effectué une personnalisation, cliquez sur le bouton Enregistrer et vous avez terminé.

Voici le processus détaillé –

Construire un nouveau widget

Vous pouvez également ajouter ces contrôles à l'onglet Style ou Avancé.

Étape #4 : Modification des champs du widget

Lors de la création du widget, vous pouvez personnaliser tous les champs ou éléments du widget. Par exemple, vous pouvez personnaliser le nom de l'étiquette, l'espace réservé, la valeur par défaut, etc.

Cependant, les options de personnalisation ne sont pas les mêmes pour chaque panneau. Différents panneaux de contrôle ont différents champs de saisie.

Personnalisation des champs du widget

Conseils de pro : Lors de l’ajout du même contrôle plusieurs fois, le nom doit être unique. Sinon, cela créera un conflit de variables.

Étape #5 : prévisualiser le widget nouvellement construit

Le widget nouvellement construit fonctionne de manière tout à fait similaire aux widgets Elementor existants. Le widget personnalisé fraîchement construit sera disponible sur le panneau Elementor. Pour vérifier le nouveau widget, ouvrez une nouvelle page Web et faites glisser et déposez le widget sur la nouvelle page Web.

Vérification du nouveau widget

Conseils de pro : Vous pouvez ajouter chaque contrôle ElementsKit pour créer le widget personnalisé Elementor via le générateur de widgets Elementor. Obtenez la version pro d'ElementsKit pour accéder à plus de contrôles Elementor.

Regardez la vidéo ci-dessous pour en savoir plus sur le générateur de widgets ElementsKit.

Liste des champs de contrôle pris en charge par ElementsKit

ElementKit propose de nombreux champs de contrôle pour créer un widget personnalisé. Voici la liste des champs de contrôle pris en charge –

• Texte – Le champ de texte est utilisé pour obtenir la saisie de texte.
• Nombre – Les utilisateurs peuvent saisir des chiffres via le champ de contrôle des numéros.
• Zone de texte – Le champ textarea est utilisé pour saisir des nombres, des textes, des symboles, etc.
• WYSIWYG – Il s'agit de l'éditeur de texte enrichi WordPress TinyMCE.
• Code – Ce contrôle ajoutera un éditeur de code basé sur l'éditeur Ace.
• Caché – Le champ de saisie masqué permet de sauvegarder les données directement dans la base de données sans fournir de champ de saisie dans le panneau de configuration.
• Commutateur – Un Switcher est une représentation sophistiquée d’une case à cocher. Il est utilisé pour afficher/masquer différents blocs ou éléments d’une page Web.
• Sélectionner – L'option de sélection offre plusieurs options parmi lesquelles les utilisateurs peuvent choisir. Il affiche les options dans un menu déroulant. 
• Choisir – Choisir est utilisé pour afficher un bouton ou un groupe de boutons avec des icônes et d’autres paramètres de style ou d’alignement.
• Couleur – Il active un champ de sélection de couleurs contenant un curseur Alpha.
• Police de caractère – Le contrôle des polices permet aux utilisateurs de choisir une police dans la bibliothèque de polices Google.
• Date Heure – La bibliothèque date-heure utilise le Bibliothèque Flatpickr pour choisir une date et une heure. 
• URL – Le champ URL fournit un lien avec un bouton. Vous pouvez configurer le bouton pour ouvrir le lien dans le même onglet ou dans un nouvel onglet, ainsi que le rendre non suivi.
• Médias – Les utilisateurs peuvent choisir différents médias en utilisant cette section. Il affiche les fichiers multimédias de la médiathèque WordPress.
• Icônes – Le contrôle d'icône permet aux utilisateurs d'ajouter des icônes à partir des bibliothèques d'icônes Font Awesome et ElementsKit Lite. Les utilisateurs peuvent également télécharger leur bibliothèque d'icônes personnalisées à partir de la médiathèque WordPress.
• Glissière – Le curseur est une échelle déplaçable utilisée pour choisir entre une plage de valeurs numériques.
• Dimensions – Le contrôle des dimensions se compose de quatre panneaux de saisie permettant de définir un emplacement approprié pour un élément. Les panneaux de saisie sont en haut, à droite, en bas et à gauche. 
• Frontière – Il permet à l'utilisateur de personnaliser le type, la largeur et la couleur de la bordure.
• Arrière-plan – Le contrôle d'arrière-plan permet aux utilisateurs d'ajouter une image d'arrière-plan, une vidéo et une couleur. Vous pouvez ajouter des couleurs statiques ou dégradées à la vidéo.
• Boîte ombre – L’ombre de la boîte propose cinq types d’ombres différents autour de la boîte. Il comprend l’ombre horizontale, l’ombre verticale, le flou d’ombre, la propagation de l’ombre et l’ombre colorée.
• Ombre de texte – Comme l’ombre de la boîte, le contrôle text-shadow fournit également quatre contrôles différents. Il s’agit de l’ombre horizontale, de l’ombre verticale, du flou d’ombre et de l’ombre colorée autour des textes.
• Typographie – La typographie permet aux utilisateurs de personnaliser la famille de polices, la taille de la police, l'épaisseur de la police, le style de police, la hauteur de ligne, la transformation du texte et l'espacement des lettres.
• Dimension de l'image – Le contrôle des dimensions de l’image comprend la hauteur, la largeur de l’image et un bouton Appliquer.
• Sélectionnez2 – Il crée également un menu déroulant comme le contrôle de sélection mais avec plus de style et de design.
• Animation de survol – Ce contrôle ajoute une animation sur différentes zones de sélection basées sur la bibliothèque Hover.css.
• Animation d'entrée – Le contrôle d'animation d'entrée permet à l'utilisateur de personnaliser l'apparence d'un bouton en fonction de la bibliothèque Animate.css.

Ce sont les contrôles du générateur de widgets ElementsKit que vous pouvez utiliser lors de la création d'un widget Elementor personnalisé.

Derniers mots

C'est ainsi que vous pouvez facilement créer un widget Elementor personnalisé en appuyant sur ElementsKit. ElementsKit est livré avec des tonnes de widgets intégrés qui sont susceptibles de minimiser vos efforts de création de pages Elementor.

Dans le même temps, il vous propose également une méthode minimaliste pour créer vos widgets personnalisés Elementor préférés. Maintenant, c'est à votre tour d'installer et de récupérer ElementsKit et de profiter des avantages de l'addon pour créer des widgets personnalisés Elementor.