La façon dont nous utilisons Divi Theme Builder lors de la configuration d’un site Web a accéléré notre flux de travail et simplifié tout. Bien que nous ayons été en mesure de créer des en-têtes personnalisés dès le premier jour depuis la sortie du Divi Theme Builder, une exigence a été continuellement faite, qui est de créer un en-tête collant sans utiliser de code supplémentaire. Avec les nouvelles options collantes de Divi, créer un en-tête collant est plus facile que jamais. Les paramètres des éléments collants fournis par Divi vous aident à rendre tout élément de conception collant sans effort et à appliquer des styles personnalisés à un état collant, ce qui se traduit par des possibilités infinies de conception et d’expérience utilisateur.

Dans ce didacticiel, nous allons vous montrer comment créer un en-tête collant qui comprend:

  • L’en-tête que nous créons a un en-tête supérieur + une barre de menu
  • Nous allons transformer la section avec la barre de menu collante lorsque vous la passez devant. Dès que vous remontez, l’en-tête réapparaît
  • Nous changerons les styles de conception de la section collante (et de ses éléments) dès que la section deviendra collante

Commençons!

Aperçu

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

Bureau

en-tête collant

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

en-tête collant

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

Accédez au Générateur de thèmes Divi et créez un nouvel en-tête global ou personnalisé.

en-tête collant

en-tête collant

Paramètres de la section 1

Fond dégradé

Dès que nous sommes dans l’éditeur de modèles, nous créons d’abord la structure des éléments de notre en-tête. Dans la deuxième partie de ce didacticiel, nous nous concentrerons sur l’application des divers paramètres persistants pour compléter notre conception d’en-tête collante. Dans l’éditeur de modèles, vous verrez une section. Ouvrez cette section et appliquez un arrière-plan dégradé.

  • Couleur 1: # ffba60
  • Couleur 2: # ffd6a0
  • Direction du dégradé: 90 degrés
  • Position de départ: 50%
  • Position finale: 50%

en-tête collant

distance

Ensuite, retirez tous les tampons supérieurs et inférieurs standard.

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

en-tête collant

Ajouter une nouvelle ligne

Structure de la colonne

Pour créer notre en-tête supérieur, ajoutons une nouvelle ligne à notre section avec la structure de colonnes suivante:

en-tête collant

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de taille sans ajouter de modules comme suit:

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

en-tête collant

distance

Ajoutez également des coussinets supérieurs et inférieurs personnalisés.

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

en-tête collant

Élément principal CSS

Pour vous assurer que les colonnes restent côte à côte sur des écrans de plus petite taille, ajoutons une ligne de code CSS à l’élément principal de la ligne dans l’onglet Avancé.

display: flex;

en-tête collant

Ajout du module de suivi des médias sociaux à la colonne 1

Ajoutez les réseaux sociaux de votre choix

Il est temps d’ajouter des modules en commençant par un module de suivi des médias sociaux dans la colonne 1. Ajoutez les réseaux sociaux de votre choix ainsi que leurs liens.

en-tête collant

Supprimer la couleur d’arrière-plan de tout réseau social

Continuez en supprimant chaque couleur de fond de réseau social une par une.

en-tête collant

en-tête collant

Paramètres des icônes

Revenez ensuite aux paramètres généraux du module et modifiez la couleur de l’icône dans l’onglet Conception.

en-tête collant

distance

Ajoutez également une bordure supérieure.

en-tête collant

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.

en-tête collant

Ajouter un lien

Ensuite, ajoutez un lien.

en-tête collant

Alignement des clés

Passez ensuite à l’onglet Conception et modifiez l’orientation des boutons.

en-tête collant

Paramètres des boutons

Nous stylisons également le bouton.

  • Utiliser des styles de boutons personnalisés: Oui
  • Taille du texte du bouton: 14px
  • Couleur du texte du bouton: # 26333a
  • Largeur du cadre du bouton: 2px
  • Couleur du cadre du bouton: # 26333a
  • Rayon du bord du bouton: 0px

en-tête collant

  • Espacement des lettres clés: 4px
  • Poids du clavier: gras
  • Style de bouton: majuscule
  • Afficher le bouton: Oui

en-tête collant

distance

Et nous allons compléter les paramètres du module en ajoutant des rembourrages haut et bas aux paramètres d’espacement.

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

en-tête collant

Ajouter la section 2

Fond dégradé

