Principaux points à retenir
- Quatre titres à onglets adaptés à une colonne de bureau de 1 200 px ont environ 390 px sur un téléphone, ils enveloppent, écrasent ou débordent donc.
- Le widget Tabs d'Elementor a une commande Breakpoint qui commute la bande en accordéon vertical en dessous de la largeur que vous choisissez Le mobile est la valeur par défaut.
- Le défilement horizontal est l'autre option : les titres restent sur une rangée et les visiteurs les traversent.
- Le Widget Master Addons Tabs empile ses titres dans une colonne pleine largeur sur un téléphone, avec le panneau ouvert en dessous C'est lisible, mais ce n'est pas un accordéon.
- Trois titres courts ou moins survivent généralement intacts à un téléphone. Passé, choisissez délibérément l’accordéon ou le défilement.
Les onglets sont un modèle de bureau Ils supposent une place horizontale pour plusieurs titres plus un panneau, et un téléphone a environ un tiers de cette largeur.
Elementor vous donne deux façons de sortir, et les widgets addon se comportent à nouveau différemment Les captures d'écran du téléphone ci-dessous sont des captures 390 px d'une vraie page de test, donc ce que vous voyez est ce que fait le paramètre.
Table des matières
Ce qui ne va pas
Une bande à onglets veut une ligne Donnez-lui moins de largeur que ce dont les titres ont besoin et vous obtenez l'un des trois résultats, aucun d'entre eux n'est bon :
- Les titres s'enroulent sur une deuxième et une troisième rangée et la bande arrête de lire sous forme de bande.
- Ils courges à la place, jusqu'à ce que chaque étiquette soit quelques pixels de texte illisible.
- Ou le dernier déborde du bord, apportant généralement une barre de défilement de page horizontale avec lui.
Les cibles de taper aggravent la situation. Les directives tactiles fixent une cible confortable à environ 44 px, et un titre écrasé est bien inférieur à cela, donc les gens manquent et frappent le voisin.
Option 1 : passer à un accordéon
C'est le comportement souhaité par la plupart des gens, et le widget Tabs le fait sans CSS.
- Sélectionnez le widget Onglets et ouvrez Paramètres supplémentaires dans l'onglet Contenu.
- Définir Point d'arrêt à la largeur où la bande doit abandonner Mobile est la réponse par défaut et est généralement la bonne réponse ; tablette a du sens lorsque les titres sont longs.
En dessous de cette largeur, chaque titre se trouve directement au-dessus de son propre panneau et en appuyant sur un l'ouvre. Un titre par ligne signifie une cible de prise pleine largeur, et le contenu reste réduit afin que la page ne s'allonge pas.
Option 2 : laisser défiler la bande
Activez le défilement horizontal et les titres restent sur une rangée à n'importe quelle largeur, la rangée défilant latéralement. Les visiteurs glissent le long de celui-ci pour atteindre ceux qui ne sont pas à l'écran.
Cela convient à une bande qui se lit comme une séquence, comme des mois ou des tailles, où garder l'ordre visible compte plus que de voir chaque option à la fois Sa faiblesse est la découverte : un visiteur qui ne remarque pas que la ligne défile ne trouve jamais les onglets ultérieurs Laisser le titre suivant à moitié visible sur le bord aide, car une étiquette de coupure est une invitation évidente à glisser.
Le défilement et le point d'arrêt en accordéon ne s'excluent pas mutuellement, donc si vous définissez les deux, décidez lequel vous souhaitez réellement en dessous du point d'arrêt et vérifiez le résultat sur un téléphone.
Ce que font les onglets d'addon sur un téléphone
Le widget Master Addons gère les écrans étroits en les empilant : les titres deviennent une colonne pleine largeur et le panneau ouvert se trouve en dessous de toute la liste.
Chaque titre obtient une cible de frappe pleine largeur, ce qui résout le squash. Il n'associe pas chaque titre à son propre panneau, donc avec six ou sept onglets, un visiteur fait défiler toute la liste avant d'atteindre n'importe quel contenu.
La règle pratique : l'addon est bien sur un téléphone avec trois ou quatre onglets, et le widget principal avec un point d'arrêt est meilleur quand il y en a plus.
Quelle option pour quelle page
| situation | Réglage |
|---|---|
| Trois ou quatre titres courts, principalement du trafic de bureau | Laissez-le, puis vérifiez sur un téléphone |
| Cinq onglets ou plus | Core Tabs avec point d'arrêt défini sur mobile |
| Titres longs tels que“Shipping et returns” | Noyau Tabs avec point d'arrêt réglé sur tablette |
| Titres qui se lisent en séquence, comme des mois ou des tailles | Défilement horizontal |
| Surtout du trafic téléphonique et de longs panneaux | Un widget accordéon au lieu de tabulations |
| Titres d'icônes, trois ou quatre onglets | Widget Addon, colonne empilée est bien |
Lorsque les onglets cessent de fonctionner sur mobile
Les“Tabs ne travaillant pas sur le” mobile s'avèrent généralement être l'une des quatre choses suivantes :
- Un effet de survol Le survol n'existe pas sur un écran tactile, donc un ensemble d'onglets pour activer le survol nécessite un clic, parfois deux. Définissez l'effet pour cliquer sur n'importe quelle page avec le trafic téléphonique.
- CSS mis en cache. Après avoir modifié le point d'arrêt, régénérez le CSS d'Elementor et effacez le cache de page, ou le téléphone continue de servir l'ancienne feuille de style.
- Un script différé Le report JavaScript agressif retient le script de tabulation jusqu'à ce que le visiteur interagisse avec la page, donc le premier tap ne fait rien Exclure le script du widget dans le plugin d'optimisation.
- Une cible de robinet qui est trop petite Rien n'est cassé, le titre est juste plus petit qu'un pouce, et le point d'arrêt de l'accordéon le fixe.
Questions fréquemment posées
Comment puis-je faire en sorte que les onglets Elementor se transforment en accordéon sur mobile ?
Sélectionnez le widget Onglets, ouvrez Paramètres supplémentaires et définissez Point d'arrêt En dessous de cette largeur, la bande passe à une disposition verticale en accordéon, avec mobile comme valeur par défaut.
Pourquoi les titres de mes onglets se chevauchent-ils sur un téléphone ?
La bande a moins de largeur que ce dont les titres ont besoin Définissez un point d'arrêt en accordéon, activez le défilement horizontal ou raccourcissez les titres.
Les onglets nuisent-ils au référencement mobile ?
Non. Le contenu d'un onglet est dans le HTML et est indexé, que le panneau soit ouvert ou non.
Dois-je utiliser des onglets ou un accordéon sur mobile ?
Si la majeure partie de votre trafic est constituée de téléphones et que les panneaux sont longs, construisez-le en accordéon dès le début. Les onglets avec un point d'arrêt sont le meilleur appel lorsque le bureau est la vue principale.
Pourquoi mon premier robinet ne fait rien ?
Habituellement un effet de survol ou un script différé Définissez l'effet de tabulation pour cliquer, et excluez le script de tabulation du report JavaScript.
Réflexions finales
Rien de tout cela n'a besoin de CSS. Le contrôle Breakpoint d'Elementor couvre le cas courant, Horizontal Scroll couvre les séquences et les widgets addon s'empilent dans une colonne lisible. Ensuite, ouvrez la page sur un téléphone réel et appuyez sur chaque titre, car c'est l'étape que les gens sautent.
Lecture connexe
