Comment réduire la taille de votre en-tête global lors du défilement avec le générateur de thème de Divi

Lorsque vous concevez un en-tête global fixe, vous souhaiterez peut-être réduire la hauteur de l'en-tête lorsque vos visiteurs font défiler. Cela permet de réduire l'espace occupé par l'en-tête global dans la hauteur de la fenêtre de vos visiteurs. Dans ce didacticiel, nous vous guiderons tout au long de ce processus. Nous commencerons par créer le menu, puis nous ajouterons du code JQuery et CSS pour déclencher l'effet. 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

Pour mettre la main sur le modèle d'en-tête global gratuit, vous devrez d'abord le télécharger en utilisant le 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 'Build Global Header' et sélectionnez 'Build Global Header'.

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. Ouvrez la section et changez la couleur de fond en blanc.

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

Dimensionnement

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

• Largeur : 100 %

Espacement

Modifiez également le rembourrage supérieur et inférieur de la section.

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

Boîte ombre

Et séparez le contenu de la page de l'en-tête global en ajoutant une ombre de boîte subtile à la section suivante.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.13)

Identifiant CSS

Ensuite, ajoutez un identifiant CSS à la section. Plus tard dans le didacticiel, nous utiliserons cet ID CSS pour créer l'effet d'en-tête global rétrécissant lors du défilement.

• ID CSS : remplissage de section

Élément principal

Passez à l'onglet avancé, accédez aux paramètres CSS personnalisés et corrigez la section en ajoutant deux lignes de code CSS à l'élément principal de la section.

position: fixed;
top: 0;

Indice Z

Pour nous assurer que la section reste au-dessus de toutes les pages et contenus de publication, nous augmenterons également l'index z de la section.

• Indice Z : 99999

Ajouter une nouvelle ligne

Structure des colonnes

Une fois que vous avez terminé les paramètres de colonne, continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la taille en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur maximale : 100 %

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la ligne.

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

Identifiant CSS

Ensuite, allez dans l'onglet avancé et ajoutez un identifiant CSS à la ligne. Nous aurons besoin de cet identifiant CSS plus tard dans le didacticiel pour que l'effet de rétrécissement fonctionne.

• ID CSS : largeur de ligne

Élément principal

Enfin, pour nous assurer que toutes les colonnes restent côte à côte sur des écrans plus petits et pour centrer tout le contenu des colonnes, nous ajouterons deux lignes de code CSS à l'élément principal de la ligne.

display: flex;
align-items: center;

Ajouter un module d'image à la colonne 1

Télécharger le logo

Il est temps d'ajouter des modules, en commençant par un module d'image dans la colonne 1. Téléchargez un logo avec un fond transparent.

Dimensionnement

Modifiez ensuite la largeur du module.

• Largeur : 5vw (ordinateur de bureau), 9vw (tablette), 13vw (téléphone)

Ajouter le module de menu à la colonne 2

Sélectionnez le menu

Passez à la deuxième colonne et insérez un module de menu. Sélectionnez un menu de votre choix.

Supprimer la couleur d'arrière-plan

Supprimez ensuite la couleur d'arrière-plan du module.

Disposition

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

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

Texte du menu

Ensuite, ouvrez les paramètres de texte du menu et apportez quelques modifications.

• Police du menu : Rubik
• Couleur du texte du menu : #000000
• Taille du texte du menu : 0.9vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Menu déroulant

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

• Couleur d'arrière-plan du menu déroulant : #ffffff
• Couleur de la ligne du menu déroulant : #2970fa

Icônes

Et complétez les paramètres du module en modifiant la couleur de l'icône du menu hamburger dans les paramètres des icônes.

• Couleur de l'icône du menu Hamburger : #2970fa

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 : à droite

Paramètres des boutons

Stylisez le bouton en conséquence :

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

• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 1px
• Police des boutons : Rubik
• Style de police des boutons : majuscule

Espacement

Et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 0,8 vw (ordinateur de bureau), 1,8 vw (tablette), 2,5 vw (téléphone)
• Rembourrage inférieur : 0.8vw (ordinateur de bureau), 1.8vw (tablette), 2.5vw (téléphone)
• Rembourrage gauche : 1.5vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Rembourrage droit : 1.5vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

Boîte ombre

Complétez les paramètres du module en ajoutant une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 20px
• Force du flou d'ombre de la boîte : 30px
• Couleur de l'ombre : rgba(41 112 250,0.2)

Ajouter le module de code à la colonne 2

Insérer du code JQuery et CSS

La prochaine et dernière partie de ce didacticiel traite de l'effet de rétrécissement, en utilisant les deux identifiants CSS que nous avons attribués à notre section et à notre ligne. Ajoutez un module de code à la colonne 2 avec les lignes suivantes de code JQuery et CSS. Assurez-vous de mettre le code JQuery entre les balises de script et le code CSS entre les balises de style.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

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

Une fois que vous avez ajouté le code, vous pouvez enregistrer toutes les modifications que vous avez apportées à 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 un en-tête global rétréci à l'aide de Theme Builder de Divi. Les en-têtes rétractables sont un excellent moyen d'économiser de l'espace sur la hauteur de la fenêtre d'affichage de votre visiteur. Nous avons recréé le design à partir de zéro et ajouté un code personnalisé personnalisé pour déclencher l'effet de rétrécissement. 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.