Comment révéler une image d'arrière plan de survol dans votre module d'en tête pleine largeur Divi

Comment révéler une image d’arrière-plan de survol dans votre module d’en-tête pleine largeur Divi

Le module d’en-tête pleine largeur de Divi possède de nombreuses fonctionnalités qui ajoutent des éléments de conception intéressants à n’importe quel site Web Divi. Un exemple est la possibilité de révéler une image d’arrière-plan lorsque l’utilisateur survole le module. Cela ajoute un niveau de détail supplémentaire auquel la plupart des utilisateurs ne s’attendraient pas. C’est facile à faire avec Divi.Dans cet article, nous verrons comment révéler une image d’arrière-plan de survol dans votre module Divi Fullwidth Header. Nous créerons également un en-tête pleine largeur à partir de zéro basé sur l’un des packs de mise en page gratuits de Divi.

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 sans survol

Bureau avec survol

Bureau avec survol

Téléphone sans survol

Téléphone sans survol

Téléphone avec écran tactile

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.

Construire l'en-tête pleine largeur de l'image d'arrière-plan du survol

Ensuite, ajoutez un Section pleine largeur et supprimer la section régulière.

Construire l'en-tête pleine largeur de l'image d'arrière-plan du survol

Enfin, ajoutez un Module d’en-tête pleine largeur à votre nouvelle section.

Construire l'en-tête pleine largeur de l'image d'arrière-plan du survol

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.

Lire Aussi...  11 meilleurs thèmes WordPress premium en 2023

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

Survolez l'image d'arrière-plan

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

Survolez l'image d'arrière-plan

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 le contenu de l'image d'arrière-plan

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 la mise en page de l'image d'arrière-plan

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

Survoler l'image d'arrière-plan Icône de défilement vers le bas

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
Lire Aussi...  5 meilleurs plugins WordPress IDX en 2024

Survolez le texte du titre de l'image d'arrière-plan

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 titre de l'image d'arrière-plan

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

Survolez le texte du corps de l'image d'arrière-plan

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 %

Survolez le texte du corps de l'image d'arrière-plan

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

Survoler le texte du sous-titre de l'image d'arrière-plan

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

Survoler le texte du sous-titre de l'image d'arrière-plan

Survolez l’image d’arrière-plan du bouton 1

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

Survolez l'image d'arrière-plan du bouton 1

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

Survolez l'image d'arrière-plan du bouton 1

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

Survolez l'image d'arrière-plan du bouton 1

Survolez le bouton d’image d’arrière-plan deux

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
Lire Aussi...  7 meilleures options de logiciel CRM pour votre entreprise en 2023

Survolez le bouton d'image d'arrière-plan deux

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

Survolez le bouton d'image d'arrière-plan deux

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

Survolez le bouton d'image d'arrière-plan deux

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

Survoler l'espacement de l'image d'arrière-plan

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

Survolez l'ombre de la boîte de l'image d'arrière-plan

Résultats

Bureau sans survol

Bureau sans survol

Bureau avec survol

Bureau avec survol

Téléphone sans survol

Téléphone sans survol

Téléphone avec écran tactile

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.

 

Comments are closed.