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.
Astra Pro, un thème d'excellence
Beau et riche
Beau, rapide, riche en fonctionnalités mais facile à utiliser, le thème WordPress Astra Pro compte parmi les meilleurs du marché, raison pour laquelle je l’utilise sur tous mes sites.180 modèles de site
Fourni avec une galerie de plus de 180 templates, il permet de réaliser rapidement un site professionnel ou thématique – blog, magazine, site-vitrine, boutique e-commerce…Licence Pro
La licence est vendue 49$ à l’année ou 239$ à vie.
