Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi

Déc 27, 2024 | Blog, Divi, Trucs & Astuces, Wordpress | 0 commentaires

TRUCS & ASTUCES

7. Texte à afficher/masquer dans Divi

Introduction

Pourquoi utiliser cette fonctionnalité ?

Lorsque le texte d’une section devient trop long, il est parfois préférable de le tronquer pour ne montrer que quelques lignes. Cela permet d’améliorer l’expérience utilisateur en gardant une mise en page épurée tout en permettant de dévoiler le texte complet au besoin grâce à un bouton « Lire plus » ou « Voir plus ».

Modules compatibles

Cette méthode fonctionne principalement avec les modules Texte et Blurb de Divi. Nous détaillons ici les étapes pour le module Texte, mais une section dédiée au module Blurb est disponible à la fin.

Prérequis:

Divi installé et configuré.
Module texte ou Blurb de Divi.
Connaissances basiques de CSS et JavaScript.

RÉSULTAT :

Table des Matières

Étape 1 : Ajouter une classe CSS au module texte
Étape 2 : Ajouter un script jQuery
Étape 3 : Ajouter le CSS
Étape 4 : Testez la fonctionnalité
Étape 5 : Pour le module Blurb
Conclusion

Quelles sont les étapes ?

Étape 1 : Ajouter une classe CSS personnalisée au module Texte

1. Ajouter une rangée et un module « Texte » de Divi

2. Ouvrez les paramètres de votre module Texte dans Divi.

3. Allez dans l’onglet Avancé.

4. Sous ID et classes CSS, ajoutez la classe suivante dans le champ « Classe CSS » :

   ld-toggle-text

Étape 2 : Ajouter un script jQuery

Dans cette même rangée ajouter un module « Code ».

Le script jQuery permet de gérer la logique d’affichage/dissimulation du texte.

Vous pouvez modifier le texte « Lire plus » / « Lire moins ». Par exemple: « Voir plus / « Voir moins ».

Copiez le code ci-dessous dans le module code (en entourant le code des balises <script> et </script>):

jQuery(document).ready(function() {
        var text_expand_text = "LIRE PLUS";
        var text_collapse_text = "LIRE MOINS";
        var text_expand_icon = "3";
        var text_collapse_icon = "2";

        jQuery(".ld-toggle-text").each(function() {
            jQuery(this).append('<div class="ld-text-expand-button"><span class="ld-text-collapse-button">' + text_expand_text + ' <span class="ld-text-toggle-icon">' + text_expand_icon + '</span></span></div>');
            jQuery(this).find(".ld-text-collapse-button").on("click", function() {
                jQuery(this).parent().siblings(".et_pb_text_inner").toggleClass("ld-text-toggle-expanded");
                if (jQuery(this).parent().siblings(".et_pb_text_inner").hasClass("ld-text-toggle-expanded")) {
                    jQuery(this).html(text_collapse_text + "<span class='ld-text-toggle-icon'>" + text_collapse_icon + "</span>");
                } else {
                    jQuery(this).html(text_expand_text + "<span class='ld-text-toggle-icon'>" + text_expand_icon + "</span>");
                }
            });
        });
    });

Étape 3 : Ajouter le CSS

Le CSS permet de styliser et de gérer les animations d’ouverture/fermeture du texte.

Dans le même module « Code », copiez le code suivant (en entourant le code des balises <style> et </style>:


/* Limiter la hauteur du texte */
.ld-toggle-text .et_pb_text_inner {
	max-height: 200px;
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}
/* Ajouter un dégradé au texte effondré */
.ld-toggle-text .et_pb_text_inner:after {
	content: "";
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(0deg, #fff 10%, transparent);
}
/* Styliser le lien d'expansion du texte */
.ld-toggle-text .ld-text-expand-button {
	padding: 0.5em;
	text-align: center;
	color: #ffffff!important;
  font-weight: 700;
  background-color: #f25252;
  width: 200px;
  margin: auto;
  margin-top: 30px;
}
/* Changer le curseur en pointeur lors du survol du lien d'expansion */
.ld-toggle-text .ld-text-expand-button span {
	cursor: pointer;
}
/* Définir la police pour l'icône de bascule */
.ld-toggle-text .ld-text-expand-button .ld-text-toggle-icon {
	font-family: ETMODULES, "sans-serif";
}
/* Définir la hauteur maximale et la transition de la bascule étendue */
.ld-toggle-text .ld-text-toggle-expanded {
	max-height: 2000px;
	transition: max-height 0.3s ease-in;
}
/* Masquer le dégradé lorsque la bascule est étendue */
.ld-toggle-text .ld-text-toggle-expanded.et_pb_text_inner:after {
	background: none;
  }

Étape 4 : Testez la fonctionnalité

1. Enregistrez vos modifications et actualisez votre page.

2. Le texte du module avec la classe ld-toggle-text devrait maintenant être limité à une hauteur de 200 pixels avec un bouton "Lire plus". Lorsque vous cliquez sur ce bouton, le texte complet s’affiche et le bouton change pour "Lire moins".

Étape 5 : Pour le module Blurb

1. Remplacez la classe CSS par :


ld-toggle-blurb

2. Utilisez le script jQuery suivant :

jQuery(document).ready(function() {
        var blurb_expand_text = "Lire plus";
        var blurb_collapse_text = "Lire moins";
        var blurb_expand_icon = "3";
        var blurb_collapse_icon = "2";
        jQuery(".new-ld-toggle-blurb").each(function() {
            jQuery(this).append('<div class="new-ld-blurb-expand-button"><span class="new-ld-blurb-collapse-button">' + blurb_expand_text + ' <span class="new-ld-blurb-toggle-icon">' + blurb_expand_icon + '</span></span></div>');
            jQuery(this).find(".new-ld-blurb-collapse-button").on("click", function() {
                jQuery(this).parent().siblings(".et_pb_blurb_content").find(".et_pb_blurb_description").toggleClass("new-ld-blurb-toggle-expanded");
                if (jQuery(this).parent().siblings(".et_pb_blurb_content").find(".et_pb_blurb_description").hasClass("new-ld-blurb-toggle-expanded")) {
                    jQuery(this).html(blurb_collapse_text + "<span class='new-ld-blurb-toggle-icon'>" + blurb_collapse_icon + "</span>");
                } else {
                    jQuery(this).html(blurb_expand_text + "<span class='new-ld-blurb-toggle-icon'>" + blurb_expand_icon + "</span>");
                }
            });
        });
    });

3. CSS pour le module Blurb :


/* Effondrer et définir la hauteur du texte à bascule */

.unique-ld-toggle-blurb .unique-et_pb_blurb_description {
    max-height: 200px;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}
/* Ajouter un dégradé au texte effondré */

.unique-ld-toggle-blurb .unique-et_pb_blurb_description:after {
    content: "";
    display: inline-block;
    position: absolute;
    pointer-events: none;
    height: 100px;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, #fff 10%, transparent);
}
/* Styliser le lien d'expansion du texte */

.unique-ld-toggle-blurb .unique-ld-blurb-expand-button {
    padding: 0.5em;
    text-align: center;
    color: #00d263!important;
    font-weight: bold;
}
/* Changer le curseur en pointeur lors du survol du lien d'expansion du texte */

.unique-ld-toggle-blurb .unique-ld-blurb-expand-button span {
    cursor: pointer;
}
/* Définir la police pour l'icône de bascule */

.unique-ld-toggle-blurb .unique-ld-blurb-expand-button .unique-ld-blurb-toggle-icon {
    font-family: ETMODULES, "sans-serif";
}
/* Définir la hauteur maximale et la transition de la bascule étendue */

.unique-ld-toggle-blurb .unique-ld-blurb-toggle-expanded {
    max-height: 2000px;
    transition: max-height 0.3s ease-in;
}
/* Masquer le dégradé lorsque la bascule est étendue */

.unique-ld-toggle-blurb .unique-ld-blurb-toggle-expanded.unique-et_pb_blurb_description:after {
    background: none;
}

Conclusion

Avec cette astuce, vous avez désormais tous les outils pour afficher et masquer facilement du texte dans Divi, que ce soit pour le module Texte ou Blurb. Cette fonctionnalité apporte non seulement une touche esthétique à vos pages, mais elle améliore également l'expérience utilisateur en rendant vos contenus plus accessibles et dynamiques.

N'hésitez pas à tester ces techniques pour adapter vos sections selon vos besoins spécifiques. Et si vous avez besoin d'un coup de main ou souhaitez échanger sur votre projet, nous sommes à votre disposition via LDDigitalWork. 🚀😊

Prêt à démarrer votre projet ou besoin d'aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

DEVIS Gratuit

NOUS CONTACTER

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Restez informé des dernières nouveautés et offres exclusives en vous abonnant à notre newsletter

0 commentaires

Soumettre un commentaire Annuler la réponse

← Créer une pagination pour vos rangées de modules Divi

FB

TW

In

Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi

TRUCS & ASTUCES

7. Texte à afficher/masquer dans Divi

Introduction

Pourquoi utiliser cette fonctionnalité ?

Modules compatibles

RÉSULTAT :

Table des Matières

Quelles sont les étapes ?

Étape 1 : Ajouter une classe CSS personnalisée au module Texte

Étape 2 : Ajouter un script jQuery

Étape 3 : Ajouter le CSS

Étape 4 : Testez la fonctionnalité

Étape 5 : Pour le module Blurb

Conclusion

Prêt à démarrer votre projet ou besoin d'aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

Articles similaires

Créer une pagination pour vos rangées de modules Divi

Comment créer un Mega Menu avec Divi

Comment réaliser un carousel de produits Woocommerce avec Divi et Slick.js

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Merci de vous être abonné!

Suivez-Nous

0 commentaires

Soumettre un commentaire Annuler la réponse

Message de succès

Inscrivez-vous à notre Newsletter

You have Successfully Subscribed!