La barre de menus principale facilite la navigation des visiteurs. Outre la barre de menus principale standard à 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 en haut de chaque page.

Ou, vous pouvez facilement utiliser le module de menu pleine largeur pour remplacer votre barre de menus principale. Cela vous donne la liberté de placer le menu n’importe où sur la page sans modifier un menu en double en haut de votre page. Vous pouvez également utiliser les options intégrées de Divi pour personnaliser le menu à votre guise. Cela signifie que vous pouvez obtenir des résultats impressionnants en utilisant les options pour les cadres et les séparateurs, 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 d’appliquer cette méthode à toutes les pages ou seulement à certaines d’entre elles. Commençons!

Aperçu

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

Charpentier

Désactiver la barre de navigation fixe

Aller aux options du thème Divis

La première chose à faire est de désactiver l’option de navigation fixe dans les options de thème de Divi. Nous faisons cela pour supprimer la zone de menu principale en haut de notre site. Pour ce faire, accédez à votre Tableau de bord WordPress> Divi> Options du thème.

Module de menu pleine largeur

Désactiver la barre de navigation fixe

Ouvrez l’onglet Général et décochez l’option Barre de navigation fixe.

Module de menu pleine largeur

Créer un menu principal

Aller aux menus

Ensuite, nous créons notre menu principal. Nous utiliserons ce menu principal à la fois pour la barre de menu principale standard en haut et pour le module de menu pleine largeur. Pour ajouter votre menu, accédez au vôtre Tableau de bord WordPress> Apparence> Menus.

Module de menu pleine largeur

Ajouter un nouveau menu principal

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

Module de menu pleine largeur

Ajouter des pages et enregistrer le menu

Enfin, ajoutez toutes vos pages et enregistrez votre menu.

Module de menu pleine largeur

Concevoir la barre de menus principale dans le personnalisateur de thème

Accédez au personnalisateur de thème

Selon que vous souhaitez ou non masquer la barre de menus principale standard sur toutes les pages, vous souhaiterez peut-être d’abord formater la barre de menus principale standard. Vous ne devez le faire que si vous souhaitez l’utiliser sur certaines pages. Si vous souhaitez supprimer la barre de menus principale partout, vous pouvez ignorer cette étape.

Module de menu pleine largeur

Paramètres de la barre de menus principale

Pour correspondre au package de mise en page, nous avons apporté les modifications suivantes:

  • Style de police: lettres grasses et majuscules
  • 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

Module de menu pleine largeur

Masquer la barre de menus principale

Une feuille

Accédez à la page de votre choix et activez Visual Builder

Pour masquer la barre de menu principale en haut de nos pages, vous devrez utiliser un peu de code CSS. Notez qu’il est important de désactiver l’option Barre de navigation fixe (l’une des étapes précédentes). Sinon, l’espace occupé par la barre de menus principale est blanc et n’est pas complètement parti. Plus précisément, si vous souhaitez masquer la barre de menus principale sur une page, accédez à cette page et activez le générateur visuel.

Module de menu pleine largeur

Ouvrez les paramètres de la page

Ensuite, ouvrez les paramètres de la page en cliquant sur l’icône suivante en bas de votre page:

Module de menu pleine largeur

Ajouter du code CSS

Accédez à l’onglet Avancé et ajoutez le code CSS suivant dans le champ CSS personnalisé:

#main-header {
display: none;
}

Module de menu pleine largeur

Site Web entier

Aller aux options du thème Divis

Si vous souhaitez supprimer la barre de menus principale de l’ensemble de votre site Web, vous pouvez également le faire. Vous n’êtes pas obligé d’ajouter manuellement le code à chaque page. Au lieu de cela, vous pouvez simplement aller dans le vôtre Tableau de bord WordPress> Divi> Options du thème.

Module de menu pleine largeur

Ajouter du code CSS

Continuez à faire défiler jusqu’à ce que vous rencontriez la boîte CSS personnalisée et ajoutez le même code CSS ici:

#main-header {
display: none;
}

Module de menu pleine largeur

Ajouter la barre de menus principale à la page

Ouvrez la page de destination avec Visual Builder

Après avoir masqué la barre de menus principale, nous pouvons ajouter le menu pleine largeur à notre page. Pour ce faire, accédez par exemple à votre page de destination et activez le constructeur visuel.

Module de menu pleine largeur

Ajouter la section « Pleine largeur »

Allez-y en ajoutant une section pleine largeur juste en dessous de votre zone de héros.

Module de menu pleine largeur

bord supérieur

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

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

Module de menu pleine largeur

Ajouter un module de menu pleine largeur

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

Module de menu pleine largeur

Choisissez le menu principal

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

Module de menu pleine largeur

Couleur de l’arrière plan

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

Module de menu pleine largeur

Paramètres sur la gauche

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

  • Couleur du lien actif: #FFFFFF
  • Menu déroulant de la couleur du texte: #FFFFFF
  • Couleur du texte du menu mobile: #FFFFFF
  • Alignement du texte: gauche
  • Couleur du texte: clair

Module de menu pleine largeur

Paramètres du menu déroulant

Ensuite, modifiez 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

Module de menu pleine largeur

Paramètres du texte du menu

Enfin, nous adapterons les paramètres de texte au package de mise en page:

  • Menu de taille de police: ultra gras
  • Menu Style de police: majuscules

Module de menu pleine largeur

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 souhaitez également l’utiliser sur d’autres sites, ajoutez-le en tant qu’élément global à votre bibliothèque Divi.

Module de menu pleine largeur

Ajouter à d’autres pages sans barre de menus principale

Vous pouvez maintenant facilement ajouter ce menu pleine largeur à d’autres pages. Vous pouvez choisir la position et jouer avec les options de conception intégrées!

Module de menu pleine largeur

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.

Charpentier

Dernières pensées

Dans cet article de blog de cas d’utilisation, nous vous avons montré comment remplacer la barre de menu principale en haut de vos pages par le module de menu pleine largeur. En utilisant cette méthode, vous avez la liberté de placer votre menu n’importe où sur votre page. De plus, vous pouvez utiliser les options intégrées de Divi pour le concevoir. Si vous avez des questions ou des suggestions, veuillez laisser un commentaire dans la section des commentaires ci-dessous.





Source link

Recent Posts