Comment ajouter une icône de hamburger au module de menu de Divi sur le bureau
Publié: 2021-04-28Si vous construisez votre en-tête dans Divi, il existe plusieurs façons de procéder. En fait, vous pouvez obtenir un aperçu des types d'en-tête et des didacticiels ici. Maintenant, dans le didacticiel d'aujourd'hui, nous ajoutons une autre option à votre liste. Nous allons vous montrer comment ajouter une bascule d'icône de hamburger au module de menu de DIvi. Cette icône de hamburger apparaît déjà, par défaut, sur des écrans plus petits, mais dans ce didacticiel, nous nous assurerons qu'une icône de hamburger apparaît également sur le bureau. Lorsque vous cliquez sur l'icône du hamburger, tous les éléments du menu apparaîtront dans un ordre horizontal à côté de l'icône. Cela donne une apparence et une sensation minimales à votre en-tête tout en ajoutant également une interaction. Vous pourrez également télécharger le fichier modèle 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.
Téléchargez GRATUITEMENT le modèle d'en-tête global
Pour mettre la main sur le modèle d'en-tête global gratuit, vous devrez d'abord le télécharger en utilisant le 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 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.
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 !
1. Créer un nouveau modèle d'en-tête global
Aller à Divi Theme Builder
Commencez par accéder au Divi Theme Builder dans le backend de votre site WordPress. Une fois là-bas, cliquez sur « Ajouter un en-tête global ».
Ajouter un nouvel en-tête global
Un menu déroulant apparaîtra. Pour commencer à créer à partir de zéro, continuez en sélectionnant « Build Global Header ».
2. Créer une conception d'en-tête globale
Paramètres de section
Couleur de l'arrière plan
Une fois dans l'éditeur de modèles, il est temps de commencer à créer la conception de l'en-tête. Vous remarquerez qu'il y a déjà une section là-bas. Ouvrez les paramètres de la section et ajoutez une couleur d'arrière-plan.
- Couleur d'arrière-plan : #f6f9fb
Espacement
Passez à l'onglet de conception de la section et supprimez tout le rembourrage supérieur et inférieur par défaut.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter une nouvelle ligne
Structure des colonnes
Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet conception et modifiez la largeur maximale dans les paramètres de dimensionnement.
- Largeur maximale : 1280px
Espacement
Modifiez ensuite le rembourrage supérieur et inférieur dans les paramètres d'espacement.
- Rembourrage supérieur : 5px
- Rembourrage inférieur : 5px
Ajouter un module de menu à la colonne
Sélectionnez le menu
Ensuite, ajoutez un module de menu à la colonne de la ligne et sélectionnez un menu dynamique de votre choix.
Télécharger le logo
Téléchargez un logo.
Supprimer la couleur d'arrière-plan
Ensuite, supprimez la couleur de fond blanc par défaut du module.
Paramètres du texte du menu
Passez à l'onglet de conception du module et modifiez les paramètres du texte du menu en conséquence :
- Police du menu : Poppins
- Poids de la police du menu : semi-gras
- Couleur du texte du menu : #003e51
- Taille du texte du menu : 16px
- Alignement du texte : à droite
Paramètres du menu déroulant
Modifiez ensuite les paramètres du menu déroulant.
- Couleur de la ligne du menu déroulant : #7159c8
Paramètres des icônes
Modifiez également les paramètres des icônes.
- Couleur de l'icône du panier d'achat : #670fff
- Couleur de l'icône de recherche : #670fff
- Couleur de l'icône du menu Hamburger : #670fff
Dimensionnement
Ensuite, allez dans les paramètres de dimensionnement et attribuez une largeur maximale au logo.
- Largeur maximale du logo : 50 px
Espacement
Supprimez également la marge inférieure par défaut du module.
- Marge inférieure : 0px
Tourner la section collante
Maintenant que notre menu est en place, nous allons également rendre la section collante. Ouvrez les paramètres de la section, accédez à l'onglet avancé et appliquez les paramètres persistants suivants :
- Position collante : coller au sommet
- Décalage des éléments collants environnants : Oui
- Transition par défaut et styles collants : oui
Couleur de fond collante
Modifiez ensuite la couleur d'arrière-plan de la section dans un état collant.
- Couleur d'arrière-plan : #ffffff
Sticky Box Ombre
Appliquez également une ombre de boîte à la section.
- Couleur de l'ombre par défaut : rgba(0,0,0,0)
- Couleur de l'ombre collante : rgba(0,0,0,0.04)
3. Ajouter l'icône de hamburger au module de menu
Ajouter un identifiant CSS au module de menu
Dans la prochaine partie du didacticiel, nous nous concentrerons sur la création de l'icône de basculement de l'icône du hamburger sur le bureau. Tout d'abord, ouvrez les paramètres du module de menu, accédez à l'onglet avancé et attribuez un identifiant CSS.
- Identifiant CSS : divi-menu
Ajouter un module de code sous le module de menu
Ensuite, ajoutez un module de code sous le module de menu.
Ajouter des balises de script et de style
Nous utiliserons du code CSS et JQuery. Pour nous y préparer, nous allons ajouter des balises de style et de script.
Ajouter un code CSS
Nous allons coller les lignes de code CSS suivantes entre les balises de style :
.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
Ajouter JQuery
Ajouter des lignes de code d'ouverture JQuery
Ensuite, nous aurons le code JQuery. Ajoutez les lignes suivantes de code JQuery entre les balises de script :
jQuery(function($){
$(document).ready(function(){
});
});
Créer des variables
Créez ensuite des variables.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Placer l'icône de bascule à l'intérieur du module de menu
Ensuite, placez la variable d'icône de bascule à l'intérieur du module de menu à l'aide de la ligne de code suivante :
toggleIcon.insertAfter(desktopMenu);
Ajouter une fonction de clic
Nous ajoutons également une fonction de clic.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
4. Enregistrez les modifications apportées au générateur de thème Divi
Maintenant que tout est en place, il ne reste plus qu'à enregistrer toutes les modifications apportées à Divi Theme Builder et à voir le résultat !
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.
Dernières pensées
Dans cet article, nous vous avons montré comment faire preuve de créativité avec votre en-tête Divi dans Divi Theme Builder. Plus précisément, nous vous avons montré comment ajouter une icône de menu hamburger sur le bureau également. Par défaut, une icône de hamburger fait partie de l'expérience sur tablette et mobile, mais nous l'étendons également au bureau. Lorsque vous cliquez sur l'icône bascule, les éléments de menu apparaîtront dans un ordre horizontal, ce qui leur donne une apparence et une sensation minimales. Vous avez également pu télécharger le fichier modèle JSON gratuitement ! Si vous avez des questions ou des suggestions, assurez-vous de 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.