2.2Widgets avancés : onglets, accordéon, carrousel, icônes
Au-delà des widgets de base, Elementor propose des WIDGETS plus riches pour un contenu interactif et structuré (certains en Free, d'autres en Pro). Parmi les plus utiles. (1) Les ONGLETS (Tabs) : organiser du contenu en onglets cliquables (l'utilisateur bascule entre plusieurs panneaux) — utile pour présenter des informations catégorisées sans surcharger la page. (2) L'ACCORDÉON (Accordion) / la BASCULE (Toggle) : des sections repliables/dépliables (cliquer sur un titre déploie son contenu) — parfait pour une FAQ, des informations détaillées qu'on affiche à la demande, gagner de la place. (3) Le CARROUSEL (Carousel) / DIAPORAMA : faire défiler des éléments (images, témoignages, cartes) dans un espace réduit — utile pour présenter plusieurs éléments sans les empiler. (4) La LISTE D'ICÔNES et les ICÔNES : listes à puces personnalisées avec icônes, éléments visuels. (5) D'autres : témoignages, compteurs, barres de progression, boîtes d'image/d'icône, etc.
Ces widgets permettent de PRÉSENTER l'information de façon plus INTERACTIVE et COMPACTE, améliorant l'expérience et l'organisation. Chacun se configure via les trois onglets (contenu : les éléments/onglets/diapositives ; style : l'apparence ; avancé). Bonnes pratiques et vigilance. (1) UTILISER ces widgets à BON ESCIENT (quand ils APPORTENT vraiment) : les onglets/accordéons pour organiser et compacter du contenu, les carrousels pour présenter plusieurs éléments dans peu d'espace. (2) Attention à ne pas MASQUER du contenu IMPORTANT : un accordéon ou un onglet CACHE du contenu (il faut cliquer pour le voir) — ne pas y mettre de l'information essentielle que l'utilisateur doit voir d'emblée. (3) Les CARROUSELS sont à utiliser avec prudence : le défilement automatique peut être gênant, et le contenu des diapositives non visibles est moins vu (et parfois moins bon pour le SEO/l'accessibilité) — ne pas y cacher du contenu crucial. (4) Penser ACCESSIBILITÉ (navigation clavier, contenu accessible). (5) Ne pas SURCHARGER (multiplier ces widgets nuit à la clarté). Points importants. (1) Les WIDGETS riches (onglets, accordéon/bascule, carrousel/diaporama, listes d'icônes, témoignages, compteurs…) rendent le contenu INTERACTIF et COMPACT. (2) ONGLETS et ACCORDÉONS organisent et compactent (FAQ, infos catégorisées) mais MASQUENT du contenu (ne pas y mettre l'essentiel à voir d'emblée). (3) Les CARROUSELS présentent plusieurs éléments dans peu d'espace, mais avec prudence (contenu caché, défilement, SEO/accessibilité). (4) Utiliser ces widgets à BON ESCIENT, sans surcharger, en pensant accessibilité. (5) Chacun se configure via les trois onglets. Maîtriser les widgets riches — et savoir QUAND les utiliser (sans masquer l'essentiel ni surcharger) — permet d'enrichir et d'organiser le contenu. Reste à assurer la cohérence globale (couleurs/polices du site) et à réutiliser des modèles.
Vocabulaire de la section
- Onglets (Tabs)
- Organiser du contenu en onglets cliquables (basculer entre plusieurs panneaux) — pour présenter des informations catégorisées sans surcharger. MASQUE le contenu non actif.
- Accordéon / Bascule (Toggle)
- Sections repliables/dépliables (cliquer sur un titre déploie son contenu) — parfait pour une FAQ, des détails affichés à la demande, gagner de la place. MASQUE le contenu replié.
- Carrousel / Diaporama
- Faire défiler des éléments (images, témoignages, cartes) dans un espace réduit. Utile mais À UTILISER AVEC PRUDENCE (contenu caché, défilement, SEO/accessibilité).
- Bon escient (ne pas masquer l'essentiel)
- Onglets, accordéons et carrousels CACHENT du contenu (il faut cliquer/attendre pour le voir) : ne pas y mettre l'information ESSENTIELLE que l'utilisateur doit voir d'emblée.
- Accessibilité des widgets
- Penser à la navigation clavier et au contenu accessible ; ne pas surcharger (multiplier ces widgets nuit à la clarté).
Que sont les widgets avancés (onglets, accordéon, carrousel, icônes) et quelle précaution prendre ?
En pratique — Utiliser les widgets riches
- Utilisez les ONGLETS pour organiser du contenu catégorisé, et l'ACCORDÉON/bascule pour une FAQ ou des détails affichés à la demande (gagner de la place).
- Utilisez un CARROUSEL pour présenter plusieurs éléments (images, témoignages) dans peu d'espace — avec prudence (ne pas y cacher du contenu crucial).
- Configurez chaque widget via les trois onglets (contenu : les éléments/onglets/diapositives ; style ; avancé).
- Vérifiez de ne pas MASQUER l'information essentielle (à voir d'emblée), pensez ACCESSIBILITÉ, et ne surchargez pas la page de ces widgets.
Points clés à retenir
- Les WIDGETS RICHES rendent le contenu INTERACTIF et COMPACT : ONGLETS (contenu catégorisé cliquable), ACCORDÉON/bascule (sections repliables — FAQ, détails à la demande), CARROUSEL/diaporama (faire défiler des éléments dans peu d'espace), listes d'icônes, témoignages, compteurs… (Free ou Pro selon le widget).
- ATTENTION : onglets, accordéons et carrousels MASQUENT du contenu (il faut cliquer/attendre pour le voir) — ne PAS y mettre l'information ESSENTIELLE que l'utilisateur doit voir d'emblée.
- Les CARROUSELS sont à utiliser AVEC PRUDENCE (contenu des diapositives non visibles moins vu, défilement parfois gênant, enjeux SEO/accessibilité) — pas de contenu crucial caché dedans.
- Utiliser ces widgets à BON ESCIENT (quand ils apportent vraiment : organiser, compacter), penser ACCESSIBILITÉ (navigation clavier), et NE PAS SURCHARGER (multiplier ces widgets nuit à la clarté). Chacun se configure via les trois onglets.
Questions fréquentes
Quand utiliser un accordéon, des onglets ou un carrousel — et quels pièges éviter ?
Ces widgets (accordéon, onglets, carrousel) servent à organiser et compacter le contenu, mais ils MASQUENT une partie du contenu — il faut donc les utiliser quand c'est pertinent, sans y cacher l'information essentielle. Quand utiliser chacun : (1) L'ACCORDÉON / la BASCULE : pour du contenu qu'on affiche À LA DEMANDE, replié par défaut. Idéal pour une FAQ (questions repliées, réponse dépliée au clic), des informations détaillées ou secondaires (spécifications, détails techniques) qu'on ne veut pas afficher d'emblée pour ne pas surcharger. Il GAGNE de la place et allège la page. (2) Les ONGLETS : pour du contenu CATÉGORISÉ qu'on présente dans le même espace, l'utilisateur basculant d'une catégorie à l'autre. Idéal pour des informations groupées par thème (ex. « Description / Caractéristiques / Avis » d'un produit) qu'on veut présenter compactement. (3) Le CARROUSEL / DIAPORAMA : pour présenter PLUSIEURS éléments similaires (images, témoignages, logos, cartes) dans un ESPACE RÉDUIT, en les faisant défiler. Idéal quand on a beaucoup d'éléments et peu de place (galerie, avis clients). Les PIÈGES à éviter (essentiel) : (1) MASQUER du contenu IMPORTANT. Le piège majeur : onglets, accordéons et carrousels CACHENT une partie du contenu (il faut cliquer, ou attendre le défilement, pour le voir). Ne mettez JAMAIS dans un accordéon replié, un onglet non actif ou une diapositive non visible une information ESSENTIELLE que l'utilisateur DOIT voir (un message clé, un appel à l'action principal, une info cruciale). Le contenu caché est beaucoup moins vu. (2) Cacher du contenu au détriment du SEO/accessibilité. Le contenu masqué (surtout dans les carrousels) peut être moins bien pris en compte par les moteurs de recherche, et pose des enjeux d'accessibilité (navigation clavier, lecteurs d'écran). Ne cachez pas du contenu SEO-important. (3) Le CARROUSEL à défilement automatique gênant. Un défilement auto trop rapide (l'utilisateur n'a pas le temps de lire) ou incontrôlable frustre. Les carrousels « héros » automatiques sont souvent peu efficaces (les diapositives après la première sont peu vues). Utilisez-les avec parcimonie, laissez le contrôle à l'utilisateur (flèches, pause). (4) SURCHARGER la page de ces widgets (multiplier onglets/accordéons/carrousels) nuit à la clarté. (5) Problèmes d'ACCESSIBILITÉ : s'assurer que ces widgets sont navigables au clavier et accessibles aux lecteurs d'écran. Comment bien les utiliser : (1) Réservez-les au contenu SECONDAIRE ou CATÉGORISÉ qu'il est pertinent de compacter — pas au contenu principal/essentiel (qui doit être visible d'emblée). (2) ACCORDÉON pour les FAQ et détails à la demande ; ONGLETS pour du contenu groupé par catégorie ; CARROUSEL pour de nombreux éléments similaires dans peu de place. (3) Pour les carrousels, préférez le contrôle utilisateur au défilement auto agressif, et n'y mettez pas de contenu crucial. (4) Pensez ACCESSIBILITÉ et SEO (ne pas cacher l'important). (5) Ne surchargez pas (quelques-uns suffisent). (6) Demandez-vous : « ce widget APPORTE-t-il vraiment (organiser, compacter utilement), ou cache-t-il du contenu qui devrait être visible ? ». En résumé : utilisez l'ACCORDÉON pour du contenu affiché à la demande (FAQ, détails secondaires — gagner de la place), les ONGLETS pour du contenu catégorisé présenté compactement (basculer entre thèmes), et le CARROUSEL pour de nombreux éléments similaires dans peu d'espace (galeries, témoignages). Le PIÈGE majeur est de MASQUER de l'information ESSENTIELLE : ces widgets cachent du contenu (clic ou défilement nécessaire), donc n'y mettez jamais le message clé, l'appel à l'action principal ou une info cruciale (à voir d'emblée) ; méfiez-vous aussi de l'impact SEO/accessibilité du contenu caché, du défilement automatique gênant des carrousels, et de la surcharge. Réservez ces widgets au contenu secondaire ou catégorisé qu'il est pertinent de compacter, pensez accessibilité, et demandez-vous toujours s'ils apportent vraiment. Bien utilisés, ils enrichissent et organisent ; mal utilisés, ils cachent l'essentiel et nuisent à l'expérience.
Ces widgets riches sont-ils tous disponibles en Elementor Free ?
Certains widgets riches sont en Elementor FREE, d'autres nécessitent Elementor PRO — il faut savoir lesquels pour ne pas être bloqué ou payer inutilement. Ce qui est en FREE : (1) Elementor Free inclut déjà une bonne gamme de widgets, dont certains « riches » : les ONGLETS (Tabs), l'ACCORDÉON et la BASCULE (Toggle), la LISTE D'ICÔNES, la boîte d'icône/d'image, un carrousel d'images de base (galerie), des icônes, des séparateurs, une vidéo, une carte Google, etc. (2) Free permet donc déjà de créer du contenu interactif et structuré (organiser en onglets, faire une FAQ en accordéon, une galerie) — suffisant pour beaucoup de besoins. Ce qui nécessite PRO : (1) Les WIDGETS PRO (des dizaines) : formulaires, articles/posts (afficher des articles), diaporamas avancés, témoignages avancés, prix/pricing tables, compte à rebours, partage social, navigation (menu, nav), carrousels avancés (de médias, d'articles), boîtes animées, etc. (2) Les fonctionnalités avancées : Theme Builder, pop-ups, contenu dynamique, Loop Builder, WooCommerce Builder (niveaux 3-4). (3) Globalement, Pro ajoute les widgets et fonctions PROFESSIONNELS qui transforment Elementor en constructeur de site complet. Comment savoir : (1) Dans le panneau des widgets, les widgets PRO sont généralement MARQUÉS (badge « Pro » ou grisés si Pro n'est pas installé). On voit donc facilement ce qui relève de Free ou Pro. (2) Si un widget dont vous avez besoin est Pro, il faut Elementor Pro pour l'utiliser. Comment décider : (1) Pour des besoins de base (onglets, accordéon/FAQ, galerie d'images, listes d'icônes), FREE suffit souvent. (2) Pour des widgets professionnels (formulaires, affichage d'articles, diaporamas avancés, prix, partage social, navigation avancée), il faut PRO. (3) Le formulaire est un cas fréquent : le widget Formulaire d'Elementor est PRO (en Free, on utilise un plugin de formulaire tiers — comme Contact Form 7 — inséré via un widget). (4) Évaluez vos besoins : si vous n'avez besoin que des widgets Free, restez en Free ; si un widget Pro est indispensable (formulaire natif, articles, WooCommerce…), passez à Pro. Les alternatives en Free : (1) Pour certains besoins, des PLUGINS TIERS gratuits ajoutent des widgets à Elementor (des extensions « add-ons » d'Elementor). Cela peut compléter Free — mais avec prudence (qualité, performance, maintenance des plugins tiers ; ne pas en accumuler). (2) Pour les formulaires, un plugin de formulaire dédié (gratuit) s'intègre. Les bonnes pratiques : (1) Repérez ce qui est Free vs Pro (badges dans le panneau). (2) Utilisez les widgets Free tant qu'ils suffisent. (3) Passez à Pro quand un widget/fonction Pro est nécessaire (formulaires natifs, articles, Theme Builder, WooCommerce…). (4) Prudence avec les add-ons tiers (utiles mais à choisir avec soin — qualité, performance, sécurité). En résumé : NON, ces widgets riches ne sont pas tous en Elementor FREE. Free inclut déjà des widgets riches utiles (ONGLETS, ACCORDÉON/bascule, listes d'icônes, galerie/carrousel d'images de base, boîtes d'icône/image) — suffisants pour beaucoup de besoins. Mais de nombreux widgets professionnels nécessitent PRO : formulaires, affichage d'articles/posts, diaporamas et carrousels avancés, prix, témoignages avancés, partage social, navigation avancée, ainsi que les grandes fonctions (Theme Builder, pop-ups, dynamique, WooCommerce). Les widgets Pro sont marqués (badge « Pro ») dans le panneau, donc on identifie facilement ce qui relève de chaque version. Décidez selon vos besoins : Free si ses widgets suffisent ; Pro si un widget/fonction professionnel est indispensable (le formulaire natif, par exemple, est Pro — en Free on passe par un plugin de formulaire tiers). Des add-ons tiers peuvent compléter Free, avec prudence. Repérez le marquage Free/Pro et choisissez en fonction de ce dont vous avez réellement besoin.