Comment activer \/ désactiver le résumé du billet de blog pendant que vous passez le curseur sur Divi
Activer \/ désactiver les extraits de blog maintient efficacement la disposition compacte de la grille des articles de blog sans les abandonner complètement. L’idée est de cacher d’abord le résumé, puis d’activer ou d’éteindre sa visibilité lorsque vous passez le curseur sur l’élément post dans la grille. Cela permet aux utilisateurs de voir plusieurs messages dans la fenêtre du navigateur, tout en leur permettant de voir des extraits de messages qui les intéressent en passant le curseur sur les messages.
Dans ce tutoriel, nous vous montrerons comment activer ou désactiver l’extrait de billet de blog pendant que vous passez le curseur sur Divi. Pour ce faire, nous ajouterons des clips CSS personnalisés qui, lorsque vous passez le curseur, basculeront l’extrait de l’élément Post du module blog (jquery n’est pas nécessaire). Une fois le Code en place, le module blog peut être modélisé au besoin en utilisant les paramètres intégrés de Divi. Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier 
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà inscrit,
Personnaliser à l’étape suivante. Ajouter un CSS personnalisé avec un formulaire de code à ce stade, nous fournissons une grille de base pour les billets de blog et ajoutons une classe CSS personnalisée au formulaire de blog. Nous utiliserons ce sélecteur de classe CSS pour gérer ce module de blog spécifique et ajouter un effet on \/ off lorsque vous passez le curseur sur la partie post – Extract de l’élément post.
Pour ajouter un CSS, nous utiliserons un formulaire de code. Ajouter un nouveau formulaire de code sous le formulaire de blog.
Ajouter une transition au contenu du message
– Oui. Changez d’extrait de blog. Et \ u pb \ u post. Contenu de la publication
– transition webkit: tous les 500ms! Important
Transition: tous les 500 ms! Important
}
Rendre le contenu du message visible dans Visual Builder
Corps Et FB. Changez d’extrait de blog. Et \ u pb \ u post. Contenu de la publication
Visibilité: visible;
Opacité: 1;
Hauteur maximale: aucune;
}
Cacher le contenu du message
– Oui. Changez d’extrait de blog. Et \ u pb \ u post. Contenu de la publication
Visibilité: cachée;
Opacité: 0;
Hauteur maximale: 0px;
}
Afficher le contenu du message lorsque vous passez le curseur sur l’élément du message
– Oui. Changez d’extrait de blog. Et \ u pb \ u post: vol stationnaire. Contenu de la publication
Visibilité: visible;
Opacité: 1;
Hauteur maximale: 500px;
}
Définir la hauteur minimale de tous les articles
– Oui. Changez d’extrait de blog. Et \ \ u pb \ \ u column {
Hauteur minimale: 400px;
}
}