maj 3.12 elementor

Présentation d’Elementor 3.12 – Concevez de magnifiques et sophistiqués Mega Menus

Elementor 3.12 comprend un certain nombre de fonctionnalités très attendues qui permettront de faire passer le design et la navigation de votre site web au niveau supérieur. Cette version révèle également la première phase de la refonte de l’interface d’Elementor et étend les fonctionnalités existantes.

Elementor 3.12 inclut un certain nombre de fonctionnalités passionnantes, y compris un nouveau widget Menu, qui vous permettra de créer visuellement des Mega Menus sophistiqués dans Elementor. Cette version inclut également une nouvelle fonctionnalité qui vous permet de personnaliser davantage les listes de votre site web et de créer un modèle alternatif dans le widget Loop Grid. Enfin, cette version élargit les capacités existantes et vous offre des options de conception et de personnalisation supplémentaires.

[Pro seulement] Introduction du Mega Menu dans Elementor avec le nouveau widget Menu

Cette version introduit l’une des fonctionnalités les plus demandées – le Mega Menu, disponible avec le nouveau widget Menu. En utilisant le nouveau widget Menu, vous pouvez créer un menu extensible qui vous permet d’afficher plus de contenu. Cela améliore l’expérience des visiteurs en leur permettant de trouver plus facilement certaines catégories et sous-catégories, et vous permet de créer des sites web uniques et originaux.

Configurer la navigation de votre site web

Avec le nouveau widget Menu, vous pouvez créer autant d’éléments de menu que vous le souhaitez, à partir de zéro – sans avoir à créer nécessairement des menus dans l’écran Menus de WordPress. Chaque élément de menu peut être lié à n’importe quelle page, ce qui vous donne plus de flexibilité pour structurer la navigation de votre site web. Pour une navigation optimale, il est recommandé d’utiliser la balise URL interne dynamique afin de s’assurer que les éléments du menu renvoient toujours à la page voulue.

Pour chaque élément de menu, vous pouvez décider si l’élément de menu inclut ou non un contenu déroulant dans lequel vous pouvez ajouter des sous-catégories, et choisir une icône pour l’indicateur déroulant. Si vous décidez d’ajouter un contenu déroulant, vous pouvez définir un effet déroulant pour que l’élément de menu s’ouvre au survol ou au clic, et choisir si vous souhaitez que le contenu déroulant s’estompe à l’aide d’un effet d’animation.

Créer un méga-menu avec un contenu déroulant

En activant le contenu déroulant, par élément de menu, et en exploitant la puissance des conteneurs et des éléments imbriqués, vous pouvez créer des méga-menus magnifiques et sophistiqués. Lorsque vous activez le contenu déroulant sur un élément de menu, un nouveau conteneur est ajouté à l’élément de menu, dans lequel vous pouvez faire glisser n’importe quel widget, styliser la zone de contenu et concevoir la mise en page que vous souhaitez, ce qui permet d’améliorer l’expérience des visiteurs et de renforcer leur engagement.

Paramètres réactifs

Pour adapter l’expérience des visiteurs à chaque appareil, vous pouvez choisir le point de rupture à partir duquel le menu devient un menu à bascule, et ajuster la façon dont les zones de contenu déroulant sont conçues pour s’adapter à l’écran sur lequel elles sont affichées.

Remarque : Dans le cadre de cette mise à jour, le widget Nav Menu a été renommé WordPress Menu, et vous pouvez toujours l’utiliser à tout moment, même dans votre widget Menu pour créer des Menus basés sur l’écran Menus de WordPress.

[Pro seulement] Diversifier votre design avec un modèle alternatif en boucle

Loop Alternate Template, une nouvelle fonctionnalité du widget Loop Grid, vous permet d’atteindre un niveau plus élevé de flexibilité de conception en appliquant un modèle différent sur des éléments spécifiques dans une grille à boucles.

Ajouter un autre modèle pour faire ressortir les éléments

Pour ajouter un autre modèle à votre grille à boucles, activez la case à cocher « Appliquer un autre modèle ». En cliquant sur Créer un modèle, vous accédez au concepteur de thème, où vous pouvez concevoir un nouvel élément de boucle. Vous pouvez également choisir l’un des modèles d’élément de boucle que vous avez précédemment créés comme modèle alternatif. Vous pouvez créer jusqu’à 20 modèles différents pour chaque grille de boucles de votre site web.

