Point culminant du plugin Divi : Divi MadMenu

Divi Madmenu est un plugin tiers pour Divi qui ajoute de nouvelles fonctionnalités de menu au Divi Theme Builder. Ajoutez des boutons, un panier Woocommerce, une option de recherche et ajustez le placement de chaque élément. Concevez des menus indépendants pour les ordinateurs de bureau, les tablettes et les téléphones, et définissez les points d'arrêt. Définissez l'en-tête comme fixe et ajoutez des animations. Chaque élément est personnalisable. Dans cet article, nous allons jeter un œil à Divi Madmenu et voir ce qu'il peut faire.

Divi Madmenu avec le Divi Theme Builder

Divi Madmenu a été conçu spécifiquement pour fonctionner avec le Divi Theme Builder. Une fois le plugin installé, accédez à Divi Theme Builder, cliquez sur Ajouter un en-tête global et sélectionnez Créer un en-tête global pour créer votre en-tête personnalisé.

Vous verrez un nouveau module ajouté au Divi Builder appelé MadMenu. C'est le seul module que vous aurez besoin d'utiliser, mais vous pouvez en utiliser d'autres si vous souhaitez ajouter encore plus de fonctionnalités.

Teneur

Le module affiche un menu et fournit de nombreuses options pour le personnaliser. Elements vous permet d'activer des fonctionnalités telles que le menu pour ordinateur de bureau et mobile, le logo, la recherche, le panier et deux boutons. Ils peuvent être agencés différemment et stylisés indépendamment.

Le menu du bureau vous permet de choisir le menu à afficher, de définir le point d'arrêt pour déterminer quand il passe à un menu mobile et de définir l'animation et la durée du sous-menu.

Mobile Menu vous permet de sélectionner un menu différent pour mobile et ajoute des options pour réduire les sous-menus, rendre les liens parents cliquables et choisir le mode accordéon. Il comprend les mêmes options d'animation que le menu du bureau.

La bascule de menu mobile comprend des options d'icône et d'étiquette, notamment le format de bascule, les étiquettes fermées et ouvertes et la position de l'étiquette.

Si Logo est activé, vous verrez une option pour choisir le logo, fournir une URL de lien et décider s'il s'ouvrira dans la même fenêtre.

Si la recherche est activée, vous pouvez choisir une icône ou une image.

Pour Panier , vous pouvez afficher l'icône, le contenu ou l'icône et le contenu, sélectionner une image ou afficher le logo, choisir les options de visibilité, une mise à jour en direct, etc.

Le bouton 1 et le bouton 2 sont réglés indépendamment, mais ils ont les mêmes options. Ajoutez du texte, une icône, choisissez le placement de l'icône, la visibilité, le lien et sélectionnez son mode d'ouverture. Dans l'exemple ci-dessus, j'ai ajouté du texte aux deux boutons et ajouté une icône au premier bouton.

Concevoir

L'onglet Conception ajoute des options pour le texte, les éléments de menu, les menus de bureau et mobiles, les sous-menus de bureau et mobiles, le logo, la recherche, le panier, les boutons et bien plus encore. Voici un aperçu de quelques-uns d'entre eux.

Layout General vous permet de choisir l'alignement. Réglez-le sur droite, gauche, centre, espace autour, espace entre et espacement uniforme. Choisissez le sens de la liste déroulante et définissez l'ordre des menus pour les ordinateurs de bureau et les appareils mobiles. Dans cet exemple, j'ai défini l'alignement à droite et défini la liste déroulante directe des sous-menus vers le haut.

Les éléments de disposition vous permettent de contrôler l'alignement, la largeur, etc., du menu, du logo, de la recherche, du panier, du bouton 1 et du bouton 2.

Chacun des éléments a une option de conception de texte qui comprend des paramètres pour le menu normal et fixe. Ajustez la couleur du lien actif, la couleur normale du lien, la police, l'épaisseur de la police, la taille, l'espacement, etc. L'exemple ci-dessus est Texte : Menu du bureau. J'ai changé les couleurs, les tailles de police et l'espacement.

Texte

Ceci est du texte : sous-menu du bureau . J'ai changé les couleurs, les tailles de police et mis le texte en majuscule.

Ceci est du texte : basculement du menu mobile . Il fournit des personnalisations de texte pour le texte d'ouverture et de fermeture. J'ai changé la couleur de la police et augmenté la taille et l'espacement des lettres.

Ceci est du texte : Menu mobile . J'ai changé les couleurs de la police et mis le texte en majuscule.

Texte : le sous-menu mobile contrôle les polices du menu déroulant. J'ai changé les couleurs, sélectionné du texte en majuscule avec une première lettre plus grande pour chaque mot, augmenté la taille de la police et centré le texte.

Texte : Bouton 1 et Texte : Le bouton 2 a les mêmes options et contrôle leurs boutons indépendamment. J'ai augmenté la taille de la police pour les deux boutons et agrandi le bouton 1. J'ai aussi changé leurs couleurs. Pour le bouton 2, j'ai sélectionné une police différente.

Texte : le panier contrôle la police du texte du contenu du panier. J'ai changé la couleur de la police, augmenté la taille, rendu la police en italique, souligné la police avec un style ondulé et changé la couleur de soulignement.

Menu

Les éléments de menu du bureau vous permettent de contrôler les arrière-plans, la marge, le rembourrage, les coins, les bordures, l'ombre de la boîte, etc. boîte ombre.

Les éléments du sous-menu du bureau vous offrent le même contrôle que les éléments du menu. J'ai changé la couleur d'arrière-plan, ajouté une bordure en haut de chaque élément et ajouté une ombre de boîte.

