Aperçu
Voyons d’abord un aperçu de ce que nous allons construire dans cet article. Étant donné que le survol avec une souris n’est pas une option pour les téléphones, j’ai inclus le design pour les téléphones lorsque l’utilisateur touche l’arrière-plan.
Bureau sans survol
Bureau avec survol
Téléphone sans survol
Téléphone avec écran tactile
Construire l’en-tête pleine largeur de l’image d’arrière-plan du survol
Tout d’abord, construisons l’en-tête pleine largeur que nous utiliserons dans l’exemple. Ouvrez le Générateur de thèmes Divi et cliquez Ajouter un en-tête global pour créer un nouveau modèle. Choisir Créer un en-tête global pour le construire à partir de zéro.
Ensuite, ajoutez un Section pleine largeur et supprimer la section régulière.
Enfin, ajoutez un Module d’en-tête pleine largeur à votre nouvelle section.
Maintenant, nous pouvons créer notre arrière-plan révélé par le survol et styliser le module. Pour cet exemple, j’utilise des éléments de conception de la section héros de la page de destination gratuite des services financiers disponible dans Divi.
Créer l’image d’arrière-plan du survol
Avant de styliser le module, commençons par créer la fonction de survol pour le module d’en-tête pleine largeur. Une fois que nous aurons vu comment le créer et comment il fonctionne, nous styliserons le reste du module pour qu’il corresponde à notre exemple d’aperçu.
Survolez l’image d’arrière-plan
L’arrière-plan révélé par le survol comporte deux éléments. Le premier est la couleur de fond qui s’affiche normalement. Nous pourrions également utiliser un dégradé ou une image si nous le voulions. Le second est l’élément qui s’affiche lorsque l’utilisateur survole le module d’en-tête pleine largeur. Dans notre cas, il s’agit d’une image, mais nous pourrions tout aussi bien utiliser une couleur de fond ou un dégradé.
Tout d’abord, faites défiler jusqu’à Arrière-plan. Dans l’onglet Couleur d’arrière-plan, remplacez la Couleur par #f0f3fb.
- Couleur de fond : #f0f3fb
Ensuite, sélectionnez le État de survol icône. Il s’agit d’une icône de curseur de souris. Cliquer dessus ouvre un ensemble d’onglets qui nous permettent de choisir entre les paramètres d’état normal et de survol. Sélectionnez le Onglet État de survol pour passer aux options de survol. Ensuite, choisissez le Onglet Image d’arrière-plan et choisissez votre image de fond. J’utilise l’image d’arrière-plan du Financial Services Layout Pack appelé financial-services-9.
- Image d’arrière-plan de l’état de survol : services-financiers-9
Nous avons maintenant une image qui se révélera lorsque l’utilisateur survolera le module d’en-tête pleine largeur. Toutes les options d’état de survol fonctionnent de cette manière.
Styliser le module d’en-tête pleine largeur de l’image d’arrière-plan de survol
Maintenant que nous avons notre image d’arrière-plan de survol en place, stylisons le reste du module.
Survoler le contenu de l’image d’arrière-plan
Commençons par le contenu pour les champs, le corps et les boutons. Ajoutez votre titre, sous-titre, bouton un, bouton deux et contenu du corps.
- Titre : Planifiez votre avenir financier
- Sous-titre : Bienvenue dans Divi
- Premier bouton : Commencer
- Bouton 2 : Obtenez un devis gratuit
- Contenu du corps : votre contenu
Survoler la mise en page de l’image d’arrière-plan
Ensuite, sélectionnez le Conception languette. Changement Alignement du logo et du texte à Centré.
- Alignement du logo et du texte : Centré
Survoler l’image d’arrière-plan Icône de défilement vers le bas
Sélectionner Afficher le bouton de défilement vers le bas. Sélectionnez la troisième icône et changez la couleur en #1d4eff. Laissez la taille à son réglage par défaut.
- Afficher le bouton de défilement vers le bas : Oui
- Icône : 3rd
- Couleur : #1d4eff
Survolez le texte du titre de l’image d’arrière-plan
Ensuite, faites défiler jusqu’à Texte du titre. Sélectionnez H1 pour le niveau de titre. Choisissez Montserrat pour la police, définissez le poids sur gras et modifiez le Couleur à #0f1154.
- Niveau de titre : H1
- Police : Montserrat
- Poids : Gras
- Couleur : #0f1154
Changer la Taille de police à 125px pour les ordinateurs de bureau, 40px pour les tablettes et 24px pour les téléphones. Met le Hauteur de la ligne à 110 %. Cela nous donne un titre surdimensionné qui a fière allure sur n’importe quelle taille d’écran.
- Taille : ordinateur de bureau 125 px, tablette 40 px, téléphone 24 px
- Hauteur de ligne : 110 %
Survolez le texte du corps de l’image d’arrière-plan
Ensuite, faites défiler jusqu’à Corps du texte. Changez la police en Roboto, réglez le poids sur moyen et changez la couleur en # 0f1154.
- Police : Roboto
- Poids : moyen
- Couleur : #0f1154
Changer la Taille de police à 18px pour les ordinateurs de bureau et les tablettes, et 14px pour les téléphones. Met le Hauteur de la ligne à 180 %. Cela donne au corps du texte beaucoup de marge de manœuvre.
- Taille : ordinateur de bureau et tablette 18 px, téléphone 14 px
- Hauteur de ligne : 180 %
Survoler le texte du sous-titre de l’image d’arrière-plan
Ensuite, faites défiler jusqu’à Texte du sous-titre. Changez la police en Montserrat. Réglez le poids sur gras, changez le style en TT et changez la couleur en # 1d4eff.
- Police : Montserrat
- Poids : Gras
- Style : TT
- Couleur : #1d4eff
Changer la Taille de police à 16 pixels pour les ordinateurs de bureau, 14 pixels pour les tablettes et 12 pixels pour les téléphones. Changer la Interligne à 0.3em et le Hauteur de la ligne à 1.6em. Cela distingue le sous-titre du titre et du contenu sans prendre beaucoup de place.
- Taille : ordinateur de bureau 16 px, tablette 14 px, téléphone 12 px
- Espacement des lettres : 0,3 em
- Hauteur de ligne : 1,6 em
Ensuite, faites défiler jusqu’au bouton un et activez Utiliser des styles personnalisés pour le bouton un. Changez la taille du texte à 18px. Changez la couleur du texte en blanc et la couleur d’arrière-plan en #1d4eff.
- Utiliser des styles personnalisés pour le bouton 1 : Oui
- Taille du texte : 18 px
- Couleur du texte : #ffffff
- Couleur de fond : #1d4eff
Ensuite, changez le Largeur de la bordure et Rayon à 0px. Choisissez Roboto pour la police et définissez le poids sur moyen.
- Largeur : 0px
- Rayon : 0px
- Police : Roboto
- Poids : moyen
Faites défiler jusqu’à Rembourrage du bouton un. Ajoutez 14 pixels pour le rembourrage supérieur et inférieur et 24 pixels pour le rembourrage droit et gauche.
- Rembourrage : 14px en haut et en bas, 24px à gauche et à droite
Ensuite, faites défiler jusqu’au bouton deux et activez Utiliser des styles personnalisés pour le bouton 2. La plupart de ces paramètres sont les mêmes que ceux de Button One. Changez la taille du texte en 18px, la couleur du texte en blanc et la couleur d’arrière-plan en #00c9c9.
- Utiliser des styles personnalisés pour le bouton 2 : Oui
- Taille du texte : 18 px
- Couleur du texte : #ffffff
- Couleur de fond : #00c9c9
Ensuite, changez le Largeur de la bordure et Rayon à 0px. Choisissez Roboto pour la police et définissez le poids sur moyen.
- Largeur : 0px
- Rayon : 0px
- Police : Roboto
- Poids : moyen
Faites défiler jusqu’à Rembourrage du bouton deux. Ajoutez 14 pixels pour le rembourrage supérieur et inférieur et 24 pixels pour le rembourrage droit et gauche.
- Rembourrage : 14px en haut et en bas, 24px à gauche et à droite
Survoler l’espacement de l’image d’arrière-plan
Ensuite, faites défiler jusqu’à Espacement et ajoutez un rembourrage de 100 pixels en haut et en bas. Cela augmente la taille de l’en-tête pleine largeur sans utiliser l’option Plein écran dans les paramètres de mise en page. Dans mes exemples, l’en-tête pleine largeur laisse un peu d’espace au bas de l’écran où la section suivante s’affiche. Bien sûr, vous pouvez utiliser le paramètre plein écran à la place du rembourrage si vous le souhaitez.
- Rembourrage : 100 pixels en haut et en bas
Survolez l’ombre de la boîte de l’image d’arrière-plan
Enfin, faites défiler jusqu’à Boîte ombre et choisissez le 6e Option d’ombre de boîte. Cela donne à l’en-tête un aspect plus unique. Fermer le module d’en-tête pleine largeur et enregistrez vos paramètres.
- Boîte Ombre : 6e
Résultats
Bureau sans survol
Bureau avec survol
Téléphone sans survol
Téléphone avec écran tactile
Mettre fin aux pensées
C’est notre regard sur la façon de révéler une image d’arrière-plan de survol dans votre module Divi Fullwidth Header. L’état de survol des images d’arrière-plan est un paramètre simple, mais il peut avoir un impact considérable sur la conception du site. C’est un excellent moyen d’attirer l’attention. Vous pouvez aller encore plus loin dans la conception si vous souhaitez ajouter des arrêts de dégradé, des superpositions, modifier des images, etc. Je recommande de jouer avec les paramètres d’arrière-plan de survol du module Divi Fullwidth Header pour voir ce que vous pouvez créer.
Articles similaires:
Comment utiliser le bloc de slogan du site WordPress ?
Téléchargez un en-tête et un pied de page GRATUITS pour le pack de mise en page Streamer de Divi
