Je suis sûr que vous avez déjà vu cet effet à la mode sur de plus en plus de sites d’actualités ou de sport : un texte tronqué, un petit effet dégradé et un bouton en-dessous pour afficher le reste du contenu.
C’est un outil très pratique aussi bien pour afficher un maximum de contenu à vos visiteurs ( articles relatifs, pubs…), ne leur afficher que s’ils désirent le lire ou encore pour améliorer/ne pas surcharger le design de votre site.
Il est rapide et simple à mettre en place et vous demandera 4 éléments différents :
- Un module Texte
- Un module Bouton
- Quelques lignes de CSS
- Quelques lignes de jQuery
Le module Texte
Nous allons commencer par ajouter un module Texte tout à fait standard via le Visual Builder de Divi pour y insérer notre contenu.
La seule chose importante à faire ici est d’assigner la classe CSS personnalisée texte-cache à notre module:
Le module Bouton
Nous ajoutons ensuite un module Bouton à la suite de notre module Texte.
Vous pouvez le styliser pour qu’il s’intègre au design de votre site, mais sachez que toutes les options de liens ou libellé ne vous seront d’aucune utilité car nous allons les surcharger via le jQuery un peu plus tard.
Comme précédemment, nous allons avoir besoin de lui ajouter une classe CSS personnalisée : bouton-ouverture
Un peu plus bas dans l’onglet Avancé du module Bouton, ajoutez la règle CSS suivante dans Personnaliser CSS -> Élément principal :
Dans la rubrique suivante, nous allons supprimer l’attribut href de notre bouton, cette règle CSS permet donc de retrouver un curseur en forme de flèche lors du survol du bouton.
Le code jQuery personnalisé
On ajoute maintenant un peu de code jQuery pour manipuler les éléments.
Concernant l’endroit ou le mettre, tout dépend si vous comptez utiliser ce type de bouton sur une seule page ou à différents endroits.
Si vous l’utilisez en globalité sur votre site, copiez-collez le dans Divi -> Options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog
Si vous ne l’utilisez que sur une seule page, préférez plutôt un module Code pour y insérer le code afin qu’il ne soit pas chargé partout inutilement.
Si vous souhaitez en savoir plus sur l’utilisation de jQuery dans Divi, je vous invite à lire notre article Comment ajouter du code jQuery dans Divi.
Le code à copier-coller est le suivant :
Quelques explications sur ce code :
- On commence, grâce à la fonction removeAttr() par supprimer le lien de notre module Bouton (c’est-à-dire l’attribut href=”#”).
Si vous le laissez alors vous serez redirigé en haut de page à chaque clic. De plus, nous n’avons pas besoin qu’il soit lié à quoi que ce soit, nous nous en servons simplement pour tracker le clic de notre visiteur.
Attention à bien cibler ce bouton en particulier, via la classe bouton-ouverture car sinon plus aucun de vos liens ne sera fonctionnel ! 😉 - La fonction toggleClass() ajoute la classe CSS ouvert à l’élément ayant la classe CSS texte-cache au clic sur l’élément ayant la classe CSS bouton-ouverture. Cette fonction jQuery retirera également la classe CSS si elle est déjà présente.
Pour faire simple, à chaque clic sur le bouton, la classe CSS ouvert sera soit ajoutée, soit supprimée dynamiquement à notre module Texte. - La dernière partie, commençant par if , permet de modifier le libellé du bouton.
Il s’agit d’une condition : si notre module Texte a la classe CSS ouvert, alors il est déroulé et nous affichons le libellé LIRE MOINS sur notre bouton. S’il n’a pas cette classe CSS alors c’est qu’il est fermé et nous affichons LIRE PLUS pour montrer à notre visiteur qu’il y a du contenu supplémentaire à parcourir.
Si vous vous demandez pourquoi nous ajoutons une classe CSS au clic, vous allez le comprendre dans la partie concernant…
Le code CSS personnalisé
Le code CSS personnalisé va nous permettre de définir différentes choses :
- La hauteur du texte visible par défaut
- La couleur du dégradé masquant le texte
- La hauteur du texte déroulé après le clic sur le bouton
Voici le code à ajouter dans le fichier style.css de votre thème enfant, ou dans l’onglet Apparence -> Personnaliser -> CSS additionnel.
Pour faciliter la lecture du code, je n’ai pas ajouté les versions préfixées pour les propriétés transition et gradient, qui permette la compatibilité entre les différents navigateurs.
Je vous invite donc à les générer en utilisant l’outil en ligne Autoprefixer.
Les valeurs à changer pour votre intégration :
- max-height: 100px : cette valeur correspond à la hauteur du texte lorsque celui-ci est fermé. Vous pouvez l’augmenter ou la diminuer suivant le rendu que vous souhaitez.
- transition : max-height 1s ease : cela correspond au temps de transition entre l’état ouvert et fermé. Vous pouvez éditer le 1s pour y mettre un temps différent si vous souhaitez que l’effet soit plus lent ou plus rapide.
Si vous voulez en apprendre plus sur les transitions CSS, la doc de Mozilla est très complète. - background: linear-gradient(…) : cette ligne permet de définir le dégradé de couleur donnant l’effet de flou lorsque le texte est fermé. Ici on passe par exemple d’un blanc totalement transparent à un blanc opaque. Vous pouvez remplacer les deux couleurs par celles qui s’intégreront le mieux à vos sites.
Voila, tout est en place pour que notre effet soit fonctionnel.
Voici le résultat final :
Conclusion
Un effet agréable pour la navigation de vos visiteurs et qui vous permettra d’intégrer de longs contenus de manière élégante.
Allez-vous l’utiliser sur vos sites ?
N’hésitez pas en tout cas à nous partager vos utilisations de ce tutoriel dans les commentaires !
Top, merci pour ce tutos, je pense l’utiliser d’ici peu 🙂
Le tuto est valide pour un seul bloc texte et bouton sur la page.
Quid si on veut gérer plusieurs blocs texte sur la même page ?
Hello, il te suffit de changer l’identifiant du bloc de texte et du bouton 😉
bonjour Julien
merci pour ce tutot
par contre ça ne fonctionne pas sur safari, une idée ?
(ok sur chrome et mozilla)
merci
Bonjour, je pense que c’est parce que tu n’as pas préfixé les propriétés CSS pour qu’elles soient compatibles avec tous les navigateurs. Je ne l’ai pas fait dans l’article pour alléger le code mais il faut le faire ensuite 😉
Ok merci Julien pour ta rapide réponse !
Et as tu un billet sur ” les propriétés CSS pour qu’elles soient compatibles avec tous les navigateurs”.
Thanks
Bonjour Valérie, on a mis un lien dans l’article vers un outil qui préfixe automatiquement le code pour qu’il soit compatible: https://autoprefixer.github.io/
Bonne journée
Bonjour et merci pour ce tuto. ça marche super bien sur ordinateur mais sur smartphone (application google chrome) le click ne semble pas fonctionner. Le block ne se déroule pas et n’affiche pas le texte. Comment faire ? Merci à vous.
Bonjour,
j’ai testé et ça fonctionne bien.
Essaye d’ajouter les prefix pour tous les navigateurs comme mentionné dans l’article.
Bonjour
Merci pour ce super Tuto.
J’ai bien réussi à le faire en ajoutant le css pour l’ensemble du site.
Le hic c’est que ça me génère des erreurs d’affichages sur certains effets de mon site.
Du coup je me suis dis que j’allais le mettre pour juste la page dont j’ai besoin.
Et là je bug je ne comprends pas ou/comment mettre le css qui donne du coup les infos de réductions du textes
Merci beaucoup en tout cas pour votre site qui est une mine d’or
Bonjour Chantal, quelles sont les erreurs d’affichage que tu as eu s’il te plait ?
Bonjour,
J’ai appliqué votretuto et ça fonctionne parfaitement. Le sel problème c’est que je copie les modules pour une même page.
J’ai lu plus haut qu’il faut changer les identifiants du bloc de texte et dubouton.
Comment fait-on
Merci
Mon site est en local
Bonjour Julien,
Tout d’abord merci pour vos articles de qualité.
Je souhaite utiliser votre code dans un module Divi slider (ou diapo) afin de “dérouler” du texte dans ce même module.
Divi propose d’intégrer un bouton dans le slider mais je ne trouve pas de moyen d’attribuer une classe CSS à ce dernier. Ni au texte d’ailleurs. Est-il possible de lui attribuer une classe dans “personnaliser CSS” si oui quelle serait la syntaxe pour cela svp ?
Merci d’avance.
Excellente journée à vous !
This is not working. On tutorial you use English css class, but on JS and CSS are french. Also, button not working at all.
Bonjour,
J’ai utilisé votre tuto qui fonctionne très bien.
J’ai 2 modules sur la page et lorsque j’en ouvre un, cela ouvre l’autre également.
Comment puis-je remédier à ça.
Merci d’avance
Tuto au top qui fonctionne très bien. Par contre j’ai 4 cases différentes sur lequel lorsqu’on on clique sur un des boutons, toutes les cases se déroulent. Y ‘a t’il une alternative ? Merci
Bonjour,
Je viens de découvrir une extension toute simple.
https://wordpress.org/plugins/wp-showhide/
Pas de CSS rien à intégrer et fonctionne parfaitement.
je n arrive pas a le faire est il possible de faire un tuto video ?
Bonjour Messieurs,
Encore un excellent tuto
je voulais savoir si c’était jouable d’ajouter une ancre à la fermeture du bouton pour remonter en haut du texte à la fermeture ?
Merci
Tip top merci !
Simple, efficace, parfait ! Merci 🙂
Merci pour ce tuto qui fonctionne parfaitement!