Comment créer un menu de navigation verticale (ou en-tête) pour votre site Web Divi

Les menus de navigation verticaux peuvent être utiles pour certains sites Web qui ont besoin de plus d'éléments de menu au premier plan. Les menus horizontaux peuvent être difficiles à intégrer à tous les liens de menu nécessaires, en particulier sur les plus petites largeurs de navigateur. Dans ce tutoriel, nous allons vous montrer comment créer un menu de navigation vertical personnalisé à l'aide du Divi Theme Builder. Cela vous permettra plus d'espace pour présenter vos éléments de menu WordPress. Et vous aurez tout le pouvoir d'ajouter des modules Divi supplémentaires à l'en-tête vertical et de les concevoir avec le constructeur Divi.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, 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 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 !

Pour télécharger le modèle, accédez au Divi Theme Builder dans le backend de votre site Web WordPress.

Télécharger le modèle de site Web par défaut global

Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l'icône.

Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur « Importer des modèles Divi Theme Builder ».

Enregistrer les modifications apportées au générateur de thème Divi

Une fois que vous avez téléchargé le fichier, vous remarquerez un nouvel en-tête et un nouveau pied de page globaux dans votre modèle de site Web par défaut. Enregistrez les modifications de Divi Theme Builder dès que vous souhaitez que le modèle soit activé.

Passons au tutoriel, voulez-vous ?

Partie 1 : Créer un nouvel en-tête global

Pour ce tutoriel, nous allons construire le menu de navigation vertical dans un Global Header à l'aide du Divi Theme Builder. Cependant, nous vous montrerons comment ajouter le même menu au corps d'un modèle de page à la fin de la publication, juste au cas où vous souhaiteriez l'utiliser en plus du menu principal de votre site.

Pour commencer, accédez au tableau de bord WordPress et accédez à Divi > Theme Builder.

Cliquez ensuite sur la zone « Ajouter un en-tête global » du modèle de site Web par défaut et sélectionnez « Créer un en-tête global » dans la liste déroulante.

Sélectionnez ensuite l'option « Créer à partir de zéro ».

Partie 2 : Conception de la disposition de la section verticale

Dans l'éditeur de disposition d'en-tête global, ouvrez les paramètres de la section régulière déjà présents et mettez à jour ce qui suit.

• Largeur (bureau): 300px
• Largeur (tablette et téléphone): 100%

• Hauteur (bureau): 100vh
• Hauteur (tablette et téléphone) : automatique

• Rembourrage (bureau): 4vh haut, 0px bas
• Rembourrage (tablette et téléphone): 0px en haut, 0px en bas

Continuez la conception en ajoutant une boîte-ombre comme suit :

• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte: 20px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Pour vous assurer que le menu de navigation vertical reste visible sur la gauche pendant que l'utilisateur fait défiler, mettez à jour la position sur Fixed et mettez à jour l'index z comme suit :

• Poste : fixe
• Indice Z : 9999

Pour nous assurer que nous pourrons voir la navigation du sous-menu qui s'étendra en dehors de la section, ajoutez le CSS personnalisé suivant à l'élément principal :

overflow: visible !important;

Votre section est maintenant dans une disposition verticale sur le côté gauche du modèle.

Partie 3 : Conception du menu vertical

Une fois la section en place, nous sommes prêts à concevoir le menu vertical. Pour ce faire, nous utiliserons un module de menu avec du CSS personnalisé pour styliser la navigation à afficher verticalement.

Nous utiliserons également l'unité de longueur vh afin que le menu s'adapte parfaitement aux différentes hauteurs de navigateur.

Ajout de la ligne

Pour commencer, ajoutez une ligne à une colonne à la section.

Mettez ensuite à jour les paramètres de ligne comme suit :

Taille et rembourrage

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 80 %
• Rembourrage (bureau): haut 3vh, bas 3vh
• Rembourrage (tablette et téléphone): 0px en haut, 0px en bas

Frontière

• Largeur de la bordure : 1px
• Couleur de la bordure : #eeeeee

Ajout du module de menu

À l'intérieur de la rangée à une colonne, ajoutez un nouveau module de menu.

Sélectionnez un menu à afficher sous la bascule de contenu.

Ajoutez ensuite le logo de votre site en tant que contenu dynamique sous la bascule Logo.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Style : Centré
• Police du menu : Nunito Sans
• Couleur du texte du menu : #535b7c
• Taille du texte du menu : 18 px (ordinateur de bureau), 14 px (tablette et téléphone)
• Hauteur de la ligne de menu : 2 em
• Couleur de la ligne du menu déroulant : #535b7c
• Couleur du lien actif du menu déroulant : #535b7c

• Couleur de l'icône du panier d'achat : #535b7c
• Couleur de l'icône de recherche : #535b7c
• Couleur de l'icône du menu Hamburger : #535b7c

• Rembourrage (bureau): haut 2vh, bas 2vh
• Rembourrage (bureau) : 10 pixels en haut, 10 pixels en bas

Partie 4 : Ajout du CSS personnalisé pour le menu

