Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

Le constructeur de page Elementor profite du développement d’un écosystème impressionnant. A ce titre l’extension Unlimited Elements vous propose tout simplement de développer vos propres widgets de A à Z sans coder (ou presque). Un must !

Si vous ne le savez pas (étonnant !) le constructeur de page pour WordPress Elementor est en passe de devenir le second « page builder » le plus utilisé au monde. Avec son architecture libéré des codes-courts (shortcodes) Elementor à proposé une nouvelle expérience, simple, rapide et fluide là où ses concurrents comme Divi ou Visual Composer sont plus lents et besogneux.

Cette explosion d’utilisateurs c’est intensifiée avec la version PRO et le « theme builder » intégré. Ainsi on peut créer des sites WordPress sans thème particulier et réaliser le design total, en-tête, pied de page et pages dynamiques comprises. Cette situation à donné l’idée à l’équipe d’Unite CMS d’adapter son module de conception de widget prévu pour le constructeur de page Blox pour Joomla, un cousin d’Elementor disponible aussi sur WordPress.

Créer ses propres widgets pour Elementor à portée de clic !

Le principe de l’extension Unlimited Elements c’est de proposer un ensemble très fourni de widgets prédéfinis (+ de 800 dans la version PRO). Ces widgets ne sont pas « chargés » avec l’extension ils sont disponibles à travers un CDN et vous les installez selon vos besoins mais vous pouvez les retirer aussi à tout moment. Cette collection est régulièrement complétée.

Mais ce qui faut la force d’Unlimited Elements c’est la possibilité de créer son propre widget. La chaîne YouTube de l’éditeur présente de nombreux tutoriels vidéo pour apprendre à créer son propre widget.

Du code HTML + des CSS et un peu de Js si besoin et vous devenez créateur de widgets Elementor !

Un widget Elementor ne vous satisfait pas complètement ? Vous souhaitez en détourner un autre pour un design ou une fonction particulière ? Unlimited Elements est là pour vous permettre de créer votre propre widget selon vos désirs, ceci sans rien savoir sur le développement de widget pour Elementor, un must !

Vous n’avez besoin que du code HTML de la structure du contenu HTML et d’ajouter les styles à donner à votre widget. Vous pouvez ajouter de nombreux attributs de réglages, couleur, typographies, réglages CSS ou fonctions, c’est selon vos envies.

Comment ça marche ?

Pour un exemple rapide j’ai décidé de créer un widget image qui propose des formes obtenues avec l’attribut CSS border-radius associé à des valeurs que j’obtiens sur Fancy Border-Radius Generator, un outil très pratique.

La base HTML est simple avec une DIV contenur et une balise img. Pour parfaire le fonctionnement j’associe une classe CSS pour manipuler les valeurs grâce à un menu déroulant dans l’interface et je vais ajouter un choix d’alignement et un choix d’ombre.

Voici l’exemple de code HTML une fois toutes les fonctions déclarées dans le widget :

Les codes entre double accolades {{}} injectent les valeurs saisies dans les réglages du widget.

La partie CSS utilise aussi des codes d’injection, la voici au final :

Les codes d’injections sont fournis avec les attributs créé pour le widget, j’ai ainsi ajouté : l’image, la forme (règles CSS), l’ombre (règles CSS) et l’alignement (règles cSS). Voici leur composition :

3 de ces attributs font appel à des règles CSS et j’utilise des listes déroulantes pour effectuer le choix, chaque choix renvoyant une règle CSS dans la feuille de style, c’est très simple et efficace.

Voici par exemple les choix de formes avec les valeurs envoyées dans la feuille de style :

L’utilisation d’un choix d’image demande l’ajout d’une image factice au départ, on ajoute cette image dans un dossier créé pour le widget dans la partie Assets :

Vous pouvez parfaire la présentation du widget dans la collection d’Unlimited Elements en ajoutant au dossier des Assets une image nommée preview_addon au format jpg ou png avec les dimensions idéales de 417×297 pixels.

Il ne reste plus qu’à utiliser votre widget dans Elementor :

Plutôt cool non ?

Une UI encore en retrait par rapport aux standards Elementor

Tout cela est vraiment génial mais rien n’est parfait et Unlimited Elements souffre encore de défauts. Au départ les ressources étaient chargées avec chaque widget ce qui alourdissait pas mal la page, c’est désormais terminé avec un chargement asynchrone en pied de page. ce qui reste à améliorer est du domaine de l’ergonomie car à l’heure actuelle on ne dispose pas de l’UI complète d’Elementor, c’est notable pour les choix d’alignement que l’on voudrait sous forme d’icônes. L’ombrage ne bénéficie pas du module de réglages du constructeur de page, c’est pareil pour pas mal de choix.

Conscient de cette faiblesse l’éditeur travaille pour compléter cet aspect dans une future version (PRO ?). Ceci dit, la liberté qu’apporte Unlimited Elements est déjà suffisante pour rendre cette extension indispensable pour développer des sites très personnalisés pour vos clients.

A essayer sans retenue !

Sources : page de l’extension, chaîne YouTube, site de l’éditeur, les widgets

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu