Divi : Comment afficher des extraits d’articles au survol

Envie de savoir comment afficher des extraits d’articles au survol dans Divi ?

Prévisualiser les extraits d’articles de blog au survol peut être un moyen efficace de conserver une mise en page de grille compacte pour vos articles de blog sans abandonner complètement ces extraits. 

Ainsi, l’idée est de masquer initialement les extraits, puis d’afficher ces derniers lorsque vous survolez une publication dans la grille. Par conséquent, cela permet aux lecteurs de voir plus de publications tout en les offrant la possibilité de voir des extraits des publications qui les intéressent.

Dans ce tutoriel, nous allons donc vous montrer comment créer cet effet de basculement des extraits d’articles de blog au survol dans Divi. 

Commençons!

Aperçu

Voici tout d’abord un aperçu de ce que nous allons créer dans ce didacticiel.

Création de la mise en page du module Blog

Nous devons de prime abord créer une mise en page de base pour les articles de notre blog. Pour ce didacticiel, nous allons ajouter une ligne à une colonne et y insérer un module Blog.

Créer un ligne

Pour commencer, insérer une ligne d’une colonne à la section

Largeur de ligne

Ensuite, allez dans les paramètres de la ligne. puis, dans l’onglet Style, sous Dimensionnement, modifier les largeurs ainsi qu’il suit :

• Largeur maximale : 90%
• Largeur maximale : 1200px

Ajouter un module Blog

Puis, insérer un module Blog dans la colonne de la ligne précédemment créée.

Paramètres du module Blog

Ensuite, aller dans les paramètres du module Blog, dans l’onglet Contenu, sous Eléments, mettre à « Oui » l’option « Montrer le bouton En Lire Plus »

Aller maintenant à l’onglet Style, sous Modèle, sélectionner le modèle « Grille » comme disposition pour le blog.

Enfin, aller dans l’onglet Avancé et ajouter la classe CSS suivante : 

CSS Class : toggle-blog-excerpt

Par la suite, nous utiliserons cette classe comme sélecteur pour notre code CSS personnalisé à l’étape suivante.

Ajouter un CSS personnalisé avec le module Code.

A ce stade, les articles de notre blog sont disposés sous forme de grille et une classe CSS personnalisée a été ajoutée au menu Blog. Nous allons donc utiliser ce sélecteur de classe CSS pour cibler spécifiquement ce module Blog et ajouter un effet de basculement lors du survol d’un article.

Pour ajouter du CSS, nous allons utiliser le module Code. Pour cela, ajouter un module Code sous le module Blog.

Ensuite, coller le CSS personnalisé ci-dessous nécessaire pour la création de l’effet de basculement d’un extrait d’article lors du survol. Surtout, assurez-vous de coller le code CSS entre les balises styles nécessaires.

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

Visualisons le résultat obtenu jusqu’ici.

Résultat

Ajoutons un style supplémentaire au module Blog avec le constructeur Divi

Maintenant que le CSS est en place pour nous donner l’effet bascule pour nos extraits d’articles de blog, nous pouvons alors ajouter n’importe quel style supplémentaire au module de blog à l’aide du constructeur Divi.

Pour cet exemple, nous allons faire des ajustements minimes au style, mais n’hésitez pas à explorer également votre propre style.

Style du titre de l’article

• Titre lumière tamisée : Texte en gras
• Couleur du texte Titre : #6D6A7E
• Titre Taille du Texte : 20px
• Hauteur de la ligne Titre : 1.3em

Style du texte « Lire plus »

• Lire plus Lumière tamisée : Texte en gras
• Lire plus Copier le Style : TT
• Couleur du texte Lire plus : #6D6A7E
• Espacement des lettres Lire plus : 1px
• Hauteur de la ligne Lire plus : 3.5em

Modifier l’affichage de la pagination Texte

• Afficher la pagination Lumière tamisée : Texte en gras
• Couleur du texte Afficher la pagination : #6D6A7E
• Espacement des lettres Afficher la pagination : 1px
• Afficher la pagination Copier le style : TT

Supprimer la bordure

• Disposition de la grille Largeur de la bordure : 0px

Style de la Boîte Ombre au survol

• Boîte Ombre : Voir la capture d’écran
• Position de départ : 0px
• Box Shadow Blur Strength : 38px
• Couleur de la police de sous-titre : rgba (109,106,126,0.25)

Résultat final

Conclusion

En conclusion, comme indiqué dans ce didacticiel, l’ajout de quelques extraits de code CSS peut vous donner la fonctionnalité nécessaire pour basculer les extraits d’articles de blog avec un bel effet de survol. 

Le plus important dans cette méthode est qu’on peut y ajouter un style supplémentaire à notre guise au module de blog à l’aide des options intégrées de Divi. De plus, cela vous permettra de personnaliser des éléments de publication, y compris en ajoutant plus d’effets de survol. 

Espérons que cela contribuera à donner au blog de votre site Web Divi un coup de pouce supplémentaire en termes de conception et de fonctionnalité. Faites nous part de vos expériences en commentaire.