Création du menu déroulant des thèmes élégants avancés avec le générateur de thèmes de Divi

Depuis la sortie de Divi's Theme Builder, la façon dont nous concevons les en-têtes et les pieds de page de nos sites Web avec Divi est devenue plus facile que jamais. Tout peut être personnalisé et vous pouvez obtenir le menu exact que vous avez en tête sans jamais avoir à quitter l'environnement intuitif de Divi. Maintenant, à un moment donné, vous avez peut-être rencontré le menu déroulant Thèmes élégants sur notre site Web. Ce menu déroulant est un type de méga-menu plus avancé qui combine de manière créative des icônes, du texte et des CTA. Cela permet aux visiteurs de naviguer visuellement à travers les différents produits qui sont fournis. Cela se traduit également par un beau menu imbriqué sur des écrans de plus petite taille.

Dans ce tutoriel, nous allons vous montrer comment recréer ce menu déroulant avancé de thèmes élégants dans le générateur de thèmes de Divi. Nous combinerons le meilleur des deux mondes ; nous utiliserons les éléments Divi intégrés pour créer la base de nos listes déroulantes et les combinerons avec du code qui place les listes déroulantes dans le menu WordPress. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la disposition de l'en-tête du menu déroulant des thèmes élégants avancés

Pour mettre la main sur la mise en page gratuite de l'en-tête, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Comment télécharger le fichier JSON

Décompressez le dossier zippé que vous avez pu télécharger ci-dessus. Ensuite, accédez à votre site Web WordPress> Divi> Bibliothèque Divi et téléchargez le JSON.

Une fois votre mise en page enregistrée dans la bibliothèque Divi, vous pouvez accéder au Divi Theme Builder et importer la mise en page enregistrée en cliquant sur « Ajouter un en-tête global » ou « Ajouter un en-tête personnalisé » et en sélectionnant « Créer un en-tête global/personnalisé ». Accédez à l'onglet « Vos mises en page enregistrées » dans la bibliothèque Divi, sélectionnez la mise en page que vous avez téléchargée à l'étape précédente et enregistrez toutes les modifications du générateur de thème Divi.

Pour avoir un menu fonctionnel dès le départ, vous devrez parcourir la première partie de ce didacticiel ci-dessous; ajouter les classes CSS aux éléments de menu à un niveau individuel. Vous devrez également activer l'une des classes CSS à l'intérieur du module de code, comme indiqué dans la partie 5 de ce didacticiel.

1. Ajouter des classes CSS aux éléments de menu

Aller aux menus dans l'apparence

La première partie de ce didacticiel se concentre sur la configuration de vos éléments de menu WordPress avec les classes CSS appropriées. Pour ce faire, accédez à votre tableau de bord WordPress > Menus > Créer un nouveau menu ou ouvrez-en un existant.

Activer l'option de classe CSS

Ensuite, dans le coin supérieur droit de votre écran, vous remarquerez les « Options d'écran ». Activez cette option et activez « Classes CSS » dans les propriétés du menu avancé. Cela nous permettra d'ajouter des classes CSS à des éléments de menu spécifiques à un niveau individuel.

Ajouter des classes CSS consécutives aux éléments de menu nécessitant une liste déroulante

Tout au long de ce didacticiel, nous allons créer trois listes déroulantes différentes et attribuer chacune d'entre elles à un élément de menu spécifique. Pour lancer ce processus, nous devrons attribuer deux classes CSS différentes aux trois éléments de menu que nous voulons contenir dans un menu déroulant.

• Premier élément de menu auquel vous souhaitez attribuer une liste déroulante : premier niveau premier niveau-1
• Deuxième élément de menu auquel vous souhaitez attribuer une liste déroulante : premier niveau premier niveau-2
• Troisième élément de menu auquel vous souhaitez attribuer une liste déroulante : premier niveau premier niveau-3

2. Créez un en-tête personnalisé avec le générateur de thème de Divi

Aller à Divi Theme Builder

