Comment créer une barre de menus flottante transparente globale avec le générateur de thème de Divi

Vous cherchez un moyen de placer votre en-tête global au-dessus des sections de héros de vos pages ? Dans le tutoriel Divi d'aujourd'hui, nous allons vous montrer exactement comment faire cela. Nous allons recréer un superbe en-tête global à partir de zéro (à l'aide de Theme Builder de Divi) et nous appliquerons un effet flottant à la barre de menus. Vous pourrez également télécharger le fichier JSON gratuitement !

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

Téléchargez GRATUITEMENT le modèle d'en-tête global de la barre de menu flottante

Pour mettre la main sur le modèle d'en-tête global de la barre de menu flottante, vous devrez d'abord le télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

1. Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Aller à Divi Theme Builder

Commencez par vous rendre sur le Divi Theme Builder.

Commencer à créer un en-tête global

Ensuite, cliquez sur « Ajouter un en-tête global » et continuez en sélectionnant « Créer un en-tête global ».

2. Commencez à créer un en-tête global

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section sur la page. Ouvrez cette section et changez la couleur d'arrière-plan en une couleur complètement transparente. Cela permettra à tout ce qui se trouve sous la section d'apparaître.

• Couleur d'arrière-plan : rgba(0,0,0,0)

Dimensionnement

Accédez ensuite à l'onglet de conception de la section et modifiez la largeur.

• Largeur : 100 %

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut.

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

Indice Z

Et pour nous assurer que la section reste au-dessus de tout le contenu de la section héros, nous devrons augmenter l'index z de la section dans les paramètres de visibilité.

• Indice Z : 99999

Ajouter une nouvelle ligne

Structure des colonnes

Une fois que vous avez terminé les paramètres de la section, vous pouvez ajouter une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

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

• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ajoutez ensuite un rembourrage supérieur et inférieur personnalisé.

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 0vw

Élément principal

Ensuite, accédez à l'onglet avancé et assurez-vous que les colonnes restent côte à côte sur des écrans de plus petite taille en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Colonne 2

Couleur de l'arrière plan

Continuez en ouvrant les paramètres de la colonne 2 et changez la couleur de fond en une couleur semi-transparente.

• Couleur d'arrière-plan : rgba(255,255,255,0.71)

Frontière

Ajoutez également une bordure inférieure à la colonne.

• Largeur de la bordure inférieure : 2px
• Couleur de la bordure inférieure : #f4583f

Boîte ombre

Et créez un effet flottant en ajoutant une subtile ombre de boîte.

• Position verticale de l'ombre de la boîte : 20px
• Force de flou d'ombre de boîte : 50px
• Force de propagation de l'ombre de la boîte: -20px
• Couleur de l'ombre : rgba(0,0,0,0.23)

Ajouter un module d'image à la colonne 1

Télécharger le logo

Une fois que vous avez terminé les paramètres de ligne et de colonne, il est temps d'ajouter les modules, en commençant par un module d'image dans la colonne 1. Téléchargez un logo avec un fond transparent.

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement.

• Alignement de l'image : Centre

Dimensionnement

Modifiez également la largeur du module dans les paramètres de dimensionnement.

• Largeur : 8vw (ordinateur de bureau), 14vw (tablette), 21vw (téléphone)

Ajouter le module de menu à la colonne 2

Sélectionnez le menu

Passons à la colonne suivante. Là, le seul module dont nous avons besoin est un module de menu. Sélectionnez un menu de votre choix.

Supprimer la couleur d'arrière-plan

Ensuite, allez dans les paramètres d'arrière-plan et supprimez la couleur d'arrière-plan.

Disposition

Passez à l'onglet conception du module et modifiez la mise en page.

• Style : Centré
• Direction du menu déroulant : vers le bas

Texte du menu

Stylisez également les paramètres de texte du menu.

• Police du menu : Muli
• Couleur du texte du menu : #6f6666
• Taille du texte du menu : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Menu déroulant

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

• Couleur de la ligne du menu déroulant : #f4583f

Icônes

Utilisez cette même couleur pour la couleur de l'icône du menu hamburger dans les paramètres des icônes.

• Couleur de l'icône du menu hamburger : #f4583f

Espacement

Complétez les paramètres du module en ajoutant des rembourrages en haut et en bas dans les paramètres d'espacement.

• Rembourrage supérieur : 1.5vw
• Rembourrage inférieur : 1.5vw

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Passons à la colonne suivante et dernière. Ajoutez un module de bouton avec une copie de votre choix.

Alignement

Modifiez ensuite l'alignement du module.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en stylisant le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.9vw (ordinateur de bureau), 1.5vw (tablette), 2.5vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #f4583f
• Largeur de la bordure du bouton : 0px
• Couleur de la bordure du bouton : #f4583f
• Rayon de la bordure du bouton : 0px

• Police des boutons : Muli
• Poids de la police du bouton : gras

Espacement

Et complétez les paramètres du module en ajoutant un rembourrage personnalisé sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

Paramètres de section supplémentaires

Élément principal par défaut

Une fois que vous avez terminé la conception globale, il ne vous reste qu'une chose à faire ; placer la section au-dessus du contenu de votre page. Pour ce faire, nous devrons ajouter deux lignes de code CSS à l'élément principal de la section.

position: absolute;
top: 0;

Survolez l'élément principal

Assurez-vous d'ajouter ces mêmes lignes de code CSS à l'option de survol de l'élément principal. Cela empêchera la section de clignoter une fois que vous la survolerez.

position: absolute;
top: 0;

3. Enregistrer les modifications du constructeur et afficher le résultat

Une fois que vous avez terminé la section, vous pouvez enregistrer l'en-tête global et afficher le résultat sur votre site Web !

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 flottante avec Theme Builder de Divi. C'est un excellent moyen de mélanger vos sections d'en-tête et de héros. L'en-tête est placé au-dessus de la première section de votre page ou de votre article. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.