Elementor est un excellent outil pour créer des sites Web. Cependant, certaines de ses fonctionnalités sont encore en phase de test. Par conséquent, certaines fonctionnalités peuvent ne pas fonctionner correctement.

Elementor, le plugin de construction de pages WordPress, propose une série de fonctionnalités expérimentales auxquelles vous pouvez accéder avant leur sortie officielle. Comme ces fonctionnalités sont encore en cours de développement, elles sont susceptibles de changer et d’évoluer.

Cependant, si vous voulez avoir un aperçu de ce qui est à venir dans Elementor, ou si vous voulez tester une nouvelle fonctionnalité, alors rendez-vous dans les paramètres d’expérimentation d’Elementor et découvrez les dernières fonctionnalités.

Cet article couvre la dernière version d’Elementor 3.8, qui est la version gratuite. Je mettrai à jour l’article lorsqu’un changement sera apporté aux fonctionnalités expérimentales d’Elementor dans les prochaines versions.

Vous trouverez les fonctionnalités expérimentales d’Elementor dans le tableau de bord WordPress, sous Elementor, paramètres, onglet « expériences »

Paramètres des expérimentations

Les caractéristiques sont structurées en différents statuts.

• Alpha
• Beta
• Pret à être lancé
• Stable

Que signifient-ils ?

Une version alpha est une version de test d’un logiciel qui n’est pas encore terminée. Elle peut comporter des fonctionnalités qui ne fonctionnent pas correctement ou qui sont manquantes.

Une version bêta est une version de test d’un logiciel qui est presque terminée. Elle possède la plupart des fonctions que la version finale aura, mais il se peut qu’elle ait encore quelques bogues.

Une version stable est une version finale d’un logiciel qui a été testée et dont les erreurs ont été corrigées.

Une version candidate est une version de test d’un logiciel presque prête à être publiée. Elle est utilisée pour trouver et corriger les bugs de dernière minute avant de mettre le logiciel à la disposition du public.

Que signifie « Par défaut » ?

Le paramètre par défaut peut être Actif ou Inactif, qu’Elementor attribue après chaque expérience et chaque version. La valeur par défaut peut varier en fonction de la fraîcheur ou de l’âge du site.

Je recommande de définir chaque paramètre d’Elementor Experimental sur actif ou inactif. Vous savez alors si le paramètre est actif ou non et ne dépendez pas du choix d’Elementor.

L’indicateur vert sur le côté gauche signifie qu’Elementor définit la fonctionnalité comme active lorsqu’elle est définie par défaut.

Quelles sont les fonctionnalités des expériences en cours d’Elementor dans la version gratuite d’Elementor 3.8 ?

Chargement CSS amélioré / Statut Release Candidate

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation d’un document écrit dans un langage de balisage. Une feuille de style est une collection de règles qui indique à un navigateur Web comment afficher un document écrit en HTML ou en XML.

L’amélioration du chargement des CSS dans Elementor garantit que tous les fichiers CSS sont chargés plus rapidement, ce qui réduit le temps d’affichage d’une page Web. Il améliore également les performances générales des sites Web WordPress.

Icônes de police en ligne / Status Alpha

En utilisant Font Awesome, vous pouvez charger les icônes SVG en ligne. Cela améliorera les performances des sites Web construits par Elementor, car il ne sera plus nécessaire de charger un fichier supplémentaire.

SVG est une norme pour les graphiques vectoriels qui permet un contrôle plus précis de l’apparence des icônes que les formats bitmap comme PNG ou JPEG. SVG en ligne signifie que le code SVG est inclus directement dans le document HTML plutôt que d’être chargé à partir d’un fichier séparé. Il améliore les performances car il entraîne moins de requêtes au serveur.

Conteneur Flexbox / Statut Beta

Flexbox est une fonctionnalité de mise en page CSS qui offre un moyen plus efficace de disposer les éléments d’une page pour les adapter à différentes tailles d’écran. Avec Flexbox, vous pouvez contrôler la largeur, la hauteur et l’ordre de chaque élément de la page, ce qui en fait un outil idéal pour le responsive design.

Le conteneur Flexbox remplacera les sections, les colonnes et les sections intérieures.

Transitions de page / Statut Alpha

