Présentation d'Elementor 3.13 - Créez des mises en page de site Web légères et flexibles avec CSS Grid

Améliorez vos capacités de conception et profitez de nouvelles façons de styliser votre site Web avec Elementor 3.13 afin que vous puissiez réaliser des conceptions uniques qui maintiennent l'engagement des visiteurs de votre site Web. Cette version inclut une nouvelle option de mise en page dans les conteneurs - CSS Grid, un excellent moyen de concevoir des mises en page de sites Web sophistiquées et légères, tout en maintenant un haut niveau de cohérence. De plus, cette mise à jour introduit plus d'options de style dans le widget de menu et ajoute de nouvelles fonctionnalités à la nouvelle barre supérieure.

Nouveau - CSS Grid Container - Concevez des mises en page légères, réactives et professionnelles

Désormais, lorsque vous ajoutez un conteneur, vous pouvez choisir entre Flexbox ou Grid Containers. L'utilisation de conteneurs de grille est idéale pour les mises en page de type grille, vous aide à maintenir l'alignement des éléments dans le conteneur et réduit la courbe d'apprentissage associée à la transition de la disposition de section-colonne à la disposition de conteneur.

Avec Grid Containers, vous pouvez choisir le nombre de lignes et de colonnes que vous souhaitez composer votre grille, déterminer la distance entre vos colonnes et vos lignes à l'aide du contrôle Gaps et choisir si vous souhaitez que Auto-Flow aille en fonction de la colonne ou de la ligne. Vous pouvez également justifier et aligner le contenu et les éléments, comme vous le feriez avec un conteneur Flexbox.

Chaque cellule de la grille peut accepter un élément, qui peut être stylisé et modifié comme vous le feriez normalement. Pour atteindre un niveau de sophistication supérieur, vous pouvez placer un conteneur Flexbox à l'intérieur de la cellule d'une grille et placer autant d'éléments que vous le souhaitez dans le conteneur Flexbox.

Pour utiliser la grille de conteneurs, assurez-vous d'activer les fonctionnalités Flexbox Container et Grid Container à partir de WordPress Dashboard → Elementor → Paramètres → Fonctionnalités.

[Pro] Nouvelles capacités de style dans le widget Menu

Dans la version précédente, Elementor a introduit un nouveau widget Menu, qui vous permet de créer des menus simples à un seul niveau et des menus de contenu déroulants sophistiqués, avec un contenu imbriqué. Ce widget change la donne pour la création de sites Web, vous permettant de concevoir des menus beaux et fonctionnels pour vos sites Web.

Elementor Pro 3.13 introduit deux nouvelles fonctionnalités désormais disponibles dans le widget Menu :

• Icônes dans le niveau supérieur du menu - cette nouvelle capacité de style vous permet d'améliorer la conception de vos menus en ajoutant des icônes accrocheuses qui attirent l'attention des visiteurs. Avec une variété d'icônes parmi lesquelles choisir dans la bibliothèque d'icônes, ou la possibilité de télécharger n'importe quel SVG, vous pouvez personnaliser vos menus pour qu'ils correspondent au style de votre site Web et les faire ressortir.

État actif pour les liens d'ancrage - indiquez aux visiteurs du site Web la partie de la page sur laquelle ils ont défilé ou sur laquelle ils ont cliqué lorsque votre menu comprend des liens d'ancrage. De cette façon, vous pouvez améliorer l'expérience des visiteurs en les aidant à naviguer sur votre site Web.

Améliorations de la barre supérieure - Suite de la refonte de l'interface utilisateur d'Elementor

Dans Elementor 3.12, nous avons commencé le déploiement progressif des modifications à venir de l'interface Elementor. Ces modifications sont écrites dans React, ce qui améliore les performances et permet la croissance et l'échelle futures du produit. De plus, ces modifications favorisent les meilleures pratiques d'Elementor, ce qui se traduit par une expérience utilisateur meilleure et plus rationalisée.

L'un des changements les plus importants est la nouvelle barre supérieure, présentée comme une expérience que vous pouvez activer à partir de la page de fonctionnalités Elementor dans WordPress (Elementor → Paramètres → Fonctionnalités → Barre supérieure de l'éditeur). Dans cette version, la barre supérieure inclut deux mises à jour :

