Si vous activez le Méga Menu de Divi, vous pourrez y insérer des images pour obtenir un effet très sympa. C’est ce que je vous propose de faire et je vous explique tout ça dans ce tutoriel : comment insérer des images dans le Méga Menu de Divi.

Pas besoin de savoir coder…

L’en-tête d’un site est un élément de design primordial. Divi propose différents types de headers que vous pourrez personnaliser selon vos besoins.

Insérer des images dans le menu principal de Divi
Voici un exemple de menu principal (navigation style Méga Menu) contenant des images pour illustrer mes catégories de blog

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

Voici le programme de ce tutoriel :

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

Qu’est-ce qu’un Méga Menu ?

Un méga menu est un menu déroulant qui est composé de nombreux éléments et qui s’affiche de manière horizontale sous le menu principal.

Il a pour but d’aider l’internaute à trouver plus facilement ce qu’il recherche et lui économise beaucoup de temps.

En règle générale, les mégas menus sont très utilisés en e-commerce pour améliorer la conversion. C’est ce que nous explique cette définition du Méga Menu.

Étape 1 : Création de votre menu principal

Dans un premier temps, pour créer un méga menu avec des images, vous aurez besoin de créer des pages ainsi qu’un menu principal…

Voici les étapes :

1 – Création de vos pages

Tout d’abord, vous allez créer les différentes pages qui constitueront l’arborescence de votre site.

Je vous conseille de bien réfléchir à la structure de celui-ci, c’est très important pour l’expérience de vos utilisateurs mais aussi pour le référencement naturel de votre site.

2 – Structure de votre menu principal

Lorsque ces pages auront été créées, vous pourrez créer la structure de votre menu principal. Pour cela, je vous donne rendez-vous dans le backoffice de votre site, à l’onglet Apparence > Menu.

Si vous n’avez encore aucun menu existant, vous devrez remplir le champ « Nom du menu » (nommez-le comme vous le souhaitez, par exemple « menu principal ») puis vous cliquerez sur « Créer le menu ».

Créer votre premier menu
Création de votre premier menu

Ensuite, il vous suffira de cocher les pages présentes dans l’encart de gauche et de cliquer sur « ajouter au menu ».

Elles iront se positionner sur la droite, ce sera la structure de votre menu : l’élément le plus haut étant l’élément qui se trouvera le plus à gauche de votre navigation – l’élément le plus bas sera l’élément le plus à droite.

Vous glisserez ces différents éléments de haut en bas ou de bas en haut pour organiser votre menu comme vous le souhaitez.

Définir la structure du menu principal
Définissez la structure de votre menu principal en cochant les éléments présent sur la gauche et en les ajoutant dans la structure de votre menu, sur la droite

Enfin, vous assignerez un emplacement pour le menu que vous venez de créer, comme il s’agit de votre navigation principale, vous cocherez la case « menu principal » qui se trouve en bas de la page de création de menu. N’oubliez pas de sauvegarder.

Assigner le menu principal
Ne pas oublier d’assigner l’emplacement de votre menu sur « menu principal »

=> Attention, si vous décalez des éléments vers la droite, ces éléments deviendront des sous-éléments d’un élément principal. Vous pourrez alors ajouter autant de sous-éléments que nécessaire.

Par exemple, dans le blog Astuces Divi, l’élément « Tout pour Divi » comporte 4 sous-éléments.

Découvrez tout ce que vous pouvez faire avec le thème Divi

Étape 2 : Convertir votre menu classique en Méga Menu

Voilà, votre menu principal est créé. Vous allez pouvoir convertir un élément principal en « mega menu » mais pour cela, il faudra qu’il détienne plusieurs sous-éléments (très important !), sinon, cela n’a aucun intérêt…

Pour rappel, un mega menu affiche les éléments d’une navigation à l’horizontale plutôt qu’à la verticale. Cela sera parfait pour insérer des images dans la navigation, mais comment faire ?

  1. Toujours dans le backoffice et toujours dans l’onglet Apparence > Menu, repérez l’onglet « option de l’écran » situé tout en haut de votre page, à droite.
  2. Développez ce menu et cochez la case « classes CSS »
Classe CSS pour mega menu
Activez les classes CSS pour pouvoir utiliser la fonction de Méga Menu

Ensuite, ouvrez l’élément de votre menu que vous désirez convertir en Mega Menu et attribuez-lui la classe CSS « mega-menu »

Attribuer la classe mega-menu
Attribuez la classe mega-menu

Sauvegardez vos modifications

Pour consulter la documentation officielle sur la création d’un méga menu, cliquez ici.

Étape 3 : Insérer des images dans le Méga Menu de Divi

Ces images seront visibles depuis votre navigation principale…

1 – Uploads de vos images

La première des choses que vous devrez faire est de télécharger les images, qui illustreront votre menu, dans la bibliothèque des médias de votre site à l’onglet Medias > Ajouter.

Une fois que c’est fait, vous pouvez récupérer l’URL de chaque image à utiliser dans votre menu.

Pour cela, vous pourrez aller à Medias > Bibliothèque, vous cliquerez sur l’image en question et vous sélectionnerez son URL (ctrl+A  puis ctrl+C ou cmd+A puis cmd+C).

URL image pour le Mega Menu
Récupérer l’URL de votre image pour le Mega Menu

2 – Créer des liens personnalisés

Vous retournerez à l’onglet Apparence > Menu afin d’insérer ces images dans le Méga Menu de Divi. Vous choisirez d’insérer un « Lien Personnalisé » à votre menu.

=> Dans le champ Adresse Web, vous insèrerez le lien de la page vers laquelle l’élément du menu doit mener. Par exemple, si je souhaite envoyer mes visiteurs vers une catégorie de mon site, je vais saisir l’adresse suivante :

https://astucesdivi.com/category/debuter-avec-divi/

Le mieux est de vous rendre sur la page en question et copier/coller son URL, ça évitera les erreurs.

=> Dans le champ « texte du lien » vous insèrerez le lien ci-dessous en prenant soin de modifier les éléments en gras en fonction de votre site :

<img src="url-de-l'image-récupérée-à-l'étape-1" alt="text-alt-de-votre-image" width="100%" />le-texte-de-votre-navigation

Voici en image ce que ça donne :

Liens personnalisés Méga Menu Divi
Insérer des liens personnalisés dans le menu principal de Divi

=> Recommencez ces étapes autant de fois que nécessaire et n’oubliez pas de sauvegarder vos modifications…

Étape 4 : Vérifier le rendu final de votre Méga Menu en image

Pour finir, vous pouvez retourner du côté « Front » de votre site (côté visiteurs), rechargez la page : les images devraient apparaitre dans votre Méga Menu et en cliquant dessus, vous devriez rejoindre les pages que vous avez paramétrées.

Voici le résultat :

Insérer des images dans le Méga Menu de Divi

À lire aussi : Comment effectuer les réglages de Divi ?

Pour conclure…

Alors, ce n’est pas si compliqué de personnaliser DIVI !

En plus, ce tutoriel n’utilise pas de code complexe, tout est disponible depuis votre administration ! Alors, au travail 😉

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

image menu divi
Comment insérer des images dans le Méga Menu de Divi
5 pour 7 vote[s]
quis felis dictum quis, in justo non risus mi, vulputate,

Pin It on Pinterest

Shares
Share This