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
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.
Editeur – vous pouvez créer le méga-menu ou une info-bulle à l’aide de Divi Builder.
Mega Pro Background – vous pouvez sélectionner l’arrière-plan et les couleurs de la police.
Afficher les emplacements – choisissez toutes les pages ou nommez des pages spécifiques, puis entrez des exceptions.
Mega Pro Animation – sélectionnez une animation. Choisissez parmi décalage, décalage, perspective, fondu ou échelle.
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.
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.
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.
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
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
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
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.
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.
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.
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
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
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%.
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
Le modèle d’onglets inclut un module de code avec jQuery pour créer l’effet de survol.
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
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.
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.
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
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
- 5 sites pour restaurant qui utilisent Divi comme thème
- Comment ajouter un texte sur un produit WooCommerce de Divi
- Comment modifier la couleur des menu entre les pages de Divi
- Comment personnaliser les grilles d’un blog avec Divi
- Comment utiliser l’éditeur de rôle de Divi sur WordPress
- Comment créer un slider en plein écran de Divi
- Comment modifier la couleur des menus entre les pages de Divi
- Des fonctionnalités que vous ignorez probablement de Divi
- Comment utiliser Divi Builder sur WordPress
- Comment utiliser le module de défilement de vidéos de Divi
- Comment utiliser le module Bascule de Divi Builder
- Comment ajouter un module de témoignage sur Divi Builder
- Comment utiliser le module de texte de Divi
- Comment créer un slider sur Divi
- Comment éditer un rôle d’utilisateur de Divi
- Comment utiliser le module Social Media de Divi
- Comment utiliser le module boutique sur le thème WordPress Divi
- Comment utiliser le module sidebar de Divi
- Comment utiliser le module des tableaux de prix de Divi
- Comment utiliser le module de titre des publications de Divi
- Comment ajouter un module vidéo de Divi
- Comment utiliser le module de navigation entre articles
- Comment utiliser le module de recherche de Divi
- Comment utiliser le module portefeuille de Divi
- Comment utiliser le module personne sur Divi Builder
- Comment utiliser le module portefeuille avec filtre de Divi
- Comment utiliser le module slider pleine largeur
- Comment utiliser le module Image de Divi Builder
- Comment utiliser le module de navigation pleine largeur de Divi Builder
- Comment utiliser le module galerie d’images
- Comment utiliser le module Carte Pleine largeur de Divi Builder
- Comment utiliser le module portfeuille pleine largeur de Divi
- Comment utiliser le module en-tête pleine largeur de Divi
- Comment utiliser le module compteur de Divi
- Comment utiliser le slider d’articles sur Divi Builder
- Comment utiliser le module Email Optin de Divi
Bonjour:
Où pourrais-je voir comment une fenêtre pop-up est faite?
Je n’ai aucun moyen de l’obtenir. Je n’ai pu créer qu’un méga menu, mais les fenêtres contextuelles que j’ai liées ne s’ouvrent pas.
J’ai croisé quelques emails avec Divi Life mais ils ne m’ont rien clarifié.
Merci beaucoup.
Optin Monster : https://optinmonster.com