Comment créer une navigation verticale transparente qui chevauche votre site Web Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons principalement nous concentrer sur quelque chose de spécial avec la navigation verticale sur votre site Web. La navigation verticale une option souvent oubliée que propose le thème Divi. Bien qu'il ne soit pas souvent utilisé, il peut changer l'apparence complète de votre site Web et l'amener au niveau que vous souhaitez. Pour vous aider à rendre votre navigation verticale encore plus spéciale qu'elle ne l'est déjà, nous allons la rendre transparente. En plus de cela, nous veillerons également à ce que le menu transparent chevauche le reste de votre site Web.

Actuellement, nous ne voyons pas beaucoup de sites Web avec une navigation verticale. Mais dans certains cas, il peut donner des résultats étonnants. Dans l'un de nos articles précédents, nous vous avons montré 12 exemples de sites Web Divi qui utilisent la navigation verticale pour améliorer leur conception Web.

Lorsque vous faites en sorte que la navigation verticale chevauche votre site Web, il est important d'utiliser une couleur d'arrière-plan transparente. Si vous n'utilisez pas une couleur d'arrière-plan transparente, la navigation verticale peut chevaucher du contenu sur votre site Web. Vous ne voulez pas vous débarrasser de l'accent principal sur le contenu de votre site Web et vous ne voulez absolument pas non plus le chevaucher.

Pour démontrer ce que nous voulons dire exactement, nous avons fait un exemple élégant et simpliste que nous allons vous montrer comment faire. Étape par étape, nous vous guiderons à travers les différentes étapes nécessaires pour obtenir les résultats suivants.

Résultat final du jour : un menu vertical simple et élégant

Dans l'image ci-dessus, vous pouvez remarquer la simplicité qu'une navigation verticale transparente peut apporter à votre site Web. En plus de vous montrer comment créer le menu vertical transparent, nous vous donnerons également quelques conseils de conception généraux que vous pouvez utiliser pour le recréer afin qu'il corresponde à votre propre site Web.

Création du design dans Divi

Abonnez-vous à notre chaîne Youtube

réglages généraux

Avant de plonger dans l'exemple que nous avons fait, nous allons vous fournir quelques informations générales (et des lignes de code CSS) qui vous aident à intégrer la navigation transparente de manière simple (sans toutes les autres modifications que nous avons apportées dans l'exemple) .

Activer la navigation verticale

Pour commencer, vous devez activer la navigation verticale sur votre site Web. Pour ce faire, accédez à votre tableau de bord WordPress > Apparence > Personnaliser > En-tête et navigation > Format d'en-tête > Et activez la navigation verticale.

Choisissez vos paramètres de conception dans le personnalisateur de thème

Maintenant que vous êtes toujours dans le personnalisateur de thème, vous pouvez ajuster tous les paramètres de votre navigation verticale de la même manière que vous modifiez votre navigation supérieure. Revenez à En-tête et navigation > Menu principal > Et apportez toutes les modifications que vous souhaitez apporter à votre menu principal.

Dans cette partie, il est important de fournir une couleur de fond au menu qui a une opacité inférieure à 1. De préférence, même inférieure à 0,5. Assurez-vous que cela applique la couleur d'arrière-plan. Si vous souhaitez que la même chose s'applique à la couleur d'arrière-plan du menu déroulant, choisissez également la même couleur.

Ajouter le code CSS

Une fois que vous avez apporté toutes les modifications souhaitées à la partie conception de votre navigation verticale, vous pouvez passer à la partie CSS. Puisque nous sommes déjà dans le personnalisateur de thème, nous allons ajouter le code CSS personnalisé là-bas. Vous pouvez, bien sûr, ajouter le code CSS à une page en particulier ou via vos options de thème.

