Comment économiser de l'espace dans votre en-tête à l'aide d'icônes à bascule avec Divi

La façon dont vous concevez votre en-tête donne le ton au reste de votre site Web. C'est pourquoi il est important de penser à la façon dont vous ajoutez des éléments et des interactions. Bien sûr, vous voudrez inclure les éléments de base comme un logo et des éléments de menu, mais il y a de fortes chances que vous souhaitiez également inclure d'autres appels à l'action. Cependant, plus vous ajoutez d'éléments à votre en-tête, plus l'en-tête peut devenir écrasant. Si vous recherchez un moyen propre et interactif de présenter différents appels à l'action dans votre en-tête, vous adorerez ce didacticiel. Aujourd'hui, nous vous montrons comment économiser de l'espace dans votre en-tête à l'aide d'icônes à bascule. 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 !

1. Construire une structure d'en-tête

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

Commencez par accéder au Divi Theme Builder et commencez à créer un nouvel en-tête global ou personnalisé.

Ajouter la section #1

Fond dégradé

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de cette section et appliquez un arrière-plan dégradé.

• Couleur 1 : #ffffff
• Couleur 2: #eaeaea
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Espacement

Passez à l'onglet de conception de la section et supprimez tout le rembourrage supérieur et inférieur par défaut.

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

Boîte ombre

Ajoutez également une ombre de boîte.

• Couleur de l'ombre : rgba(0,0,0,0.06)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, passez à l'onglet Conception 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 %
• Alignement des lignes : Centre

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 CSS

Ensuite, accédez à l'onglet Avancé et appliquez des lignes de code CSS personnalisées pour l'élément principal sur différentes tailles d'écran. Ce code nous aidera à centrer verticalement les éléments sur le bureau.

Bureau :

display: flex;
place-items: center;

Tablette et téléphone :

display: block;

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et appliquez un peu de rembourrage à gauche et à droite.

• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Élément principal

Nous modifions la taille de notre colonne sur le bureau et la ramenons à « 100 % » sur les tablettes et les téléphones en appliquant des CSS personnalisés à l'élément principal de la colonne.

Bureau :

width: 88% !important

Tablette et téléphone :

width: 100% !important;

Paramètres de la colonne 2

Couleur de l'arrière plan

Ensuite, nous allons ouvrir les paramètres de la colonne 2 et changer la couleur d'arrière-plan en blanc.

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

Espacement

Nous ajouterons également des valeurs de remplissage réactif aux paramètres d'espacement de cette colonne.

• Rembourrage supérieur :
  • Bureau : 50px
  • Tablette et téléphone : 20 pixels
• Rembourrage inférieur
  • Bureau : 50px
  • Tablette et téléphone : 20 pixels
• Rembourrage gauche : 1%
• Rembourrage droit : 1%

Élément principal CSS

Nous allons également modifier la taille de la deuxième colonne sur le bureau. Nous ramenons ce chiffre à « 100 % » sur des écrans de plus petite taille.

Bureau :

display: flex;
place-items: center;
width: 12% !important;

Tablette et téléphone :

width: 100% !important;

Ajouter un module de menu à la colonne 1

Sélectionnez le menu

Il est temps d'ajouter des modules, en commençant par un module de menu dans la colonne 1. Sélectionnez un menu de votre choix.

Télécharger le logo

Téléchargez un logo ensuite.

Supprimer la couleur d'arrière-plan

Ensuite, supprimez la couleur d'arrière-plan par défaut.

Paramètres du texte du menu

Passez à l'onglet de conception du module et modifiez les paramètres du texte du menu en conséquence :

• Police du menu : Affichage Playfair
• Police du texte du menu : Affichage Playfair
• Couleur du texte du menu : #000000
• Taille du texte du menu : 19px
• Hauteur de la ligne de menu : 1,4 em
• Alignement du texte : à droite

Paramètres du menu déroulant

Ensuite, changez la couleur de la ligne du menu déroulant.

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

Paramètres des icônes

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

• Couleur de l'icône du panier d'achat : #000000
• Couleur de l'icône de recherche : #000000
• Couleur de l'icône du menu Hamburger : #000000

Dimensionnement

Et complétez les paramètres du module en modifiant les paramètres de dimensionnement comme suit :

• Largeur maximale du logo : 200 px
• Largeur : 100 %
• Alignement du module : Centre

Ajouter le module Blurb n° 1 à la colonne 2

Laisser la zone de contenu vide

Passons à la deuxième colonne. Pour créer les icônes à bascule, nous utiliserons des modules Blurb sans le titre ni le contenu. Nous allons commencer par créer la première icône à bascule, puis réutiliser le module pour ajouter les deux autres icônes à bascule. Une fois que vous avez ajouté le module Blurb, assurez-vous que le titre et la zone de contenu sont vides.

Sélectionnez l'icône

Ensuite, sélectionnez une icône de votre choix.

Paramètres des icônes

Passez à l'onglet de conception du module et modifiez les paramètres de l'icône comme suit :

• Couleur de l'icône
  • Par défaut : #dbdbdb
  • Survol : #000000
• Placement de l'icône : en haut
• Alignement des icônes : Centre
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 200 %

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Largeur du contenu : 100 %
• Largeur : 32 %

Élément principal et image de présentation CSS

Et complétez les paramètres du module en ajoutant deux lignes de code CSS aux options CSS personnalisées dans l'onglet avancé du module Blurb.

Élément principal :

display: inline-block;

Image de présentation :

margin-bottom: 0px !important

Cloner le module Blurb deux fois

Une fois que vous avez terminé la première icône à bascule du module Blurb, vous pouvez le cloner deux fois.

Changer l'icône

Assurez-vous de changer l'icône dans chaque doublon.

