Comment créer une grille de survol transparente avec Divi

Si vous aimez créer des sites Web en pensant à l'interaction avec l'utilisateur, vous allez adorer ce didacticiel de conception Divi. Aujourd'hui, nous allons vous montrer comment créer une grille de survol transparente. Le design est initialement simple et propre. Dès que quelqu'un survole l'un des éléments, l'image d'arrière-plan est révélée et les styles de module changent avec elle. Cela se traduit par une belle expérience de vol stationnaire. Dans ce tutoriel, nous vous guiderons pas à pas tout au long du processus de création. Vous pourrez également télécharger gratuitement le fichier JSON de la mise en page !

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 la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord les télécharger à l'aide du 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 !

Commençons à recréer !

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et appliquez une couleur d'arrière-plan blanche.

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

Ajouter la ligne n° 1

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
• 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

Frontière

Et incluez une bordure supérieure et inférieure.

• Largeur de bordure supérieure et inférieure : 1px
• Couleur de la bordure supérieure et inférieure : #d3d3d3

Paramètres de la colonne 1

Survoler l'arrière-plan du dégradé

Ensuite, nous avons les paramètres de la colonne 1. Appliquez un fond dégradé au survol.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #000000
• Type de dégradé : Linéaire
• Position de départ : 30 %

Survolez l'image d'arrière-plan

Téléchargez également une image de fond au survol.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre

Classe CSS

Et complétez les paramètres de la colonne en attribuant la classe CSS suivante dans l'onglet avancé :

• Classe CSS : hover-column

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

Ajouter du contenu H3

Il est temps d'ajouter des modules, en commençant par un premier module de texte dans la colonne 1. Utilisez du contenu H3 de votre choix.

Paramètres de texte H3

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

• Police de la rubrique 3 : Oswald
• Titre 3 Poids de la police : Ultra léger
• Titre 3 Style de police : majuscule
• Titre 3 Couleur du texte : #0a0a0a
• Titre 3 Taille du texte :
  • Ordinateur de bureau : 3vw
  • Tablette : 7vw
  • Téléphone : 14vw
• En-tête 3 Espacement des lettres : -2px

Dimensionnement

Modifiez la largeur sur différentes tailles d'écran dans les paramètres de dimensionnement.

• Largeur:
  • Ordinateur de bureau : 44 %
  • Tablette : 48%
  • Téléphone : 50 %

Espacement

Nous utilisons également des valeurs de marge et de remplissage personnalisées.

• Marge inférieure : 25vh
• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 7%
• Rembourrage droit : 7 %

Frontière

Ensuite, nous allons ajouter des bordures droite et inférieure.

• Largeur de la bordure droite et inférieure : 1px
• Largeur de la bordure droite et inférieure : 1px
• Couleur des bordures droite et inférieure : #d3d3d3

Classe CSS

Et nous allons compléter les paramètres du module en attribuant la classe CSS suivante au module de texte :

• Classe CSS : hover-title

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

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du précédent avec un contenu de description de votre choix.

Paramètres de texte

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

• Police du texte : Karla
• Couleur du texte : #ffffff
• Taille du texte:
  • Ordinateur de bureau : 0.8vw
  • Tablette : 2vw
  • Téléphone : 3.6vw
• Hauteur de la ligne de texte : 2,2 em

Espacement

Appliquez également des valeurs de remplissage personnalisées.

• Rembourrage inférieur : 10 %
• Rembourrage gauche : 9%
• Rembourrage droit : 9%

Classe CSS

Et complétez les paramètres du module en utilisant la classe CSS suivante pour le module :

• Classe CSS : hover-text

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le prochain et dernier module dont nous avons besoin est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Modifiez les paramètres des boutons du module comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2.5vw
  • Téléphone : 4vw
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px

• Police des boutons : Karla
• Afficher l'icône du bouton : Oui
• Emplacement de l'icône du bouton : à gauche
• Afficher uniquement l'icône au survol pour le bouton : non

Espacement

Ajoutez également des valeurs d'espacement personnalisées.

• Marge inférieure : 8 %
• Marge gauche : 9%
• Marge de droite : 9%
• Rembourrage inférieur : 5 %
• Rembourrage droit : 20 %

Boîte ombre

Ensuite, appliquez une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 2px
• Couleur de l'ombre : # 000000

Classe CSS

Et complétez les paramètres du module en attribuant la classe CSS suivante au bouton :

• Classe CSS : bouton de survol

Réutiliser la colonne 1

Supprimer les colonnes 2, 3 et 4

Maintenant que nous avons construit la première colonne, nous pouvons la réutiliser. La première chose que nous allons faire est de supprimer les colonnes vides de notre ligne.

Cloner la colonne 1 trois fois

Nous réutiliserons la colonne 1 en la clonant trois fois.

Modifier les images d'arrière-plan de survol de colonne en double

Modifiez les images d'arrière-plan des colonnes en double dans chaque colonne en double.

Modifier le contenu en double

Avec le contenu du module dans chaque colonne en double.

Bordures de colonnes uniques

Colonne 1

Nous devrons appliquer des paramètres de bordure uniques à chaque colonne, en commençant par la colonne 1.

• Largeur de la bordure droite :
  • Bureau : 1px
  • Tablette : 1px
  • Téléphone : 0px
• Couleur de la bordure droite : #d3d3d3
• Largeur de la bordure inférieure :
  • Bureau : 0px
  • Tablette : 1px
  • Téléphone : 1px
• Couleur de la bordure inférieure : #d3d3d3

Colonne 2

Ensuite, nous avons la colonne 2.

• Largeur de la bordure droite :
  • Bureau : 1px
  • Tablette : 0px
  • Téléphone : 0px
• Couleur de la bordure droite : #d3d3d3
• Largeur de la bordure inférieure :
  • Bureau : 0px
  • Tablette : 1px
  • Téléphone : 1px
• Couleur de la bordure inférieure : #d3d3d3

Colonne 3

Et nous utiliserons les paramètres de bordure suivants pour la colonne 3 :

• Largeur de la bordure droite :
  • Bureau : 1px
  • Tablette : 1px
  • Téléphone : 0px
• Couleur de la bordure droite : #d3d3d3
• Largeur de la bordure inférieure :
  • Bureau : 0px
  • Tablette : 0px
  • Téléphone : 1px
• Couleur de la bordure inférieure : #d3d3d3

Ajouter un code CSS personnalisé aux paramètres de la page

Ouvrir les paramètres de la page

Maintenant que nous avons mis en place toute la conception, il ne reste plus qu'à ajouter du code CSS personnalisé pour aider à déclencher des effets de survol sur les éléments enfants (les modules). Pour ce faire, ouvrez les paramètres de la page.

Ajouter un code CSS

Et copiez-collez les lignes de code CSS suivantes :

.hover-column:hover .hover-title {
background-color: #000000;
}

.hover-column:hover .hover-title h3 {
color: white !important;
}

.hover-button {
color: black;
}

.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}

.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}

.hover-column:hover::before {
opacity: 0;
}

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 créer un beau design de survol. Plus précisément, nous avons créé une grille de colonnes qui commence de façon claire et nette. Dès que les visiteurs survolent un élément particulier dans la grille, l'image d'arrière-plan est révélée et les styles de module changent. 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.