Comment inclure la barre de menus principale dans la conception de votre page Divi

La navigation est un élément essentiel de l'expérience utilisateur sur votre site Web. Il est important de s'assurer que vos visiteurs peuvent naviguer de manière transparente sur votre site Web sans avoir à faire de compromis sur l'esthétique. Par défaut, la barre de menu principale de WordPress est placée en haut de chaque page et est considérée comme distincte de la conception de la page que vous choisissez de suivre. Dans de nombreux cas, cependant, l'inclusion de votre menu dans la conception globale de la page peut apporter des résultats étonnants. Cela donnera à votre site Web une apparence plus cohérente.

Dans cet article, nous allons vous montrer comment inclure la barre de menu principale dans la conception de votre page Divi. Il s'agit d'un changement simple mais dynamique de la façon dont le menu principal est généralement affiché, apportant un look unique à tout projet Divi.

Allons-y !

Abonnez-vous à notre chaîne Youtube

Aperçu

Commençons par examiner le résultat final sur différentes tailles d'écran :

Paramètres de personnalisation du thème

Accédez au personnalisateur de thème

Avant de commencer à créer notre conception, commençons par quelques modifications apportées au personnalisateur de thème. Accédez à votre tableau de bord WordPress > Apparence > Personnaliser .

Enregistrer l'image d'arrière-plan

Puisque nous allons détacher la barre de menus principale du haut, nous aurons besoin de quelque chose pour couvrir l'espace qu'elle occupe normalement. Nous utiliserons l'image d'arrière-plan suivante, alors enregistrez-la sur votre ordinateur :

Télécharger l'image d'arrière-plan dans les paramètres généraux

Ensuite, allez dans Paramètres généraux > Arrière - plan et téléchargez l'image sur l'arrière-plan de votre site Web.

• Image d'arrière-plan extensible : activée
• Position d'arrière-plan : fixe

Paramètres de la barre de menus principale

Nous allons également fusionner la barre de menu principale prête avec notre conception Divi. Pour ce faire, nous devrons d'abord modifier les paramètres de la barre de menus principale. Accédez à En-tête et navigation > Barre de menu principale et utilisez les paramètres suivants :

• Hauteur maximale du logo : 100
• Taille du texte : 18
• Espacement des lettres : -1
• Police : Poppins
• Couleur du texte : #333333
• Couleur du lien actif : #f55c83
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : #FFFFFF

Ajouter une nouvelle page

CSS personnalisé de la page

Pour que la barre de menu principale chevauche notre conception de page, nous aurons besoin d'un peu de code CSS. Vous pouvez choisir si vous souhaitez que le chevauchement s'applique à l'ensemble de votre site Web ou à une page en particulier. Si vous choisissez de l'ajouter à une seule page, ajoutez le code CSS suivant aux paramètres de votre page :

#main-header {
margin-top: 140px;
}

Ajouter une nouvelle section

Couleur de l'arrière plan

Commençons par la conception ! Ajoutez une nouvelle page, passez à Visual Builder et ajoutez votre première section. Ouvrez ensuite les paramètres de la section et ajoutez 'rgba(255,255,255,0.81)' comme couleur d'arrière-plan. Cela permettra à l'image d'arrière-plan de notre site Web d'apparaître.

Espacement

Continuez en allant dans les paramètres d'espacement et ajoutez la marge et le remplissage personnalisés suivants :

• Marge supérieure et inférieure : 100px
• Marge gauche et droite : 60 px
• Rembourrage supérieur : 135 px
• Rembourrage inférieur : 0px

Coins arrondis

Ajoutez également « 30px » à chacun des coins de votre section.

Frontière

Ensuite, ajoutez une bordure supérieure à votre section :

• Largeur de la bordure supérieure : 35px
• Couleur de la bordure supérieure : #333333

Boîte ombre

Pour finir, ajoutez une ombre de boîte très subtile.

• Force du flou d'ombre de la boîte: 61px
• Force de propagation de l'ombre de la boîte: -13px

Ajouter la ligne n° 1

Structure des colonnes

Il est temps de commencer à ajouter des lignes et des modules ! Ajoutez votre première ligne en utilisant deux colonnes de taille égale.

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement :

• Faire cette ligne en pleine largeur : Oui
• Égaliser les hauteurs de colonne : Oui

Espacement

Ajoutez ensuite un rembourrage personnalisé :

• Rembourrage supérieur : 250 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)
• Rembourrage inférieur : 200 pixels (ordinateur de bureau), 100 pixels (tablette), 50 pixels (téléphone)
• Remplissage gauche de la colonne 1 : 50 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Ajouter un module de texte de titre à la colonne 1

Paramètres de texte H1

Nous pouvons maintenant commencer à ajouter les modules. Nous allons commencer par la première colonne en ajoutant un nouveau titre Text Module.

• Police de titre : Poppins
• Poids de la police d'en-tête : moyen
• Taille du texte de l'en-tête : 120 px (ordinateur de bureau), 80 px (tablette), 58 px (téléphone)

Ajouter une couleur différente à une partie de la copie

Vous pouvez facilement changer la couleur d'un mot dans votre titre en passant à l'onglet Texte et en ajoutant une couleur au mot de votre choix en utilisant des balises span.

Ajouter le module de texte de description à la colonne 1

Paramètres de texte

Juste en dessous du module de texte précédent, allez-y et ajoutez une description du module de texte en utilisant les paramètres de texte suivants :

