Si vous souhaitez configurer un en-tête global pour votre site Web, il existe de nombreuses façons de l’aborder. L’une des approches les plus subtiles est un en-tête transparent. Des en-têtes transparents sont placés sur les sections héros de vos pages, ce qui peut donner lieu à des conceptions magnifiques qui se concentrent sur une approche minimale mais propre. Si vous optez pour un en-tête transparent mais que vous avez besoin d’un en-tête collant pour le défilement, vous allez adorer ce tutoriel. En utilisant les options Divy Sticky intégrées de Divi, nous allons vous montrer comment passer d’un en-tête transparent à un en-tête collant de conception différente lors du défilement. La transition entre transparent et collant se fait sans effort! Vous pouvez également télécharger le fichier JSON gratuitement.

Commençons.

Aperçu

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

Bureau

Téléphone portable, téléphone portable

Téléchargez le modèle d’en-tête global GRATUITEMENT

Pour mettre la main sur le modèle d’en-tête global gratuit, vous devez d’abord le télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

1. Créez la structure d’élément d’en-tête dans un nouveau modèle d’en-tête

Créer un nouveau modèle d’en-tête global

Commencez avec le générateur de thèmes Divi. Commencez par créer un nouvel en-tête global ou personnalisé.

Paramètres de la section 1

Couleur de l’arrière plan

Une fois que vous êtes dans l’éditeur de modèle, vous remarquerez une section. Cette section est dédiée à la barre d’en-tête supérieure, que vous pouvez voir dans l’aperçu de cet article. Ouvrez les paramètres de la section et ajoutez une couleur de fond noir.

• Couleur d’arrière-plan: # 000000

distance

Accédez à l’onglet Conception de la section et supprimez les tampons supérieurs et inférieurs standard.

• Rembourrage supérieur: 0px
• Rembourrage au sol: 0px

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne avec la structure de colonnes suivante:

Ajouter un module de texte à la colonne

Ajouter du contenu

Ajoutez un module de texte à la colonne de la ligne et entrez une copie de votre choix.

Paramètres de texte

Accédez à l’onglet Conception du module et modifiez les paramètres de texte en conséquence:

• Police du texte: Oswald
• Style de police du texte: majuscule
• Couleur du texte: #ffffff
• Taille du texte:
  • Bureau: 19px
  • Tablette: 18px
  • Téléphone: 16px
• Alignement du texte: centre

Ajouter la section 2

distance

Ajoutez une autre section régulière juste en dessous de la première section. Cette section est dédiée à notre menu transparent qui devient collant au fur et à mesure que vous faites défiler. Ouvrez les paramètres de section et supprimez tous les tampons supérieurs et inférieurs standard de l’onglet Conception.

• Rembourrage supérieur: 0px
• Rembourrage au sol: 0px

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne avec la structure de colonnes suivante:

Couleur d’arrière-plan transparent

Ouvrez les paramètres de ligne et appliquez une couleur d’arrière-plan entièrement transparente à la ligne.

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

Dimensionnement

Accédez à l’onglet Conception de la ligne et modifiez les paramètres de taille.

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

distance

Ensuite, ajoutez un remplissage personnalisé à gauche et à droite.

• Rembourrage gauche: 10%
• Rembourrage droit: 10%

Boîte ombre

Ensuite, appliquez une ombre de boîte transparente. Plus tard dans le didacticiel, nous utiliserons cette ombre de boîte dans un état collant avec une couleur de nuance différente.

• Force de flou de l’ombre de la boîte: 50px
• Couleur de l’ombre: rgba (0,0,0,0)

position

Pour nous assurer que la ligne apparaît au-dessus du contenu de la page avec un arrière-plan transparent, nous utiliserons une position absolue pour notre ligne dans l’onglet Avancé.

• Position: Absolument
• Emplacement: en haut à gauche

Visibilité de la colonne 2

Nous masquons également la deuxième colonne de notre ligne sur tablette et téléphone pour une conception d’en-tête moins complexe sur des écrans plus petits.

Ajouter le module de menu à la colonne 1

Choisissez le menu

Maintenant que nos paramètres de ligne ont été définis, il est temps d’ajouter des modules, en commençant par un module de menu dans la colonne 1. Choisissez un menu de votre choix.

Télécharger le logo

Ensuite, téléchargez un logo.

Supprimer la couleur d’arrière-plan

Supprimez également la couleur d’arrière-plan du module.

Paramètres du texte du menu

Accédez à l’onglet Conception du module et modifiez les paramètres de texte du menu en conséquence:

• Police du menu: Oswald
• Épaisseur du menu des polices: gras
• Menu Style de police: majuscules
• Couleur du texte du menu: #efefef
• Taille du texte du menu: 18px
• Alignement du texte: à droite