Une fois que les classes CSS de l'élément de menu sont en place, il est temps de passer à Divi. Accédez à Divi Theme Builder et sélectionnez « Ajouter un en-tête global/personnalisé ».

Commencer à créer un en-tête global

Ensuite, sélectionnez 'Build Global Header' pour être redirigé vers l'éditeur de modèles.

Paramètres de section

Couleur de l'arrière plan

À l'intérieur du modèle, vous remarquerez une section. Ouvrez cette section et changez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #ffffff

Espacement

Supprimez ensuite tous les rembourrages par défaut des sections supérieure et inférieure.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Et incluez également une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte : 30px
• Couleur de l'ombre : rgba(103 151 255 0,17)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une première ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur maximale : 1440px

Espacement

Modifiez ensuite les valeurs de remplissage supérieur et inférieur dans les paramètres d'espacement.

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px

Ajouter un module de menu à la ligne

Sélectionnez le menu

Ensuite, ajoutez un module de menu à la colonne de votre ligne et sélectionnez le menu WordPress que vous avez modifié dans la première partie de ce didacticiel.

Télécharger le logo

Téléchargez un logo ensuite.

Paramètres du texte du menu

Passez à l'onglet Conception et modifiez les paramètres du texte du menu en conséquence :

• Police du menu : Lato
• Poids de la police du menu : gras
• Style de police du menu : majuscule
• Couleur du texte du menu : rgba (32,41,47,0,62)
• Taille du texte du menu : 13 px
• Espacement des lettres du menu : 3px
• Alignement du texte : à droite

Paramètres du menu déroulant

Apportez ensuite quelques modifications aux paramètres du menu déroulant.

• Couleur d'arrière-plan du menu déroulant : #ffffff
• Couleur de la ligne du menu déroulant : rgba(0,0,0,0)
• Couleur du texte du menu déroulant : #000000
• Couleur d'arrière-plan du menu mobile : #f2f4f5
• Couleur du texte du menu mobile : #000000

Paramètres des icônes

Ainsi que les paramètres des icônes.

• Couleur de l'icône du panier d'achat : #000000
• Couleur de l'icône de recherche : #000000
• Couleur de l'icône du menu hamburger : #ff4a9e

Dimensionnement

Et complétez les paramètres du module en attribuant une hauteur maximale de logo aux paramètres de dimensionnement.

• Hauteur maximale du logo : 64 pixels

3. Créer des éléments déroulants

Ajouter une nouvelle ligne à la section

Structure des colonnes (nombre correspondant de menus déroulants requis)

Une fois votre menu par défaut en place, il est temps de créer les menus déroulants. Pour ce faire, nous allons ajouter une nouvelle ligne contenant trois colonnes de taille égale. Le nombre de colonnes correspond au nombre de menus déroulants que nous allons créer.

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 86 %
• Largeur maximale : aucun

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Classe CSS

Et attribuez une classe CSS à la ligne.

• Classe CSS : dropdown-menu-row

Toutes les classes CSS de colonne

Une fois que vous avez terminé les paramètres de ligne généraux, ouvrez chaque colonne individuellement et attribuez la classe CSS suivante :

• Classe CSS : menu déroulant-colonne

Ajouter le module Blurb n° 1 à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules ! Nous allons commencer par créer le premier menu déroulant dans la première colonne. Pour afficher tous les différents produits, nous utiliserons le module Blurb de Divi. Ajoutez du contenu de votre choix.

Sélectionnez l'icône

Ensuite, sélectionnez une icône correspondante.

Ajouter un lien

Ajoutez également un lien vers le module.

Paramètres des icônes

Passez à l'onglet Conception et stylisez les paramètres de l'icône comme suit :

• Couleur de l'icône : #8f42ec
• Placement des images/icônes : à gauche
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 30 px

Paramètres du texte du titre

Ensuite, stylisez le texte du titre.

