Comment remplacer la barre de menus principale par le module de menu pleine largeur de Divi

La barre de menu principale rend la navigation transparente pour les visiteurs. Outre la barre de menu principale par défaut à laquelle nous sommes habitués dans WordPress, vous avez probablement également rencontré le module de menu pleine largeur proposé par Divi. Habituellement, il est utilisé pour afficher d'autres menus sur votre site Web qui sont différents du menu principal que vous avez en haut de chaque page.

Mais vous pouvez également utiliser facilement le module de menu pleine largeur pour remplacer votre barre de menu principale. Cela vous donne la liberté de placer le menu où vous voulez sur la page sans avoir à gérer un menu en double en haut de votre page. Vous pouvez également utiliser les options intégrées de Divi pour styliser le menu comme vous le souhaitez, ce qui signifie que vous pouvez créer des résultats époustouflants en utilisant les options de bordure et de séparation, par exemple.

Dans ce tutoriel, nous allons vous montrer comment remplacer votre barre de menu principale par le module de menu pleine largeur à l'aide du pack de mise en page Carpenter de Divi. Cela fait partie de notre initiative de conception Divi en cours. Vous pouvez choisir si vous souhaitez que cette méthode s'applique à toutes les pages ou à quelques-unes d'entre elles. Allons-y !

Aperçu

Avant de plonger dans le didacticiel de cas d'utilisation, jetons un coup d'œil au résultat final sur différentes tailles d'écran.

Désactiver la barre de navigation fixe

Allez dans les options de thème de Divi

La première chose que nous devrons faire est de désactiver l'option de navigation fixe dans les options de thème de Divi. Nous faisons cela pour nous débarrasser de l'espace de menu principal en haut de notre page. Pour ce faire, accédez à votre tableau de bord WordPress > Divi > Options du thème.

Désactiver la barre de navigation fixe

Ouvrez l'onglet général et désactivez l'option Barre de navigation fixe.

Créer un menu principal

Aller aux menus

La prochaine chose que nous allons faire est de créer notre menu principal. Nous utiliserons ce menu principal à la fois pour la barre de menu principale par défaut en haut et pour le module de menu pleine largeur. Pour ajouter votre menu, accédez à votre tableau de bord WordPress > Apparence > Menus.

Ajouter un nouveau menu principal

Ajoutez un nouveau menu, donnez un nom à votre menu et faites-en votre menu principal.

Ajouter des pages et enregistrer le menu

Enfin, ajoutez toutes vos pages et enregistrez votre menu.

Style de la barre de menu principale dans le personnalisateur de thème

Aller au personnalisateur de thème

Selon que vous souhaitez masquer ou non la barre de menus principale par défaut sur toutes les pages, vous pouvez d'abord styliser la barre de menus principale par défaut. Vous n'avez besoin de le faire que si vous prévoyez de l'utiliser sur certaines pages. Si vous souhaitez supprimer la barre de menus principale partout, vous pouvez ignorer cette étape.

Paramètres de la barre de menus principale

Pour correspondre au pack de mise en page, nous avons appliqué les modifications suivantes :

• Style de police : gras et majuscule
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : #f25b3a
• Couleur d'arrière-plan du menu déroulant : #f25b3a

Masquer la barre de menus principale

Une page

Aller à la page de choix et activer Visual Builder

Pour masquer la barre de menu principale en haut de nos pages, nous devrons utiliser une petite quantité de code CSS. Notez qu'il est important d'avoir désactivé l'option Barre de navigation fixe (une des étapes précédentes). Sinon, l'espace occupé par la barre de menu principale sera blanc et n'aura pas complètement disparu. Si vous souhaitez masquer la barre de menus principale sur une page en particulier, accédez à cette page et activez Visual Builder.

Ouvrir les paramètres de la page

Ouvrez ensuite les paramètres de la page en cliquant sur l'icône suivante en bas de votre page :

Ajouter un code CSS

Basculez vers l'onglet Avancé et ajoutez le code CSS suivant dans la zone CSS personnalisée :

#main-header {
display: none;
}

Site entier

Allez dans les options de thème de Divi

Si vous souhaitez vous débarrasser de la barre de menus principale sur l'ensemble de votre site Web, vous pouvez également le faire. Vous n'avez pas besoin d'ajouter le code à chaque page manuellement. Au lieu de cela, vous pouvez simplement accéder à votre tableau de bord WordPress > Divi > Options du thème.

Ajouter un code CSS

Continuez en faisant défiler vers le bas jusqu'à ce que vous tombiez sur la case CSS personnalisée et ajoutez-y le même code CSS :

#main-header {
display: none;
}

Ajouter la barre de menus principale à la page

Ouvrir la page de destination avec Visual Builder

Maintenant que nous avons masqué la barre de menus principale, nous pouvons commencer à ajouter le module de menu pleine largeur à notre page. Pour ce faire, accédez par exemple à votre page de destination et activez Visual Builder.

Ajouter une section pleine largeur

Continuez en ajoutant une section pleine largeur juste en dessous de votre section héros.

Bordure supérieure

Vous pouvez utiliser toutes les options intégrées de Divi pour créer le design exact que vous souhaitez. Nous allons le garder assez propre. La seule chose que nous ajouterons à nos options de section est une bordure supérieure :

• Largeur de la bordure supérieure : 7px
• Couleur de la bordure supérieure : #f25b3a

Ajouter un module de menu pleine largeur

Ensuite, ajoutez le module de menu pleine largeur à votre section.

Sélectionnez le menu principal

Sélectionnez votre menu principal comme menu que vous souhaitez afficher.

Couleur de l'arrière plan

Continuez en donnant à votre module une couleur de fond noire.

Paramètres des liens

Ensuite, ouvrez les paramètres de liens et appliquez les modifications suivantes :

• Couleur du lien actif : #FFFFFF
• Couleur du texte du menu déroulant : #FFFFFF
• Couleur du texte du menu mobile : #FFFFFF
• Orientation du texte : à gauche
• Couleur du texte : clair

Paramètres du menu déroulant

Modifiez ensuite les paramètres du menu déroulant :

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

Paramètres du texte du menu

Enfin, nous allons faire en sorte que les paramètres de texte correspondent au pack de mise en page :

• Poids de la police du menu : ultra gras
• Style de police du menu : majuscule

Rendre la section pleine largeur globale et l'utiliser également sur d'autres pages

Enregistrer en tant que section globale

Nous avons fini de créer notre nouveau menu principal ! Si vous prévoyez de l'utiliser également sur d'autres pages, allez-y et ajoutez-le à votre bibliothèque Divi en tant qu'élément global.

Ajouter à d'autres pages sans barre de menu principale

Vous pouvez maintenant facilement ajouter ce menu pleine largeur à d'autres pages. Vous pouvez choisir sa position et vous êtes libre de jouer avec les options de conception intégrées qui l'accompagnent !

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 de blog de cas d'utilisation, nous vous avons montré comment remplacer la barre de menus principale en haut de vos pages par le module de menu pleine largeur. L'application de cette méthode vous donne la liberté de pouvoir placer votre menu où vous voulez sur votre page. En plus de cela, vous pouvez également utiliser les options intégrées de Divi pour le styler. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.