Le menu a besoin de CSS personnalisé pour obtenir la navigation verticale que nous recherchons. Pour commencer, allez sous l'onglet avancé et ajoutez le CSS personnalisé suivant au lien de menu et au logo de menu.

Lien de menu CSS (bureau) :

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Lien de menu CSS (tablette) :

width: auto;
border:none;

CSS du logo du menu :

margin-bottom: 20px;

Ensuite, ajoutez une classe CSS personnalisée au module de menu comme suit :

Classe CSS : et-vert-menu

Le sera utilisé pour cibler ce menu particulier dans notre CSS personnalisé externe que nous ajouterons à l'aide d'un module de code.

Ajout de CSS personnalisé avec le module de code

Sous le module de menu, ajoutez un nouveau module de code.

Collez ensuite le code suivant dans la zone de code (assurez-vous de le placer entre les balises de style) :

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

Partie 5 : Conception du bouton et des icônes de suivi des médias sociaux

Maintenant que le menu est terminé, nous pouvons ajouter un bouton et certains réseaux sociaux suivent des liens pour compléter l'en-tête vertical.

Ajout de la ligne

Ajoutez une nouvelle ligne à une colonne sous la ligne actuelle.

Ajout du bouton

Ajoutez ensuite un nouveau module de boutons à la ligne.

Mettez à jour les paramètres des boutons comme suit :

• Alignement des boutons : centre
• Taille du texte du bouton : 18 px (ordinateur de bureau), 14 px (tablette et téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #535b7c
• Largeur de la bordure du bouton : 0px

Ensuite, allez dans l'onglet avancé et collez le CSS personnalisé suivant dans l'élément principal :

Élément principal CSS (bureau)

display:block;
width: 100%;

Élément principal CSS (tablette)

display:inherit;

Ajout des icônes de suivi des médias sociaux

Sous le bouton, ajoutez un module de suivi des médias sociaux.

Ajoutez les réseaux sociaux que vous souhaitez sous l'onglet contenu.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Alignement du module : Centre
• Couleur de l'icône : #535b7c

Ouvrez ensuite les paramètres de chacun des réseaux et supprimez la couleur de fond.

Ajoutez ensuite une petite marge supérieure comme suit :

• Marge : 3vh haut

Mettre à jour les paramètres de ligne

Une fois les icônes de suivi des réseaux sociaux terminées, ouvrez les paramètres de la ligne et ajustez les éléments suivants :

• Largeur de gouttière : 1
• Rembourrage (bureau): 3vh en haut, 0px en bas
• Rembourrage (tablette et téléphone) : 10px haut

Enregistrer la mise en page et le modèle

Une fois cela fait, enregistrez la mise en page et le modèle.

Résultat final

Voici le résultat final sur une page en direct.

Comment ajouter le menu de navigation verticale à la zone du corps d'un modèle de page

Si vous souhaitez ajouter le menu de navigation vertical à une mise en page (au lieu de votre en-tête global), vous devez d'abord enregistrer la mise en page de la section dans la bibliothèque Divi.

Pour ce faire, ouvrez le Global Header Layout Editor et enregistrez la section verticale (contenant le menu) dans votre bibliothèque Divi.

Quittez ensuite l'éditeur de mise en page et créez un nouveau modèle et attribuez-le à la ou aux pages de votre choix. Le clic pour créer un corps personnalisé pour le modèle de page.

Sélectionnez pour le construire à partir de zéro.

Ajoutez une nouvelle section pleine largeur à la mise en page.

Ajoutez ensuite un module de contenu de publication pleine largeur à la section.

Supprimez la section standard par défaut en haut de la page, puis ouvrez les paramètres de la section pleine largeur et ajoutez le CSS personnalisé suivant à l'élément principal :

Élément principal CSS (bureau)

width: calc(100% - 300px);
margin-left:300px !important;

Élément principal CSS (tablette)

width: 100%;

Sous la section normale, cliquez pour ajouter une nouvelle section et, sous l'onglet Ajouter à partir de la bibliothèque, sélectionnez la section de menu vertical que vous avez précédemment enregistrée dans la bibliothèque.

Parce que nous ne voulons pas que la section s'affiche sur mobile, ouvrez les paramètres de la section et désactivez la visibilité de la section sur tablette et téléphone.

Ensuite, ouvrez le module de code dans la disposition de la section et remplacez cet extrait de code…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Avec ça…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Cela déplacera l'en-tête et le pied de page principaux pour s'adapter au menu vertical fixe à gauche du modèle de page. Voici à quoi cela ressemble sur une page en direct utilisant l'en-tête et le pied de page par défaut de Divi.

Dernières pensées

Le menu de navigation vertical présenté ici a reçu une position fixe. Cependant, si vous avez besoin de plus d'espace pour des éléments de menu ou du contenu supplémentaires, vous pouvez modifier la position de la section en absolue. Vous pouvez également modifier le débordement vertical pour faire défiler afin de donner à l'utilisateur la possibilité de faire défiler les éléments du menu (notez simplement que vous ne pourrez pas voir/utiliser les sous-menus avec ce paramètre de débordement).

La configuration de la section verticale ouvre également la porte à la création de barres latérales personnalisées. J'espère que cela sera utile pour de futurs projets.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!