Il y a quelque temps, nous avons partagé un hack de menu mobile qui vous permet de créer un menu imbriqué réduit. Nous savons que beaucoup d’entre vous l’ont utilisé, mais avec le nouveau Divi Theme Builder, l’approche devient un peu différente. Dans le tutoriel d’aujourd’hui, nous allons vous montrer comment appliquer un effet de réduction mobile au module de menu dans le Divi Theme Builder. Ce tutoriel se compose de trois parties principales:

• Configuration de votre menu et attribution des classes appropriées à vos éléments de menu
• Créez votre menu avec le générateur de thème et le module de menu
• Ajout du code personnalisé dans le générateur de thèmes

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.

Téléphone portable, téléphone portable

Bureau

Téléchargez le design de l’en-tête global GRATUITEMENT

Important: Après avoir téléchargé et téléchargé le fichier JSON sur votre Theme Builder, vous devez toujours configurer manuellement votre menu avec les classes CSS correctes et ajouter le module de code avec le code CSS et JQuery (étapes 1 et 3 de cet article). .

Pour mettre la main sur le menu imbriqué pliable gratuit, vous devez d’abord le télécharger à l’aide 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.

Abonnez-vous à notre chaîne Youtube

1. Configurez votre menu

Ajouter des éléments de menu et des éléments de sous-menu

La première chose à faire est de créer votre menu. Ajoutez les sous-éléments de votre choix.

Ajouter une option de classe CSS

Après avoir ajouté les éléments de menu, vous pouvez activer l’option Classes CSS en cliquant sur Options d’écran et en vérifiant les classes CSS.

Ajouter une classe CSS aux éléments de menu de premier niveau qui contiennent des éléments de sous-menu

Continuez en ajoutant une classe CSS aux éléments de menu de premier niveau qui contiennent des éléments de sous-menu. Dans cet exemple, cela signifie ajouter la classe CSS aux éléments de menu Service et Portfolio.

Ajouter une classe CSS aux éléments de menu de deuxième niveau et enregistrer le menu

Attribuez ensuite une classe CSS différente aux éléments de menu de deuxième niveau de votre menu. Assurez-vous de n’ajouter cette classe CSS qu’aux éléments de menu de deuxième niveau (au cas où vous ajouteriez plus de couches). Plus loin dans ce didacticiel, nous utiliserons cette classe CSS et la classe que nous avons affectée aux éléments de menu de premier niveau pour créer le menu imbriqué de réduction.

• Classes CSS: deuxième niveau

2. Allez dans Divi Theme Builder et commencez à créer un en-tête global

Allez dans Divi Theme Builder

La prochaine partie de ce didacticiel se concentrera sur la création de la conception de l’en-tête. Si vous souhaitez que la technique imbriquée soit appliquée à un en-tête déjà créé (à l’aide du module Menu), vous pouvez ignorer cette étape et passer à la dernière partie du didacticiel. Si vous souhaitez recréer le design, suivez les étapes. Accédez au générateur de thèmes Divi.

Créer l’en-tête global

Ensuite, créez votre en-tête global.

Section Paramètres

distance

Dans l’éditeur de modèles, vous verrez une section. Ouvrez cette section et retirez tous les tampons supérieurs et inférieurs standard.

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

Indice Z

Augmentez également le z-index de la section.

Ajouter une nouvelle ligne

Structure de la colonne

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

Dimensionnement

Ouvrez les paramètres de ligne sans ajouter de modules et laissez la ligne occuper toute la largeur de l’écran.

• Utiliser une largeur de gouttière personnalisée: Oui
• Largeur de gouttière: 1
• Compenser les hauteurs de colonne: Oui
• Largeur: 100%
• Largeur maximale: 100%

distance

Ensuite, retirez tous les tampons supérieurs et inférieurs standard.

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

Élément principal

Assurez-vous que tous les modules apparaissent côte à côte sur des écrans plus petits en ajoutant également une seule ligne de code CSS à l’élément principal de la ligne.

display: flex;

Colonne 1

distance

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez un rembourrage supérieur et inférieur personnalisé.

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

bord

Ajoutez également un rayon de bordure.

• En haut à droite: 100px
• En bas à droite: 100px

Boîte ombre

Complétez les paramètres de la colonne 1 en ajoutant une ombre de boîte subtile.

