Conclusiones clave
- Los títulos de cuatro pestañas que se ajustan a una columna de escritorio de 1200 px tienen aproximadamente 390 px en un teléfono, por lo que se envuelven, aplastan o desbordan.
- El widget Tabs de Elementor tiene un control de punto de interrupción que cambia la tira a un acordeón vertical por debajo del ancho que elijas. Móvil es el predeterminado.
- El desplazamiento horizontal es la otra opción: los títulos permanecen en una fila y los visitantes los atraviesan.
- El Widget de pestañas de complementos maestros apila sus títulos en una columna de ancho completo en un teléfono, con el panel abierto debajo. Eso es legible, pero no es un acordeón.
- Tres o menos títulos cortos suelen sobrevivir intactos a un teléfono. Pasado eso, elige el acordeón o desplázate deliberadamente.
Las pestañas son un patrón de escritorio. Asumen espacio horizontal para varios títulos más un panel, y un teléfono tiene aproximadamente un tercio de ese ancho.
Elementor te ofrece dos salidas y los widgets complementarios se comportan de manera diferente nuevamente. Las capturas de pantalla del teléfono a continuación son capturas de 390 px de una página de prueba real, por lo que lo que ves es lo que hace la configuración.
Tabla de contenidos
Lo que sale mal
Una tira de pestañas quiere una línea. Dale menos ancho del que necesitan los títulos y obtendrás uno de tres resultados, ninguno de ellos bueno:
- Los títulos se envuelven en una segunda y tercera fila, y la tira deja de leerse como una tira.
- En cambio, aplastan, hasta que cada etiqueta tiene unos pocos píxeles de texto ilegible.
- O el último se desborda del borde, normalmente trayendo consigo una barra de desplazamiento de página horizontal.
Toca objetivos para empeorarlo. Las pautas táctiles ponen un objetivo cómodo en alrededor de 44px, y un título aplastado está muy por debajo de eso, por lo que la gente falla y golpea al vecino.
Opción 1: cambiar a acordeón
Este es el comportamiento que la mayoría de la gente quiere y el widget Tabs lo hace sin CSS.
- Seleccione el widget Tabs y abra Configuración adicional en la pestaña Contenido.
- Establezca Breakpoint en el ancho donde debería ceder la tira. Móvil es el valor predeterminado y suele ser la respuesta correcta; La tableta tiene sentido cuando los títulos son largos.
Debajo de ese ancho, cada título se encuentra directamente encima de su propio panel y al tocar uno se abre. Un título por fila significa un objetivo de toque de ancho completo y el contenido permanece colapsado para que la página no se alargue.
Opción 2: deje que la tira se desplace
Active el desplazamiento horizontal y los títulos permanecerán en una fila de cualquier ancho, con la fila desplazándose hacia los lados. Los visitantes lo deslizan para llegar a los que están fuera de la pantalla.
Esto se adapta a una tira que se lee como una secuencia, como meses o tamaños, donde mantener el orden visible importa más que ver todas las opciones a la vez. Su debilidad es el descubrimiento: un visitante que no se da cuenta de que la fila se desplaza nunca encuentra las pestañas posteriores. Dejar el siguiente título medio visible en el borde ayuda, porque una etiqueta de corte es una invitación obvia a deslizar el dedo.
El desplazamiento y el punto de interrupción del acordeón no son mutuamente excluyentes, así que si configuras ambos, decide cuál quieres realmente debajo del punto de interrupción y verifica el resultado en un teléfono.
Qué hacen las pestañas adicionales en un teléfono
El widget Master Addons maneja pantallas estrechas apilando: los títulos se convierten en una columna de ancho completo y el panel abierto se encuentra debajo de toda la lista.
Cada título obtiene un objetivo de toque de ancho completo, que resuelve el aplastamiento. No empareja cada título con su propio panel, por lo que con seis o siete pestañas un visitante pasa por toda la lista antes de llegar a cualquier contenido.
La regla práctica: el complemento está bien en un teléfono con tres o cuatro pestañas, y el widget principal con punto de interrupción es mejor cuando hay más.
¿Qué opción para qué página
| Situación | Configuración |
|---|---|
| Tres o cuatro títulos cortos, en su mayoría tráfico de escritorio | Déjalo y luego revisa un teléfono |
| Cinco o más pestañas | Core Tabs con Breakpoint configurado en móvil |
| Títulos largos como “Envío y devoluciones” | Core Tabs con Breakpoint configurado en tableta |
| Títulos que se leen como secuencia, como meses o tamaños | Desplazamiento horizontal |
| Principalmente tráfico telefónico y paneles largos | Un widget de acordeón en lugar de pestañas |
| Títulos de iconos, tres o cuatro pestañas | Widget de complemento, la columna apilada está bien |
Cuando las pestañas dejan de funcionar en el móvil
“Las pestañas no funcionan en dispositivos móviles” suele ser una de cuatro cosas:
- Un efecto flotante. El desplazamiento no existe en una pantalla táctil, por lo que una pestaña configurada para activar el desplazamiento necesita un toque, a veces dos. Configure el efecto para hacer clic en cualquier página con tráfico telefónico.
- Css en caché. Después de cambiar el punto de interrupción, regenere el CSS de Elementor y borre el caché de la página, o el teléfono seguirá sirviendo la hoja de estilo anterior.
- Un script diferido. El aplazamiento agresivo de JavaScript mantiene el script de pestaña hasta que el visitante interactúa con la página, por lo que el primer toque no hace nada. Excluya el script del widget en el complemento de optimización.
- Un objetivo de toque que es demasiado pequeño. Nada está roto, el título es más pequeño que un pulgar y el punto de interrupción del acordeón lo fija.
Preguntas frecuentes
¿cómo hago que las pestañas Elementor se conviertan en acordeón en el móvil?
Seleccione el widget Tabs, abra Configuraciones adicionales y establezca Breakpoint. Debajo de ese ancho, la tira cambia a un diseño de acordeón vertical, con el móvil como predeterminado.
¿Por qué los títulos de mis pestañas se superponen en un teléfono?
La tira tiene menos ancho del que necesitan los títulos. Establezca un punto de interrupción de acordeón, active el desplazamiento horizontal o acorte los títulos.
¿las pestañas dañan el SEO móvil?
No. El contenido dentro de una pestaña está en HTML y se indexa independientemente de que el panel esté abierto o no.
¿Debo usar pestañas o un acordeón en el móvil?
Si la mayor parte de su tráfico son teléfonos y los paneles son largos, constrúyalo como un acordeón desde el principio. Las pestañas con punto de interrupción son la mejor llamada cuando el escritorio es la vista principal.
¿Por qué mi primer toque no hace nada?
Generalmente un efecto de desplazamiento o un script diferido. Configure el efecto de pestaña para hacer clic y excluya el script de pestaña del aplazamiento de JavaScript.
Pensamientos finales
Nada de esto necesita CSS. El control de punto de interrupción de Elementor cubre el caso común, el desplazamiento horizontal cubre secuencias y los widgets complementarios se apilan en una columna legible. Luego abra la página en un teléfono real y toque cada título, porque ese es el paso que la gente omite.
Lectura relacionada
