Comment créer un en-tête global plein écran personnalisé avec le générateur de thème de Divi

Si vous cherchez un moyen de créer un en-tête global pour votre site Web qui ne prend pas beaucoup de place, vous allez adorer ce didacticiel. Nous allons vous montrer comment créer un en-tête global en plein écran à l'aide de Theme Builder de Divi. En faisant défiler la page, les deux seules choses supplémentaires que vous remarquerez sur votre article/page sont 1) une icône de hamburger cliquable dans le coin supérieur gauche et 2) un logo dans le coin supérieur droit. Ces deux éléments suivront vos visiteurs tout au long de leur processus de navigation et une fois que vous aurez cliqué sur l'icône du hamburger, un menu plein écran personnalisé s'ouvrira et permettra aux visiteurs d'accéder à d'autres pages de votre site Web. Le résultat de cette conception est très réactif et 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 en plein écran

Pour mettre la main sur le modèle d'en-tête global en plein écran, 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 vous rendre sur le Divi Theme Builder.

Commencer à créer un en-tête global

Ensuite, cliquez sur « Ajouter un en-tête global » et cliquez sur « Créer un en-tête global ».

2. Dédiez la section 1 à la navigation en plein écran

Paramètres de section

Couleur de l'arrière plan

Il est temps de commencer à créer ! Ouvrez les paramètres de la section que vous pouvez remarquer dans l'éditeur de modèles et changez la couleur d'arrière-plan en une couleur complètement transparente.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Espacement

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

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

Classe CSS

Continuez en ajoutant une classe CSS à la section. Plus tard dans cet article, nous aurons besoin de cette classe CSS pour activer le menu en plein écran.

• Classe CSS : transformation de section

Visibilité par défaut

Ensuite, allez dans les paramètres de visibilité et masquez les débordements. Assurez-vous d'augmenter également l'index z de la section, cela garantira que la section restera au-dessus de toutes les pages et du contenu de la publication.

• Débordement horizontal : masqué
• Débordement vertical : caché
• Indice Z : 999999

Visibilité au survol

Une fois que vous avez ajouté l'index z, activez l'option de survol et assurez-vous que le même index z s'y applique également.

• Indice Z : 999999

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une première ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• 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

Ajouter un module de texte à la colonne

Ajouter du contenu

Le seul module dont nous avons besoin dans cette ligne est un module de texte. Ajoutez un symbole de menu de votre choix dans la zone de contenu. Dans ce tutoriel, nous utilisons '≡'.

Paramètres de texte

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

• Police du texte : Abril Fatface
• Couleur du texte : #000000
• Taille du texte : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Hauteur de la ligne de texte : 1 em

Espacement

Modifiez ensuite les valeurs d'espacement sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 3,5 vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 3,5 vw (tablette), 5vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 4vw (tablette), 7vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 4vw (tablette), 7vw (téléphone)

Identifiant CSS

Ce module de texte servira de déclencheur pour le menu plein écran. C'est pourquoi nous devrons attribuer un identifiant CSS au module de texte. Plus tard dans le didacticiel, nous utiliserons l'ID CSS dans notre code.

• ID CSS : ouvrir le menu

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une deuxième ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Modifiez également les valeurs d'espacement.

• Marge supérieure : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Marge inférieure : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage gauche : 19vw
• Rembourrage droit : 19vw

Ajouter un module de texte à la colonne

Ajouter du contenu

Ensuite, ajoutez un nouveau module de texte à la colonne. Ce module de texte représente votre premier élément de menu.

Ajouter un lien

Assurez-vous d'ajouter un lien approprié vers le module ensuite.

• URL du lien du module : #

Paramètres de texte

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

• Police de texte : Poppins
• Poids de la police de texte : demi-gras
• Couleur du texte : #000000
• Taille du texte : 3vw (ordinateur de bureau), 7vw (tablette), 8vw (téléphone)
• Espacement des lettres du texte : -0.1vw
• Hauteur de la ligne de texte : 1 em

Espacement

Modifiez ensuite les paramètres d'espacement du module.

• Marge supérieure : 1vw
• Rembourrage inférieur : 2vw
• Rembourrage gauche : 3vw

Frontière

Ajoutez également une bordure inférieure.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #333333

Classe CSS

Et complétez les paramètres du module en ajoutant une classe CSS personnalisée. Vous devrez ajouter cette classe CSS à chaque élément de menu que vous placez dans votre section.

Cloner le module de texte trois fois

Une fois que vous avez terminé le premier module de texte, vous pouvez le cloner autant de fois que vous le souhaitez (en fonction des éléments de menu que vous souhaitez afficher dans votre menu). Cependant, assurez-vous que les modules ne dépassent pas la hauteur de votre écran.

Modifier le contenu et le lien de chaque doublon

Vous devrez modifier le contenu et le lien de chaque doublon.

Ajouter un module de suivi des médias sociaux

Ajouter des réseaux sociaux de choix

Le prochain et dernier module dont nous avons besoin dans cette rangée est un module de suivi des médias sociaux. Ajoutez tous les réseaux sociaux que vous souhaitez afficher.

Réinitialiser les styles de réseaux sociaux individuels

Continuez en réinitialisant les styles de chaque réseau social individuellement.

Paramètres des icônes

Ensuite, allez dans l'onglet conception du module et modifiez les paramètres de l'icône comme suit :

• Couleur de l'icône : #000000
• Utiliser la taille de l'icône personnalisée : Oui
• Taille de la police des icônes : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Espacement

Ajoutez également un peu de rembourrage à gauche.

• Rembourrage gauche : 3vw

Classe CSS

Complétez les paramètres du module en ajoutant une classe CSS.

Ajouter la ligne n° 3

Structure des colonnes

La dernière ligne dont nous avons besoin dans cette section contient la structure de colonnes suivante :

Espacement

Limitez l'espace occupé par cette ligne en supprimant tout le rembourrage supérieur et inférieur par défaut.

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

Ajouter un module de code à la colonne

Insérer du code JQuery et CSS

Ensuite, ajoutez un module de code et insérez du code CSS et JQuery pour faire fonctionner le menu en plein écran. Assurez-vous de placer manuellement le code JQuery entre les balises de script et le code CSS entre les balises de style, comme vous pouvez le remarquer dans l'écran d'impression ci-dessous.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Dédiez la section 2 au logo du coin supérieur droit

Paramètres de section

Couleur de l'arrière plan

Passons à la section suivante ! Cette section contiendra le logo dans le coin supérieur droit. Ouvrez les paramètres de la section et changez la couleur d'arrière-plan en une couleur complètement transparente.

• Couleur d'arrière-plan : rgba(0,0,0,0)

Espacement

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

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

Visibilité par défaut

Augmentez également l'index z de la section.

• Indice Z : 99999

Visibilité au survol

Activez l'option de survol sur l'index z et assurez-vous que la même valeur s'applique également au survol.

• Indice Z : 99999

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

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

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

Ajouter un module d'image à la colonne

Télécharger l'image du logo PNG

Le seul module dont nous avons besoin dans cette ligne et cette section est un module Image. Téléchargez votre fichier image de logo semi-transparent.

Dimensionnement

Accédez aux paramètres de dimensionnement du module et forcez la pleine largeur.

• Forcer la pleine largeur : Oui

Espacement

Complétez les paramètres du module en ajoutant un rembourrage personnalisé sur différentes tailles d'écran.

• Rembourrage supérieur : 2.5vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2.5vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 4vw (tablette), 7vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 4vw (tablette), 7vw (téléphone)

4. Paramètres de section supplémentaires

Section 1

Dimensionnement

Une fois que vous avez terminé les deux sections et tous les modules qu'elles contiennent, il est temps de modifier leur taille. Ouvrez la première section et appliquez les valeurs de largeur et de hauteur suivantes :

• Largeur : 8vw (ordinateur de bureau), 11vw (tablette), 18vw (téléphone)
• Hauteur : 7vw (ordinateur de bureau), 11vw (tablette), 18vw (téléphone)

Élément principal par défaut

Ensuite, allez dans l'onglet avancé de la section et ajoutez les lignes de code CSS suivantes :

position: fixed;
top: 0;

Survolez l'élément principal

Assurez-vous que ces mêmes lignes de code CSS s'appliquent au survol.

position: fixed;
top: 0;

Section 2

Dimensionnement

Continuez en ouvrant les paramètres de la deuxième section et modifiez la largeur sur différentes tailles d'écran.

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

Élément principal par défaut

Ensuite, allez dans l'onglet avancé et ajoutez les lignes de code CSS suivantes :

position: fixed;
right: 0;
top: 0;

Survolez l'élément principal

Assurez-vous que ces mêmes lignes de code CSS s'appliquent au survol.

position: fixed;
right: 0;
top: 0;

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

Une fois que vous avez terminé toutes les étapes ci-dessus, vous pouvez enregistrer le modèle d'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 ce tutoriel, nous vous avons montré comment créer un en-tête global en plein écran à l'aide de Theme Builder de Divi. Nous avons ajouté deux éléments fixes à notre conception ; une icône de hamburger dans le coin supérieur gauche et un logo dans le coin supérieur droit. Au clic, l'icône du hamburger ouvre un menu plein écran réalisé à l'aide des éléments intégrés de Divi. Vous êtes libre d'utiliser Divi pour concevoir ce menu plein écran comme vous le souhaitez ! Au début de ce didacticiel, vous avez également pu télécharger gratuitement le fichier JSON. 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.