Comment créer une barre de menus pour votre site Web avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer une barre de menus pour votre site Web à l'aide du pack de mise en page du courtier en hypothèques. C'est un excellent moyen d'ajouter de l'interaction à votre site Web. Vous aurez la même expérience utilisateur sur toutes les tailles d'écran et vous pouvez utiliser cette technique pour tout type de site Web que vous créez.

Allons-y !

Aperçu

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

Bureau

Mobile

Désactiver la navigation fixe dans les options du thème Divi

Allez dans les options du thème Divi

Commençons! La première chose à faire est de vous rendre dans les options du thème Divi sur votre site WordPress.

Désactiver la navigation fixe

Ici, nous allons désactiver la barre de navigation fixe. Nous devons désactiver cette option afin de nous débarrasser complètement de la barre de menu principale sur notre page plus tard dans ce didacticiel.

• Barre de navigation fixe : désactivée

Masquer la barre de menus principale sur la page

Activer Visual Builder sur la page de destination du pack de mise en page du courtier en hypothèques

Continuez en accédant à la page que vous avez créée à l'aide de la page de destination du pack de mise en page du courtier en hypothèques et activez Visual Builder.

Ouvrir les paramètres de la page

Nous allons masquer la barre de menu principale sur notre page en ajoutant du code CSS. Pour ajouter ce code, ouvrez les paramètres de la page.

Ajouter un code CSS personnalisé pour masquer la barre de menus principale

Ensuite, allez dans l'onglet avancé et placez les lignes de code CSS suivantes dans la case CSS personnalisée :

#main-header {
display: none;
}

L'ajout de ce code aidera à empêcher la barre de menu principale d'apparaître sur la page.

Créez un design de menu personnalisé avec Divi

Assurez-vous qu'il y a suffisamment de rembourrage supérieur dans la section Hero sur toutes les tailles d'écran

Maintenant que nous nous sommes débarrassés de la barre de menu principale sur notre page, nous pouvons commencer à ajouter la barre de menu de balayage à la place ! La première chose que vous devrez faire est de vous assurer qu'il y a suffisamment de rembourrage en haut de votre page pour que la barre de menu de balayage ne chevauche aucun contenu existant. Pour la page de destination du pack de mise en page du courtier en hypothèques en particulier, cela signifie que le remplissage personnalisé de la colonne 1 reste « 180px » sur toutes les tailles d'écran.

• Rembourrage supérieur : 180px

Ajouter une nouvelle section régulière au bas de la page

Il est temps de commencer à créer la barre de menu de balayage personnalisée ! Ajoutez une section régulière au bas de votre page.

Espacement

Ouvrez les paramètres de la section et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une rangée

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Ouvrez les paramètres de ligne et changez la couleur d'arrière-plan de la ligne en blanc.

• Couleur d'arrière-plan : #ffffff

Dimensionnement

Ensuite, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement pour permettre à la ligne d'occuper toute la largeur de l'écran :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Retirez ensuite tout le rembourrage supérieur et inférieur.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Et pour nous assurer qu'il y a suffisamment de profondeur entre la barre de menu de balayage et la page elle-même, nous allons ajouter une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.55)

Ajouter un module d'images

Télécharger le logo de l'entreprise

Il est temps de commencer à ajouter tous les modules que nous souhaitons afficher dans la barre de menu de balayage, en commençant par un module d'image. Téléchargez votre logo à l'aide d'un fichier image d'une largeur de 226 pixels et d'une hauteur de 100 pixels.

Alignement

Ensuite, allez dans l'onglet conception du module Image et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement de l'image.

• Largeur maximale : 75 % (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Et ajoutez également un rembourrage haut et bas personnalisé à l'image.

• Rembourrage supérieur : 15 pixels (tablette), 25 pixels (téléphone)
• Rembourrage inférieur : 15 pixels (tablette), 25 pixels (téléphone)

Ajouter un module de boutons

Ajouter une copie

Le deuxième module dont nous avons besoin est un module de bouton. Ajoutez une copie de votre choix.

Alignement

Ensuite, accédez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez ensuite l'apparence du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.8vw (ordinateur de bureau), 1.4vw (tablette), 2.1vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #40eccc
• Largeur de la bordure du bouton : 0px
• Rayon de bordure de bouton : 50px
• Espacement des lettres des boutons : 2px
• Police des boutons : Lato
• Poids de la police : lourd
• Style de police : majuscule

Espacement

Et créez la forme que vous voulez en utilisant des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 15px
• Marge inférieure : 15px
• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Rembourrage gauche : 40 px
• Rembourrage droit : 40 px

Ajouter un module de texte n° 1

Ajouter un élément de menu à la zone de contenu

Le prochain module dont nous avons besoin dans notre barre de menu de balayage est un module de texte. Ici, nous allons ajouter le titre de la page à la zone de contenu.

Ajouter un lien

Passez aux paramètres de lien et ajoutez le lien correct au module de texte.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f2f2f2

Paramètres de texte

Ensuite, modifiez les paramètres de texte.

• Police du texte : Lato
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 0.9vw (ordinateur de bureau), 1.9vw (tablette), 2.4vw (téléphone)
• Orientation du texte : Centre

Espacement

Et ajoutez également des rembourrages haut et bas personnalisés au module.

• Rembourrage supérieur : 30px
• Rembourrage inférieur : 30px

Cloner le module de texte x5 fois

Une fois que vous avez terminé de modifier le module de texte, vous pouvez le cloner 5 fois.

Modifier la copie

Assurez-vous de modifier le titre de la page dans chacun de ces doublons.

Modifier les liens

Avec les liens.

Changer les couleurs d'arrière-plan

Modifiez ensuite les couleurs d'arrière-plan des deuxième, quatrième et sixième éléments de menu.

• Couleur d'arrière-plan : #ffffff

Ajouter un CSS personnalisé à la ligne

Élément principal

Maintenant, pour nous assurer que la barre de menu de balayage reste en haut de la page, nous devrons ajouter quelques lignes de code CSS à l'élément principal de la ligne.

position:fixed;
top: 0px;
z-index: 99;

Élément principal de la colonne

Nous transformons également la colonne en une grille qui nous permet de faire défiler. Les pourcentages que vous pouvez voir dans le code CSS ci-dessous indiquent l'espace occupé par chacun des modules dans la grille. Vous pouvez modifier ces valeurs si vous souhaitez que votre grille ait un aspect différent.

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

Classe CSS de colonne

Et pour se débarrasser de la barre de défilement, nous allons également ajouter une classe CSS à la ligne.

Supprimer la barre de défilement

Sur la page

Vous pouvez supprimer la barre de défilement sur la page elle-même en ouvrant les paramètres de la page et en ajoutant les lignes de code CSS suivantes à la zone CSS personnalisée :

.swipe-menu::-webkit-scrollbar {
display: none;
}

Sur l'ensemble du site

Si vous ne souhaitez pas répéter la même étape consistant à masquer la barre de défilement sur chaque page individuellement, vous pouvez également accéder aux options du thème Divi et appliquer le code CSS à l'ensemble du site Web en faisant défiler l'onglet général et en ajoutant les lignes suivantes de code CSS dans la boîte CSS personnalisée :

.swipe-menu::-webkit-scrollbar { display: none; }

Enregistrer en tant que section en tant qu'élément global

Une fois que votre barre de menu de balayage fonctionne correctement, vous pouvez l'enregistrer dans votre bibliothèque Divi en tant qu'élément global et l'utiliser également sur d'autres pages !

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.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer une barre de menu de balayage pour tout site Web que vous créez à l'aide de Divi. C'est une excellente technique pour ajouter une autre dimension à votre site Web. Ce tutoriel fait partie de notre initiative de conception Divi en cours, où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!