• Position horizontale de l’ombre de la boîte: 20px
• Force de flou de l’ombre de la boîte: 50px
• Couleur de l’ombre: rgba (0,0,0,0,15)

Colonne 2

distance

Ensuite, ouvrez les paramètres de la deuxième colonne et ajoutez du rembourrage en haut et en bas.

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

Colonne 3

Fond dégradé

Accédez à la colonne suivante et à la dernière colonne. Ajoutez un arrière-plan dégradé.

• Couleur 1: # 26c699
• Couleur 2: # abe02f
• Direction du dégradé: 116 degrés

distance

Ensuite, ajoutez des tampons supérieurs et inférieurs personnalisés.

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

bord

Accédez ensuite aux paramètres du cadre et effectuez les modifications suivantes:

• En haut à gauche: 100px
• En bas à gauche: 100px

Boîte ombre

Complétez les paramètres de la colonne en ajoutant une ombre de boîte.

• Position horizontale de l’ombre de la boîte: -26px
• Position verticale de l’ombre de la boîte: 0px
• Couleur de l’ombre: # d2ff0c

Ajouter un module d’image à la colonne 1

Télécharger le logo

Il est temps d’ajouter des modules, en commençant par un module d’image dans la colonne 1. Téléchargez votre logo.

Alignement

Ensuite, modifiez l’orientation de l’image du module.

Dimensionnement

Complétez les paramètres du module en modifiant la largeur sur différentes tailles d’écran.

• Largeur: 120px (bureau), 80px (tablette et téléphone)

Ajouter le module de menu à la colonne 2

Choisissez le menu

Dans la colonne 2, nous n’avons besoin que d’un module de menu. Sélectionnez le menu que vous avez créé dans la première partie de ce didacticiel.

Supprimer la couleur d’arrière-plan

Ensuite, supprimez la couleur d’arrière-plan du module.

agencement

Modifiez ensuite les paramètres de mise en page.

• Style: centré
• Direction du menu déroulant: Bas

Texte du menu

Concevez également le texte du menu.

• Police du menu: Montserrat
• Poids du menu des polices: moyen
• Couleur du texte du menu: # 000000
• Taille du texte du menu: 13px
• Espacement des lettres de menu: 1px

Menu déroulant

Allez-y en changeant certaines couleurs dans les paramètres du menu déroulant.

• Couleur d’arrière-plan du menu déroulant: #ffffff
• Couleur de la ligne du menu déroulant: # 000000

Symboles

Complétez les paramètres du module en modifiant la couleur de l’icône du menu hamburger dans les paramètres de l’icône.

• Couleur de l’icône du menu Hamburger: # 000000

Ajouter un module de texte à la colonne 3

Ajouter du contenu

Passez au module suivant et dernier, qui est un module de texte dans la colonne 3. Incluez une copie de votre choix.

Ajouter un lien

Ensuite, ajoutez un lien vers le module.

Paramètres de texte

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

• Police du texte: Montserrat
• Épaisseur de la police du texte: semi-gras
• Couleur du texte: #ffffff
• Taille du texte: 16px
• Hauteur de la ligne de texte: 1em
• Alignement du texte: centre

distance

Complétez les paramètres du module en ajoutant une marge supérieure.

3. Ajouter des fonctions au menu à l’aide d’un module de code

Ajoutez le module de code à la colonne 2

Une fois que vous avez terminé la conception de votre en-tête, il est temps d’ajouter le code personnalisé qui transformera le menu mobile en un menu imbriqué réduit. Ajoutez un module de code à la deuxième colonne (ou ailleurs).

Coller dans le code CSS et JQuery

Ajoutez ensuite le code CSS et JQuery. Assurez-vous de placer le code CSS entre les balises de style et le code JQuery entre les balises de script.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', "https://www.elegantthemes.com/blog/divi-resources/#");  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

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.

Téléphone portable, téléphone portable

Bureau

Dernières pensées

Dans cet article, nous vous avons montré comment appliquer un menu imbriqué réduit à votre en-tête global dans le générateur de thèmes. Nous avons commencé par créer la barre de menus principale, concevoir notre en-tête dans le générateur de thèmes à l’aide du module Menu et terminer le didacticiel en ajoutant le code personnalisé qui a permis à l’effet de fonctionner. Nous espérons que vous avez apprécié ce tutoriel et si vous avez des questions, n’hésitez pas à laisser un commentaire dans la section 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.