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.