J'aime que chacun des articles puisse être stylé individuellement. J'ai ajouté des ombres de boîte au menu principal, aux éléments de menu et à la recherche, et j'ai arrondi leurs coins. J'ai également changé les couleurs des polices et des arrière-plans.

En voici un que j'ai créé pour mon site de test. J'ai ajouté le logo avec une ombre de boîte, un menu principal, une recherche, un panier et les deux boutons. Les boutons sont stylisés avec des arrière-plans blancs et des bordures noires. J'ai également ajouté une bordure inférieure en utilisant les couleurs de la mise en page.

Nous pouvons avoir une meilleure idée de ce qui peut être fait avec les menus en creusant dans les démos.

Démos de Divi Madmenu

Le plugin est livré avec 10 démos Madmenu que vous pouvez télécharger sur Divi Library. Plusieurs des démos ont des images dans leurs dossiers. Vous devrez les télécharger dans la médiathèque.

Pour utiliser une démo avec Theme Builder, cliquez pour créer un en-tête global. Cliquez pour insérer une section et choisissez Ajouter à partir de la bibliothèque . Vous pouvez maintenant choisir l'une des démos à utiliser.

Utilisez les démos comme point de départ pour créer des designs ou ajoutez simplement votre logo et vos menus. Ils font bon usage des couleurs d'arrière-plan, des options de logo, des options de recherche et des boutons CTA. Regardons quelques-unes des démos avec mon site de test. Ils incluent différentes conceptions pour les en-têtes de bureau, de tablette et de téléphone.

Démo 1

La démo 1 utilise le titre du site, le menu et le bouton 1. Le menu utilise l'alignement central. Le sous-menu comprend un style avec une ombre de boîte et des bordures pour séparer les liens. Je survole le deuxième lien.

Mobile augmente la taille des polices et utilise le même style pour le menu principal et le sous-menu. Il utilise également du texte avec une icône pour le bouton d'ouverture et de fermeture et remplace le titre du site par le logo.

Démo 2

La démo 2 ajoute un logo, une recherche avec une icône encerclée avec une bordure sur un côté, un menu centré, un panier et des boutons. Les deux boutons affichent les logos des réseaux sociaux. Les éléments du sous-menu ont un style indépendamment de l'arrière-plan.

Le menu mobile centre toutes les icônes, remplace le texte du menu par une icône ouverte et ajoute le bleu clair pour le menu.

Démo 3

La démo 3 fait un usage intéressant des boutons. Le bouton 1 comprend du texte pour se connecter ou s'inscrire et il a un effet de survol qui supprime l'arrière-plan au survol. Le bouton 2 utilise l'image d'un cœur dessiné au trait.

Pour mobile, le bouton ouvrir/fermer comprend l'icône et le texte sous l'icône. Les icônes des boutons sont espacées de manière égale dans l'en-tête à l'aide d'un espacement. Le titre du site est remplacé par le logo, qui est déplacé vers la droite.

Démo 5

La démo 5 utilise un espace entre pour la mise en page et affiche les boutons sous forme de CTA. Les deux boutons utilisent des arrière-plans de couleurs différentes pour se démarquer.

Le menu mobile place les boutons à l'extrême droite et à gauche et ils ajoutent des icônes. Le logo et le bouton d'ouverture/fermeture avec texte et icône sont placés au centre.

Démo 7

La démo 7 place les boutons des deux côtés de l'en-tête avec le menu au centre. Le logo est placé au dessus du nom du site. Le menu comprend l'icône d'ouverture et de fermeture avec du texte. Les éléments du menu déroulant sont séparés les uns des autres afin que des parties de l'arrière-plan puissent apparaître.

La version mobile garde les boutons à leur place et remplace le texte par des icônes. Le titre du site est également supprimé.

Démo 8

La démo 8 comprend du jaune gras avec un menu déroulant et un titre à gauche, et le menu avec des boutons à droite. Chacun des boutons comprend des graphiques.

Le menu mobile place les boutons sur la gauche et le logo et l'icône du menu sur la droite.

Démo 10

La démo 10 utilise un dégradé pour l'arrière-plan et place un arrière-plan plus sombre derrière chacune des icônes. Les boutons comprennent du texte et des icônes. Chacun des liens du menu déroulant est séparé les uns des autres et le lien actif est plus sombre. Le logo est placé à gauche.

Le menu mobile supprime toutes les icônes à l'exception de l'icône de recherche. Le menu est remplacé par les icônes d'ouverture/fermeture et le logo est placé au centre. Le menu déroulant est le même.

Acheter Divi Madmenu

Divi Madmenu peut être acheté sur le Divi Marketplace pour 39 $ par an pour une utilisation illimitée et un an de mises à jour et de support.

Mettre fin aux pensées

Divi Madmenu pour Divi Theme Builder possède de nombreuses fonctionnalités et personnalisations, ce qui facilite la conception de n'importe quel type d'en-tête dont vous pourriez avoir besoin. La grande quantité d'ajustements dans l'onglet de conception peut être déroutante au début, mais ils sont simples à utiliser et il ne faut pas longtemps pour comprendre ce qui contrôle quoi. L'utilisation des deux boutons et l'ajout d'images et d'icônes aux boutons de recherche et de panier ouvre de nombreuses possibilités de conception. Si vous souhaitez créer des menus intéressants avec un seul module, Divi Madmenu vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Madmenu ? Faites-nous savoir ce que vous en pensez dans les commentaires ci-dessous.

Image en vedette via venimo / shutterstock.com