1. Enregistrer les options dans le bouton Publier - bien qu'il ne s'agisse pas d'une nouvelle fonctionnalité, cette fonctionnalité n'était pas disponible dans la première version de la barre supérieure. Maintenant, vous avez accès à toutes les options d'enregistrement disponibles dans l'éditeur - Enregistrer en tant que brouillon, Enregistrer en tant que modèle et Afficher les conditions (le cas échéant). Cela signifie également que la barre supérieure inclut désormais toutes les fonctionnalités précédemment disponibles dans l'ancienne interface utilisateur de l'éditeur.
2. Navigation dans les pages – une nouvelle fonctionnalité qui rationalisera votre flux de travail et facilitera la transition entre les différentes pages et parties de thème. Cliquer sur l'indication de page au centre de la barre supérieure ouvrira une liste déroulante qui comprend les cinq dernières pages / publications / parties de thème sur lesquelles vous avez travaillé, et vous permettra de rediriger vers l'un d'eux en un seul clic, sans avoir à revenir en arrière au tableau de bord WordPress.

[Pro] Remplir dynamiquement votre extrait de message, avec le contenu de votre message

Auparavant, l'utilisation du widget Post Excerpt ou de la balise dynamique dans WordPress signifiait que le contenu se remplissait automatiquement à partir de l'extrait personnalisé que vous aviez inséré manuellement dans WordPress. Cependant, avec Elementor 3.13, vous avez désormais la possibilité de choisir si vous souhaitez que le contenu soit automatiquement rempli à partir des premiers caractères de votre message ou à partir de l'extrait personnalisé dans WordPress. Cette mise à jour résout l'une des principales demandes depuis l'introduction du Loop Builder, et plus particulièrement depuis la possibilité d'ajouter le widget Post Excerpt dans votre élément de boucle.

Nouveau : tirez parti de l'IA d'Elementor, parfaitement adaptée à Elementor

Elementor 3.13 inclut également Elementor AI, qui est nativement intégré à l'éditeur, et transformera la façon dont vous créez des sites Web. Cette version présente la première phase d'Elementor AI, qui vous permet de créer du texte et du code avec la puissance de l'IA. Vous pouvez l'utiliser pour créer du contenu à partir de zéro, améliorer le contenu existant sur votre site Web, le traduire sur n'importe quel site Web, etc. De plus, vous pouvez utiliser Elementor AI pour écrire du code pour un CSS personnalisé ou un code personnalisé (nécessite Elementor Pro ou Hosting), ou des extraits HTML. Vous pouvez en savoir plus sur ce que vous pouvez faire avec Elementor AI ici.

Amélioration des performances

Dans les versions précédentes, les améliorations de performances se concentraient sur les widgets les plus courants sur les pages principales. Avec Elementor 3.13, l'accent a été mis sur les widgets utilisés principalement sur les pages intérieures, où les visiteurs du site passent souvent la plupart de leur temps.

Les widgets Author Box, Post Info et Price List affichent des images et des images de profil d'utilisateur, ces images ont maintenant une charge paresseuse qui leur est appliquée. Ce changement devrait améliorer le chargement initial de vos pages intérieures.

De plus, étant donné que l'en-tête apparaît au-dessus du pli, il doit toujours se charger immédiatement lors du chargement de la page. Par conséquent, le chargement différé a été supprimé des en-têtes pour améliorer l'expérience des visiteurs lors de l'utilisation de l'expérience Lazy Load Background Images.

Améliorations de l'accessibilité

Elementor 3.13 regorge d'ajustements et de correctifs qui améliorent l'accessibilité de votre site Web, ainsi que l'éditeur. Dans cette version, nous nous sommes concentrés sur la navigation au clavier, la mise en œuvre de balises ARIA supplémentaires, la résolution des problèmes de conformité ARIA existants et l'application d'un balisage sémantique.

Vous pouvez en savoir plus sur ces améliorations d'accessibilité dans le blog des développeurs.

Profitez de plus d'options de style et de conception pour des expériences de site Web hautement marquées et engageantes

Améliorez la conception de votre site Web et débloquez de nouvelles possibilités de style pour personnaliser votre site Web à l'aide d'Elementor 3.13. Avec CSS Grid Containers, vous pouvez créer des mises en page légères, flexibles et de type grille de manière transparente, et avec les nouvelles capacités de style du widget de menu, vous pouvez créer des conceptions distinctives qui captivent et maintiennent l'engagement des visiteurs de votre site Web.

Cette version inclut également de nouvelles fonctionnalités dans la fonctionnalité Top Bar, ce qui signifie que toutes les fonctionnalités précédemment disponibles dans l'éditeur sont désormais disponibles lors de l'utilisation de l'expérience Top Bar.

Elementor 3.13 comprend également un essai gratuit d'Elementor AI, qui transformera la façon dont vous créez des sites Web en vous permettant de créer instantanément du texte original, d'améliorer le texte existant et de coder pour améliorer votre site Web et sa conception.

Essayez les nouvelles fonctionnalités d'Elementor 3.13 et dites-nous ce que vous en pensez dans les commentaires ci-dessous.