Créer un bouton « Lire plus » ou « Lire la suite sur Divi

Pourquoi masquer un texte trop long.

Sur Internet, tous les mots comptent. Rien ne doit être laissé par hasard. De fait, chaque page Web doit avoir une certaine quantité de mots pour être référencée sur les moteurs de recherche de façon naturelle. C’est une base importante du référencement naturel, soit le SEO.

Le piège est d’écrire un texte trop court qui ne sera pas repéré par les moteurs de recherches, ou d’écrire un contenu trop long, qui n’incitera pas à la lecture et qui alourdira le visuel de votre site Web.

L’idéal est de conserver un texte long et d’en masquer une partie et le dévoiler dans son entier avec un bouton « Lire plus » ou « Lire la suite ».

Le tuto en vidéo

Tutoriel écrit

Nous allons commencer par ajouter un « module Texte » dans le Visual Builder de Divi pour y insérer notre contenu.

Une fois le texte écrit, nous allons nous rendre sur le troisième onglet « avancé » – « ID et Classe CSS » et écrire « texte-cache » dans « Classe CSS« 

On ajoute ensuite un « Module Bouton« 

Nous allons ensuite styliser notre « Module Bouton« 

Dans l’onglet « Style« , nous allons réduire le texte, mettre un fond transparent et retirer les bordures.

Puis, dans le troisième onglet « Avancé« -« ID et classe CSS« -« Class CSS » écrire « bouton-ouverture« .

Toujours dans le même onglet, juste en dessous dans « personnaliser CSS » on va écrire la ligne de code suivante :

cursor:pointer;

On appelle ensuite un module « Code » pour y placer notre code jQuéry.

C’est à l’intérieur de ce code que vous pourrez changer le texte du bouton.

Par défaut, il est écrit « Lire plus » et « Lire moins » à vous de choisir le texte qui vous convient

CODE JQUÉRY

<script>

jQuery(document).ready(function ($) {

  $(« a.bouton-ouverture »).removeAttr(« href »);  

  $(‘.bouton-ouverture’).on(‘click’, function(){ 

  $(‘.texte-cache’).toggleClass(‘ouvert’); 

  if ($(‘.texte-cache’).hasClass(‘ouvert’)) { 

    $(‘.bouton-ouverture’).html(‘Lire moins’); 

  } else {

    $(‘.bouton-ouverture’).html(‘Lire plus’); 

  }

});

});

</script>

Vous pouvez maintenant enregistrer votre page et la quitter.

Ensuite, nous allons nous rendre dans notre Dashboard – Divi – Option du thème et ajouter un code CSS dans « personnaliser CSS« 

CODE CSS

.texte-cache { 

  position: relative;

  max-height: 100px; 

  overflow: hidden; 

  transition: max-height 1s ease; 

}

.texte-cache.ouvert {

    max-height: 100vh; 

  }

.texte-cache:not(.ouvert)::after {

  content:  »;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));}

Sauvegardez tous les paramètres et le tour est joué.