Nous sommes extrêmement enthousiastes de vous présenter nos nouvelles versions bêta, Elementor 3.14. Elementor Pro comprend un nouveau widget Carousel, qui vous permettra de regrouper des éléments au sein de chaque diapositive du carrousel pour une créativité de conception illimitée. Avec cette version, vous pouvez également intégrer des emplacements publicitaires stratégiques dans votre Grille en Boucle (Loop Grid) pour capter l’attention de vos visiteurs, en plus de nombreuses autres capacités de conception qui vous permettront de créer de magnifiques sites web qui se démarquent.
Essayez nos nouvelles versions bêta et faites-nous part de vos impressions sur nos dernières additions, notamment :
- [Pro] Nouveau widget Carousel pour grouper des éléments
- [Pro] Grille en Boucle (Loop Grid) – Position statique des éléments
- [Pro] Important – Changements HTML dans la pagination et la navigation du carrousel en boucle (Loop Carousel)
- Aperçu des styles globaux
- Et bien plus encore…
[Pro] Présentation:
Nouveau carrousel imbriqué pour des possibilités de conception infinies
Cette version inclut un nouveau widget de carrousel emboîtable. Pour utiliser les nouveaux widgets, vous devez activer les fonctionnalités « Conteneurs » et « Éléments imbriqués » en accédant à votre tableau de bord WordPress → Elementor → Paramètres.
Auparavant, Elementor comprenait un certain nombre de carrousels, notamment Image Carousel, Media Carousel (Pro), Testimonials Carousel (Pro) et Reviews (Pro). Chacun de ces carrousels avait une mise en page prédéfinie et il n’était pas possible de personnaliser la mise en page ou d’ajouter de nouveaux éléments tels que du texte ou des images qui ne faisaient pas partie du widget.
Le nouveau widget Carousel est emboîtable pour une flexibilité illimitée. Chaque diapositive du carrousel est un conteneur dans lequel vous pouvez ajouter les éléments de votre choix et personnaliser la mise en page à votre guise. De plus, les onglets Style et Détails du nouveau widget Carrousel incluent toutes les fonctionnalités disponibles dans les autres widgets Carrousel.
Fonctionnalité de lecture automatique et de boucle désactivée dans l’éditeur pour faciliter le glisser-déposer d’éléments sur chaque diapositive. Vous pouvez accéder à ces fonctionnalités comme d’habitude et les prévisualiser en action.
Comment tester cette fonctionnalité :
- Assurez-vous d’activer les fonctionnalités « Flexbox Containers » et « Nested Elements » en allant dans le menu WordPress Elementor → Préférences → Fonctionnalités. Créez une nouvelle page et faites glisser le widget Carrousel dans l’éditeur.
- Personnalisez la mise en page en ajoutant d’autres éléments de carrousel et en modifiant les options Afficher les diapositives, Faire défiler les diapositives et Hauteur égale.
- Ajoutez des widgets à vos diapositives et créez des mises en page qui correspondent à votre conception.
- Continuez à explorer les options de configuration, de navigation et de pagination du carrousel.
- Accédez à l’onglet Style pour ajuster l’espacement entre les diapositives et la navigation et la pagination du style à l’aide de commandes de style dédiées. Assurez-vous que tout fonctionne comme prévu dans l’éditeur et le frontend.
[Pro] Position des éléments statiques dans la grille de boucles – affichez des publicités ou d’autres contenus statiques
L’insertion d’un autre modèle avec un contenu statique dans votre Loop Grid est un excellent moyen de promouvoir un produit, un événement ou un autre contenu spécifique que vous souhaitez démarquer du reste de votre Loop Grid. Cette mise à jour inclut une nouvelle fonctionnalité de position d’article statique dans le cadre de Loop Grid, vous permettant d’insérer des articles statiques entre des publications ou des produits dans Loop Grid.
Après avoir appliqué un autre modèle, une nouvelle bascule est disponible pour ajouter des lignes d’éléments statiques. Lorsque vous l’activez et sélectionnez un modèle (ou créez un nouveau modèle), l’élément statique apparaîtra à la position sélectionnée dans la grille.
Par exemple, vous pouvez appliquer un autre modèle pour annoncer un événement, un produit particulier, etc., et insérer ce modèle dans la deuxième position de la grille de boucles. Dans ce cas, l’élément statique prendra la place du deuxième poste ou produit dans la grille, et le deuxième poste ou produit sera déplacé vers la troisième position.
Pour utiliser la fonction Loop Builder, vous devez vous assurer que la fonction de boucle est activée sur votre site Web. Vous pouvez l’activer depuis votre tableau de bord WordPress → Elementor → Fonctionnalités.
Méthode d’essai:
Assurez-vous que votre site contient au moins 6 publications ou produits.
Créez une nouvelle page, modifiez-la dans Elementor et faites glisser le widget Loop Grid dans l’éditeur. Concevez le modèle principal pour l’élément de boucle (ou sélectionnez un modèle existant) dans le contrôle Sélectionner un modèle du panneau Widget.
Cochez l’option Appliquer un modèle alternatif et sélectionnez un modèle existant ou créez-en un nouveau dans Theme Builder.
Utilisez le champ Position dans la grille pour sélectionner l’emplacement de l’élément statique.
Activez l’option « Position statique des articles ».
Assurez-vous que le nouveau modèle et le nouveau contenu sont ajoutés entre les publications en fonction de la position de grille que vous spécifiez, au lieu que le modèle alternatif remplace la publication à la position spécifiée. Personnalisez la mise en page du modèle alternatif en modifiant les options d’extension de colonne.
Découvrez comment l’activation du positionnement statique des éléments affecte la pagination.
Assurez-vous que tout fonctionne comme prévu dans l’éditeur et le frontend.
[Pro] Important – Loop Carousel – Changements HTML dans la pagination et la navigation
Elementor 3.14 peut introduire des changements passionnants dans les carrousels de boucles. Le code HTML derrière la navigation et la pagination de ce widget (options point/saut et flèches) a été mis à jour. Cela permet à Elementor de positionner l’affichage de la navigation et de la pagination lors de l’utilisation du conteneur. De plus, ces changements permettront de nouvelles fonctionnalités de style à l’avenir.
Si vous avez appliqué un CSS personnalisé à ces zones, nous vous recommandons d’examiner votre site pour vérifier que vos modifications HTML n’ont pas modifié l’apparence du carrousel de boucles et d’effectuer les ajustements nécessaires. Nous nous excusons pour le dérangement.
Présentation de l’aperçu des styles globaux
Les styles globaux constituent la base du système de conception de votre site Web, vous permettant d’utiliser les mêmes couleurs et polices sur l’ensemble de votre site Web. Pour mieux comprendre les couleurs et les polices globales de votre site, vous pouvez activer le nouvel aperçu de style global disponible dans les paramètres du site Couleurs globales et Polices globales. Ceci est disponible à titre expérimental et est activé par défaut pour les sites Web hébergés par Elementor, mais doit être activé manuellement pour les sites Web de plug-ins.
Avec cet aperçu activé, la page entière sera couverte dans un aperçu du guide de style, affichant les couleurs et les polices globales, et vous montrant à quoi ressembleront réellement vos styles globaux sur votre page Web. Lorsque vous apportez des modifications au style global, l’aperçu est automatiquement mis à jour, de sorte que vous pouvez voir immédiatement l’effet de vos modifications. De plus, chaque fois que vous cliquez sur une couleur ou une police dans l’aperçu global, le sélecteur de couleurs ou le sélecteur de polices s’ouvre respectivement, vous permettant d’apporter des modifications de manière transparente.
- Dans WordPress, accédez au menu Elementor → Elementor → Paramètres → Fonctionnalités pour activer et enregistrer la fonctionnalité Global Style Guide.
- Créez une nouvelle page et commencez à créer votre design.
- Utilisez Ctrl/Cmd+K pour accéder à la section Paramètres du site.
- Ouvrez la section Couleurs globales et assurez-vous que l’aperçu du guide de style est activé par défaut. Vérifiez l’écran d’aperçu pour vous assurer que les couleurs du système et les couleurs personnalisées s’affichent correctement.
- Ajustez la couleur d’une couleur globale existante ou créez une nouvelle couleur globale.
- Ajoutez ou modifiez toujours des couleurs dans l’aperçu.
- Essayez d’effacer ou de dupliquer une couleur pour vous assurer qu’elle fonctionne comme prévu.
- Cliquez sur l’une des couleurs dans l’aperçu pour ouvrir la fenêtre du sélecteur de couleurs et assurez-vous que la bonne couleur est affichée dans le panneau Couleurs globales. Vérifiez les étapes ci-dessus dans la section « Polices globales ».
- Assurez-vous de décocher l’option « Aperçu du guide de style » et passez à la zone de contenu.
- Assurez-vous que tout fonctionne comme prévu dans le panneau Global Colors/Fonts et dans l’aperçu.
Améliorations de l’interface utilisateur et de l’UX d’Elementor
Elementor 3.14 inclut de nombreuses mises à jour de convivialité et d’interface qui rationalisent, améliorent et accélèrent votre flux de travail, afin que vous puissiez passer plus de temps à concevoir votre site Web.
Ajoutez des widgets à l’éditeur en un clic
Auparavant, il fallait faire glisser les widgets pour les ajouter à l’éditeur. Il était parfois difficile de faire glisser vers un conteneur ou une colonne spécifique. Avec cette mise à jour, cliquer sur n’importe quel widget de bouton dans le panneau de widgets ajoutera automatiquement le widget au dernier conteneur ciblé. Si la dernière zone ciblée dans l’éditeur était un autre widget, le nouveau widget est placé sous le widget précédemment ciblé.
veuillez noter :
Si vous continuez à utiliser les sections et les colonnes, vous ne pouvez ajouter qu’une seule section interne à chaque colonne. Le fait de cliquer à nouveau sur le widget de la section interne n’ajoute pas de seconde section interne à la colonne et ne fournit aucune indication visuelle indiquant que cette action n’est pas possible. Il devrait apparaître visuellement si vous essayez de le déplacer.
Affichez visuellement des parties de votre site
Lorsque vous travailliez sur une page avec des parties de thème telles que des en-têtes, des pieds de page, des éléments de boucle, il était parfois difficile de passer du corps de la page à d’autres parties du thème, car il fallait cliquer directement sur la poignée pour basculer. .
Avec cette mise à jour, si vous modifiez l’en-tête tout en travaillant dans le corps de la page, par exemple, passer la souris sur l’en-tête affichera une superposition semi-transparente. Cliquez n’importe où dans cette zone, pas seulement sur la poignée, pour commencer à modifier l’en-tête. La modification de parties du thème telles que l’en-tête et le survol du corps de la page affichera une superposition semi-transparente. Cliquez dessus pour aller modifier la partie principale de la page.
Barre supérieure améliorée
La barre supérieure est une nouvelle fonctionnalité introduite pour la première fois dans Elementor 3.12 et a été intégrée à React pour une meilleure évolutivité lors de l’introduction de nouvelles fonctionnalités à l’avenir. La barre supérieure concentre également de nombreuses actions que vous effectuez dans Elementor en un seul endroit et encourage les meilleures pratiques lors de l’utilisation d’Elementor. Cette version introduit trois nouvelles fonctionnalités qui sont disponibles en tant qu’expériences dans la barre supérieure d’Elementor et peuvent être activées en cliquant ci-dessous.
Tableau de bord WordPress → Elementor → Fonctionnalités → Barre supérieure de l’éditeur.
- Ajouter une nouvelle page – lorsque vous cliquez sur la zone d’indication de page au milieu de la barre supérieure, vous pouvez maintenant également ajouter une nouvelle page sans avoir à basculer constamment entre l’éditeur et le tableau de bord WordPress.
- Édition en place des parties du site – lorsque vous créez une nouvelle page à partir de la barre supérieure, cela ne recharge pas l’ensemble de l’éditeur, mais seulement le canevas lui-même, ce qui vous permet de modifier la partie suivante du site, sur place, pour réduire le temps de chargement et vous permettre de commencer plus rapidement.
- « Gérer le site web » renommé « Quitter WordPress » – suite à vos demandes, nous avons remplacé « Gérer le site web » par « Quitter WordPress », qui vous mènera à l’arrière-plan de la partie du site web sur laquelle vous travailliez.
Fonctions WordPress et WooCommerce désormais disponibles également dans Elementor
Pour réduire la nécessité de basculer entre Elementor et WordPress et optimiser votre flux de travail, nous avons ajouté un certain nombre de fonctionnalités disponibles dans les paramètres de page WordPress aux paramètres de page d’Elementor, notamment :
l’ordre (pour les types de contenu hiérarchiques) et la possibilité de permettre les commentaires sur une page / un article. De plus, si vous avez un site web WooCommerce, vous pouvez également définir votre page de boutique en accédant au panneau des paramètres WooCommerce dans les paramètres du site d’Elementor.
Nouveaux raccourcis clavier
Elementor 3.14 a apporté un certain nombre de modifications à la barre de raccourcis clavier accessible en cliquant sur « CMD »/ »CTRL »+ ?. Disponible.
Ajout du raccourci clavier « SHIFT » + C pour les notes qui n’apparaissaient pas dans la barre de raccourcis clavier.
Ajout de deux nouveaux raccourcis clavier.
Appuyez sur CMD/CTRL + MAJ + U pour ouvrir la fenêtre Préférences.
Appuyez sur CMD/CTRL + MAJ + Y pour ouvrir la fenêtre de mise en page.
Plus d’options de style dans divers widgets
widget d’onglet
Cette mise à jour inclut deux nouvelles fonctionnalités dans la section Options supplémentaires (anciennement Paramètres de réponse) de l’onglet Contenu de la fenêtre d’édition.
- Points d’arrêt – Une nouvelle option Aucun préserve la structure des onglets sur chaque point d’arrêt au lieu de la remplacer par un accordéon à un point d’arrêt spécifique. Il s’agit d’une mise à jour très demandée du nouvel onglet widget.
- Défilement horizontal – Activez cette option pour organiser tous les onglets sur une seule ligne. Les visiteurs du site Web peuvent faire défiler horizontalement s’il ne rentre pas dans la fenêtre d’affichage. Il est important de noter qu’il n’y a pas de repères visuels spécifiques permettant à l’utilisateur de faire défiler horizontalement.
Remarque : La fonctionnalité ci-dessus n’est disponible que lors de l’utilisation du widget Nouvel onglet avec la fonctionnalité d’imbrication. Dans WordPress, accédez au menu Elementor → Elementor → Paramètres → Fonctionnalités et assurez-vous d’activer la fonction Éléments imbriqués et enregistrez.
Icône Widget
Vous pouvez désormais modifier la quantité d’espace occupée par une icône SVG téléchargée en sélectionnant l’option Ajuster à la taille dans l’onglet Style du widget Icône. Ceci est particulièrement utile lorsque la largeur et la hauteur de l’icône ne sont pas les mêmes.
[Pro] Menu Widget – Elementor 3.14 vous permet d’ajouter des séparateurs aux éléments de menu dans le menu Widget. La ligne de séparation se trouve dans l’onglet Style, vous pouvez donc personnaliser la largeur, la hauteur, la couleur, etc. de la ligne de séparation. Lorsque le menu passe à l’accordéon (à certains points d’arrêt), le séparateur n’est pas visible.
Widget d’image
Lors du réglage de la hauteur dans l’onglet Style, vous pouvez choisir Alignement de l’objet – Par défaut, Remplissage, Couverture ou Inclure. Après avoir sélectionné la couverture, vous pouvez maintenant choisir la position de l’objet et placer l’image comme vous le souhaitez.
[Pro] Widget d’appel à l’action – Les options de style de bouton d’appel à l’action correspondent désormais aux options de style de widget de bouton pour une expérience d’édition cohérente. Vous pouvez maintenant définir l’espacement des boutons, ajouter des ombres de boîte et des ombres de texte, comme vous le faites avec les widgets de bouton.
[Pro] Gallery Widget
Auparavant, l’ajout d’un lien vers un fichier multimédia à partir d’une image dans une galerie ouvrait un lien direct vers la visionneuse ou l’image en fonction des paramètres de la visionneuse dans les paramètres du site. Avec cette mise à jour, vous pourrez remplacer l’option lightbox par défaut dans les paramètres du site et contrôler l’affichage de la lightbox par widget de galerie.
Performance & Accessibilité
Bouton Widget – Ajout d’un attribut ROLE conditionnel selon que l’utilisateur a défini un lien vers le bouton.
Widgets accordéon et bascule – Les widgets ont été mis à jour pour se conformer aux recommandations du W3C. Vous avez maintenant corrigé tous les avertissements qui s’affichaient auparavant dans vos rapports Lighthouse.
[PRO] Widget de liste de lecture vidéo – Modification de tous les mécanismes de chargement d’images en chargement différé afin de réduire le temps de chargement initial de la page. Ajout également des attributs ALT manquants aux images de couverture de la liste de lecture pour améliorer le référencement.