Comment échanger votre en-tête Divi contre un autre sur Scroll

Votre en-tête reste inévitablement l'un des éléments les plus importants de votre site Web. Il influence le processus de navigation de vos visiteurs et leur permet de trouver ce qu'ils recherchent en un clin d'œil. Maintenant, si vous cherchez un moyen d'échanger votre en-tête Divi lors du défilement avec un autre, vous allez apprécier cet article. Nous vous montrerons exactement comment le faire avec le générateur de thème de Divi, des éléments intégrés et du code supplémentaire. Nous veillons également à ce qu'il y ait un espace réservé généré automatiquement pour l'en-tête en haut de votre page. 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 le modèle d'en-tête Swap Divi GRATUITEMENT

Pour mettre la main sur le modèle d'en-tête Divi d'échange 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 !

1. Accédez à Divi Theme Builder et commencez à créer un en-tête global

Aller à Divi Theme Builder

Commencez par accéder au Divi Theme Builder dans le backend de votre site WordPress et cliquez sur « Ajouter un en-tête global ».

Créer un en-tête global

Ensuite, cliquez sur 'Build Global Header' pour être redirigé vers l'éditeur de modèles.

2. Créez les deux en-têtes dans la même section

Modifier la section

Dimensionnement

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de la section et assurez-vous que la largeur de la section est de « 100 % ».

• Largeur : 100 %

Espacement

Ensuite, accédez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Boîte ombre

Nous utilisons également une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 15px
• Couleur de l'ombre : rgba(0,0,0,0.06)

Position

Enfin, nous allons faire en sorte que la section reste en haut au centre de notre page en utilisant les paramètres de position dans l'onglet avancé.

• Poste : fixe
• Emplacement : Centre supérieur

Ajouter un en-tête de ligne n° 1

Structure des colonnes

Les deux en-têtes que nous allons créer feront partie de la même section. Nous utiliserons une ligne distincte pour chaque en-tête. Ajoutez l'en-tête de la première ligne à l'aide de la structure de colonne suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

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

Dimensionnement

Modifiez également les paramètres de dimensionnement.

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

Espacement

Ensuite, accédez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Élément principal

Complétez les paramètres de la ligne en ajoutant deux lignes de code CSS à l'élément principal de la ligne. Ce code CSS nous aidera à aligner tout le contenu des colonnes.

display: flex;
align-items: center;

Ajouter un module d'image à la colonne 1

Télécharger une image

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

Alignement

Modifiez ensuite l'alignement du module.

• Alignement de l'image : Centre

Ajouter le module de menu à la colonne 2

Sélectionnez le menu

Dans la deuxième colonne, 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

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

Disposition

Passez à l'onglet Conception et modifiez la mise en page en conséquence :

• Style : Centré

Paramètres du texte du menu

Ensuite, apportez quelques modifications aux paramètres du texte du menu.

• Police du menu : Roboto
• Poids de la police du menu : gras
• Couleur du texte du menu : #ffffff (ordinateur de bureau), #000000 (tablette et téléphone)
• Taille du texte du menu : 18px

Paramètres de texte du menu déroulant

Ensuite, nous allons changer la couleur de la ligne du menu déroulant dans les paramètres de texte du menu déroulant.

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

Paramètres des icônes

Nous modifions également la couleur de l'icône du menu des hamburgers.

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

Espacement

Complétez les paramètres du module en ajoutant des rembourrages personnalisés à gauche et à droite sur des écrans plus petits.

• Rembourrage gauche : 30 px (tablette et téléphone uniquement)
• Rembourrage droit : 30 px (tablette et téléphone uniquement)

Ajouter le module de suivi des médias sociaux à la colonne 3

Ajouter des réseaux sociaux de choix

Dans la dernière colonne, le seul module dont nous avons besoin est un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

Couleur d'arrière-plan du réseau social individuel

Ensuite, ouvrez chaque réseau social individuellement et changez la couleur d'arrière-plan en blanc.

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

Alignement

Revenez aux paramètres généraux du module et modifiez l'alignement du module.

• Alignement du module : Centre

Paramètres des icônes

Modifiez également la couleur de l'icône.

