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.