Comment révéler des images à l'aide de grilles de survol horizontales et de débordement caché avec Divi

Depuis que les nouvelles options de dimensionnement de Divi sont sorties, nous avons créé quelques tutoriels qui vous montrent comment créer des révélations de survol. Dans ces didacticiels, le contenu caché était placé verticalement. Dans certains cas, cependant, vous souhaiterez peut-être créer une révélation horizontale à la place. Dans cet article, nous allons vous montrer comment révéler des images à l'aide des grilles de survol et des options de débordement de Divi. Faire ce travail demande une approche légèrement différente. Nous utiliserons une ligne à une colonne et placerons tous les modules les uns au-dessous des autres et en survol, nous transformerons la colonne en une grille horizontale. 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 la mise en page des grilles de survol

Pour mettre la main sur la disposition des grilles de survol gratuit, vous devrez d'abord la 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 !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez.

Ajouter une nouvelle ligne

Structure des colonnes

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

Fond dégradé par défaut

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez l'arrière-plan dégradé suivant :

• Couleur 1 : #b1ffc4
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 28 %
• Position finale : 28 %

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

Modifiez le fond dégradé au survol.

• Couleur 1 : #b1ffc4
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Gauche
• Position de départ : 5 %
• Position finale : 5 %

Espacement

Passez aux paramètres d'espacement et modifiez ensuite les valeurs de remplissage et de marge.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Marge supérieure : 50px
• Marge inférieure : 50px

Bordure par défaut

Ajoutez ensuite un rayon de bordure « 50px » dans les coins supérieur droit et inférieur droit.

Bordure de survol

Ramenez les coins à « 0px » en survol.

Ombre de boîte par défaut

Ajoutez ensuite une ombre de boîte subtile à l'aide des paramètres suivants :

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.09)

Ombre de la boîte de survol

Supprimez l'ombre de la boîte au survol en remplaçant la couleur de l'ombre par une couleur complètement transparente.

• Couleur de l'ombre : rgba(0,0,0,0)

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Il est temps de commencer à ajouter des modules, en commençant par un module de texte. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2 en conséquence :

• Police du titre 2 : Acme
• Titre 2 Style de police : Souligné
• Titre 2 Couleur de soulignement : #00ff3f
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 3vw

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 6vw
• Rembourrage inférieur : 7vw
• Rembourrage gauche : 2vw

Ajouter un module d'image à la colonne

Télécharger une image

Le deuxième module dont nous avons besoin dans cette colonne est un module Image. Téléchargez une image paysage de votre choix.

Boite à lumière

Activez ensuite l'option lightbox dans les paramètres du lien.

• Ouvrir dans Lightbox : Oui

Dimensionnement

Et forcez la pleine largeur sur l'image dans les paramètres de dimensionnement. Cela garantira que l'image reste réactive sur toutes les tailles d'écran.

• Forcer la pleine largeur : Oui

Cloner le module d'image deux fois

Une fois que vous avez terminé le premier module Image, vous pouvez continuer et le cloner deux fois.

Changer d'image

Changez les images dans les deux doublons. Assurez-vous que les images que vous téléchargez ont la même dimension que la première image.

Ajouter un effet de survol à la ligne

Dimensionnement

Maintenant que nous avons terminé les réglages de base de la ligne et du module, il est temps de créer l'effet de survol ! Nous allons commencer par modifier la hauteur et la largeur de la ligne et masquer les débordements. Ouvrez les paramètres de dimensionnement de la ligne et apportez les modifications suivantes :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 20%
• Largeur maximale : 100 %
• Hauteur: 15.9vw

Dimensionnement de survol

Ramenez la largeur à « 100 % » en survol. Cela permettra aux images d'apparaître une fois la ligne survolée.

• Largeur : 100 %

Visibilité

Passez ensuite à l'onglet avancé et masquez les débordements. Cela garantira que les images sont masquées avant que les visiteurs survolent (bureau) ou cliquent (tablette/mobile) sur le module de texte.

• Débordement horizontal : masqué
• Débordement vertical : caché

Transitions

Nous modifions également la durée de transition dans les paramètres de transition.

• Durée de transition : 0 ms

Élément principal de survol de colonne

Pour créer une grille au survol, nous allons ouvrir les paramètres de la colonne, aller dans l'onglet avancé et placer les lignes de code CSS suivantes dans l'élément principal du survol :

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Cloner la ligne deux fois

Une fois que vous avez terminé la première ligne, vous pouvez la cloner autant de fois que vous le souhaitez. Pour cet exemple de conception particulier, nous clonons la ligne deux fois.

Modifier l'arrière-plan dégradé de la ligne 1 en double

Modifiez la première couleur de dégradé de l'arrière-plan dégradé de la deuxième ligne.

• Couleur 1 : #ffdc96

Changer l'arrière-plan dégradé de la ligne 2 en double

Faites de même pour la troisième rangée.

• Couleur 1 : #b7c7ff

Modifier la copie du module de texte et la couleur de soulignement des deux doublons

Continuez en modifiant la couleur de soulignement des deux doublons du module de texte avec la copie et vous avez terminé !

• Souligner la couleur n°1 : #ffaa00
• Souligner la couleur #2 : #0037ff

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 révéler des images dans des grilles de survol horizontales à l'aide des options de débordement de Divi. Les images ont été révélées une fois survolées sur deskop et cliquées sur tablette/téléphone. Bien que nous ayons révélé des images, vous pouvez révéler tout type de contenu que vous souhaitez en modifiant les paramètres à l'intérieur du générateur. Nous espérons que ce didacticiel vous inspirera également pour créer vos propres conceptions alternatives de grille de survol ! Si vous avez des questions ou des suggestions, assurez-vous de 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.