Suite à une question qui m’a été posée, je me suis rendu compte que l’on ne pouvait pas créer un bloc de texte sur WordPress (ou Elementor), et mettre un bouton « lire la suite ».
C’est quoi le but, me direz-vous, et bien d’avoir un grand volume de texte, accessible uniquement lorsque l’utilisateur clique sur le bouton « lire la suite ».
Ce que nous allons créer :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor fringilla lorem, non egestas risus venenatis et. Ut in fringilla felis. In vulputate arcu lacus, sit amet luctus lorem pharetra ac. Mauris quis ex mauris. Curabitur pellentesque nisl id viverra tincidunt. Cras mollis, libero non iaculis consectetur, erat lacus gravida eros, ut porttitor orci velit id dui. Curabitur pellentesque arcu nunc, eget venenatis mi tincidunt accumsan. Curabitur suscipit ut nunc ut bibendum. Donec ac blandit ante. Nulla sollicitudin interdum viverra. Nunc nec nibh sed augue condimentum hendrerit. Maecenas pellentesque velit lorem. Sed ex dolor, condimentum ac ornare sed, mattis eu arcu. Morbi velit leo, varius ac sollicitudin a, scelerisque ac massa.
Nam accumsan sollicitudin tempor. Quisque tincidunt ligula in suscipit congue. Aenean id porta dolor. Nam gravida, augue in accumsan lobortis, magna quam hendrerit dui, ac laoreet libero lorem a sem. Morbi scelerisque ullamcorper condimentum. Etiam maximus, lectus vitae cursus mattis, ipsum tellus egestas magna, nec pulvinar nisl justo eget justo. Nunc blandit interdum massa sit amet gravida. Aenean sagittis diam sed ultrices malesuada. Nullam ut sodales felis, sed suscipit elit. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Donec ut mauris fermentum tellus bibendum cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a leo sodales, suscipit elit non, pellentesque eros. Donec semper eleifend facilisis. Mauris volutpat massa eget nisi rutrum imperdiet a ac ligula. Nam tristique, est nec tempor facilisis, sapien felis maximus sem, lobortis vulputate lacus lacus at orci. Donec sit amet velit imperdiet, feugiat lacus auctor, tristique purus. Mauris venenatis urna sit amet semper tincidunt. Nunc ornare mi odio, a scelerisque ligula lacinia nec. Curabitur a lorem sodales, faucibus nisi sit amet, lacinia quam. Praesent vitae odio mi. Morbi vulputate odio rhoncus bibendum accumsan. Duis suscipit leo diam, at lacinia massa fermentum ut.
Suspendisse mattis sapien sed eros posuere, pharetra condimentum enim sollicitudin. Curabitur congue euismod felis, vitae porttitor ligula tempor a. Curabitur consequat egestas luctus. Ut ut diam posuere, cursus nisl non, tempus turpis. Praesent luctus erat in velit ullamcorper rhoncus. Proin libero nulla, aliquet non nulla pretium, congue iaculis eros. Quisque aliquam semper ipsum sit amet condimentum. Proin id massa dapibus, dapibus eros et, porttitor magna. Donec convallis lobortis ligula sit amet rhoncus.
Fusce ultricies mattis iaculis. Nunc semper metus id libero blandit condimentum. Nam congue odio urna, eget accumsan metus scelerisque id. Etiam sit amet est fermentum, mollis metus sit amet, auctor sem. Donec vitae venenatis lacus. Aenean a erat semper, maximus lacus id, tempor dolor. Phasellus imperdiet erat quis nunc sagittis mollis et ut velit.
Préparons le terrain
Avant de commencer, je vai créer une page vide avec un énorme bloc de texte, et un bouton « lire la suite » :

Vous voyez l’idée ? Si je veux juste avoir un échantillon du texte pour éviter de prendre toute la page, et masquer le reste, ça serait chouette !
Le code à insérer
Vous pouvez insérer ce code via des modules, comme « Insert Script In Headers And Footers« , ou via certains modules Elementor comme « Essential addons for Elementor » vous pourrez insérer ce code sur la page en question :

Le code est configuré pour masque tous les paragraphes après le deuxième. Vous pouvez ajuster ce paramètre en augmentant ou réduisant la partie « n+2′ de la première ligne du script.
Ajouter les bonnes classes
Pour que le stratagème fonctionne, nous allons utiliser les classe CSS.
Pour faire court, cela nous permet de sélectionner les éléments acteurs de notre petit système. On va déterminer qui va déclencher le code, et qui va recevoir les instructions.
Pour cela, nous allons en utiliser deux :
- text-to-cut
- text-to-cut__read-more
Et les ajouter comme suit :
Le texte à réduire
Sélectionnez votre texte, celui que vous voulez réduire puis agrandir lorsque l’on va cliquer sur le bouton. Rendez-vous dans l’onglet « Avancé » puis « Classes CSS » et collez la classe « text-to-cut » dans le champs « Classes CSS » comme ça :

Attention à ne pas confondre « ID de CSS » et « Classes CSS », qui ne sont pas pareil !
Le bouton qui va afficher le texte
Rendez-vous mintenant sur le bouton qui déclencher la magie et afficher tout ce texte caché, puis même procédure : onglet « Avancé » puis « Classes CSS » et collez la classe « text-to-cut__read-more » comme ici :

Laisser la magie opérer
Si vous avez tout suivit, quand vous cliquez sur le bouton, le texte va apparaitre, et le bouton disparaitre :

Bonus : refermer le texte
En y réfléchissant, pourquoi masquer le bouton ? Pourquoi ne pas prévoir de refermer notre texte après qu’il soit ouvert ?
Nous allons juste modifier un peu le code pour garder le bouton, mais changer le contenu.
Bonus n°2 : mais si j'ai plusieurs textes ?
Là ça se corse, mais pas impossible !
Le code est plus imposant, mais pas de soucis, tant que ça fonctionne :
FAQ
Quand je clique, je remonte en haut de la page
C’est dû au « # » dans le lin du bouton. Le « # » va justement remonter la page, et pour éviter le souci, mettez juste un / à la fin, ce qui donne « #/ ».