• Police du titre : Lato
• Poids de la police du titre : gras
• Style de police du titre : majuscule
• Couleur du texte du titre : #8f42ec
• Taille du texte du titre : 16px
• Espacement des lettres du titre : 2px

Paramètres du corps du texte

Avec le corps du texte.

• Police de caractère : Lato
• Couleur du corps du texte : #999999

Dimensionnement

Nous veillons également à ce que la largeur du contenu soit de « 100 % ».

• Largeur du contenu : 100 %

Espacement

Ensuite, nous allons passer aux paramètres d'espacement et utiliser différentes valeurs de remplissage sur différentes tailles d'écran.

• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Rembourrage gauche : 6 % (ordinateur de bureau), 2 % (tablette), 3 % (téléphone)
• Rembourrage droit : 6 % (ordinateur de bureau), 2 % (tablette), 3 % (téléphone)

Flotter:

• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Rembourrage gauche : 8%
• Rembourrage droit : 4 %

Animations

Nous supprimerons ensuite l'animation d'icône par défaut dans les paramètres d'animation.

• Animation d'image/icône : pas d'animation

Classe CSS

Ensuite, nous allons passer à l'onglet avancé et attribuer une classe CSS à notre module. Chaque module de votre menu déroulant a besoin de la même classe CSS qui lui est attribuée pour être inclus dans la liste déroulante.

• Classe CSS : dropdown-menu-item

Élément principal CSS

Enfin, nous allons compléter les paramètres du module en modifiant le curseur à l'aide d'une ligne de code CSS dans l'élément principal.

cursor: pointer;

Cloner le module Blurb x3

Une fois que vous avez terminé le premier module Blurb, clonez-le trois fois.

Modifier le contenu et les icônes

Modifiez tout le contenu et les icônes pour chaque doublon.

Modifier les liens

Avec les liens.

Cloner le dernier module Blurb une fois

Continuez en clonant une fois le dernier module Blurb de la colonne.

Ajouter une couleur d'arrière-plan

Ouvrez les paramètres du module Blurb en double et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f9f9f9

Modifier les paramètres des icônes

Modifiez également les paramètres de l'icône.

• Couleur de l'icône : #3b45eb
• Taille de la police de l'icône : 22px

Modifier les paramètres du texte du titre

Avec les paramètres de texte du titre.

• Couleur du texte du titre : #3b45eb
• Taille du texte du titre : 14 px

Modifier le contenu et le lien

Et, bien sûr, le contenu et le lien.

Désactiver sur tablette et téléphone

Le deuxième type de module Blurb que nous avons dans cette liste déroulante ne sera visible que sur des écrans plus grands. Cela nous aidera à nous assurer que le menu déroulant ne devienne pas trop écrasant sur des tailles d'écran plus petites. Pour masquer le module sur des écrans plus petits, accédez à l'onglet Avancé et désactivez le module sur tablette et téléphone.

Cloner le module Blurb x3

Une fois votre deuxième type de module Blurb terminé, vous pouvez le cloner trois fois.

Modifier le contenu et les icônes

Assurez-vous de modifier le contenu et les icônes pour chaque doublon.

Modifier les liens

Avec les liens.

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Le dernier module dont nous avons besoin dans notre menu déroulant est un module de texte. Nous utilisons un module de texte au lieu d'un module de bouton car le module de texte s'adaptera plus facilement à l'environnement déroulant. Ajoutez une copie de votre choix.

Couleur de l'arrière plan

Ensuite, changez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #3776ff

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Lato
• Poids de la police de texte : gras
• Style de police de texte : majuscule
• Couleur du texte : #ffffff
• Espacement des lettres du texte : 3px
• Alignement du texte : Centre

Espacement

Ajoutez également des valeurs d'espacement personnalisées.

• Marge supérieure : 20px
• Marge inférieure : 20px
• Marge gauche : 4%
• Marge de droite : 4 %
• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px

Frontière

Ensuite, ajoutez des coins arrondis aux paramètres de bordure.

• Tous les coins : 100px

Boîte ombre

