Mise à jour Elementor 3.25 : Optimisation CSS, nouveaux contrôles de décalage d'ancre et pagination des widgets de recherche

Améliorez la vitesse du site web et l'expérience de l'utilisateur, améliorez la fonctionnalité et apportez une expérience d'utilisation plus fluide !

Elementor La version 3.25 apporte un certain nombre d'améliorations significatives pour améliorer les performances du site et l'expérience de l'utilisateur. Parmi les points forts de cette mise à jour figurent des optimisations CSS permanentes, une expérience de défilement plus fluide (Avec le CSS natif et un nouveau contrôle du décalage des ancres), ainsi qu'une fonctionnalité de pagination pour le widget de recherche. Voici les détails de la mise à jour :

Amélioration des performances : Optimisation continue du CSS

La vitesse de chargement d'un site web est essentielle pour l'expérience de l'utilisateur, en particulier sur les téléphones mobiles et les téléphones portables. Classement SEOElementor 3.25 améliore considérablement la vitesse de chargement des pages et réduit le chargement inutile des ressources grâce à une optimisation CSS continue, améliorant ainsi les performances globales du site.

Améliorations clés :

• Zéro poids CSS pour le plugin Elementor Pro
  Dans Elementor 3.25, le plugin Elementor Pro démarre avec zéro CSS par défaut. Cela signifie que lorsque le plugin est activé pour la première fois, il ne chargera aucun style CSS jusqu'à ce que vous commenciez à ajouter des widgets ou à utiliser ses fonctionnalités. Cette approche réduit considérablement la taille du CSS initial, ce qui permet d'alléger le site dès le départ et d'éviter le chargement de CSS redondants, ce qui augmente encore la vitesse de chargement.
• Chargement à la demande des widgets WooCommerce
  Les utilisateurs de WooCommerce bénéficieront grandement de cette mise à jour. Alors qu'Elementor chargeait auparavant le CSS pour les 32 widgets WooCommerce indépendamment de leur utilisation, dans la version 3.25, le CSS sera chargé de manière conditionnelle en fonction de l'utilisation réelle. Par conséquent, le CSS associé à un widget WooCommerce ne sera chargé que lorsqu'il est réellement utilisé sur une page, ce qui permet d'économiser jusqu'à 197 Ko de ressources CSS et d'accélérer le chargement de la boutique WooCommerce.
• Styles globaux chargés à la demande
  Les styles globaux dans Elementor 3.25 seront chargés conditionnellement. Cette amélioration permet de réduire la taille des fichiers de styles globaux jusqu'à 65 Ko, ce qui réduit encore la charge CSS inutile et améliore la réactivité du site.
• Charger les styles de widgets à la demande
  Dans la version 3.25, Elementor a rendu le chargement à la demande plus granulaire pour les différents widgets. Les styles qui étaient chargés en une seule fois sont maintenant chargés un par un en fonction des widgets utilisés. Cela inclut :
  • 6 widgets d'éléments thématiques
  • 3 widgets rotatifs
  • 2 widgets de formulaire
  Grâce à cette optimisation, Elementor ne charge que les styles CSS réellement utilisés, évitant ainsi de charger du code redondant, ce qui améliore considérablement la vitesse de chargement des pages.

Ces optimisations ont entraîné une amélioration significative des vitesses de chargement du site, offrant aux visiteurs une expérience de navigation plus fluide à la fois sur ordinateur et sur mobile, et ont eu un impact positif sur les scores de référencement et les indicateurs de base de Web Vitals.

[Pro] Défilement plus fluide avec Native CSS : Introduction d'un nouveau décalage d'ancre

L'équipe technique d'Elementor a remplacé la bibliothèque AnchorJS par une solution CSS native, ce qui améliore non seulement les performances en réduisant la dépendance au JavaScript, mais rend également le défilement plus fluide et plus cohérent sur tous les appareils.

Nouveau contrôle du décalage de l'ancre

L'une des principales caractéristiques de cette mise à jour est "changement d'ancrage"Cette fonction garantit que les liens d'ancrage défilent jusqu'à la position correcte sur la page, en tenant compte des titres collants et d'autres éléments. Auparavant, les liens d'ancrage défilaient souvent vers des emplacements cachés derrière des titres collants, ce qui était source de confusion et de frustration pour les visiteurs. La fonction "Anchor Offset" résout ce problème en définissant une valeur de décalage personnalisée et en ajustant le comportement de défilement de manière à ce que la partie du lien soit entièrement visible et non cachée derrière des titres collants.

Comment définir le décalage de l'ancre

Pour définir le décalage de l'ancre, allez dans l'onglet Avancé de l'en-tête, faites défiler vers le bas jusqu'à Effets de mouvement, définissez l'en-tête sur Coller en haut ou en bas, puis vous pouvez définir la valeur appropriée dans le champ Décalage de l'ancre.

[Pro] Widget de recherche amélioré : pagination des résultats en temps réel

Le widget de recherche dans Elementor 3.25 a fait l'objet d'une mise à jour majeure pour introduire la pagination des résultats en temps réel. Auparavant, les résultats de recherche dans le menu déroulant de la recherche en direct n'affichaient qu'un certain nombre d'éléments, et les visiteurs devaient naviguer vers des pages distinctes pour afficher des résultats supplémentaires. Désormais, Elementor 3.25 introduit la pagination directement dans le menu déroulant de la recherche en direct, ce qui permet aux visiteurs de parcourir plusieurs grilles de résultats sans quitter la page en cours et offre une expérience plus transparente lors de la recherche de grandes quantités de contenu.

Principaux avantages

• Amélioration de l'expérience de recherche :Les visiteurs peuvent explorer davantage de résultats directement dans la barre de recherche, ce qui réduit les frictions et maintient leur intérêt.
• Augmentez la découverte de contenu :Grâce à la pagination, les visiteurs ont plus de chances de trouver le contenu qu'ils recherchent, ce qui accroît leur satisfaction.
• Augmentation de l'engagement et diminution du taux de rebond :En permettant aux visiteurs de rester sur la page en cours pendant qu'ils effectuent une recherche, vous pouvez créer une expérience plus transparente et les maintenir engagés plus longtemps.

Comment mettre en place la radiomessagerie 

Pour ajouter la pagination à la page "rechercher qqch."Les widgets, tout d'abord, se trouvent dans l'espace "élément"de l'onglet "à la fin"Partiellement activée"Résultats en temps réel", puis sélectionnez "modèle récurrent", puis dans "Autres paramètres"(sous le même onglet - "Contenu"), une option permet d'activer les options de pagination avec des numéros et/ou suivant/précédent. Il est également possible de sélectionner dans le menu "typeL'onglet "Pagination" permet de personnaliser l'apparence de la pagination. En option, vous pouvez ajuster l'alignement, le positionnement vertical, l'espacement et la typographie, ainsi qu'ajouter des styles de survol et d'état actif.

Autres mises à jour d'Elementor 3.25

• Les soumissions de formulaires sont actives par défaut sur tous les sites :La soumission de formulaires est désormais native dans l'éditeur et active sur tous les sites. Les utilisateurs peuvent soumettre un formulaire en se rendant dans la section Elementor > Paramètres > AvancéSi vous souhaitez désactiver cette fonctionnalité à partir du tableau de bord de WP, vous pouvez le faire en cliquant sur le bouton "Désactiver" dans le tableau de bord de WP.
• Nouvelles expériences optimisées sur la performance des marqueursPremière enveloppe pour le bouton de suppression, les widgets PayPal et Stripedivpour simplifier le balisage et réduire l'ensemble du DOM. est actuellement en statut Alpha et ne doit pas être activé sur les sites de production.
• Thème Twenty Fifteen :Suppression de la compatibilité CSS pour supprimer les couleurs d'arrière-plan du thème sur les pages utilisant le modèle "Elementor Canvas".
• Mises à jour fonctionnelles et expérimentales :
  • Grid Container - fusionner avec Flexbox container et renommer en "Container".  
  • Charge de contrôle optimisée - Efficace pour les sites existants et mis à niveau vers un état stable.  
  • Éléments imbriqués - S'applique aux sites existants.  
  • Barre supérieure de l'éditeur - fonctionne pour les sites existants.
  • Afficher les conditions (pour les éléments) - conditions natives dans l'éditeur.

Résumé :

La mise à jour Elementor 3.25 apporte plusieurs améliorations, notamment dans les domaines de l'optimisation des performances, de l'expérience de défilement et de la fonctionnalité de recherche :

1. Optimisation continue du CSSLe système de gestion de l'information : il réduit le chargement inutile des feuilles de style CSS et améliore la vitesse et la réactivité du site.
2. Nouveau contrôle du décalage de l'ancre: permet un défilement plus précis et plus fluide pour les pages comportant une barre de navigation fixe.
3. Pagination du widget de rechercheFonctionnalité de recherche en temps réel améliorée pour accroître la rapidité de la recherche et l'expérience de l'utilisateur grâce à la pagination.

Ces mises à jour permettent non seulement d'améliorer la vitesse de chargement du site web et de réduire la consommation de ressources inutiles, mais aussi d'améliorer l'expérience de navigation et l'interactivité de l'utilisateur, ce qui contribue fortement à l'optimisation globale du site web.