L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

 

Mes seuls sites sont zetuto.jimdo.com, netooby.com et netooby.jimdofree.com, le reste n'est qu'imposture.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi également sur Twitter.

[Jimdo] Créer une FAQ simple pour votre site web

Ce tutoriel devrait plaire à plus d'un, il s'agit de créer une foire aux questions pour son site Jimdo. Quand on clique sur une question, on voit la réponse.

Sommaire

Installation / Exemple / Ajouter des questions

Démonstration

  • Ce tutoriel est-il simple ?

    Oui, ce tutoriel est plutôt simple, vous n'avez pas besoin d'avoir des connaissances particulières, il suffit simplement de suivre ce tutoriel étape par étape ;)

  • Peut on ajouter des questions ?

    Vous pouvez rajouter autant de questions que vous le souhaitez.

  • Comment laisser un commentaire ?

    Vous pouvez laisser un commentaire ici.

  • J'ai une question, où dois-je la poser ?

    Vous pouvez poser des questions sur ce site, dans les commentaires ou sur le forum.

Installation

Tout d'abord, il faut insérer un code dans la partie "Modifer le head" qui se trouve dans "Paramètres" (dans le panneau d'administration Jimdo).

<style type="text/css">
/*<![CDATA[*/

  /* FAQ code http://zetuto.jimdo.com/ */