Une transition de page est une animation fluide qui se produit lorsque vous passez d’une page à l’autre sur un site Web. Elle rend le flux de la page plus agréable et peut également être utilisée pour donner le temps aux arrière-plans vidéo ou à d’autres actifs de se charger avant d’être affichés.

Elementor inclut quelques styles prédéfinis pour les transitions de page, mais vous pouvez également créer des combinaisons personnalisées. Vous pouvez même utiliser des icônes de préchargement pour indiquer aux visiteurs que quelque chose est en train de se charger.

Boucle

Elementor 3.8 Pro introduira la première phase du Loop Builder, qui permet aux utilisateurs de créer et de concevoir l’élément principal pour le contenu répétitif (c’est-à-dire les boucles), comme les listes, et de personnaliser sa disposition sur la page.

La première phase du Loop Builder comprend la création de l’élément principal pour les articles et les types d’articles personnalisés. Les futures mises à jour incluront une prise en charge complète de WooCommerce et des capacités supplémentaires pour améliorer votre site Web.

Le Loop builder nécessite le conteneur Flexbox.

Sortie DOM optimisée / Statut stable

La sortie DOM est un moyen de s’assurer que les sites Web s’affichent bien sur différents appareils. Un site Web comprend de nombreuses autres pièces, et la sortie DOM permet de s’assurer qu’elles s’assemblent correctement.

Lorsque vous utilisez Elementor pour créer un site Web, il génère automatiquement du code HTML pour afficher le contenu de votre site. Ce code HTML comprendra de nombreux éléments d’habillage, ce qui ralentira le temps de chargement de votre site Web.

L’expérience de sortie DOM optimisée améliore les performances en réduisant le nombre d’éléments enveloppants dans le code HTML. Elle devrait aider votre site Web à se charger plus rapidement pour vos visiteurs.

Amélioration du chargement des actifs / Statut stable

Lorsque vous visitez un site Web, l’ordinateur qui héberge le site envoie des éléments d’information à votre ordinateur pour que vous puissiez voir le site Web. Parfois, un site Web comporte un grand nombre de ces bits, et il faut beaucoup de temps à votre ordinateur pour les recevoir. C’est ce qu’on appelle le « temps de chargement d’une page »

Certains sites Web essaient d’accélérer le chargement de leurs pages en n’envoyant que les bits d’information que vous devez voir immédiatement. Le site Web enverra moins de bits à la fois, ce qui chargera votre ordinateur plus rapidement. C’est ce qu’on appelle le « chargement optimisé des actifs »

Améliorations de l’accessibilité / Statut stable

Certaines personnes peuvent avoir du mal à utiliser les sites Web en raison de handicaps tels que l’incapacité de voir très bien ou parce qu’elles ne peuvent pas utiliser une souris. L’accessibilité du Web signifie qu’il n’y a pas de barrières pour ces personnes, elles peuvent donc toujours utiliser le site Web. Elle rend l’internet plus inclusif pour tout le monde.

Points d’arrêt personnalisés supplémentaires / Statut stable

Si vous avez un site Web réactif, vous devrez peut-être utiliser différentes règles CSS pour différents appareils. Cela se fait à l’aide de points d’arrêt. Les points d’arrêt sont des points où la largeur de l’écran est testée, et où un ensemble spécifique de règles CSS est appliqué. Vous pouvez également avoir besoin d’ajouter des points d’arrêt supplémentaires à votre conception.

Vous pouvez désormais gérer ces points d’arrêt supplémentaires dans les paramètres du site. Dans les paramètres du site, vous pouvez ajouter de nouveaux points d’arrêt, supprimer les anciens ou modifier l’ordre dans lequel ils apparaissent. Vous pouvez également tester l’aspect de votre site Web sur différents appareils en cliquant sur les boutons situés en haut de la fenêtre.

Importation et exportation de kits de modèles / Statut stable

L’importation d’un kit est facile ! Allez dans les paramètres de votre site et trouvez l’onglet d’importation/exportation. Sélectionnez le kit que vous voulez utiliser, et il sera ajouté à votre site. Vous pouvez également exporter tous les éléments de votre site pour les utiliser ailleurs.

Masquer les widgets natifs de WordPress dans les résultats de recherche / Statut Stable

Lorsque vous rédigez un article dans WordPress, vous pouvez trouver des widgets pour vous aider en regardant dans la liste déroulante « WordPress » au bas du panneau de l’éditeur. Les widgets peuvent vous aider à ajouter des images ou des vidéos à votre article ou une liste de liens.

Par défaut vers le nouveau créateur de thème / Statut stable

En accédant au constructeur de thème via WP Dashboard > Templates > Theme Builder, le constructeur de thème Nouveau s’ouvre automatiquement. Vous pouvez toujours afficher la version de l’écran en style WP par un simple clic sur un bouton.

Pages d’atterrissage / Statut stable

Créer une page d’atterrissage avec Elementor est facile. Il suffit de cliquer sur le nouveau type de contenu « Landing Page » et de commencer à ajouter du contenu. Vous pouvez ajouter des images, du texte, et même des vidéos. Elementor comprend également des modèles intégrés que vous pouvez utiliser pour vous lancer rapidement.

Sélecteur de couleurs / Statut stable

Cette nouvelle fonctionnalité de sélecteur de couleurs vous permet de choisir une couleur à partir des paramètres d’autres éléments. Elle peut être utile si vous souhaitez faire correspondre la couleur d’une zone de texte ou d’un autre élément de votre page à la couleur d’une image.

Widgets favoris / Statut stable

Si vous souhaitez conserver un widget dans le panneau de l’éditeur afin de pouvoir le retrouver et l’utiliser à nouveau facilement, vous pouvez le marquer comme favori. Pour ce faire, cliquez avec le bouton droit de la souris sur le widget et choisissez l’option « Favoris ». Il apparaîtra alors en haut du panneau de l’éditeur, accessible à tout moment.

Barre supérieure d’administration / Statut stable

Ce plugin ajoute une barre supérieure aux pages Elementor dans la zone d’administration. Elle peut aider à organiser vos pages ou pour ajouter des informations supplémentaires ou des boutons à vos pages.

Notes / Statut stable

Notes est un outil qui vous aide à communiquer avec d’autres personnes lorsque vous travaillez sur un site Web. Vous pouvez laisser des commentaires et des réponses sur le site Web, et tous ceux qui travaillent sur le site Web recevront une notification par e-mail lorsque quelqu’un laisse un nouveau commentaire. De cette façon, vous pouvez tous travailler ensemble plus facilement !

Notes sur Elementor

Soumissions de polices / Statut stable

Si vous enregistrez toutes vos soumissions, vous ne les perdrez plus jamais ! C’est pratique si vous travaillez sur un projet et que vous devez garder vos soumissions ensemble.

Clic défilant / Statut stable

Scroll Snap est une fonction qui vous permet d’arrêter le défilement de votre page lorsque la section atteint un point défini dans la fenêtre d’affichage. Elle est utile dans les sections pleine hauteur, comme les diapositives, où vous souhaitez mettre l’utilisateur en pause avant qu’il ne défile vers la section suivante. Scroll Snap est une expérience stable et est active par défaut sur les nouveaux sites Web.

Conclusion : Expériences Elementor – Est-ce bon ou mauvais ?

Chez OD, nous pensons que ce n’est pas idéal pour les utilisateurs. Si une fonctionnalité existe, les gens l’utiliseront comme le Flexbox Container, mais sachez que le Flexbox Container a toujours le statut bêta. Elementor affirme que le Flexbox Container est désormais stable et prêt à être utilisé sur des sites Web de production. Je resterais tout de même prudent.

Vous pouvez utiliser ces fonctionnalités expérimentales sur des sites de test.

Le conteneur Flexbox améliore énormément le score de vitesse de la page. Il est tentant de les utiliser dès maintenant, même au stade de la bêta. Les décalages de mise en page sont considérablement réduits par rapport à l’élément de mise en page section, colonnes et section intérieure dans Elementor. Votre client adorera le résultat.

Même si nous profitons des fonctions expérimentales d’Elementor, vous pouvez les utiliser pour tester votre site Web. C’est un peu comme une feuille de route. Pour autant que je sache, aucun autre logiciel ne propose de telles fonctionnalités intégrées pour les tests.