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.

unfold bouton Divi

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:

Ajouter une classe CSS dans un module Texte de Divi

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

Ajouter une classe CSS dans un module Bouton de Divi

Un peu plus bas dans l’onglet Avancé du module Bouton, ajoutez la règle CSS suivante dans Personnaliser CSS -> Élément principal :

CSS

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 :

JS

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.

CSS

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 :

unfold bouton Divi

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 !