Conclusiones clave
- Las pestañas son para un puñado de secciones paralelas entre las que el visitante elige. Un acordeón es para una lista donde se omiten la mayoría de los elementos.
- Las pestañas cubren alrededor de cuatro o cinco títulos porque la tira se queda sin ancho. Un acordeón tarda veinte sin quejarse.
- Un acordeón puede tener varios paneles abiertos a la vez y puede compararlos en la pantalla. Las pestañas muestran exactamente uno.
- Los acordeones se crearon para pantallas estrechas. Las pestañas de Elementor manejan los teléfonos cambiando a un acordeón debajo de un punto de interrupción que estableces, que es una pista sobre qué patrón gana allí.
- Ninguno oculta contenido de Google. Ambos widgets colocan todos los paneles en la página HTML y ocultan los cerrados con CSS.
Ambos patrones hacen el mismo trabajo: colapsar una página larga para que el visitante lea la parte por la que vino. La diferencia es lo que los elementos colapsados son entre sí.
Las pestañas dicen “elige uno de estos”. Un acordeón dice “aquí hay una lista, abre lo que necesitas”. Hazlo al revés y la página lucha contra el visitante, que es lo que hace que valga la pena pensar dos minutos.
Tabla de contenidos
La diferencia real
| Pestañas | Acordeón | |
|---|---|---|
| Los títulos se sientan | En una fila o columna lateral | Apilado, cada uno encima de su propio panel |
| Abierto de inmediato | Uno | Uno o varios, tu elección |
| Cómodo recuento de artículos | Tres a cinco | Cinco a veinte |
| Toate titluri vizibile | Sí | Sí |
| Altura de la página cuando está cerrada | Fijado por el panel más alto | Crece a medida que se abren los paneles |
| Lee como | “Elige uno” | “Escanea la lista” |
| Pantallas estrechas | Necesita una alternativa | Funciona tal como está construido |
La fila que impulsa la mayoría de las decisiones es el recuento de elementos. Una tira de pestañas está limitada por el espacio horizontal y un acordeón está limitado únicamente por la paciencia.
Cuando las pestañas están correctas
Las pestañas encajan cuando las secciones son pares y el visitante leerá una de ellas. Tres señales:
- De tres a cinco secciones, pocas suficientes para caber en una tira.
- Contenido paralelo, como descripción, especificaciones, reseñas y envío en la página de un producto: el mismo tipo de cosas, porción diferente.
- Cada visitante quiere uno de ellos. Nadie lee los cuatro, todos leen uno.
Las pestañas también mantienen la página a una altura predecible, lo cual importa cuando algo se encuentra directamente debajo y no quieres que salte por la pantalla.
Cuando un acordeón está bien
Un acordeón encaja cuando los elementos son una lista en lugar de un conjunto de opciones:
- Seis o más elementos. Una pregunta frecuente con doce preguntas no tiene un diseño de pestaña que funcione.
- La mayoría de los elementos se omiten porque un visitante abre las dos preguntas que se aplican a ellos.
- Elementos de muy diferente longitud, donde una respuesta es una oración y otra son cinco párrafos. Las pestañas se dimensionarían hasta el más largo.
- Paneles que un visitante quiere abrir al mismo tiempo, para leer dos políticas una al lado de la otra.
Las preguntas frecuentes son el caso más claro, razón por la cual la mayoría de las secciones de preguntas frecuentes que conoce son acordeones. Las políticas de precios, los pasos de solución de problemas y las secciones de documentación se comportan de la misma manera.
Elementor tiene un widget Accordion en el complemento gratuito. El Master Addons Acordeón Avanzado agrega algunas cosas además: un control de tipo de acordeón que cambia entre comportamiento de acordeón (un panel a la vez) y comportamiento de alternancia (cada panel independiente), íconos personalizados de expansión y colapso, activo como predeterminado por elemento, velocidad de alternancia en milisegundos. y la etiqueta HTML del título.
Qué deciden los teléfonos
Un acordeón ya es una pila vertical de filas de ancho completo, por lo que una pantalla de 390px no cambia nada al respecto. Las pestañas son el patrón que tiene que adaptarse.
El widget Tabs de Elementor cambia a un diseño de acordeón vertical debajo de un punto de interrupción que elijas, con el móvil como predeterminado. Las pestañas de complemento apilan sus títulos en una columna de ancho completo con el panel debajo de la lista.
En otras palabras, la solución para las pestañas de un teléfono es convertirse en un acordeón. Si la mayor parte de su tráfico es móvil, construir el acordeón desde el principio omite un diseño que solo existe en el escritorio.
La cuestión del SEO
El contenido colapsado está indexado. Ambos widgets colocan cada panel en la página HTML y ocultan los inactivos con CSS, por lo que el rastreador de Google lo lee todo. Puede confirmar esto en su propia página viendo la fuente y buscando texto en un panel cerrado.
Realmente vale la pena preocuparse por dos cosas:
- No ocultes de qué trata la página. Si un visitante tiene que hacer clic para saber qué vende, ese contenido no pertenece a la pestaña tres, sea lo que sea que el rastreador pueda leer.
- Preguntas frecuentes Los datos estructurados provienen de su complemento SEO en lugar de de cualquiera de los widgets. Rank Math y Yoast crean el marcado FAQPage desde su propio bloque o campo de esquema, por lo que el acordeón es la presentación y el esquema se establece por separado.
Dónde encaja Toggle
Alternar aparece en esta comparación porque Elementor solía tener un widget de Alternar y porque “alternar” significa dos cosas diferentes.
El antiguo widget Toggle de Elementor era un acordeón con otro nombre: una pila de filas expandibles. Ha quedado obsoleto desde la versión 3.15 y editar uno ahora muestra un aviso que le indica que arrastre el widget Accordion. Entonces, en una instalación actual, la pregunta de pestañas versus acordeón ya lo ha absorbido.
El otro significado es un interruptor de dos estados, donde un control cambia la página entre dos versiones del mismo contenido. Eso es lo que Agregar complementos maestros Alternar contenido el widget lo hace: dos etiquetas, un cambio entre ellas y un bloque de contenido detrás de cada una. El caso obvio es el precio mensual frente al anual, y el métrico frente a las unidades imperiales es otro.
Ese es un tercer patrón en lugar de una variación de los dos primeros. Úselo cuando haya exactamente dos estados y el visitante cambie entre ellos. Tres o más opciones significan pestañas, y una lista para escanear significa un acordeón. Si lo que desea es un acordeón cuyos paneles se abren y cierran de forma independiente, ese es el control Tipo de acordeón configurado en Alternar.
Usando ambos juntos
Se combinan bien porque responden preguntas diferentes.
Una página de comparación de planes puede utilizar pestañas para Mensual y Anual, con un acordeón de detalles de funciones dentro de cada pestaña. El nivel exterior es una elección entre dos pares; El nivel interior es una lista para escanear. Nested Tabs hace que esto sea sencillo, ya que cada panel es un contenedor que acepta un widget de acordeón.
Tabs inside tabs es la combinación que no funciona porque le pide al visitante que recuerde qué par de títulos eligió.
Qué te da Elementor por cada uno
Ambos widgets están en el complemento gratuito y ambos son widgets anidados, por lo que los paneles contienen contenedores.
Las pestañas agregan dirección para horizontal o vertical, desplazamiento horizontal para una fila de título larga y el punto de interrupción que cambia a un acordeón. El widget de acordeón tiene elementos máximos expandidos, que deciden si al abrir un panel se cierran los demás. El widget Master Addons hace ese trabajo con su control de tipo de acordeón.
Los widgets de complementos extienden ambos. En el lado de las pestañas obtienes ajustes preestablecidos de estilo, títulos de imágenes y cambios de desplazamiento, cubiertos en pestañas avanzadas publicar. En el lado del acordeón obtienes los controles de iconos, el modo de alternancia y el estado predeterminado por elemento.
Preguntas frecuentes
¿es mejor un acordeón que las pestañas?
Para seis o más elementos, preguntas frecuentes y páginas con muchos dispositivos móviles, sí. Para tres a cinco secciones paralelas en una página de escritorio, las pestañas se leen mejor.
¿google indexa contenido dentro de pestañas y acordeones?
Sí. Los paneles están en HTML, ya sean abiertos o cerrados, por lo que el rastreador los lee.
¿Puedo poner un acordeón dentro de una pestaña?
Sí. Cada panel de pestañas anidadas es un contenedor, por lo que un widget de acordeón entra directamente.
¿Cuántas pestañas son demasiadas?
Cinco es el techo práctico, y menos si los títulos son largos o llevan íconos. Más allá de eso, la tira se envuelve y un acordeón es el mejor patrón.
¿qué pasa con el widget Alternar?
El widget Toggle de Elementor está en desuso desde 3.15 y apunta al widget Accordion. Un interruptor en el sentido de cambio, que alterna entre dos versiones del mismo contenido, es un patrón separado y necesita un widget creado para él.
¿cuál debo usar para las preguntas frecuentes?
Un acordeón. Las preguntas son una lista para escanear en lugar de un conjunto de opciones, y el diseño sigue siendo legible en doce preguntas, que ninguna tira de pestañas gestiona.
Pensamientos finales
Cuente los elementos y luego pregúntense qué son entre sí. Un breve conjunto de pares donde todos leen una de sus pestañas. Una larga lista donde se omiten la mayoría de los elementos es un acordeón. El móvil resuelve cualquier duda restante, ya que las pestañas de un teléfono se convierten en acordeón de todos modos.
Lectura relacionada