• Police de texte : Poppins
• Poids de la police de texte : régulier
• Taille du texte : 20 pixels (ordinateur de bureau), 15 pixels (tablette et téléphone)
• Hauteur de la ligne de texte : 2 em

Espacement

Nous aurons besoin d'une marge supplémentaire pour ce module de texte :

• Marge du haut et du bas : 50px

Ajouter un module de bouton à la colonne 1

Paramètres des boutons

Le dernier module de cette colonne est un module de bouton. Après avoir ajouté la copie CTA, modifiez les styles de bouton :

• Utiliser des styles personnalisés pour le bouton : Oui
• Couleur du texte du bouton : #FFFFFF
• Dégradé de couleur 1 : #f45085
• Dégradé de couleur 2 : #f88c7e
• Direction du gradient : 137 degrés
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 40 px
• Police des boutons : Poppins
• Poids de la police du bouton : régulier
• Style de police : majuscule

Espacement

Ouvrez ensuite les paramètres d'espacement et ajoutez une marge et un rembourrage à votre bouton :

• Marge inférieure : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Rembourrage haut et bas : 15px
• Remplissage gauche et droit : 50px

Boîte ombre

Enfin, nous utiliserons une ombre de boîte très subtile pour créer plus de profondeur sur notre page :

• Force du flou de l'ombre de la boîte : 55 px
• Force de propagation de l'ombre de la boîte: -4px
• Couleur de l'ombre : rgba (84,84,84,0,25)

Ajouter un module d'image à la colonne 2

Enregistrer et télécharger une image

La deuxième colonne ne contient qu'un module image. Nous utilisons une maquette qui fait partie du Digital Marketing Layout Pack de Divi. Allez-y et enregistrez l'image ci-dessous sur votre ordinateur. Après cela, ajoutez-le au module Image dans votre deuxième colonne.

Ajouter la ligne n° 2

Structure des colonnes

Il est temps d'ajouter la deuxième ligne ! Choisissez la structure de colonne suivante pour cela :

Colonne 1 Couleur d'arrière-plan

Ensuite, ouvrez les paramètres de ligne et ajoutez '#FFFFFF' comme couleur d'arrière-plan de la colonne 1.

Copier le fond dégradé du bouton

Nous allons gagner du temps et copier le dégradé que nous avons déjà utilisé pour le module Button. Pour ce faire, ouvrez le module de boutons, accédez aux paramètres du bouton, cliquez avec le bouton droit sur l'arrière-plan dégradé et copiez-le.

Coller le fond dégradé dans la colonne 2

Ensuite, revenez à vos paramètres de ligne et collez l'arrière-plan dégradé dans la deuxième colonne.

Colonne 3 Couleur d'arrière-plan

Pour la troisième colonne, nous utilisons la couleur d'arrière-plan '#FFFFFF'.

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et modifiez les paramètres :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 2600px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Nous aurons également besoin de rembourrage supplémentaire :

• Rembourrage haut et bas : 0px
• Remplissage en haut et en bas des colonnes : 30 px

Boîte ombre

Enfin, nous utiliserons une subtile ombre de boîte :

• Force du flou d'ombre de la boîte: 61px
• Force de propagation de l'ombre de la boîte: -20px

Ajouter le module de présentation n° 1

Choisissez l'icône

Nous aurons besoin de trois modules Blurb au total. Nous allons commencer avec un et le cloner par la suite pour gagner du temps. Allez-y et ajoutez un nouveau module Blurb à la première colonne. Après avoir ajouté votre contenu, sélectionnez l'icône de votre choix.

Paramètres des icônes

Modifiez les paramètres de votre icône en conséquence :

• Couleur de l'icône : #f55c83
• Placement de l'icône : à gauche
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 88 px (ordinateur de bureau et tablette), 50 px (téléphone)

Paramètres du texte du titre

Ouvrez ensuite les paramètres du texte du titre et apportez quelques modifications :

• Police du titre : Poppins
• Poids de la police du titre : moyen
• Taille du texte du titre : 34 px (ordinateur de bureau et tablette), 23 px (téléphone)

Paramètres du corps du texte

Le corps du texte doit également être modifié :

• Police de caractère : Poppins
• Poids du corps de la police : régulier
• Taille du corps du texte : 16 pixels (ordinateur de bureau), 14 pixels (tablette et téléphone)
• Hauteur de la ligne du corps : 2 em

Espacement

Et pour créer un design plus esthétique, ajoutez un peu de rembourrage :

• Rembourrage supérieur et inférieur : 100px
• Rembourrage gauche et droite : 50 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)

Cloner le module Blurb deux fois et le placer dans les colonnes restantes

Allez-y et clonez deux fois vos modules Blurb. Après cela, placez-les dans les colonnes restantes.

Modifier le module Blurb dans la colonne 2

Changer la couleur de l'icône

Le troisième module Blurb n'a pas besoin de modifications, le second en a cependant besoin. Commencez par changer la couleur de l'icône en blanc.

Changer la couleur du texte

Ouvrez ensuite les paramètres du texte et changez la couleur du texte en « clair ».

Désactiver la navigation fixe

Pour nous assurer que la barre de menu principale garde sa place dans la conception, nous devrons également désactiver la barre de navigation fixe. Pour ce faire, accédez à votre tableau de bord WordPress > Divi > Options du thème > Désactivez l'option 'Barre de navigation fixe' et enregistrez les paramètres .

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, nous vous avons montré comment inclure de manière créative la barre de menu principale dans la conception globale de votre page Divi. Cette approche vous aidera à créer une apparence plus cohérente sur votre site Web. Nous avons également créé un exemple à partir de zéro. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!