Principaux points à retenir
- Les onglets sont pour une poignée de sections parallèles qu'un visiteur choisit entre. Un accordéon est pour une liste où la plupart des objets sont ignorés.
- Les onglets couronnent autour de quatre ou cinq titres car la bande est hors de largeur Un accordéon en prend vingt sans se plaindre.
- Un accordéon peut avoir plusieurs panneaux ouverts à la fois, et peut les comparer à l'écran Les onglets en montrent exactement un.
- Les accordéons ont été construits pour les écrans étroits Les onglets d'Elementor gèrent les téléphones en passant à un accordéon sous un point d'arrêt que vous avez défini, ce qui est une indication sur le modèle qui y gagne.
- Ni l'un ni l'autre ne cache le contenu de Google Les deux widgets mettent chaque panneau de la page HTML et cachent ceux fermés avec CSS.
Les deux modèles font le même travail : effondrer une longue page pour qu'un visiteur lise la partie pour laquelle il est venu La différence est ce que les éléments effondrés sont l'un pour l'autre.
Les onglets disent “pick un de ces” Un accordéon dit “iciil y a une liste, ouvrez ce dont vous avez besoin” Faites-ça reculer et la page combat le visiteur, ce qui fait que cela vaut deux minutes de réflexion.
Table des matières
La différence réelle
| Onglets | Accordéon | |
|---|---|---|
| Titres sit | Dans une ligne ou une colonne latérale | Empilés, chacun au-dessus de son propre panneau |
| Ouvert à la fois | Un | Un ou plusieurs, votre choix |
| Nombre d'articles confortable | Trois à cinq | Cinq à vingt |
| Tous les titres visibles | Oui | Oui |
| Hauteur de la page lorsqu'elle est fermée | Fixé par le panneau le plus haut | Pousse à mesure que les panneaux s'ouvrent |
| Lit comme | “Cueillez un” | “Scannez la liste” |
| Écrans étroits | A besoin d'un repli | Fonctionne comme construit |
La ligne qui pilote la plupart des décisions est le nombre d'éléments Une bande d'onglets est limitée par l'espace horizontal, et un accordéon est limité uniquement par la patience.
Quand les onglets sont corrects
Les onglets s'ajustent lorsque les sections sont des pairs et que le visiteur lira l'une d'elles Trois signaux :
- Trois à cinq sections, suffisamment peu pour accueillir une bande.
- Contenu parallèle, comme Description, Spécification, Avis et Expédition sur une page produit : le même genre de chose, tranche différente.
- Chaque visiteur veut l'un d'eux Personne ne lit les quatre, tout le monde en lit un.
Les onglets conservent également la page à une hauteur prévisible, ce qui est important lorsque quelque chose se trouve directement en dessous et que vous ne voulez pas qu'elle saute sur l'écran.
Quand un accordéon a raison
Un accordéon convient lorsque les éléments sont une liste plutôt qu'un ensemble de choix :
- Six éléments ou plus Une FAQ avec douze questions n'a pas de disposition d'onglets qui fonctionne.
- La plupart des objets sont ignorés, car un visiteur ouvre les deux questions qui s'appliquent à lui.
- Articles de longueur très différente, où une réponse est une phrase et une autre cinq paragraphes Les onglets seraient de taille à la plus longue.
- Panneaux qu'un visiteur souhaite ouvrir en même temps, pour lire deux politiques côte à côte.
Les FAQ sont le cas le plus clair, c'est pourquoi la plupart des sections FAQ que vous rencontrez sont des accordéons Les politiques de tarification, les étapes de dépannage et les sections de documentation se comportent de la même manière.
Elementor a un widget Accordéon dans le plugin gratuit Le Accordéon avancé Master Addons ajoute quelques éléments en haut : une commande de type accordéon qui bascule entre le comportement de l'accordéon (un panneau à la fois) et le comportement de bascule (chaque panneau indépendant), des icônes d'extension et d'effondrement personnalisées, Active as Default par élément, une vitesse de bascule en millisecondes, et la balise HTML du titre.
Ce que les téléphones décident
Un accordéon est déjà une pile verticale de rangées pleine largeur, donc un écran 390 px n'y change rien Les onglets sont le motif qui doit s'adapter.
Le widget Tabs d'Elementor passe à une disposition verticale en accordéon sous un point d'arrêt que vous choisissez, avec mobile comme valeur par défaut Les onglets Addon empilent leurs titres dans une colonne pleine largeur avec le panneau sous la liste.
Le correctif pour les onglets sur un téléphone, en d'autres termes, est de devenir un accordéon Si la plupart de votre trafic est mobile, construire l'accordéon dès le début saute une disposition qui n'existe jamais que sur le bureau.
La question du référencement
Le contenu effondré est indexé Les deux widgets mettent chaque panneau de la page HTML et cachent les inactifs avec CSS, donc le robot d'exploration de Google lit tout cela Vous pouvez le confirmer sur votre propre page en consultant la source et en recherchant du texte à partir d'un panneau fermé.
Deux choses méritent vraiment d’être prises en compte :
- Ne cachez pas de quoi parle la page Si un visiteur doit cliquer pour savoir ce que vous vendez, ce contenu n'a pas sa place dans l'onglet trois, quoi que le robot d'exploration puisse lire.
- FAQ les données structurées proviennent de votre plugin SEO plutôt que de l'un ou l'autre des widgets Rank Math et Yoast construisent le balisage FAQPage à partir de leur propre bloc ou champ de schéma, donc l'accordéon est la présentation et le schéma est défini séparément.
Où Toggle convient
Toggle apparaît dans cette comparaison parce qu'Elementor avait un widget Toggle et parce que “toggle” signifie deux choses différentes.
L'ancien widget Toggle d'Elementor était un accordéon d'un autre nom : une pile de lignes extensibles Il est obsolète depuis la version 3.15, et l'édition d'un montre maintenant un avis vous disant de glisser dans le widget Accordéon à la place Donc sur une installation actuelle, la question tabs contre accordéon l'a déjà absorbé.
L'autre sens est un commutateur à deux états, où un contrôle retourne la page entre deux versions du même contenu C'est ce que le Contenu du basculer des modules complémentaires principaux widget le fait : deux étiquettes, un changement entre elles et un bloc de contenu derrière chacune. La tarification mensuelle par rapport à la tarification annuelle est le cas évident, et la métrique par rapport aux unités impériales en est un autre.
C'est un troisième motif plutôt qu'une variation sur les deux premiers Utilisez-le quand il y a exactement deux états et que le visiteur bascule entre eux Trois options ou plus signifie onglets, et une liste à scanner signifie un accordéon Si ce que vous voulez est un accordéon dont les panneaux s'ouvrent et se ferment indépendamment, c'est le contrôle de type accordéon réglé sur Basculer.
Utiliser les deux ensemble
Ils se combinent bien, car ils répondent à des questions différentes.
Une page de comparaison de plans peut utiliser des onglets pour Mensuel et Annuel, avec un accordéon de détails de caractéristiques à l'intérieur de chaque onglet Le niveau extérieur est un choix entre deux pairs ; le niveau intérieur est une liste à scanner Les onglets imbriqués rendent cela simple, puisque chaque panneau est un conteneur qui accepte un widget en accordéon.
Les onglets à l'intérieur des onglets sont la combinaison qui ne fonctionne pas, car elle demande au visiteur de se rappeler quelle paire de titres il a choisis.
Ce que Elementor vous donne pour chacun
Les deux widgets sont dans le plugin gratuit, et les deux sont des widgets imbriqués, donc les panneaux contiennent des conteneurs.
Les onglets ajoutent Direction pour horizontal ou vertical, Défilement horizontal pour une longue rangée de titre, et le Point d'arrêt qui passe à un accordéon Le widget Accordéon a Max Items Expanded, qui décide si l'ouverture d'un panneau ferme les autres Le widget Master Addons fait ce travail avec son contrôle Accordéon Type.
Les widgets Addon étendent les deux. Du côté des onglets, vous obtenez des préréglages de style, des titres d'image et des changements de vol stationnaire, couverts dans le onglets avancés poste. Du côté de l'accordéon, vous obtenez les commandes d'icônes, le mode bascule et l'état par défaut par élément.
Questions fréquemment posées
Un accordéon est-il meilleur que les onglets ?
Pour six éléments ou plus, pour les FAQ et pour les pages mobiles lourdes, oui. Pour trois à cinq sections parallèles sur une page de bureau, les onglets se lisent mieux.
Google indexe-t-il le contenu dans les onglets et les accordéons ?
Oui. Les panneaux sont au format HTML, qu'ils soient ouverts ou fermés, donc le robot les lit.
Puis-je mettre un accordéon dans une languette ?
Oui. Chaque panneau Nested Tabs est un conteneur, donc un widget en accordéon tombe directement.
Combien d'onglets est trop ?
Cinq est le plafond pratique, et moins si les titres sont longs ou portent des icônes Passé que la bande enveloppe et un accordéon est le meilleur motif.
Et le widget Toggle ?
Le widget Toggle d'Elementor est obsolète depuis la version 3.15 et pointe vers le widget Accordéon. Une bascule au sens de commutateur, basculant entre deux versions du même contenu, est un modèle distinct et nécessite un widget construit pour cela.
Lequel dois-je utiliser pour une FAQ ?
Un accordéon Les questions sont une liste à scanner plutôt qu'un ensemble de choix, et la mise en page reste lisible à douze questions, qu'aucune bande d'onglets ne gère.
Réflexions finales
Comptez les éléments, puis demandez ce qu'ils sont les uns aux autres Un court ensemble de pairs où tout le monde en lit un est un onglet Une longue liste où la plupart des éléments sont sautés est un accordéon Mobile règle tout doute restant, puisque les onglets sur un téléphone se transforment de toute façon en accordéon.
Lecture connexe