• Couleur de l'icône : #0042c9

Frontière

Et complétez les paramètres du module en ajoutant un rayon de bordure.

• Tous les coins : 100px

Ajouter un en-tête de ligne n° 2

Structure des colonnes

Passons au deuxième en-tête ! Ajoutez une nouvelle ligne à l'aide de 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 :

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

Espacement

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

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

Élément principal

Ensuite, alignez tout le contenu de la colonne en utilisant deux lignes de code CSS dans l'élément principal de la ligne.

display: flex;
align-items: center;

Colonne 3 Couleur d'arrière-plan

Et complétez les paramètres de la ligne en ouvrant les paramètres de la colonne 3 et en utilisant une couleur d'arrière-plan.

• Couleur d'arrière-plan : #0042c9

Ajouter un module d'image à la colonne 1

Télécharger une image

Dans la colonne 1, le seul module dont nous avons besoin est un module Image. Téléchargez un logo de votre choix.

Alignement

Modifiez ensuite l'alignement de l'image du module.

• Alignement de l'image : Centre

Cloner le module de menu et le placer dans la colonne 2 de l'en-tête de ligne #2

Clonez le module de menu qui a été utilisé dans la ligne précédente et placez le doublon dans la colonne du milieu de la deuxième ligne.

Modifier les paramètres du texte du menu

Ouvrez le module de menu en double et modifiez la couleur du texte du menu.

• Couleur du texte du menu : #0042c9

Modifier les paramètres de texte du menu déroulant

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

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

Modifier les paramètres des icônes

Complétez les paramètres du module de menu en changeant la couleur de l'icône du menu hamburger.

• Couleur de l'icône du menu Hamburger : #0042c9

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Dans la dernière colonne de la ligne, le seul module dont nous avons besoin est un module de bouton. Entrez une copie de votre choix.

Alignement

Modifiez ensuite l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Ensuite, stylisez le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 20 px (ordinateur de bureau), 18 px (tablette), 15 px (téléphone)
• Couleur du texte du bouton : #ffffff
• Largeur de la bordure du bouton : 0px

• Police des boutons : Roboto
• 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 : 33 pixels (ordinateur de bureau), 35 pixels (tablette), 38 pixels (téléphone)
• Rembourrage inférieur : 33 pixels (ordinateur de bureau), 35 pixels (tablette), 38 pixels (téléphone)

2. Ajouter des classes CSS

Section

Une fois que vous avez ajouté et stylisé tous les modules, il est temps d'ajouter les classes CSS que nous utiliserons dans notre code JQuery. Tout d'abord, ouvrez les paramètres de la section et utilisez la classe CSS suivante :

• Classe CSS : section d'en-tête

En-tête de ligne n° 1

Ensuite, ouvrez l'en-tête de la première ligne et utilisez la classe CSS suivante :

• Classe CSS : header-1

En-tête de ligne n° 2

Ouvrez également la deuxième rangée. Utilisez la classe CSS suivante pour cela :

• Classe CSS : header-2

3. Ajouter du code JQuery et CSS

Ajouter un module de code à la troisième colonne de la première ligne

Une fois que toutes les classes CSS sont en place, il est temps d'ajouter le code. Ajoutez un nouveau module de code où vous le souhaitez dans votre section. Nous le plaçons dans la troisième colonne de la première ligne.

Ajouter du code JQuery (entre les balises de script)

Ensuite, ajoutez les lignes de code CSS suivantes entre les balises de script comme vous pouvez le voir dans l'écran d'impression ci-dessous :

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

Ajouter du code CSS (entre les balises de style)

Ajoutez également le code CSS suivant entre les balises de style :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

À ce stade, il ne vous reste plus qu'à enregistrer toutes les modifications apportées au générateur de thèmes 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 échanger votre en-tête Divi contre un autre lors du défilement à l'aide du générateur de thème de Divi, des éléments Divi et de quelques codes JQuery et CSS supplémentaires. Nous avons également généré automatiquement un espace en haut du conteneur de la page qui empêche l'en-tête fixe de chevaucher le contenu de la page. Vous avez également pu télécharger gratuitement le fichier JSON du modèle d'en-tête Divi d'échange ! 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.