Vous avez envie de créer une navigation super cool, avec des images, pour votre site avec le thème Divi ? C’est possible ! Dans ce tutoriel, je vais vous expliquer comment insérer des images dans le Méga Menu de Divi. Pas besoin de savoir coder…

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

 

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.

 

Étape 1 : Création de votre menu principal

Dans un premier temps, pour créer un méga menu avec des images, nous aurons besoin de créer des pages ainsi qu’un menu… 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 mon 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 basique 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

  3. 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

  4. Sauvegardez vos modifications

 

É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 rouge 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 compliqué, tout est disponible depuis votre administration ! Alors, au travail 😉

image menu divi

Comment insérer des images dans le Méga Menu de Divi
5 pour 4 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This