.faq ul {list-style:none;text-decoration:none!important;margin:0!important;padding:0!important;-webkit-padding-start:0!important;}
.faq li {padding:8px 0;border-bottom:1px solid #ccc;}
.faq li a:hover {text-decoration:none!important;}
/*]]>*/
</style>

Vous ne trouvez pas où insérer le code précédent ? Voilà la réponse en image :

Ensuite, il faut créer la FAQ. Pour cela collez le code suivant dans un nouvel élément "Widget/HTML" : 

<!-- les questions de la FAQ -->
    
    <div class="faq">
        <ul>
            <li>
                <a href="#question_1">Question 1 ?</a>
            </li>
    
            <li>
                <a href="#question_2">Question 2 ?</a>
            </li>
    
            <li>
                <a href="#question_3">Question 3 ?</a>
            </li>
    
            <li>
                <a href="#question_4">Question 4 ?</a>
            </li>
        </ul>
    </div>
    <br />
    <br />
    <!-- les réponses de la FAQ -->
    
    <div class="faq">
        <ul>
            <li>
                <h3 id="question_1" name="question_1">
                    Question 1 ?
                </h3>
                Réponse 1.
            </li>
    
            <li>
                <h3 id="question_2" name="question_2">
                   Question 2 ?
                </h3>
                Réponse 2.
            </li>
    
            <li>
                <h3 id="question_3" name="question_3">
                    Question 3 ?
                </h3>
                Réponse 3.
            </li>
    
            <li>
                <h3 id="question_4" name="question_4">
                    Question 4 ?
                </h3>
                Réponse 4.
            </li>
        </ul>
    </div>

Encore une fois, une image pour vous aider à trouver comment insérez le code précédent :

élément Widget/HTML
élément Widget/HTML

Comment ajouter des questions ?

Vous pouvez ajouter des questions et des réponses en continuant la FAQ de la même manière. Pour cela il faut ajouter deux codes par question supplémentaire. Tout d'abord, il faut ajouter une question (à placer après ou avant une des questions de la FAQ) :

<li>
<a href="#question_5">Question 5 ?</a>
</li>

Puis, il faut ajouter la réponse (à placer après une des réponses de la FAQ) :

<li>
<h3 id="question_5" name="question_5">
Question 5 ?
</h3>
Réponse 5.
</li>

Voici maintenant un exemple de FAQ prêt à l'emploi

<!-- les questions de la FAQ -->
    
    <div class="faq">
        <ul>
            <li>
                <a href="#question_1">Ce tutoriel
    est-il compatible avec un site non jimdo ?</a>
            </li>
    
            <li>
                <a href="#question_2">Je n'arrive pas
    à installer la FAQ sur mon site.</a>
            </li>
    
            <li>
                <a href="#question_3">Comment ajouter
    des qestions supplémentaires ?</a>
            </li>
    
            <li>
                <a href="#question_4">Peut on
    personnaliser cette FAQ ?</a>
            </li>

            <li>
                <a href="#question_5">Pourquoi
    avez-vous créé ce tutoriel ?</a>
            </li>
        </ul>
    </div>
    <br />
    <br />


    <!-- les réponses de la FAQ -->
    
    <div class="faq">
        <ul>
            <li>
                <h3 id="question_1" name="question_1">
                    Ce tutoriel est-il compatible avec un site non jimdo ?
                </h3>
                Oui, bien sûr. Ce tutoriel fonctionne avec n'importe qu'elle plateforme de création de site. Vous
    pouvez voir la version universelle de ce tuto ici.
            </li>
    
            <li>
                <h3 id="question_2" name="question_2">
                   Je n'arrive pas à installer la FAQ sur mon site.
                </h3>
                Vous pouvez laisser un commentaire sur le site en précisant votre problème.
            </li>
    
            <li>
                <h3 id="question_3" name="question_3">
                    Comment ajouter des qestions supplémentaires ?
                </h3>
                Ce tutoriel explique également comment ajouter des questions/réponses
    supplémentaires.
            </li>
    
            <li>
                <h3 id="question_4" name="question_4">
                    Peut on personnaliser cette FAQ ?
                </h3>
                Si vous avez des connaissances en CSS, vous pouvez facilement changer le style de cette FAQ. Un
    tutoriel sera certainement dédié au style de cette FAQ.
            </li>

           <li>
                <h3 id="question_5" name="question_5">
                    Pourquoi avez-vous créé ce tutoriel ?
                </h3>
                J'ai ajouté ce tutoriel car certains utilisateurs de Jimdo souhaitaient créer une foire aux
    qestions pour leur site Jimdo.
            </li>
        </ul>
    </div>

Ce qui donne cela :

Exemple de foire aux questions



  • Ce tutoriel est-il compatible avec un site non jimdo ?

    Oui, bien sûr. Ce tutoriel fonctionne avec n'importe qu'elle plateforme de création de site. Vous pouvez voir la version universelle de ce tuto ici.

  • Je n'arrive pas à installer la FAQ sur mon site.

    Vous pouvez laisser un commentaire sur le site en précisant votre problème.

  • Comment ajouter des qestions supplémentaires ?

    Ce tutoriel explique également comment ajouter des questions/réponses supplémentaires.

  • Peut on personnaliser cette FAQ ?

    Si vous avez des connaissances en CSS, vous pouvez facilement changer le style de cette FAQ. Un tutoriel sera certainement dédié au style de cette FAQ.

  • Pourquoi avez-vous créé ce tutoriel ?

    J'ai ajouté ce tutoriel car certains utilisateurs de Jimdo souhaitaient créer une foire aux qestions pour leur site Jimdo.
Attention : ne mettre qu'une seule FAQ par page !

Écrire commentaire

Commentaires: 3
  • #1

    lavoiedelamtc (jeudi, 09 avril 2015 15:38)

    Bonjour,


    J'ai essayé de mettre une FAQ sur mon site, j'ai recopié le Head, et le Widget Html avec mes questions.
    Mais je n'ai pas la présentation finale tel une FAQ , les questions s'affichent puis les réponses, alors que le but même est l'affichage unique des questions avec les réponses cachées.
    J'ai noté que lorsque j'ai co^pié le Head il dit :
    Une version du code a été enregistrée , les éléments invalides ont été supprimés.
    Si vous pouvez m'aider à finaliser correctement cette FAQ: je vous serais bien reconnaissante

  • #2

    ZeTuto (mercredi, 22 juillet 2015 10:59)

    @lavoiedelamtc, c'est une FAQ simple avec des liens ancrés, vous n'aurez donc pas le résultat que vous souhaitez.

  • #3

    kadija (lundi, 23 janvier 2017 04:32)

    merciiiii