2.2Widgets avanzados: pestañas, acordeón, carrusel
Lo esencial en 30 segundos
- Pestañas y acordeón organizan mucho contenido en poco espacio (clic para revelar).
- Carrusel/pase de diapositivas hace desplazar imágenes o testimonios — usar con parquedad.
- Regla de oro: estos widgets ocultan contenido → nunca poner en ellos lo esencial (el visitante no siempre hace clic).
Hilo conductor — Nadia ordena la FAQ
La página "trabajos" del carpintero rebosa de texto. Nadia ordena las preguntas frecuentes en acordeón (plegado por defecto) y presenta los tipos de muebles en pestañas. Pero mantiene el mensaje clave — "presupuesto gratis en 48 h" — visible, fuera del acordeón: un visitante con prisa no hará clic forzosamente.
Continúa 2.1 — organizar el contenido rico sin enterrarlo.
1. Pestañas, acordeón, carrusel
Las Pestañas (Tabs) organizan contenido en secciones clicables (se alterna de una a otra). El Acordeón/Conmutador (Toggle) ofrece secciones plegables (al hacer clic en un título se despliega la respuesta) — perfecto para una FAQ. El Carrusel/Pase de diapositivas hace desplazar elementos (imágenes, testimonios, tarjetas).
Las cajas de iconos y testimonios completan el repertorio para presentar servicios y prueba social de forma legible.
2. Con criterio
Punto crucial: pestañas, acordeones y carruseles ocultan contenido (invisible mientras no se hace clic/desplaza). Por tanto: nunca enterrar lo esencial — un mensaje clave, un precio, un botón de acción deben quedar visibles. Un carrusel que se desplaza solo también puede hacer perder una información.
Pensar además en la accesibilidad: navegación con teclado, contenido legible. Nadia mantiene la oferta estrella a la vista y reserva pestañas/acordeón para el contenido secundario.
🔎 Ejemplo concreto — Organizar sin enterrar (caso Nadia)
Visible (fuera del widget): "Presupuesto gratis en 48 h" + botón.
Acordeón: FAQ (plegado por defecto).
Pestañas: tipos de muebles (cocina / armario / escalera).
Carrusel: opiniones de clientes (con parquedad, sin autodesplazamiento agresivo).
→ Lo esencial salta a la vista, el resto está ordenado.Resultado: página clara, no recargada.
Lección: ocultar lo secundario, nunca lo esencial.
Vocabulario de la sección
- Pestañas (Tabs)
- Organizar contenido en pestañas clicables (alternar de una a otra).
Ejemplo sencillo: pestañas "Cocina / Armario / Escalera".
Lo que no es: poner en ellas el botón de presupuesto (debe quedar visible).
Reflejo: pestañas = contenido paralelo secundario.
- Acordeón / Conmutador
- Secciones plegables: al hacer clic en un título se despliega la respuesta (ideal FAQ).
Ejemplo sencillo: FAQ del carpintero en acordeón plegado.
Lo que no es: ocultar una información crucial tras un título cerrado.
Reflejo: acordeón = FAQ y detalles, no lo esencial.
- Carrusel / Pase de diapositivas
- Desplazar elementos (imágenes, testimonios, tarjetas).
Ejemplo sencillo: carrusel de opiniones de clientes.
Lo que no es: un carrusel automático que hace perder la información clave.
Reflejo: carrusel con parquedad, desplazamiento controlado.
- Con criterio
- No ocultar lo esencial: oferta, precio, acción quedan visibles.
Ejemplo sencillo: "presupuesto en 48 h" fuera del acordeón, siempre visible.
Lo que no es: enterrar la oferta estrella en una pestaña.
Reflejo: lo importante se ve sin clic.
- Accesibilidad de los widgets
- Navegación con teclado y contenido accesible para todos.
Ejemplo sencillo: acordeón usable con el teclado.
Lo que no es: un widget interactivo inutilizable sin ratón.
Reflejo: comprobar que todo se abre también con el teclado.
En la práctica — Organizar contenido rico
- Identifica lo esencial (oferta, acción) y mantenlo visible, fuera de cualquier widget.
- Ordena una FAQ en acordeón (plegado por defecto).
- Presenta categorías en pestañas.
- Añade un carrusel de opiniones, sin autodesplazamiento agresivo, y pruébalo con el teclado.
Guion listo para decir — explicar el orden al cliente (20 s)
"Para que la página respire, he ordenado las preguntas frecuentes en acordeón y los tipos de muebles en pestañas. Pero su mensaje clave — presupuesto gratis en 48 h — queda siempre visible, porque un visitante con prisa no hará clic forzosamente en todas partes."
Tranquilizar: organizar no significa ocultar lo importante.
Plantilla para copiar y pegar — dónde ordenar qué
ESENCIAL (siempre visible): _______________
FAQ / DETALLES → ACORDEÓN (plegado): _______________
CONTENIDOS PARALELOS → PESTAÑAS: _______________
GALERÍA / OPINIONES → CARRUSEL (parquedad): _______________
AUTODESPLAZAMIENTO CARRUSEL: desactivado / lento
PRUEBA DE TECLADO (accesibilidad): hecha / por hacerFAQ
Acordeón plegado: cada pregunta se despliega bajo demanda.
Servicios variados
Pestañas para comparar ofertas sin alargar la página.
Prueba social
Carrusel de opiniones, pero mantener 1-2 opiniones fuertes visibles también.
Móvil
Acordeón muy práctico en el móvil (gana altura), a probar con el dedo.
✓ Buenas prácticas
- Mantener lo esencial visible, fuera de cualquier widget.
- Reservar pestañas/acordeón para lo secundario.
- Probar la accesibilidad (teclado).
✗ Errores frecuentes
- Enterrar la oferta/acción en una pestaña o acordeón.
- Carrusel autodesplazable que hace perder la información.
- Olvidar la navegación con teclado.
Puntos clave
- Pestañas/acordeón: guardar mucho en poco espacio.
- Carrusel: desplazamiento, con parquedad.
- Estos widgets ocultan contenido.
- Lo esencial queda visible sin clic.
Reto 48h — aplica mañana
Transforma una FAQ en acordeón (plegado) y categorías en pestañas, manteniendo un mensaje clave visible fuera de cualquier widget. Comprueba que el acordeón se abre con el teclado. 20 minutos.
- Ordeno lo secundario en pestañas/acordeón.
- Mantengo lo esencial visible sin clic.
- Compruebo la accesibilidad con teclado.
Preguntas frecuentes
¿Puedo poner mi oferta principal en un acordeón?
No: los acordeones ocultan el contenido mientras no se hace clic. La oferta, el precio y el botón de acción deben quedar visibles. Reserva el acordeón para FAQ y detalles.
¿Están desaconsejados los carruseles?
No prohibidos, pero a dosificar: un carrusel autodesplazable puede hacer perder una información y perjudicar la accesibilidad. Mantén también 1-2 elementos fuertes visibles fuera.
¿Son accesibles estos widgets?
Pueden serlo si siguen siendo navegables con teclado y legibles. Prueba la apertura/cierre sin ratón, sobre todo para una FAQ importante.
Nadia quiere ordenar mucho contenido, pero su oferta "presupuesto en 48 h" debe seguir viéndose. ¿Qué enfoque?