Comment afficher et masquer le texte dans les publications WordPress avec l'effet bascule
Voulez-vous afficher et masquer du texte dans vos publications WordPress avec l'effet bascule ?
Parfois, vous souhaiterez peut-être masquer le contenu jusqu'à ce que le visiteur clique sur un lien spécifique. Ceci est particulièrement utile lorsque vous créez une FAQ ou que vous souhaitez inclure beaucoup de texte sur une seule page sans surcharger le lecteur.
Dans cet article, nous allons vous montrer comment masquer le texte dans les publications WordPress avec l'effet bascule.
Pourquoi afficher et masquer le texte dans les publications WordPress ?
De nombreux sites Web masquent le texte par défaut, généralement en affichant un teaser, puis en incluant un lien « Lire la suite » ou « Voir la suite ». Les visiteurs peuvent obtenir plus d’informations en cliquant sur ce lien.
Ceci est utile si vous avez besoin d’ajouter beaucoup d’informations à une page mais que vous craignez qu’un solide mur de texte ne submerge les visiteurs.
Les FAQ en sont un excellent exemple, car la plupart des visiteurs ne voudront obtenir la réponse qu’à une seule question.
Si vous affichez toutes les réponses dans leur intégralité, les visiteurs risquent d’avoir du mal à trouver les informations dont ils ont besoin.
En masquant le texte avec l'effet bascule, les visiteurs peuvent analyser de nombreuses publications, fonctionnalités, avantages ou autres informations, puis choisir l'élément sur lequel ils souhaitent en savoir plus.
Cela étant dit, voyons comment afficher et masquer du texte dans WordPress avec l’effet bascule. Utilisez simplement les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :
Méthode 1 : Comment afficher et masquer du texte dans WordPress à l'aide d'un shortcode (rapide et facile)
Le moyen le plus rapide et le plus simple d’ajouter un lien « Lire la suite » à n’importe quelle page ou publication consiste à utiliser Lire la suite sans actualisation. Ce plugin gratuit vous permet de personnaliser le lien « Lire la suite », puis de l'ajouter n'importe où sur votre site Web à l'aide d'un shortcode.
La première chose que vous devez faire est d’installer et d’activer le plugin Read More Without Refresh. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.
Lors de l'activation, cliquez sur « Paramètres RMWP » pour configurer les paramètres du plugin.
Pour commencer, vous pouvez modifier le texte utilisé dans les liens « Lire plus/Lire moins » en tapant dans les deux champs de texte.
Par exemple, si vous créez une FAQ, vous souhaiterez peut-être utiliser quelque chose comme « Afficher la réponse/Masquer la réponse » à la place.
Sur cet écran, vous pouvez également modifier la couleur du texte, la couleur de l'arrière-plan, etc. Cela peut vous aider à créer des liens parfaitement adaptés à votre thème WordPress.
Vous pouvez également modifier l’épaisseur de la police, ajouter une bordure et modifier le remplissage.
Lorsque vous avez terminé sur cette page, assurez-vous de cliquer sur le bouton « Enregistrer les modifications » même si vous n'avez apporté aucune modification. Ceci est important car si vous ne cliquez pas sur ce bouton, le plugin ne fonctionnera pas comme prévu.
Cela fait, vous pouvez ajouter un effet bascule à n’importe quelle page ou publication. Vous devrez trouver le texte que vous souhaitez masquer, puis l'envelopper dans un shortcode.
Pour commencer, cliquez sur l'icône « + » pour ajouter un bloc devant le texte que vous souhaitez masquer.
Ensuite, commencez à taper « Shortcode » et sélectionnez le bon bloc lorsqu’il apparaît.
Dans la zone Shortcode, ajoutez le shortcode suivant : [read more]
Cela fait, vous devrez ajouter un bloc Shortcode après le texte que vous souhaitez masquer.
A la fin du texte, cliquez simplement sur l'icône '+' et créez un autre bloc Shortcode en suivant le même processus décrit ci-dessus.
Dans ce bloc, ajoutez le code suivant : [/read]
Vous pouvez maintenant soit cliquer sur « Mettre à jour » ou « Publier » pour mettre le texte en ligne.
Maintenant, visitez votre blog WordPress et vous verrez que le texte entre les blocs de shortcode est masqué par défaut.
Pour afficher le texte, cliquez simplement sur « Lire la suite » ou un lien similaire.
Méthode 2 : Comment afficher et masquer du texte dans WordPress à l'aide de SeedProd (idéal pour les FAQ)
Il existe de nombreuses façons différentes d’utiliser le texte masqué sur votre site WordPress. Par exemple, si vous disposez d'un site de critiques, vous pouvez utiliser cette astuce pour masquer les spoilers de films.
Cependant, les FAQ sont l’une des utilisations les plus courantes. Si vous souhaitez créer une section de questions et réponses d’aspect professionnel avec une belle mise en page, nous vous recommandons d’utiliser plutôt un plugin de création de pages.
SeedProd est le meilleur constructeur de pages du marché et vous permet de créer toutes sortes de pages de destination personnalisées pour votre site Web WordPress. Il comprend plus de 180 modèles de sites prêts à l'emploi, notamment des modèles que vous pouvez utiliser pour promouvoir vos produits, services, webinaires, etc.
Toutes ces conceptions sont l’endroit idéal pour ajouter une section FAQ.
Après avoir sélectionné un modèle, SeedProd propose même différentes sections FAQ prêtes à l'emploi que vous pouvez ajouter à la conception de votre page en un seul clic.
Beaucoup de ces sections de FAQ sont dotées d'un effet de basculement de texte masqué/affiché intégré.
Ils sont également entièrement personnalisables, vous pouvez donc facilement ajouter votre propre texte de questions et de réponses.
Pour plus d'informations sur l'utilisation de SeedProd, veuillez consulter notre guide sur la création d'une page personnalisée dans WordPress.
Après avoir créé une page, il est facile d’ajouter une section FAQ prête à l’emploi. Dans l’éditeur de page SeedProd, cliquez simplement sur l’onglet « Sections » dans le menu de gauche.
Vous pouvez maintenant sélectionner « FAQ » pour voir toutes les sections de questions et réponses de SeedProd. Pour prévisualiser un dessin, passez votre souris dessus puis cliquez sur la petite loupe.
Lorsque vous trouvez un design que vous souhaitez utiliser, cliquez sur « Choisir cette section ».
SeedProd ira ensuite de l'avant et ajoutera la section au bas de votre page.
Vous pouvez déplacer la section FAQ vers un nouvel emplacement par glisser-déposer.
Après cela, vous êtes prêt à ajouter votre propre texte en cliquant pour sélectionner le bloc accordéon FAQ. Le menu de gauche sera désormais mis à jour pour afficher une liste de toutes les questions.
Pour modifier une paire de questions et réponses, cliquez simplement sur cette question dans le menu de gauche.
Cela ouvre deux petits éditeurs de texte dans lesquels vous pouvez ajouter vos propres questions et réponses. Vous pouvez également utiliser toutes les options de mise en forme standard, comme l'ajout d'un lien ou la mise en gras du texte.
Répétez simplement ces étapes pour chaque question et réponse dans la section FAQ.
Si vous souhaitez ajouter d'autres questions, cliquez simplement sur le bouton « Ajouter un nouvel élément ».
Pour supprimer une paire de questions et réponses, passez simplement votre souris sur cette question dans le menu de gauche.
Ensuite, cliquez sur l'icône de la poubelle lorsqu'elle apparaît.
Lorsque vous êtes satisfait des informations que vous avez saisies, vous pouvez modifier l'apparence du texte à l'aide des curseurs « Taille de la police » et « Espace entre ».
Il existe également une section « Icône » qui définit la petite image qui apparaît à côté de chaque question dans la FAQ.
Si vous souhaitez personnaliser cette image, cliquez simplement pour développer la section « Icône ».
Ici, vous verrez les paramètres permettant de modifier l’alignement et la couleur de l’icône. Sachez simplement que « Icône fermé » est l'image que vous voyez par défaut lorsque la question est réduite.
« Icône ouverte » est l'image que vous voyez lorsque la question est développée.
Si vous souhaitez utiliser une icône complètement différente à la place, passez votre souris sur l'aperçu « Icône fermée » ou « Icône ouverte ».
Ensuite, cliquez sur la vignette « Bibliothèque d’icônes ».
Cela ouvre la bibliothèque intégrée de SeedProd, où vous pouvez choisir parmi plus de 1 400 polices d'icônes Font Awesome.
Vous pouvez personnaliser davantage l'apparence des sections FAQ en sélectionnant l'onglet « Avancé ». Ici, vous pouvez modifier la police, ajouter une marge et un espacement, et même ajouter des animations CSS pour que les FAQ se démarquent vraiment.
Cela fait, vous pouvez continuer à ajouter de nouveaux blocs et à personnaliser le contenu de votre page SeedProd.
Lorsque vous êtes satisfait de son apparence, cliquez simplement sur la flèche à côté du bouton « Enregistrer », puis sélectionnez « Publier ».
Désormais, si vous visitez votre site Web, vous verrez la conception de la page et la section FAQ en direct.
Nous espérons que cet article vous a aidé à apprendre comment afficher et masquer le texte dans les publications WordPress avec l'effet bascule. Vous pouvez également consulter notre liste des meilleurs logiciels de chat en direct pour les petites entreprises et notre tutoriel sur la création d’un formulaire de contact dans WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.