Paramètres du menu déroulant

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

• Menu déroulant des couleurs de ligne: rgba (0,0,0,0)
• Couleur d’arrière-plan du menu mobile: rgba (0,0,0,0,95)

Icônes de paramètres

Modifiez ensuite les couleurs des icônes dans les paramètres des icônes.

• Couleur de l’icône du panier: #ffffff
• Couleur de l’icône de recherche: #ffffff
• Couleur de l’icône du menu Hamburger: #ffffff

Paramètres du logo

Nous modifions également la couleur de notre logo dans les paramètres du logo en modifiant le filtre d’inversion d’image.

Dimensionnement

Ensuite, nous attribuons une hauteur maximale à notre logo.

distance

Ensuite, nous ajouterons des tampons haut et bas pour des tailles d’écran plus petites.

• Rembourrage supérieur:
• Rembourrage au sol:

Ajouter le module de boutons à la colonne 2

Ajouter une copie

Dans la colonne 2, nous n’avons besoin que d’un module de boutons. Incluez une copie de votre choix.

Alignement des clés

Accédez à l’onglet Conception du module et modifiez l’orientation du bouton.

Paramètres des boutons

Ensuite, concevez le bouton.

• Utiliser des styles de boutons personnalisés: Oui
• Taille du texte du bouton: 16px
• Couleur du texte du bouton: #ffffff
• Couleur d’arrière-plan du bouton: # ed4441
• Couleur du cadre du bouton: # ed4441

• Rayon du bord du bouton: 0px
• Espacement des lettres clés: 4px
• Police du clavier: Oswald
• Poids du clavier: gras
• Style de bouton: majuscule
• Afficher l’icône du bouton: Oui
• Couleur de l’icône du bouton: # 1a1a1a

distance

Complétez les paramètres du module en ajoutant des valeurs d’espacement personnalisées.

• Marge supérieure: -70px
• Rembourrage supérieur: 25px
• Rembourrage au sol: 25px

2. Appliquer des effets collants personnalisés

Tourner la section 2 collante

Maintenant que nous avons jeté les bases de notre en-tête, il est temps d’appliquer l’effet collant! Pour ce faire, ouvrez d’abord les paramètres de la deuxième section et appliquez les paramètres suivants à l’onglet « Avancé »:

• Position collante: restez debout
• Décalage supérieur collant: 0px
• Limite inférieure collante: aucune
• Décalage des éléments collants environnants: Oui
• Styles de transition standard et collants: Oui

Couleur d’arrière-plan de la série collante

Une fois que l’option « Sticky » est cochée, nous pouvons apporter des modifications à la conception collante pour tous les éléments de la section. Nous ouvrons d’abord la ligne avec notre menu et appliquons une couleur de fond collante blanche.

• Couleur d’arrière-plan: #FFFFFF

Espacement des rangs collants

Ensuite, nous allons modifier les valeurs d’espacement des lignes persistantes.

• Rembourrage supérieur: 0px
• Rembourrage au sol: 0px

Ombre de boîte de Sticky Row

Nous changeons également la couleur de l’ombre de la boîte dans un état collant.

• Couleur de l’ombre: rgba (0,0,0,0,08)

Positionnement Sticky Row

Ensuite, nous ramenons le positionnement de la ligne à un parent dans un état collant.

• Position: relative
• Origine du décalage: en haut à gauche

Paramètres de texte du Sticky Menu

Ensuite, nous allons changer la couleur du texte du menu permanent.

Paramètres du menu déroulant Sticky

Avec la couleur d’arrière-plan du menu mobile dans les paramètres de menu déroulant.

• Couleur d’arrière-plan du menu mobile: #ffffff

Couleurs des icônes du menu collant

Changez les couleurs de l’icône même dans un état collant.

• Couleur de l’icône du panier: # 000000
• Couleur de l’icône de recherche: # 000000
• Couleur de l’icône du menu Hamburger: # 000000

Filtre à logo collant

Retirez ensuite le filtre pour inverser l’image du logo dans un état collant.

Espacement des boutons collants

Terminez le didacticiel en supprimant le bord supérieur négatif du bouton pendant que vous collez.

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

Téléphone portable, téléphone portable

Dernières pensées

Dans cet article, nous vous avons montré comment combiner Divis Theme Builder avec les nouvelles options Sticky. En particulier, nous vous avons montré comment passer d’un en-tête transparent à un en-tête collant de conception différente lors du défilement. Cette approche vous permet de fusionner la conception de votre page avec votre menu tout en conservant un en-tête agréable et collant lorsque vous faites défiler. Vous pouvez également 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 voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.