2.2Widgets avancés : onglets, accordéon, carrousel
L'essentiel en 30 secondes
- Onglets et accordéon organisent beaucoup de contenu dans peu de place (cliquer pour révéler).
- Carrousel/diaporama fait défiler images ou témoignages — à utiliser avec parcimonie.
- Règle d'or : ces widgets cachent du contenu → ne jamais y mettre l'essentiel (le visiteur ne clique pas toujours).
Mini-cas filé — Nadia range la FAQ
La page « réalisations » du menuisier déborde de texte. Nadia range les questions fréquentes en accordéon (replié par défaut) et présente les types de meubles en onglets. Mais elle garde le message clé — « devis gratuit sous 48 h » — visible, hors accordéon : un visiteur pressé ne cliquera pas forcément.
Suite de 2.1 — organiser le contenu riche sans l'enfouir.
1. Onglets, accordéon, carrousel
Les Onglets (Tabs) organisent du contenu en sections cliquables (on bascule de l'une à l'autre). L'Accordéon/Bascule (Toggle) propose des sections repliables (cliquer sur un titre déplie la réponse) — parfait pour une FAQ. Le Carrousel/Diaporama fait défiler des éléments (images, témoignages, cartes).
Les boîtes d'icônes et témoignages complètent la panoplie pour présenter services et preuves sociales de façon lisible.
2. À bon escient
Point crucial : onglets, accordéons et carrousels cachent du contenu (invisible tant qu'on ne clique/défile pas). Donc : ne jamais y enfouir l'essentiel — un message clé, un prix, un bouton d'action doivent rester visibles. Un carrousel qui défile seul peut aussi faire rater une info.
Penser aussi l'accessibilité : navigation au clavier, contenu lisible. Nadia garde l'offre phare en clair et réserve onglets/accordéon au contenu secondaire.
🔎 Exemple concret — Organiser sans enfouir (cas Nadia)
Visible (hors widget) : « Devis gratuit sous 48 h » + bouton.
Accordéon : FAQ (replié par défaut).
Onglets : types de meubles (cuisine / dressing / escalier).
Carrousel : avis clients (parcimonie, pas d'auto-défilement agressif).
→ L'essentiel saute aux yeux, le reste est rangé.Résultat : page claire, pas surchargée.
Leçon : masquer le secondaire, jamais l'essentiel.
Vocabulaire de la section
- Onglets (Tabs)
- Organiser du contenu en onglets cliquables (basculer de l'un à l'autre).
Exemple simple : onglets « Cuisine / Dressing / Escalier ».
Ce que ce n'est pas : y mettre le bouton de devis (il doit rester visible).
Réflexe : onglets = contenu parallèle secondaire.
- Accordéon / Bascule
- Sections repliables : cliquer sur un titre déplie la réponse (idéal FAQ).
Exemple simple : FAQ du menuisier en accordéon replié.
Ce que ce n'est pas : cacher une info cruciale derrière un titre refermé.
Réflexe : accordéon = FAQ et détails, pas l'essentiel.
- Carrousel / Diaporama
- Faire défiler des éléments (images, témoignages, cartes).
Exemple simple : carrousel d'avis clients.
Ce que ce n'est pas : un carrousel auto qui fait rater l'info clé.
Réflexe : carrousel avec parcimonie, défilement maîtrisé.
- Bon escient
- Ne pas masquer l'essentiel : offre, prix, action restent visibles.
Exemple simple : « devis sous 48 h » hors accordéon, toujours visible.
Ce que ce n'est pas : enfouir l'offre phare dans un onglet.
Réflexe : l'important se voit sans clic.
- Accessibilité des widgets
- Navigation clavier et contenu accessible pour tous.
Exemple simple : accordéon utilisable au clavier.
Ce que ce n'est pas : un widget interactif inutilisable sans souris.
Réflexe : vérifier que tout s'ouvre aussi au clavier.
En pratique — Organiser du contenu riche
- Identifiez l'essentiel (offre, action) et gardez-le visible, hors widget.
- Rangez une FAQ en accordéon (replié par défaut).
- Présentez des catégories en onglets.
- Ajoutez un carrousel d'avis, sans auto-défilement agressif, et testez au clavier.
Script prêt à dire — expliquer le rangement au client (20 s)
« Pour que la page respire, j'ai rangé les questions fréquentes en accordéon et les types de meubles en onglets. Mais votre message clé — devis gratuit sous 48 h — reste toujours visible, car un visiteur pressé ne cliquera pas forcément partout. »
Rassurer : organiser ne veut pas dire cacher l'important.
Modèle copier-coller — où ranger quoi
ESSENTIEL (toujours visible) : _______________
FAQ / DÉTAILS → ACCORDÉON (replié) : _______________
CONTENUS PARALLÈLES → ONGLETS : _______________
GALERIE / AVIS → CARROUSEL (parcimonie) : _______________
AUTO-DÉFILEMENT CARROUSEL : désactivé / lent
TEST CLAVIER (accessibilité) : fait / à faireFAQ
Accordéon replié : chaque question se déplie à la demande.
Services variés
Onglets pour comparer des offres sans allonger la page.
Preuve sociale
Carrousel d'avis, mais garder 1-2 avis forts visibles aussi.
Mobile
Accordéon très pratique sur mobile (gagne de la hauteur), à tester au doigt.
✓ Bonnes pratiques
- Garder l'essentiel visible, hors widget.
- Réserver onglets/accordéon au secondaire.
- Tester l'accessibilité (clavier).
✗ Pièges fréquents
- Enfouir l'offre/action dans un onglet ou accordéon.
- Carrousel auto-défilant qui fait rater l'info.
- Oublier la navigation clavier.
Points clés à retenir
- Onglets/accordéon : ranger beaucoup dans peu de place.
- Carrousel : défilement, avec parcimonie.
- Ces widgets cachent du contenu.
- L'essentiel reste visible sans clic.
Défi 48h — appliquez demain
Transformez une FAQ en accordéon (replié) et des catégories en onglets, tout en gardant un message clé visible hors widget. Vérifiez que l'accordéon s'ouvre au clavier. 20 minutes.
- Je range le secondaire en onglets/accordéon.
- Je garde l'essentiel visible sans clic.
- Je vérifie l'accessibilité clavier.
Questions fréquentes
Puis-je mettre mon offre principale dans un accordéon ?
Non : les accordéons cachent le contenu tant qu'on ne clique pas. L'offre, le prix et le bouton d'action doivent rester visibles. Réservez l'accordéon aux FAQ et détails.
Les carrousels sont-ils déconseillés ?
Pas interdits, mais à doser : un carrousel auto-défilant peut faire rater une information et nuire à l'accessibilité. Gardez aussi 1-2 éléments forts visibles en dehors.
Ces widgets sont-ils accessibles ?
Ils peuvent l'être s'ils restent navigables au clavier et lisibles. Testez l'ouverture/fermeture sans souris, surtout pour une FAQ importante.
Nadia veut ranger beaucoup de contenu, mais son offre « devis sous 48 h » doit rester vue. Quelle approche ?