Le code CSS que nous vous fournirons fait deux choses. Tout d'abord, il s'assure que votre navigation verticale transparente et votre site Web se chevauchent. Deuxièmement, il vous aide à ajuster la largeur de votre navigation verticale. Si vous ne souhaitez pas du tout modifier la largeur, vous pouvez laisser ce morceau de code hors de votre site Web et faire simplement chevaucher la navigation verticale transparente et votre site Web.

Ces modifications ne s'appliqueront qu'à la version de bureau de votre site Web. Sur les écrans dont la largeur est inférieure à 981px, les modifications ne s'appliqueront pas.

Ajouter du code CSS dans le personnalisateur de thème

Premièrement, nous avons le code qui garantit que votre site Web remplit toute la largeur de votre navigateur. Copiez et collez le code suivant dans l'onglet CSS supplémentaire de votre personnalisateur de thème :

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

De plus, si vous souhaitez également ajuster la largeur de votre navigation verticale, copiez et collez plutôt les lignes de code CSS suivantes :

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Recréer la navigation verticale simpliste

Maintenant que nous avons géré les étapes nécessaires pour créer une navigation verticale transparente qui chevauche votre site Web, nous allons recréer l'exemple. L'exemple, encore une fois, ressemble à ceci:

Conseils de conception générale

Avant de commencer, nous allons partager quelques conseils et réflexions de conception générale que vous devez garder à l'esprit. Ces conseils vous aideront à tirer le meilleur parti du site Web élégant et simpliste que vous créez. Jetons un coup d'œil aux deux conseils que nous voulons absolument souligner.

Tout centraliser

Tout d'abord, assurez-vous de centraliser le contenu sur votre site Web. Cela va de soi mais mérite d'être mentionné. Si vous utilisez une navigation verticale transparente qui chevauche votre site Web, la centralisation de votre contenu conviendra mieux à cela. Si, à la place, vous alignez tout sur le côté gauche de votre site Web, il est plus probable que la navigation verticale transparente et le contenu se mélangent. Ce n'est probablement pas le résultat que vous souhaitez obtenir. Vous souhaitez privilégier la symétrie et la lisibilité sur votre site web.

Si vous optez pour un contenu aligné différemment, assurez-vous de vérifier le remplissage et les marges du contenu. Si vous modifiez les marges et les rembourrages en conséquence, les résultats peuvent toujours être excellents. Mais, vous devrez probablement faire beaucoup de modifications manuelles.

Fond de même couleur partout

Si vous utilisez une couleur d'arrière-plan entièrement transparente pour votre navigation verticale, comme nous l'utilisons dans cet exemple, il est important de maintenir une certaine cohérence. Vous voulez que la couleur de votre navigation verticale soit lisible et perceptible, car les gens doivent pouvoir naviguer en douceur sur votre site Web.

Si vous choisissez une couleur de police claire dans votre navigation verticale transparente, assurez-vous que vos images ou couleurs d'arrière-plan contiennent des couleurs sombres. De même, si vous utilisez une couleur de police sombre, assurez-vous que les images d'arrière-plan ou les couleurs que vous utilisez ont des couleurs claires.

Commencez à créer l'exemple

Sans plus attendre, commençons à recréer l'exemple que nous vous avons montré. Tout d'abord, créez une nouvelle page et ajoutez-y une section pleine largeur. Nous allons seulement vous montrer comment recréer une section de la page. Bien sûr, vous pouvez ensuite continuer et ajouter autant de sections que vous le souhaitez. Le menu restera exactement le même lors du défilement.

Créer un en-tête pleine largeur

Dans la section Fullwidth, ajoutez un en-tête Fullwidth. Ensuite, allez dans l'onglet Conception, placez l'orientation du texte et du logo sur « Centre » et activez également le mode plein écran de votre en-tête pleine largeur.

Paramètres du titre

Faites également défiler le même onglet vers le bas et apportez les modifications suivantes à la sous-catégorie Titre du texte :

