Comment rendre votre module d'en-tête pleine largeur Divi en plein écran

Les en-têtes plein écran occupent tout l'écran, quelle que soit la taille de l'écran du visiteur. C'est idéal pour attirer l'attention des utilisateurs. C'est également idéal pour les diriger vers votre appel à l'action. Heureusement, il est facile de créer un en-tête plein écran avec le module d'en-tête pleine largeur de Divi. Dans cet article, nous allons vous montrer comment créer un en-tête pleine largeur, le mettre en plein écran et le styliser. Vous pouvez utiliser cette approche pour créer n'importe quelle section de héros en plein écran pour vos pages !

Commençons.

Aperçu de l'en-tête plein écran

Voyons un aperçu de ce que nous allons construire dans ce tutoriel.

Bureau

Tablette

Téléphoner

Pourquoi créer un en-tête plein écran avec le module d'en-tête pleine largeur de Divi ?

Avant de discuter de la création d'un en-tête plein écran, parlons des raisons pour lesquelles les utilisateurs de Divi pourraient en vouloir un.

Un en-tête plein écran présente des éléments spécifiques dans une section contenue. Cette section présente ces éléments dans une mise en page épurée qui attire l'attention et effectue plusieurs tâches.

Premièrement, cela peut être utilisé pour afficher un appel à l'action qui peut conduire vos visiteurs dans votre entonnoir de vente. C'est un endroit idéal pour mentionner un produit ou un service spécifique.

Deuxièmement, il peut présenter à l'utilisateur un design intéressant qui le maintient sur le site Web. Les sites Web n'ont que quelques secondes pour capter l'attention des visiteurs.

Il y a quelques points à garder à l'esprit lors de la création d'un en-tête plein écran :

• Suivez les pratiques de conception courantes pour les couleurs et les polices. Assurez-vous qu'ils sont lisibles et correspondent au sujet de votre site Web.
• Gardez le design simple et propre. N'utilisez pas trop d'images, de liens ou de boutons. Concentrez-vous sur quelques éléments. Moins est plus.
• Assurez-vous que l'en-tête plein écran est réactif. Un en-tête plein écran doit être beau et fonctionner correctement sur toutes les tailles d'écran.

Comment faire de votre en-tête pleine largeur Divi un en-tête plein écran

Commencez par ajouter une section pleine largeur à la page sur laquelle vous travaillez. Ensuite, ajoutez un module d'en-tête pleine largeur à la section pleine largeur.

Les paramètres du module s'ouvriront. Sélectionnez l'onglet Conception. Activez l'option appelée Make Fullscreen .

Nous avons maintenant un en-tête plein écran. C'est si simple.

Activer l'icône de défilement vers le bas de l'en-tête plein écran

Nous pouvons également ajouter un bouton qui indique à l'utilisateur de faire défiler vers le bas. Cependant, nous devons l'activer. Ce bouton est toujours visible dans l'option plein écran. L'option d'en-tête plein écran correspond toujours à la hauteur de l'écran du visiteur.

Dans les paramètres du module, nous verrons une section intitulée Icône de défilement vers le bas sous les options de mise en page. Cliquez sur le bouton pour activer Afficher le bouton de défilement vers le bas .

En-tête pleine largeur Divi Exemple d'en-tête plein écran

Maintenant que nous avons expliqué pourquoi nous voudrions créer un en-tête plein écran et voir comment accomplir la tâche, examinons un exemple. Je vais créer un en-tête pleine largeur en utilisant la section héros d'une mise en page Divi.

Pour cet exemple, j'utilise la section héros de la page d'accueil du pack de mise en page de studio de photographie gratuit disponible dans Divi. Je vais personnaliser cette section héros en utilisant les polices et les couleurs de la mise en page pour créer un en-tête pleine largeur unique.

Paramètres du module d'en-tête plein écran

Voici les étapes pour chaque section de paramètres dans le module d'en-tête plein écran.

Texte

