TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter un widget FAQ dans Weebly ?

5

La FAQ et l’accordéon sont des types de contenu similaires ayant plusieurs sections dans un seul élément. Chaque section contient un titre et un corps pour ajouter des détails. La seule différence entre ces deux widgets est que la FAQ n’autorise que le contenu textuel tandis que l’accordéon autorise tout type de contenu. Nous avons expliqué les conteneurs à bascule en accordéon CSS, jQuery et Bootstrap dans nos articles précédents. Dans cet article, expliquons comment ajouter un widget FAQ dans le site Weebly.

Il existe 2 façons d’ajouter un widget FAQ dans Weebly.

  • Utilisation de l’application FAQ Weebly
  • Insérer un widget FAQ personnalisé

Les deux méthodes ont leurs propres avantages et inconvénients. Vous pouvez utiliser le widget FAQ pour ajouter une section Q&R sur une seule page ou créer une page FAQ dédiée.

1 application FAQ Weebly

Weebly propose une application FAQ gratuite via son centre d’applications.

  • Connectez-vous à votre compte Weebly et accédez à l’éditeur de site du site que vous souhaitez ajouter FAQ.
  • Accédez à l’onglet « Applications » pour accéder au centre d’applications.
  • Recherchez « FAQ » et trouvez l’application FAQ Weebly.
  • Cliquez sur l’application pour afficher les détails et cliquez sur le bouton « Ajouter » pour connecter l’application à votre site.

Application de FAQ Weebly par défaut

  • Confirmez l’invite en cliquant sur l’option « Connecter ».

Comment ajouter un widget FAQ dans Weebly ?

Ajouter l’application FAQ Weebly

  • Vous verrez un message de réussite comme ci-dessous, une fois l’application FAQ installée avec succès sur votre site.

Comment ajouter un widget FAQ dans Weebly ?

Ajouter installé avec succès

Maintenant, allez dans l’onglet "Créer" et faites défiler vers le bas pour voir l’application FAQ est disponible dans la section "Applications installées" dans la barre latérale gauche. Glissez-déposez l’élément pour insérer une FAQ sur votre page.

Comment ajouter un widget FAQ dans Weebly ?

Insérer une section FAQ dans Weebly

L’application ajoutera trois questions et réponses factices en tant que FAQ. Vous pouvez cliquer sur l’élément pour voir les options disponibles. Vous pouvez effectuer les opérations suivantes avec l’application Weebly FAQ par défaut :

  • Choisissez le nombre d’éléments à ajouter dans la section Q&R
  • Sélectionnez une disposition de style simple, boîte ou matériau
  • Définir les couleurs d’arrière-plan pour le titre et le contenu
  • Personnaliser les polices et les couleurs du texte

Malheureusement, l’application Weebly FAQ vous permet d’ajouter uniquement du contenu textuel pour les sections de titre et de réponse. Vous ne pouvez pas faire glisser d’autres éléments à l’intérieur de l’élément FAQ pour afficher une image ou une carte. Le widget FAQ terminé final affichera quelque chose comme ci-dessous.

Comment ajouter un widget FAQ dans Weebly ?

Exemple de FAQ Weebly

Il semble simple d’ajouter un widget FAQ, mais le plus gros problème est que vous ne pouvez pas faire glisser et réorganiser les questions. Cela rend cette application inutile à moins que vous n’ayez une question et des réponses fixes qui ne changeront jamais. Vous devez ajouter soigneusement les questions dans le même ordre dont vous avez besoin, sinon le seul moyen est de supprimer et de recommencer depuis le début.

2 Widget FAQ personnalisé pour Weebly

Tant que la fonction glisser-déposer n’est pas disponible dans l’application FAQ, il est logique de modifier le contenu hors ligne et de l’ajouter sur la page à l’aide de l’ élément de code intégré. Vous trouverez ci-dessous à quoi ressemblera le widget FAQ personnalisé, ce qui est bien meilleur que l’application FAQ de Weebly.

Comment ajouter un widget FAQ dans Weebly ?

Le widget personnalisé comporte trois parties: script, CSS et HTML.

2.1. Script pour le widget FAQ