Activez une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 14 px
• Couleur de l'ombre : rgba(0,0,0,0) (par défaut), rgba(0,0,0,0.09) (survol)

Transformer Traduire

Au survol, nous voulons que le bouton remonte légèrement. Pour ajouter cet effet, nous utiliserons des paramètres de traduction de transformation personnalisés au survol.

• À droite : -3px (survol)

Classe CSS

Comme tous les autres modules de notre liste déroulante, ce module a besoin de la classe CSS suivante :

• Classe CSS : dropdown-menu-item

Élément principal CSS

Et nous allons compléter les paramètres du module en modifiant le curseur à l'aide d'une ligne de code CSS dans l'élément principal.

cursor: pointer;

Supprimer les colonnes 2 et 3

Une fois que vous avez rempli la première colonne du menu déroulant, vous pouvez ouvrir les paramètres de la ligne et supprimer les deux colonnes vides de la ligne.

Cloner la première colonne deux fois

Clonez la première colonne deux fois.

Personnaliser les articles

Et personnalisez tous les éléments des deux autres menus déroulants comme bon vous semble.

4. Ajouter du code CSS et JQuery

Ajouter un nouveau module de code à la colonne de la ligne n°1

Maintenant que nous avons tous les éléments du menu déroulant en place, il est temps de les transformer en un menu déroulant et de placer le menu déroulant dans un élément de menu correspondant. Ajoutez un module de code à votre première ligne, juste en dessous du module de menu.

Insérer le code CSS

Et insérez le code CSS suivant :

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

Insérer le code JQuery

Nous utilisons également du code JQuery. Assurez-vous de placer ce code entre les balises de script comme vous pouvez le voir dans l'écran d'impression ci-dessous.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Activez la classe CSS une fois que vous avez terminé de personnaliser le menu

Dès que vous aurez fini de personnaliser tous les éléments du menu déroulant, il ne vous restera qu'une chose à faire : masquer toute la ligne contenant les éléments du menu déroulant. Ceci, en combinaison avec une fonction de chargement dans notre code, empêchera les menus déroulants de s'afficher lors du chargement de la page. Une fois que vous avez activé cette classe CSS, vous ne verrez plus la deuxième ligne dans Visual Builder, mais vous pourrez y accéder en mode filaire et/ou désactiver temporairement la classe CSS lors de la modification de vos menus déroulants. Pour activer la classe, supprimez les crochets '/* */' au début et à la fin de la classe CSS.

• Classe CSS : dropdown-menu-row

6. Création de plus de 3 menus déroulants

Ajouter des classes CSS aux éléments de menu dans l'apparence

Si vous cherchez un moyen d'ajouter plus de 3 menus déroulants à votre menu, vous devrez revenir à votre menu et ajouter des classes CSS consécutives au quatrième élément de menu.

• Quatrième élément de menu auquel vous souhaitez attribuer une liste déroulante : premier niveau premier niveau-4

Cloner la colonne à la fin de la ligne

Ensuite, revenez à votre en-tête et clonez la dernière colonne.

Assurez-vous que les classes CSS de colonne et de module sont en place

Assurez-vous que les classes CSS de colonne et de module sont en place pour le nouveau menu déroulant et vous avez terminé ! Il est important de toujours dédier une nouvelle colonne à un nouveau menu déroulant et de suivre l'ordre des colonnes de la ligne. Cela signifie que la colonne 1 sera la liste déroulante 1, la colonne 2 sera la liste déroulante 2, etc.

• Classe CSS de la colonne : dropdown-menu-column
• Classe CSS du module : dropdown-menu-item

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment recréer le menu déroulant Thèmes élégants à l'aide du générateur de thèmes de Divi. Nous avons combiné le meilleur des deux mondes et utilisé les éléments intégrés de Divi pour styliser tous les éléments de notre menu déroulant, puis utilisé du code pour placer toutes les listes déroulantes dans leur élément de menu correspondant dans le menu WordPress. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.