Ajoutez une autre section régulière juste en dessous de la précédente. Cette section est dédiée à notre menu et elle devient collante dans la deuxième partie de ce tutoriel. Après avoir ajouté la section, appliquez un arrière-plan dégradé.

  • Couleur 1: #ffffff
  • Couleur 2: # f7f7f7
  • Type de dégradé: linéaire
  • Direction du dégradé: 90 degrés
  • Position de départ: 25%
  • Position finale: 25%

en-tête collant

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

en-tête collant

Ajouter une nouvelle ligne

Structure de la colonne

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

en-tête collant

Dimensionnement

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

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

en-tête collant

distance

Ensuite, retirez tous les tampons supérieurs et inférieurs standard.

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

en-tête collant

Ajouter un module de menu à la colonne

Choisissez le menu

Ajoutez ensuite un module de menu à la colonne de la ligne et sélectionnez un menu dynamique de votre choix.

en-tête collant

Télécharger le logo

Ensuite, téléchargez un logo.

en-tête collant

Supprimer la couleur d’arrière-plan

Supprimez ensuite la couleur d’arrière-plan blanc par défaut du module.

en-tête collant

Paramètres du texte du menu

Basculez vers l’onglet Conception et concevez également les paramètres de texte du menu.

  • Épaisseur du menu des polices: gras
  • Couleur du texte du menu: # 002d4c
  • Taille du texte du menu: 15px
  • Espacement des lettres de menu: 4px
  • Alignement du texte: à droite

en-tête collant

Menu déroulant Paramètres de texte

Apportez ensuite quelques modifications aux paramètres du menu déroulant.

  • Couleur d’arrière-plan du menu déroulant: #ffffff
  • Couleur de ligne du menu déroulant: # 002d4c

en-tête collant

Icônes de paramètres

Avec les paramètres de l’icône.

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

en-tête collant

Dimensionnement

Complétez les paramètres du module en ajoutant un logo de hauteur maximale aux paramètres de taille.

en-tête collant

2. Appliquer des effets collants personnalisés

Tourner la section 2 collante

Maintenant que nous avons créé la structure des éléments de notre en-tête, il est temps de coller notre deuxième section et de changer le style de conception de l’en-tête et de ses éléments en un état permanent. Ouvrez les paramètres de la deuxième section et passez à l’onglet Avancé. À partir de là, accédez aux paramètres des effets de défilement et appliquez les options persistantes suivantes:

  • 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

en-tête collant

Changer l’arrière-plan dégradé de la section collante

Une fois que notre section devient collante, une option supplémentaire apparaîtra dans nos paramètres de section, de ligne et de module. l’option collante. Cliquer sur cette icône vous permettra de créer un style alternatif pour l’élément sélectionné dans un état collant. Nous allons combiner certains de ces paramètres de conception collants pour personnaliser l’apparence de notre en-tête collant lorsque nous faisons défiler. Tout d’abord, accédez aux paramètres d’arrière-plan de la deuxième section et appliquez l’arrière-plan dégradé collant suivant:

  • Couleur 1: # 26333a
  • Couleur 2: # 1e272f

en-tête collant

Stretch Row à l’état collant

Ensuite, nous ouvrons la ligne avec le module de menu et modifions la largeur dans un état collant.

en-tête collant

Retirez le rembourrage de la ligne s’il est collant

Nous supprimons également le rembourrage collant du haut et du bas de notre rangée.

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

en-tête collant

Changer la couleur du texte du menu dans l’état permanent

Ensuite, changeons la couleur du texte du menu en un état permanent.

en-tête collant

Changez les couleurs des icônes de menu dans l’état « Sticky »

Avec les couleurs des symboles.

  • 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

en-tête collant

Supprimer la hauteur du logo à l’état collant

Enfin, nous modifions la hauteur maximale du logo à zéro dans un état collant. Cela supprimera complètement le logo de notre en-tête une fois que les paramètres persistants de la section seront activés. C’est ça! Assurez-vous d’enregistrer toutes les modifications apportées à Divi Theme Builder une fois que vous avez terminé la conception de votre en-tête et de les prévisualiser sur votre site Web.

en-tête collant

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

en-tête collant

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

en-tête collant

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser Divis Theme Builder et Sticky Options pour créer un en-tête collant. Une fois que la section avec notre menu devient collante, nous appliquons également des styles personnalisés. Ces options sont rendues possibles par les nouvelles options Divi Sticky, qui vous offrent des tonnes d’opportunités pour améliorer l’expérience utilisateur et la conception que vous créez. Vous pouvez également télécharger gratuitement le modèle d’en-tête global! 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.





Source link

Recent Posts