Comment basculer les extraits d'articles de blog en survol dans Divi

Publié: 2021-08-02

Basculer les extraits d'articles de blog en 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. L'idée est de masquer les extraits dans un premier temps, puis de basculer leur visibilité lorsque vous survolez un élément de publication dans la grille. Cela permet aux utilisateurs de voir plus de publications dans la fenêtre d'affichage du navigateur tout en offrant à l'utilisateur la possibilité de voir des extraits des publications qui les intéressent en survolant la publication.

Dans ce didacticiel, nous allons vous montrer comment basculer les extraits d'articles de blog en survol dans Divi. Pour ce faire, nous ajouterons quelques extraits de CSS personnalisés qui basculeront les extraits de l'article d'un module de blog en survol (aucun JQuery n'est nécessaire). Une fois le code en place, vous pouvez styliser le module de blog comme vous le souhaitez en utilisant les paramètres intégrés de Divi.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le 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

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.

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 !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

boîte de notification divi

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

étendre les onglets d'angle

Pour commencer, vous devrez effectuer les opérations suivantes :

  1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
  3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Comment basculer les extraits d'articles de blog en survol dans Divi

Création de la mise en page du module de blog

Tout d'abord, nous devons créer une mise en page de base pour nos articles de blog. Pour cet exemple, nous allons ajouter une ligne à une colonne avec un module de blog à l'intérieur.

Créer une ligne

Ajoutez une ligne à une colonne à la section.

Largeur de ligne

Dans le modal des paramètres de ligne, mettez à jour les paramètres de conception suivants pour ajuster la largeur.

  • Largeur : 95%
  • Largeur maximale : 1200px

Ajouter un module de blog

Dans la colonne de la ligne, ajoutez un nouveau module de blog.

Paramètres du module de blog

Ensuite, mettez à jour les paramètres de contenu du module de blog en sélectionnant pour afficher le bouton Lire la suite.

Sous l'onglet Conception, sélectionnez la disposition Grille pour le blog.

Sous l'onglet avancé, ajoutez la classe CSS suivante :

  • Classe CSS : toggle-blog-extrait

Nous utiliserons cette classe comme sélecteur pour notre code CSS personnalisé à l'étape suivante.

Ajouter un CSS personnalisé avec le module de code

À ce stade, nous avons une disposition de grille de base pour nos articles de blog avec une classe CSS personnalisée ajoutée au module de blog. Nous utiliserons ce sélecteur de classe CSS pour cibler ce module de blog spécifique et ajouter un effet de bascule au survol de la partie de l'extrait de publication de l'élément de publication.

Pour ajouter le CSS, nous allons utiliser un module de code. Ajoutez un nouveau module de code sous le module de blog.

Collez le CSS personnalisé suivant nécessaire pour l'effet de basculement de l'extrait de publication. Assurez-vous d'envelopper le CSS dans les balises de style nécessaires. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Voyons le résultat jusqu'à présent sur la page en direct.

Résultat

Nous reviendrons un peu plus en détail sur le code à la fin de l'article. Mais pour l'instant, regardons le résultat jusqu'à présent.

Ajouter un style supplémentaire au module de blog avec Divi Builder

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

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

Style Titre du message

  • Poids de la police du titre : gras
  • Couleur du texte du titre : #6d6a7e
  • Taille du texte du titre : 20 px
  • Hauteur de la ligne de titre : 1,3 em

Style Lire la suite de texte

  • En savoir plus Poids de la police : gras
  • Lire la suite Style de police : TT
  • Lire la suite Couleur du texte : #6d6a7e
  • En savoir plus Espacement des lettres : 1px
  • En savoir plus Hauteur de ligne : 3,5 em

Pagination des styles

  • Poids de la police de pagination : gras
  • Style de police de pagination : TT
  • Couleur du texte de pagination : #6d6a7e
  • Espacement des lettres de pagination : 1px

Supprimer la bordure

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

Ombre de la zone de style au survol

  • Box Shadow : voir la capture d'écran
  • Position verticale de l'ombre de la boîte : 0px
  • Force du flou d'ombre de la boîte: 38px
  • Couleur de l'ombre (bureau) : transparent
  • Couleur de l'ombre (survol): rgba(109,106,126,0.25)

Résultat final

À propos du code CSS

Si vous êtes intéressé par la répartition du CSS personnalisé ajouté au module de code plus tôt, le voici.

Tout d'abord, nous devons envelopper tout le CSS dans une requête multimédia qui n'appliquera le CSS qu'aux navigateurs de bureau. 

@media all and (min-width: 981px) {

}

Deuxièmement, nous devons ajouter une transition d'une durée de 500 ms au contenu/extrait de la publication aux changements de style qui se produiront lors du survol de l'élément de publication.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

Troisièmement, nous devons nous assurer que le contenu/l'extrait de la publication reste visible lors de l'utilisation du générateur visuel afin que nous puissions apporter des modifications.

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

Quatrièmement, nous devons masquer le contenu/l'extrait de la publication par défaut lorsque la page se charge. Pour ce faire, nous utilisons Visibility:hidden pour masquer le contenu. Ensuite, nous ajoutons opacity:0 afin d'obtenir un effet de transition de fondu entrant et sortant lorsque nous ajoutons opacity:1 à l'état de survol. Nous utilisons également max-height:0px pour obtenir l'effet de basculement lorsque nous ajoutons max-height:500px à l'état de survol.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

Cinquièmement, nous montrons le contenu/l'extrait de la publication lorsque l'élément de publication (.et_pb_post) est en état de survol. Pour ce faire, nous modifions la visibilité en visible, l'opacité en 1 et la hauteur maximale en 500px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Pour l'extrait final, nous pouvons donner à tous les éléments de publication la même hauteur minimale pour une disposition de grille alignée verticalement plus propre.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Voici un autre aperçu du code final. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Dernières pensées

Comme indiqué dans ce didacticiel, l'ajout de quelques extraits de CSS peut vous donner la fonctionnalité nécessaire pour basculer entre les extraits d'articles de blog avec un bel effet de survol. La meilleure partie de cette méthode est que nous pouvons nous appuyer sur cette fonctionnalité en ajoutant tout style supplémentaire que nous souhaitons au module de blog à l'aide des options intégrées de Divi. Cela vous permettra d'ajouter un style plus avancé aux éléments de publication, y compris 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é.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!