Avez-vous déjà remarqué que les menus déroulants se ressemblent sur presque tous les sites Divi? Dans le didacticiel d’aujourd’hui, je vais vous montrer comment créer des menus déroulants pleine largeur vraiment sexy dans Divi avec des icônes entrecoupées également.

Comme pour notre dernier article sur effets de survol d’images animées avec sous-titresCe tutoriel était très demandé après avoir utilisé ces menus déroulants pleine largeur sur un site que j’ai créé présenté dans le blog Elegant Themes le mois dernier dans le cadre de la série Divi 100.

Voici ce que nous allons créer dans ce tutoriel: Voir la démo

Commençons.

Première étape – configurer les menus dans WordPress

La première chose à faire est de configurer les menus dans WordPress. Accédez à la section «Menus» dans votre administrateur WP et assurez-vous que votre menu attribué à votre «Menu principal» est sélectionné pour l’édition.

Emplacements du menu WordPress

Ensuite, faites glisser vos menus en place et configurez la hiérarchie des sous-menus pour activer les menus déroulants dans Divi.

Structure du menu WordPress

Maintenant, nous devons l’activer Méga menu Cours en Divi. Au cas où vous ne le sauriez pas, Divi a une fonction intégrée pour créer des méga-menus. En d’autres termes, vous pouvez facilement transformer un sous-menu encombré en un méga menu pour ranger un peu les choses lorsque vous avez des sous-menus dans les sous-menus. Les colonnes sont automatiquement créées pour vous dans le menu. Pour notre objectif dans ce didacticiel, il est seulement utile de placer les menus horizontalement plutôt que dans le menu déroulant vertical typique. Pour ajouter la classe Mega Menu, cliquez sur « Options d’écran » dans le coin supérieur droit. Cochez ensuite la case « Classes CSS » si elle n’est pas déjà cochée.

Options de l'écran de menu

Deuxième étape – Ajout des icônes d’image

Maintenant que les menus sont organisés comme nous le souhaitons, nous devons ajouter les icônes pour rendre nos menus déroulants pleine largeur plus sexy. Eh bien, j’imagine que vous l’avez déjà regardé la démo de ce postVous avez probablement remarqué les superbes icônes dans le menu déroulant. Pour télécharger les trois icônes affichées dans la démo Cliquez ici.



Source link

Recent Posts