Tout d'abord, ajoutez le texte qui sera visible dans l'en-tête pleine chasse. Cela inclut le titre, le sous-titre, le contenu (j'utiliserai le texte factice intégré de Divi pour cela) et le texte du bouton.

• Titre : Studio de photographie Divi
• Sous-titre : Photographie
• Bouton 1 : Présentation du projet
• Bouton 2 : Planification du projet
• Corps : contenu

Images

Ensuite, ajoutez l'image . Cela s'affiche sur le côté droit de l'en-tête pleine largeur, déplaçant le texte vers la gauche.

• Image d'en-tête : votre choix

Arrière plan

Faites défiler jusqu'à Arrière -plan et définissez la Couleur sur #f6f5ee.

• Couleur : #f6f5ee

Disposition

Ensuite, allez dans l'onglet Conception. Activez Faire plein écran .

• Faire plein écran : Oui

Icône de défilement vers le bas

Ensuite, activez l' icône de défilement vers le bas . Changez la couleur en noir pour les ordinateurs de bureau et les tablettes et en blanc pour les téléphones. Avec l'image que j'ai sélectionnée, l'icône apparaîtra sur l'image en bas pour les téléphones et cela lui permet d'être visible avec les couleurs de l'image. Modifiez la taille de l'icône à 70 pixels pour les ordinateurs de bureau, 60 pixels pour les tablettes et 50 pixels pour les téléphones.

• Afficher le bouton de défilement vers le bas : Oui
• Couleur de l'icône : #000000 Ordinateur de bureau et tablette, #ffffff Téléphone
• Taille : Bureau 70px, Tablette 60px, Téléphone 50px

Texte du titre

Ensuite, nous allons ajuster le Title Text . Définissez le texte sur H1 et choisissez Inter pour la police. Définissez le poids sur gras, l'alignement sur le centre et la couleur sur noir.

• Rubrique : H1
• Police : Inter
• Poids : Gras
• Alignement : Centre
• Couleur : #000000

Nous utiliserons trois tailles pour la taille de la police : 75px pour les ordinateurs de bureau, 40ps pour les tablettes et 24px pour les téléphones. Changez la hauteur de ligne à 1.2em.

• Taille : 75 px pour ordinateur de bureau, 40 px pour tablette, 24 px pour téléphone
• Hauteur de ligne : 1,2 em

Le corps du texte

Ensuite, faites défiler jusqu'à Corps du texte . Choisissez Open Sans pour la police. Réglez l'alignement sur la gauche et la couleur sur noir.

• Police : Open Sans
• Alignement : Gauche
• Couleur : #000000

Définissez la taille de la police sur 16 pixels pour les ordinateurs de bureau, 15 pixels pour les tablettes et 14 pixels pour les téléphones. Changez la hauteur de ligne à 1.8em.

• Taille : ordinateur de bureau 16 px, tablette 15 px, téléphone 14 px
• Hauteur de ligne : 1,8 em

Texte du sous-titre

Ensuite, faites défiler jusqu'à Texte du sous-titre . Changez la police en Inter. Définissez le poids sur gras, le style sur TT, l'alignement sur le centre et la couleur sur #ff5a17.

• Police : Inter
• Poids : Gras
• Style : TT
• Alignement : Centre
• Couleur : #ff5a17

Modifiez la taille à 14 pixels pour les trois tailles d'écran. Changez l'espacement des lettres à 1px et la hauteur de ligne à 1.4em.

• Taille : 14 pixels
• Espacement des lettres 1px
• Hauteur de ligne : 1,8 em

Bouton un

Ensuite, faites défiler jusqu'à Button One et sélectionnez Use Custom Styles for Button . Changez la couleur du texte en noir.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille : Bureau 20px, Tablette 18px, Téléphone 16px
• Couleur du texte : #000000

Changez la couleur d'arrière -plan en blanc et définissez la largeur et le rayon de la bordure sur 0px.

• Couleur de fond : #ffffff
• Largeur de la bordure du bouton 1 : 0 pixel
• Rayon de la bordure du bouton 1 : 0px

Changez la police en Inter et le poids en gras.

• Police : Inter
• Poids : Gras

Ensuite, sélectionnez votre icône préférée, changez la couleur en noir, définissez le placement du bouton sur la gauche et désactivez Afficher uniquement l'icône au survol pour le bouton un.

• Icône : votre choix
• Couleur de l'icône : #000000
• Emplacement de l'icône du bouton 1 : gauche
• Afficher uniquement l'icône au survol pour le bouton 1 : Non

Enfin, faites défiler jusqu'aux options de rembourrage de Button One. Nous utiliserons un rembourrage différent pour chaque taille d'écran. Pour les ordinateurs de bureau, utilisez 20 pixels pour le haut et le bas et 40 pixels pour la gauche et la droite. Pour les tablettes, modifiez le rembourrage supérieur et inférieur à 16 pixels. Sur les téléphones, changez le rembourrage supérieur et inférieur en 12 pixels. Laissez le rembourrage gauche et droit le même pour les trois.

• Rembourrage du bureau : 20 px en haut et en bas, 40 px à gauche et à droite
• Rembourrage de la tablette : 16 px en haut et en bas, 40 px à gauche et à droite
• Rembourrage du téléphone : 12 px en haut et en bas, 40 px à gauche et à droite

Bouton deux

Enfin, faites défiler jusqu'au bouton deux . Sélectionnez Utiliser des styles personnalisés pour le bouton . Définissez la taille de la police sur 20px pour les ordinateurs de bureau, 19ps pour les tablettes et 16px pour les téléphones. Changez la couleur du texte en blanc.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille : Bureau 20px, Tablette 18px, Téléphone 16px
• Couleur du texte : #ffffff

Changez la couleur d'arrière -plan en #ff5a17. Définissez la largeur et le rayon de la bordure sur 0px.

• Couleur de fond : #ff5a17
• Largeur de la bordure du bouton deux : 0 pixel
• Rayon de la bordure du bouton deux : 0px

Ensuite, changez la police en Inter et le poids en gras.

• Police : Inter
• Poids : Gras

Choisissez votre icône préférée. Changez la couleur en noir, définissez le placement du bouton sur la gauche et désactivez Afficher uniquement l'icône au survol pour le bouton deux.

• Icône : votre choix
• Couleur de l'icône : #000000
• Emplacement de l'icône du bouton 2 : gauche
• Afficher uniquement l'icône au survol pour le bouton 2 : Non

Enfin, faites défiler jusqu'aux options de rembourrage du bouton deux. Pour les ordinateurs de bureau, utilisez 20 pixels pour le haut et le bas et 40 pixels pour la gauche et la droite. Sur les tablettes, modifiez le rembourrage supérieur et inférieur à 16 pixels. Pour les téléphones, changez le rembourrage supérieur et inférieur en 12 pixels. Fermez le module et enregistrez votre travail.

• Rembourrage du bureau : 20 px en haut et en bas, 40 px à gauche et à droite
• Rembourrage de la tablette : 16 px en haut et en bas, 40 px à gauche et à droite
• Rembourrage du téléphone : 12 px en haut et en bas, 40 px à gauche et à droite

Résultats d'en-tête plein écran

Voici à quoi ressemble notre en-tête pleine largeur sur les ordinateurs de bureau, les tablettes et les téléphones.

Bureau

Tablette

Téléphoner

Mettre fin aux réflexions sur la création d'un en-tête plein écran avec le module d'en-tête pleine largeur de Divi

C'est notre regard sur la façon de créer un en-tête plein écran avec votre module Divi Fullwidth Header. Le processus est simple et il a fière allure sur n'importe quel appareil. L'ajout du bouton Faire défiler vers le bas est un excellent visuel qui indique aux utilisateurs qu'ils peuvent faire défiler. La conception d'un en-tête plein écran est similaire à la conception d'une section héros. Suivre quelques directives simples peut vous aider à créer d'incroyables en-têtes plein écran avec le module d'en-tête plein écran de Divi.

Nous voulons de vos nouvelles. Avez-vous mis votre Divi Fullwidth Header en plein écran ? Dites-le nous dans les commentaires.