Une fois que vous avez choisi le modèle que vous souhaitez utiliser, vous pouvez déterminer la position de l’élément dans la grille à laquelle il doit s’appliquer et si vous souhaitez qu’il se répète ou non. Par exemple, vous pouvez appliquer un modèle alternatif à l’élément situé en deuxième position dans la grille, puis déterminer si vous souhaitez qu’il apparaisse uniquement sur le deuxième élément ou qu’il se répète tous les deux éléments.

Remarque : dans cette version, l’application d’un modèle alternatif remplace la conception d’éléments spécifiques dans votre grille de boucles, sur la base de la requête que vous avez sélectionnée pour l’ensemble de la grille. Il n’est pas encore possible d’injecter un élément externe à la requête.

Occuper plus d’espace avec l’espacement des colonnes

Définissez un espacement des colonnes pour le modèle alternatif afin de faire ressortir encore plus les éléments spécifiques de la boucle. Cela vous permettra de concevoir un modèle qui occupe plus d’espace dans votre grille de boucles. Par exemple, si vous avez une grille de boucles à 3 colonnes, vous pouvez créer un modèle alternatif qui couvre 2 colonnes. Cela signifie que si vous appliquez le modèle alternatif au deuxième élément et que vous le réglez pour qu’il couvre 2 colonnes, le deuxième élément occupera 2 colonnes dans la première rangée.

[Pro seulement] Donnez un coup de fouet à votre flux de travail grâce aux modèles de boucle prédéfinis

Accélérez votre flux de travail et inspirez-vous des 10 nouveaux modèles de boucles disponibles dans la bibliothèque. Cette version inclut 6 modèles pour les articles et 4 pour les produits WooCommerce. Vous pouvez trouver les modèles en cliquant sur l’icône de la bibliothèque de modèles dans le canevas lorsque vous créez un nouveau modèle de boucle. La bibliothèque de modèles vous montrera des modèles pour les articles ou les produits en fonction du « type de modèle » que vous avez choisi dans l’onglet contenu de la grille de boucle.

Une fois que vous avez choisi le modèle que vous souhaitez utiliser, vous pouvez le personnaliser davantage et choisir le contenu et la requête que vous souhaitez afficher.

Remarque: les modèles de boucles sont basés sur des conteneurs et ne sont disponibles que pour les sites web dont les conteneurs sont activés.

Refonte de l’interface d’Elementor

Elementor existe depuis près de 7 ans, et c’est également à cette époque que l’interface de l’éditeur a été conçue pour la première fois. Au fil des ans, d’innombrables nouvelles fonctionnalités et widgets ont été ajoutés, rendant important pour Elementor d’apporter des changements à l’interface utilisateur (UI) et à l’expérience utilisateur (UX), afin de faciliter la croissance future du produit.

Au cours des prochaines versions, l’interface d’Elementor subira une refonte progressive, qui sera construite en REACT. Les changements apportés à l’interface encouragent les meilleures pratiques dans la création de sites web avec Elementor, améliorent l’accessibilité, rationalisent les flux de travail et permettent l’introduction de nouvelles fonctionnalités à l’avenir.

Une nouvelle palette de couleurs pour Elementor

Dans Elementor 3.12, l’interface de l’éditeur a subi sa première mise à jour pour s’aligner sur la nouvelle palette de couleurs. Dans le cadre de cette mise à jour, les couleurs de l’éditeur ont été simplifiées. Les nouvelles couleurs sont optimisées pour les modes Dark et Light, ont une meilleure accessibilité et vous permettent de vous concentrer sur le contenu de votre site web, sans affecter les fonctionnalités du produit.

Expérimentation : Nouvelle barre supérieure

Dans Elementor 3.12, la nouvelle barre supérieure est introduite en tant qu’expérience que vous pouvez activer (depuis le tableau de bord WordPress → Elementor → Fonctionnalités). Cette version présente l’étape initiale de la nouvelle barre supérieure dans l’éditeur, qui a été construite en utilisant REACT pour améliorer les performances et permettre des capacités futures. La barre supérieure rassemble toutes les actions essentielles à la création d’un site web dans un endroit centralisé et facilement accessible.

Dans le cadre de cette version, la barre supérieure comprend les éléments et capacités suivants :

  • Menu Elementor – permet d’accéder directement au créateur de thème, à l’historique des révisions, aux préférences de l’utilisateur, aux raccourcis clavier et à la gestion du site web (tableau de bord WordPress).
  • icône ‘+’ – ouvre le panneau des widgets.
  • Réglages du site – permet d’accéder à tous les réglages du site, comme c’était le cas auparavant.
  • Structure – ouvre le panneau de structure (anciennement navigateur).
  • Indication de document – clarifie la partie du site sur laquelle vous travaillez.
  • Icône de roue dentée – permet d’accéder aux paramètres de la page, où vous pouvez ajuster les paramètres de la page sur laquelle vous vous trouvez.
  • Icônes réactives – vous permet de passer facilement d’un point de rupture à l’autre sur votre site web en un seul clic.
  • Icône de loupe – ouvre le Finder, qui vous permet de trouver facilement des parties du site web, d’effectuer des actions rapides et d’ajouter de nouvelles pages ou de nouveaux messages.
  • Icône en forme de point d’interrogation – vous dirige vers le centre d’aide.
  • icône « œil » : ouvre l’aperçu de votre site web.
  • Publier – est passé du bas du panneau des widgets au coin droit de la barre supérieure, ce qui vous permet de publier une page.

Comme il ne s’agit que de la première phase, toutes les fonctionnalités n’ont pas encore été entièrement intégrées et il n’ est pas recommandé de les activer sur des sites web en activité.

Extension des fonctionnalités existantes

Pour suivre l’évolution constante du paysage de la conception web, Elementor introduit constamment des mises à jour des fonctionnalités existantes pour étendre vos capacités et vous fournir plus d’options de personnalisation et de précision.

[Pro seulement] Choisissez vos icônes personnalisées préférées dans le widget Menu Cart

Le widget Menu Cart offrait auparavant une sélection de seulement 9 icônes pour le panier lui-même, et ne permettait pas la personnalisation des icônes « Fermer le panier » ou « Retirer l’article ». Cependant, avec la dernière mise à jour, vous pouvez sélectionner ou télécharger n’importe quel SVG pour l’une de ces trois icônes. Pour ajouter une icône personnalisée au panier lui-même, sélectionnez d’abord « Personnalisé » dans la liste déroulante des icônes et choisissez une icône dans la bibliothèque ou téléchargez votre propre SVG. Pour modifier les icônes « Fermer le panier » ou « Supprimer l’article », deux nouveaux contrôles ont été ajoutés au panneau d’édition afin que vous puissiez choisir une icône dans la bibliothèque ou télécharger votre propre SVG.

Alignement des icônes dans le widget de liste d’icônes

Avec cette mise à jour, si le contenu de votre élément de liste dans votre liste d’icônes s’étend sur plus d’une ligne, vous pouvez aligner verticalement l’emplacement de l’icône par rapport au contenu. Vous pouvez aligner l’icône en haut, au milieu ou en bas de votre élément de liste. Pour plus de précision, vous pouvez utiliser le curseur du contrôle Ajuster la position verticale pour placer votre icône exactement là où vous le souhaitez.

Choisissez n’importe quel type d’unité, n’importe où

Dans le cadre de cette version, Elementor a aligné tous les champs basés sur les unités pour inclure tout ce qui leur manquait – EM, REM, pixels, pourcentages, VW, VH et Custom.

Concevoir des sites web sophistiqués avec les nouvelles fonctionnalités d’Elementor

La dernière version d’Elementor comprend un certain nombre de fonctionnalités intéressantes qui améliorent la conception de votre site web et l’expérience des visiteurs. Avec l’introduction du nouveau widget Menu, vous pouvez créer visuellement et de manière transparente de superbes Mega Menus. De plus, le widget Loop Grid vous permet désormais de créer des modèles alternatifs pour les listes de votre site web, ce qui vous donne encore plus de contrôle sur votre design.

Cet article a été traduit et légèrement modifié depuis le blog officiel d’Elementor : https://elementor.com/blog/new-mega-menu-loop-alternate-template-and-more/

La meilleure installation de WordPress

Bénéficie d’une installation de WordPress totalement configurée et optimisée. Tu n’auras plus qu’à ajouter tes contenus.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *