Les méga menus sont un élément de conception populaire qui peut donner à votre site Web un élan d’élégance tout en offrant aux visiteurs une couche de navigation supplémentaire. Il existe plusieurs façons d’ajouter des méga-menus sur Divi. L’une des méthodes les plus simples que j’ai utilisées est celle d’un plug-in tiers appelé Divi Mega Pro .

Divi Mega Pro facilite la création de méga menus à l’aide de Divi Builder. Chaque menu peut être ajouté à n’importe quel élément en utilisant une classe CSS. Cela signifie que vous pouvez ajouter une mise en page Divi à n’importe quel lien du menu, mais vous pouvez aller encore plus loin et les ajouter à n’importe quel élément d’une mise en page Divi simplement en ajoutant une classe CSS.

C’est idéal pour créer des menus et des popups avec des modules de magasin, des images, des sliders, des portefeuilles, des icônes, des textes de présentation, des vidéos, des blogs, etc. Il fonctionne également avec Extra.

Créer un Mega Pro Mega Menu

créer un mega menu divi avec divi mega.png

Le menu Divi Mega Pro est ajouté au menu du tableau de bord. Ici, vous pouvez entrer votre clé de licence, voir les menus que vous avez créés et créer un nouveau menu. Lorsque vous cliquez pour ajouter un nouveau menu, vous verrez un éditeur pour le type de publication de menu. L’écran est simple, mais il se passe beaucoup de choses ici.

conception d'un menu Mega Pro.png

Editeur – vous pouvez créer le méga-menu ou une info-bulle à l’aide de Divi Builder.

modifier l'arrière-plan du mega menu.png

Mega Pro Background – vous pouvez sélectionner l’arrière-plan et les couleurs de la police.

choisir l'emplacement du menu.png

Afficher les emplacements – choisissez toutes les pages ou nommez des pages spécifiques, puis entrez des exceptions.

choisir l'animation du menu.png

Mega Pro Animation – sélectionnez une animation. Choisissez parmi décalage, décalage, perspective, fondu ou échelle.

choisir déclencheur css.png

Mega Pro Triggers – ajoutez un déclencheur comme sélecteur CSS. Une fois que vous l’avez enregistré, vous verrez la classe CSS que vous allez coller dans le champ de la classe CSS d’un élément de menu, d’un module, d’une ligne ou d’une section. C’est ce qui est cliqué ou survolé pour afficher le menu. Tout peut être utilisé comme déclencheur et pas seulement comme élément de menu. Cela signifie que vous pouvez également utiliser Divi Mega Pro pour créer des popups ou des info-bulles.

style du menu configuration divi.png

Paramètres d’affichage Mega Pro : choisissez la direction d’affichage (haut ou bas), entrez les marges supérieures et inférieure en pixels, choisissez un pourcentage de largeur et activez une flèche. L’activation de la flèche révèle davantage de personnalisations dans lesquelles vous pouvez choisir le type de flèche (triangle ou rond), choisir la couleur, définir la largeur et la hauteur et afficher un aperçu de la flèche.

personnalisation des boutons divi.png

Personnalisations du bouton de fermeture: activez le bouton de fermeture sur le bureau ou sur le mobile et personnalisez le bouton de fermeture. Si vous l’activez, les personnalisations de la couleur du texte, de la couleur de fond, de la taille de la police, du rayon de la bordure, du remplissage et de l’affichage sont prévisualisées.

configuration additionnelles divi mega pro.png

Paramètres supplémentaires Mega Pro – choisissez le type de déclencheur (survolé ou cliqué), le type de sortie (survolé ou cliqué) et entrez le délai de sortie.

Modèles Divi Mega Pro

different templates disponible divi mega pro.png

Le développeur a fourni plusieurs modèles pour Divi Mega Pro. Lorsque vous achetez le plugin, ces modèles sont disponibles dans votre compte, dans l’onglet Modèles de disposition des plugins. Ceux-ci sont excellents pour vous aider à commencer à concevoir vos méga menus. J’en utiliserai quelques-uns dans mes exemples.

Menu Divi Mega Pro

menu divi mega pro.png

Une fois que vous créez un méga-menu, il apparaîtra dans la liste. Ici, vous pouvez éditer, éditer rapidement ou supprimer les menus. Vous pouvez également rechercher, filtrer par date, afficher par statut, etc. Il fournit également la classe unique Mega Pro afin que vous puissiez les copier à partir d’ici au lieu d’ouvrir chacune d’elles pour obtenir la classe.

Lorsque vous copiez la classe, veillez à la coller sans espaces supplémentaires. Autrement, tous les méga menus de la page ne fonctionneront plus.

Je suis sûr que ce ne serait pas facile à ajouter, mais une fonction de copie et d’édition serait pratique. Vous pouvez enregistrer les mises en page Divi dans votre bibliothèque pour les réutiliser, mais cela n’inclut pas les paramètres environnants.

Ajout d’un déclencheur

choisir le selectionneur divi.png

Dans le champ Mega Pro Triggers, vous verrez une classe Mega Pro unique. Copiez-la et collez-la dans le champ Classe CSS de l’élément que vous souhaitez utiliser comme déclencheur.

classes css.jpg

Pour ajouter le champ Classe CSS à un élément de menu, vous devez activer les classes CSS. Dans l’écran de menu, sélectionnez Options d’écran et activez Classes CSS.

ajouter une class css menu divi.png

Collez la classe CSS dans le champ du menu. Maintenant, cet élément de menu affichera le méga-menu en survol et vous mènera à la page au clic.

conception menu divi mega pro.png

Vous remarquerez que Divi Mega Pro est également une option dans les options de lien de menu. Ils sont parfaits pour ajouter un élément de menu au menu qui ne va réellement nulle part. Ajoutez la classe CSS comme n’importe quel autre élément de menu.

Section de contact sur le mega menu

section de contact mega menu pro.png

Le menu s’ouvre en survol. Je peux toujours cliquer sur le lien Contact pour ouvrir la page de contact si je le souhaite. Si je voulais seulement que le méga-menu soit affiché, je pourrais simplement utiliser le lien Contacter le menu principal et le renommer (comme dans l’exemple ci-dessus).

Dans celui-ci, j’ai légèrement modifié les couleurs à l’aide de l’arrière-plan et des paramètres d’affichage plutôt que d’utiliser Divi Builder. Il ajoute une barre au bas du menu.

Appel simple à l’action avec des colonnes de menu

conception section de contact divi mega pro.png

C’est l’un des modèles qui ajoutent plusieurs colonnes. Je fais des ajustements aux couleurs de fond et de police. J’ai également ajouté une flèche et fait la largeur de 75%.

modifier couleur arrière-plan divi mega pro.png

Les options de couleur de fond et de police ajoutent un peu plus pour qu’elle se démarque. J’ai laissé l’alignement par défaut, ce qui place le menu à droite de l’écran. Vous pouvez ajuster le positionnement dans les paramètres.

Onglets

conception menu avec onglets mega menu divi.png

Le modèle d’onglets inclut un module de code avec jQuery pour créer l’effet de survol.

demo menu avec onglet divi mega pro.png

J’ai ajouté du contenu aux onglets et les ai adaptés au site. Chacun des liens à gauche montre un onglet différent dans la plus grande partie du menu.

Info Bulles configurations

demo infobulles divi.png

Pour celui-ci, j’ai ajouté la classe CSS à un texte de présentation afin qu’il ouvre une petite fenêtre contextuelle en survol. Le popup est juste une image avec une ombre en dessous.

Dans l’image ci-dessus, ma souris survole les mots LIVE WEBSITE. Je n’ai pas encore ajusté le positionnement, mais il est facile de le faire apparaître où vous le souhaitez.

conception info bull divi mega pro.png

Pour celui-ci, j’ai créé un popup pour montrer une image avec du texte. J’ai réglé la direction d’affichage sur Bas et, afin de la faire apparaître à côté de l’image à laquelle je veux ajouter, j’ai ajouté une marge de -300.

resultat info bulle divi.png

La fenêtre contextuelle apparaît maintenant vers la gauche et en haut de l’image lorsque je la survole. J’ai ajouté une couleur d’arrière-plan transparente, une couleur de bordure, un remplissage et un contour arrondi.

Licence et documentation

licence et demonstration.png

Vous avez le choix entre quatre licences:

  • Site unique – 15 $ par an
  • Trois sites – 29 $ par an
  • Sites illimités – 59 $ par an
  • Durée de vie illimitée – 129 $ une fois

La documentation est fournie par une démonstration vidéo et un article sur le site vous explique les fonctionnalités et explique, étape par étape, comment utiliser le plugin.

[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]TÉLÉCHARGER LE THÈME DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriels » target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]TÉLÉCHARGER LES TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Autres tutoriels Divi