2. Ajouter des éléments à bascule

Ajouter la section #2

Dimensionnement

Maintenant que nous avons posé les bases de notre en-tête, nous devons encore inclure les éléments à bascule. Pour ce faire, nous allons ajouter une nouvelle section juste en dessous de la précédente. Ouvrez les paramètres de la section et assurez-vous que la hauteur de cette section est de « 0px ». Cela nous aidera à empêcher la section de prendre de la place dans notre conception d'en-tête. La seule raison pour laquelle nous avons besoin de cette section est d'afficher nos éléments à bascule.

• Hauteur : 0px

Espacement

Passez à l'onglet de conception de la section et supprimez tout le rembourrage supérieur et inférieur par défaut.

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

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant 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
• 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

Position

Et repositionnez toute la rangée. Le fait de rendre cette ligne absolue nous aidera à éviter que la ligne ne prenne de la place dans la conception.

• Position : Absolu
• Emplacement : coin supérieur droit

Ajouter le module de texte n° 1 à la colonne 2

Ajouter un numéro de téléphone à la zone de contenu

Il est temps d'ajouter les éléments à bascule ! Tout d'abord, nous allons ajouter le numéro de téléphone. Ajoutez un nouveau module de texte à la colonne 2 et insérez le numéro de téléphone dans la zone de contenu.

Couleur de l'arrière plan

Ajoutez ensuite une couleur de fond noire.

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

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police du texte : affichage Playfair
• Couleur du texte : #ffffff
• Taille du texte : 27 pixels
• Alignement du texte : Centre

Dimensionnement

Assurez-vous que la largeur est de 100% aussi.

• Largeur : 100 %

Espacement

Ensuite, ajoutez des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 10 %
• Rembourrage inférieur : 10 %
• Rembourrage gauche : 2%
• Rembourrage droit : 2%

Cloner le module de texte

Une fois que vous avez terminé le premier module de texte d'élément à bascule, clonez-le une fois.

Changer le contenu en adresse e-mail

Modifiez le contenu dans la zone de contenu.

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

Ajouter des réseaux sociaux de choix

Ensuite, ajoutez un module de suivi des médias sociaux à la colonne 2. Ajoutez autant de réseaux sociaux que vous le souhaitez.

Changez la couleur d'arrière-plan de chaque réseau social en blanc

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

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

Couleur de l'arrière plan

Ensuite, revenez aux paramètres généraux du module et utilisez une couleur de fond noire.

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

Alignement

Passez à l'onglet de conception 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 dans les paramètres des icônes.

• Couleur de l'icône : #000000

Dimensionnement

Ensuite, appliquez une largeur de « 100 % » aux paramètres de dimensionnement.

• Largeur : 100 %

Espacement

Appliquez également un rembourrage supérieur et inférieur personnalisé.

• Rembourrage supérieur : 10 %
• Rembourrage inférieur : 10 %

Frontière

Et complétez les paramètres du module en ajoutant des coins arrondis aux paramètres de bordure.

• Tous les coins : 100px

3. Ajouter des fonctionnalités

Ajouter des identifiants CSS consécutifs à la première section des modules Blurb

Maintenant que tous les éléments sont en place, nous pouvons commencer à ajouter l'effet bascule. La première chose à faire est d'ouvrir chaque module Blurb individuellement et d'ajouter un identifiant CSS consécutif.

• Présentation 1 : header-cta-1
• Présentation 2 : header-cta-2
• Présentation 3 : header-cta-3

Ajouter des identifiants CSS consécutifs pour basculer les éléments

Faites la même chose pour les modules d'élément à bascule. Le numéro à la fin de l'ID CSS doit correspondre à l'ID CSS que vous avez utilisé pour les icônes à l'étape précédente.

• Module de texte 1 : header-item-1
• Module de texte 2 : header-item-2
• Module de suivi des médias sociaux : header-item-3

Ajouter une position absolue à tous les éléments à bascule

Et mettez chacun des éléments à bascule absolus un par un. Nous vous recommandons de passer en mode filaire pour ce faire.

• Position : Absolu
• Emplacement : en haut à droite

Ajouter le module de code à la première colonne de la section #1

Maintenant que tous les identifiants CSS sont en place, nous pouvons ajouter le code pour faire fonctionner la fonction de clic. Ajoutez un nouveau module de code juste en dessous du module de menu dans la colonne 1.

Insérer le code CSS

Ajoutez les lignes de code CSS suivantes entre les balises de style comme vous pouvez le remarquer dans l'écran d'impression ci - dessous :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

Insérer le code JQuery

Nous ajoutons également du code JQuery personnalisé. Ajoutez le code entre les balises de script comme vous pouvez le remarquer dans l'écran d'impression ci-dessous .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Rendre l'en-tête + basculer les éléments collants

Rendre la section 1 collante

Enfin et surtout, vous pouvez également activer l'en-tête et activer ou désactiver les éléments collants. Pour créer le résultat souhaité, vous devez vous assurer que les deux sections sont collantes et que l'option "Décaler des éléments collants environnants" est activée. Rendez la première section collante.

• Position collante : coller au sommet
• Limite collante inférieure : aucune
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Rendre la section 2 collante

Et faites de même pour la section 2. C'est tout !

• Position collante : coller au sommet
• Limite collante inférieure : aucune
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

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 utiliser les icônes de basculement dans votre en-tête. Dès que quelqu'un clique sur une icône, un élément à bascule apparaît, ce qui vous permet d'économiser beaucoup d'espace dans la conception de votre en-tête. Cette approche se concentre sur le comportement de l'utilisateur et vous aide à éviter d'avoir à concevoir une conception d'en-tête écrasante. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions, 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.