• Police du titre : Lato Light
• Style de police du titre : majuscules
• Style de police du titre : 60 (ordinateur de bureau), 50 (tablette), 40 (téléphone)
• Couleur du texte du titre : #FFFFFF

Paramètres de sous-titre

De plus, continuez à faire défiler et assurez-vous que les paramètres de la sous-catégorie Subhead Text sont les suivants :

• Police de sous-titre : Lato Light
• Taille de la police du sous-titre : 22px (ordinateur de bureau et tablette), 19 (téléphone)
• Couleur du texte du sous-titre : #c4c4c4

Paramètres des boutons

Enfin, apportez les modifications suivantes à la sous-catégorie Bouton de l'onglet Conception :

• Utiliser des styles personnalisés pour le premier bouton : Oui
• Bouton One Taille du texte : 15 (ordinateur de bureau et tablette), 12 (téléphone)
• Bouton One Couleur du texte : #000000
• Couleur d'arrière-plan du bouton 1 : #FFFFFF
• Police Button One : Lato Light
• Style de police du bouton One : gras et majuscules

Paramètres d'arrière-plan dégradé

Ensuite, ouvrez les paramètres de la section pleine largeur pour ajouter une image d'arrière-plan avec une superposition de dégradé dans la sous-catégorie Arrière-plan de l'onglet Contenu. Selon le type d'arrière-plan et les couleurs que vous utilisez, ajoutez des couleurs assorties.

Dans notre exemple, nous utilisons des fonds sombres. Par conséquent, nous allons commencer avec une couleur noire dans le dégradé. L'autre couleur que nous avons associée à l'image d'arrière-plan est « rgba (0,49,109,0,43) ».

De plus, les paramètres que nous avons utilisés pour les dégradés de couleurs sont les suivants :

• Type de dégradé : Linéaire
• Direction du gradient : 87 degrés
• Position de départ : 0%
• Position finale : 62 %

Pour continuer, ajoutez une image d'arrière-plan et appliquez les paramètres suivants :

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : superposition

Changements dans le personnalisateur de thème

Pour l'étape suivante, nous devrons apporter d'autres modifications dans le personnalisateur de thème. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Barre de menus principale > et apportez les modifications suivantes :

• Hauteur maximale du logo : 83
• Taille du texte : 14
• Espacement des lettres : 0
• Police : Lato Light
• Style de police : majuscules
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : #FFFFFF
• Couleur d'arrière-plan du menu déroulant : rgba (221,153,51,0)
• Couleur de la ligne du menu déroulant : #1E73BE
• Couleur du texte du menu déroulant : #FFFFFF

Ajouter un code CSS personnalisé dans le personnalisateur de thème

Pendant que vous êtes toujours dans le personnalisateur de thème, nous allons ajouter les lignes de code CSS nécessaires pour que la mise en page ressemble à ce qu'elle est.

La première partie du code supprime la marge gauche du site Web lors de l'utilisation d'une navigation verticale. La deuxième partie rapproche le menu de la gauche. La troisième partie place une marge supérieure et une bordure inférieure à chaque page du menu. La quatrième partie ajoute une marge supérieure au logo et supprime la marge après le logo. Et enfin, nous nous sommes assurés que le menu conserve la même distance entre le logo et les éléments du menu en supprimant le rembourrage supérieur. Ces modifications s'appliquent également au menu lors du défilement. Par conséquent, le menu sera le même sur tout le site Web.

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Résultat final

À la suite de toutes les étapes que vous avez suivies tout au long de cet article, vous devriez avoir le résultat suivant sur le site Web sur lequel vous travaillez :

Emballer

Dans cet article, nous vous avons montré comment créer une navigation verticale transparente qui chevauche votre site Web. En outre, nous avons également partagé un design élégant et simpliste que vous pouvez utiliser pour votre propre site Web si vous suivez cet article étape par étape. Si vous avez des questions ou des demandes, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous afin que nous puissions vous contacter!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !