Table des matières
Le thème WordPress Astra en version Astra Pro permet de créer un méga-menu de navigation qui permet d’améliorer l’expérience utilisateur avec une interface plus visuelle.
Activation du module Menu de navigation
Après avoir installé et activé le plugin Astra Pro, on accède à la page Apparence > Options d’Astra.
Là, dans la liste des modules, on active le module intitulé Menu de navigation, qui permet en fait de créer un méga-menu.
Création du méga-menu
Ensuite, pour créer ce méga-menu on doit d’abord passer par l’interface ordinaire de WordPress et se rendre sur la page Apparence > Menus.
Là, on affiche son menu principal.
Définir un élément de menu de premier niveau comme méga-menu
Puis, on ouvre un des éléments de ce menu : on remarque qu’Astra y a ajouté un bouton « Astra paramètres du menu ».
On clique dessus, cela ouvre une fenêtre, on coche la case « activer le méga-menu » et cela fait apparaitre de nouvelles options.
On contrôle alors :
- la largeur de ce méga-menu (largeur du contenu, pleine largeur, largeur personnalisée, etc)
- la couleur de l’en-tête
- la couleur de l’arrière-plan de cette partie du menu
- l’image d’arrière plan et ses paramètres : sa répétition, sa taille, sa position
- les couleurs des typos
- l’étiquette (ex, des mentions « Nouveau », « Promo », « Gratuit », etc)
- les marges
Ensuite, on quitte cette interface pour revenir sur la page Apparence > Menu.
Définir un sous-menu en mode méga-menu
On clique maintenant sur un élément de niveau inférieur à l’élément de menu qu’on vient de régler.
On clique sur le bouton « Astra Paramètres de menu », et cela ouvre une interface différente de la précédente.
On peut alors :
- faire de cet élément de menu un en-tête de colonne
- choisir de masquer ou afficher son étiquette
- choisir une « content source« , une source de contenu, pour ce sous-menu :
- un texte personnalisé
- un template (par exemple avec Elementor)
- un widget
- afficher une étiquette et lui donner une couleur
Le thème Astra Pro va créer automatiquement des colonnes en fonction du nombre de sous-menus définis.
Ajouter un modèle / template Elementor à un méga-menu Astra
Il est possible d’intégrer un template Elementor à un méga-menu avec Astra pro.
Pour cela, vous devez avoir installé le plugin Elementor et le plugin Astra Pro et avoir activé le module Menu de navigation.
Rendez-vous sur la page Modèles de votre administration WordPress, dans le menu de gauche, juste sous Elementor.
Ajoutez un nouveau modèle, de type Section, nommez-le et créez / sauvegardez-le.
Dans l’éditeur Elementor, ajoutez un élément Section et un élément Shortcode / code court.
Ajoutez un shortcode de votre choix au widget Shortcode, par exemple :
[ product_categories number=”4″ columns=”4″ hide_empty=”0″ orderby=”name” order=”desc” ]
(sans les espaces après le crochet ouvrant et avant le crochet fermant).
Publiez votre modèle.
Maintenant, pour intégrer ce modèle à votre méga-menu, faites la procédure expliquée au début de cet article dans « Création du méga-menu » et à l’étape de définition du sous-menu, choisissez « template » comme « content source ».
Sélectionnez le modèle que vous venez de créer.
Sauvegardez, fermez cette interface, sauvegardez le menu, et voilà, votre méga-menu intègre maintenant votre modèle Elementor.
Qu'avez-vous pensé de cet article ?
Cliquez sur une étoile pour donner votre avis
Avis moyen 4.5 / 5. Nombre d'avis donnés 10
Soyez le premier à donner votre avis