Ajoutez le script suivant dans la section " Code de pied de page " de votre page Weebly. Vous pouvez l’ajouter sur une seule page sous « Pages > Sélectionnez votre page > Paramètres de référencement > Code de pied de page ».

<script> jQuery(function() { var $ = jQuery; var faqTitle = $( ".faq h3" ); var answerFaq = $(".response"); faqTitle.click(function(e) { e.preventDefault(); $(this).toggleClass('titleopen').next().slideToggle().toggleClass('open-close'); }); $( "#showall" ).click(function(e) { e.preventDefault(); faqTitle.addClass('titleopen'); answerFaq.slideDown().addClass('open-close'); }); $( "#hideall" ).click(function(e) { e.preventDefault(); faqTitle.removeClass('titleopen'); answerFaq.slideUp().removeClass('open-close'); }); }); </script>

2.2. CSS pour le widget FAQ

Ajoutez le CSS ci-dessous dans la section «Pages > Sélectionnez votre page > Paramètres de référencement > Code d’en-tête» de votre page Weebly.

<style> .faq_container{ background: #f5f5f5; padding: 20px; border: 1px solid #e5e5e5; border-radius: 10px; } #show_hide_wrap{ text-align: right; } #show_hide_wrap p{ font-size: 16px; } #showall, #hideall{ display: inline-block; background: #fff; border: 2px solid rgba(86, 77, 77, 0.18); padding: 5px 5px; line-height: 1.5; margin-bottom: 20px; font-weight: bold !important; height: 25px; } #showall{ margin-right: 20px; } #showall:hover, #hideall:hover{ background: #707070; color: #fff; } .response{ display: none; } ul.faq, ul.faq li{ list-style: none !important; } .faq h3{ background: #fff; padding: 10px 10px; border: 1px solid #e5e5e5; } .faq h3:hover, .faq h3.titleopen{ background: #808080; color: #fff; } .faq h3:after{ content: '+'; float: right } .faq h3.titleopen:after{ content: '-' } .faq_qtn{ cursor: pointer; -webkit-transition: color .2s ease, background .2s ease; -moz-transition: color .2s ease, background .2s ease; -o-transition: color .2s ease, background .2s ease; transition: color .2s ease, background .2s ease; } .para { padding-top: 20px; padding-right: 30px; font-size: 18px; text-align: justify; line-height: 30px; padding-left: 30px; } </style>

2.3. HTML pour le widget FAQ

Ajoutez le code HTML ci-dessous à l’intérieur de l’élément de code d’intégration sur la page. L’exemple de code HTML comporte trois questions et réponses, n’oubliez pas de remplacer le contenu factice par le vôtre. Vous pouvez ajouter d’autres questions et réponses en ajoutant simplement des

Mots clés.

<div class="faq_container"> <div id="show_hide_wrap"> <div id="showall" class="faq_qtn">SHOW ALL</div> <div id="hideall" class="faq_qtn">HIDE ALL</div> </div> <ul class="faq"> <!-- This is the first Q&A --> <li> <h3 class="faq_qtn">This is a first question of FAQ Module</h3> <div class="response"> <p class="para">Here is the answer to the first question.</p> </div> </li> <!-- This is the second Q&A --> <li> <h3 class="faq_qtn">Here goes your second question of FAQ Module</h3> <div class="response"> <p class="para">Here is the answer to the second question.</p> </div> </li> <!-- This is the third Q&A --> <li> <h3 class="faq_qtn">Here is a third question of FAQ Module and you can add as many as questions</h3> <div class="response"> <p class="para">Here is the answer to the third question.</p> </div> </li> <!-- Add additional questions --> </ul> </div>

Publiez votre site et consultez la FAQ en direct avec les boutons « Tout afficher » et « Tout masquer ». Vous pouvez personnaliser la FAQ hors ligne en réorganisant les questions, en modifiant les couleurs et en ajustant la taille de la police.

Remarque : le code FAQ peut entrer en conflit avec d’autres codes sur votre site. Par conséquent, nous vous recommandons d’ajouter le code au niveau de la page au lieu du niveau du site dans la section « Paramètres > SEO > Code d’en-tête/pied de page ». De plus, utilisez une FAQ sur une page, sinon vous devrez peut-être modifier les noms des classes CSS pour éviter de gâcher les styles.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails