Lors de la création de votre en-tête dans Divi, il existe quelques options. En fait, vous pouvez obtenir un aperçu des types d’en-tête et des didacticiels ici. Dans le didacticiel d’aujourd’hui, nous allons ajouter une autre option à votre liste. Nous allons vous montrer comment ajouter un commutateur d’icône de hamburger au module de menu DIvi. Cette icône de hamburger est déjà affichée par défaut sur des écrans plus petits. Cependant, ce didacticiel garantira qu’une icône de hamburger apparaît également sur le bureau. Lorsque vous cliquez sur l’icône hamburger, tous les éléments de menu sont affichés dans l’ordre horizontal à côté de l’icône. Cela donne à votre en-tête une apparence et une sensation minimales tout en ajoutant une interaction. Vous pouvez également télécharger le fichier de modèle JSON gratuitement!

Commençons.

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Basculer l'icône Hamburger

Téléchargez le modèle d’en-tête global GRATUITEMENT

Pour mettre la main sur le modèle d’en-tête global gratuit, vous devez d’abord le télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

1. Créez un nouveau modèle d’en-tête global

Allez dans Divi Theme Builder

Tout d’abord, accédez au Générateur de thèmes Divi dans le backend de votre site WordPress. Là, cliquez sur « Ajouter un en-tête global ».

Basculer l'icône Hamburger

Ajouter un nouvel en-tête global

Un menu déroulant apparaîtra. Pour repartir de zéro, sélectionnez « Créer un en-tête global ».

Basculer l'icône Hamburger

2. Créez une conception d’en-tête globale

Section Paramètres

Couleur de l’arrière plan

Une fois que vous êtes dans l’éditeur de modèle, vous pouvez commencer à créer la conception d’en-tête. Vous constaterez 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

Basculer l'icône Hamburger

distance

Accédez à l’onglet Conception de la section et supprimez les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

Basculer l'icône Hamburger

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne avec la structure de colonnes suivante:

Basculer l'icône Hamburger

Dimensionnement

Ouvrez les paramètres de ligne sans ajouter de modules, passez à l’onglet Conception et modifiez la largeur maximale dans les paramètres de taille.

Basculer l'icône Hamburger

distance

Modifiez le remplissage supérieur et inférieur dans les paramètres d’espacement suivants.

  • Rembourrage supérieur: 5px
  • Rembourrage au sol: 5px

Basculer l'icône Hamburger

Ajouter un module de menu à la colonne

Choisissez le menu

Ensuite, ajoutez un module de menu à la colonne de la ligne et sélectionnez un menu dynamique de votre choix.

Basculer l'icône Hamburger

Télécharger le logo

Téléchargez un logo.

Basculer l'icône Hamburger

Supprimer la couleur d’arrière-plan

Supprimez ensuite la couleur d’arrière-plan blanc par défaut du module.

Basculer l'icône Hamburger

Paramètres du texte du menu

Accédez à l’onglet Conception du module et modifiez les paramètres de texte du menu en conséquence:

  • Police du menu: Poppins
  • Épaisseur de la police du menu: semi-gras
  • Couleur du texte du menu: # 003e51
  • Taille du texte du menu: 16px
  • Alignement du texte: à droite

Basculer l'icône Hamburger

Paramètres du menu déroulant

Ensuite, modifiez les paramètres du menu déroulant.

  • Couleur de la ligne du menu déroulant: # 7159c8

Basculer l'icône Hamburger

Icônes de paramètres

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

  • Couleur de l’icône du panier: # 670fff
  • Couleur de l’icône de recherche: # 670fff
  • Couleur de l’icône du menu Hamburger: # 670fff

Basculer l'icône Hamburger

Dimensionnement

Ensuite, allez dans les paramètres de taille et attribuez un logo de largeur maximale.

Basculer l'icône Hamburger

distance

Retirez également le bord inférieur standard du module.

Basculer l'icône Hamburger

Twist la section collante

Maintenant que notre menu est en place, nous allons également rendre la section collante. Ouvrez Paramètres de la section, passez à l’onglet Avancé et appliquez les paramètres suivants:

  • Position collante: restez debout
  • Décalage des éléments collants environnants: Oui
  • Styles de transition standard et collants: Oui

Basculer l'icône Hamburger

Couleur d’arrière-plan collante

Ensuite, changez la couleur d’arrière-plan de la section en un état permanent.

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

Basculer l'icône Hamburger

Ombre de boîte collante

Appliquez également une ombre de boîte à la section.

  • Couleur de l’ombre standard: rgba (0,0,0,0)
  • Couleur de l’ombre collante: rgba (0,0,0,0,04)

Basculer l'icône Hamburger

3. Ajouter le bouton Hamburger Icon Toggle au module de menu

Ajoutez l’ID CSS au module de menu

Dans la partie suivante du didacticiel, nous nous concentrerons sur la création de l’icône de bascule pour l’icône de hamburger sur le bureau. Tout d’abord, ouvrez les paramètres du module de menu, passez à l’onglet Avancé et attribuez un ID CSS.

Basculer l'icône Hamburger

Ajoutez le module de code sous le module de menu

Ajoutez ensuite un module de code sous le module de menu.

Basculer l'icône Hamburger

Ajouter des balises de script et de style

Nous utiliserons du code CSS et JQuery. Pour nous préparer à cela, nous allons ajouter des balises de style et de script.

Basculer l'icône Hamburger

Ajouter du code CSS

Nous allons ajouter les lignes suivantes de code CSS 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;    
}

Basculer l'icône Hamburger

Ajouter JQuery

Ajouter des lignes de code d’ouverture JQuery

Ensuite, nous avons le code JQuery. Ajoutez les lignes suivantes de code JQuery entre les balises de script:

jQuery(function($){
$(document).ready(function(){

});
});

Basculer l'icône Hamburger

Créer des variables

Ensuite, créez quelques variables.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Basculer l'icône Hamburger

Placez l’icône de bascule dans le module de menu

Ensuite, placez la variable d’icône de bascule dans le module de menu en utilisant cette ligne de code:

toggleIcon.insertAfter(desktopMenu);

Basculer l'icône Hamburger

Ajouter une fonction de clic

Nous ajoutons également une fonction de clic.

toggleIcon.click(function(){
	desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Basculer l'icône Hamburger

4. Enregistrez les modifications dans le générateur de thèmes Divi

Maintenant que tout est en place, il ne vous reste plus qu’à enregistrer toutes les modifications apportées au Divi Theme Builder et à voir le résultat!

Basculer l'icône Hamburger

Basculer l'icône Hamburger

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.

Basculer l'icône Hamburger

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. En particulier, nous vous avons montré comment basculer une icône de menu hamburger sur le bureau également. Par défaut, une icône de hamburger fait partie de l’expérience tablette et mobile, mais nous l’étendons également au bureau. Lorsque vous cliquez sur l’icône de bascule, les éléments de menu sont affichés dans un ordre horizontal, ce qui rend l’apparence minimale. Vous pouvez également télécharger le fichier de modèle JSON gratuitement! Si vous avez des questions ou des suggestions, veuillez laisser un commentaire dans la section des commentaires ci-dessous.

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts