Cómo Agregar una Sección de Acordeón o FAQ a una Página
Usa el elemento Acordeón para mostrar preguntas y respuestas en filas expandibles. Los visitantes hacen clic en un encabezado para revelar la respuesta—ideal para FAQs, detalles de políticas, especificaciones de productos o información de apoyo que no necesita estar visible todo el tiempo.
Esta guía cubre cómo agregar el elemento y configurar las opciones principales que controlan contenido y comportamiento.
Antes de Empezar
Asegúrate de tener:
- Texto de FAQ escrito (pregunta + respuesta para cada fila).
- Una página abierta en el Page Builder.
- Una sección o contenedor listo para el bloque de FAQ (a menudo debajo de precios o testimonios).
Mantén tu copy de ventas más importante fuera del acordeón. Usa filas expandibles para detalles de apoyo que los visitantes pueden leer solo cuando tienen objeciones.
Paso 1: Agregar el Elemento Acordeón
- Abre Pages y haz clic en Edit en tu página.
- En el Page Builder, encuentra Acordeón en el panel de elementos.
- Arrastra Acordeón a la sección o contenedor objetivo.
- Haz clic en el acordeón en el canvas para abrir la configuración.
Para páginas de FAQ largas, coloca el acordeón en una sección dedicada con un titular arriba (por ejemplo, Preguntas Frecuentes).
Paso 2: Agregar y Gestionar Ítems del Acordeón
Cada fila del acordeón es un ítem con dos partes:
| Parte | Qué es |
|---|---|
| Encabezado | La pregunta o título visible que los visitantes hacen clic para expandir. |
| Contenido | La respuesta o texto del cuerpo mostrado cuando la fila está abierta. |
Acciones de los ítems
| Acción | Qué hace |
|---|---|
| Agregar ítem | Crea una nueva fila de FAQ. |
| Eliminar ítem | Borra una fila del acordeón. |
| Reordenar ítems | Cambia el orden en que las filas aparecen en la página. |
| Editar encabezado | Actualiza el texto de la pregunta o título. |
| Editar contenido | Actualiza el texto de la respuesta o explicación. |
Escribe encabezados como preguntas claras: ¿Cuánto tarda el envío? funciona mejor que Envío.
Mantén las respuestas concisas. Párrafos largos dentro de acordeones son más difíciles de escanear en mobile.
Paso 3: Configurar el Estado Predeterminado
| Configuración | Qué hace |
|---|---|
| Estado predeterminado | Controla qué ítem (si alguno) comienza expandido cuando la página carga. |
Patrones comunes:
- Primer ítem abierto — Bueno cuando la pregunta principal aborda la mayor objeción.
- Todos contraídos — Bueno cuando quieres un bloque de FAQ compacto.
- Ítem específico abierto — Útil cuando una respuesta es crítica para cumplimiento o confianza.
Prueba el estado predeterminado en Preview para saber qué ven los visitantes antes de hacer clic en algo.
Paso 4: Configurar el Ícono de Expansión
| Configuración | Qué hace |
|---|---|
| Ícono | El indicador de expandir/contraer (como chevron o más/menos) cuando está soportado. |
| Posición del ícono | Si el ícono está al inicio o al final de la fila del encabezado. |
| Estado activo | Cómo se ve el ícono cuando una fila está abierta vs cerrada. |
Los íconos ayudan a los visitantes a entender que la fila es clickeable. Asegúrate de que el ícono no se superponga con texto largo del encabezado en pantallas pequeñas.
Paso 5: Ajustar el Layout (Principales Opciones de Estilo)
No necesitas personalizar cada color para lanzar. Enfócate en estas configuraciones estructurales:
| Área | Qué verificar |
|---|---|
| Espacio entre ítems | Espacio entre filas de FAQ para que no se sientan apretadas. |
| Padding del encabezado | Área de clic amigable para toque en mobile. |
| Padding del cuerpo | Espaciado legible alrededor del texto de la respuesta. |
| Ancho del contenedor | Si el acordeón ocupa el ancho total o una columna más estrecha. |
| Borde o divisor | Separación visual entre filas cuando tu plantilla usa bordes. |
Previsualiza en tablet y mobile. Encabezados con texto largo pueden necesitar redacción más corta o más padding.
Paso 6: Guardar, Publicar y Probar
- Haz clic en Save en el builder.
- Publica la página. Consulta Publicar una página.
- Abre la URL en vivo.
- Haz clic en cada fila para confirmar que expandir y contraer funciona.
- Confirma que el ítem abierto por defecto coincide con tu intención.
Checklist de pruebas
- Abre y cierra cada ítem en desktop.
- Repite en mobile—los objetivos de toque deben ser fáciles de acertar.
- Confirma que ningún elemento superpuesto bloquea clics en el encabezado.
- Lee las respuestas en busca de problemas de formato (links rotos, saltos de línea faltantes).
Buenas Prácticas
- Coloca copy crítico para conversión (oferta, garantía, CTA) arriba o fuera del acordeón.
- Agrupa preguntas relacionadas y ordénalas de la más común a la menos común.
- Usa 5–10 filas de FAQ sólidas en lugar de docenas de respuestas superficiales.
- Alinea la redacción de los encabezados con objeciones reales de clientes de tickets de soporte.
Solución de Problemas
| Problema | Qué verificar |
|---|---|
| La fila no se expande | Elemento correcto seleccionado; ningún contenedor superpuesto bloqueando clics. |
| Ítem incorrecto abierto al cargar | Configuración de estado predeterminado de ese ítem. |
| Contenido apretado en mobile | Padding de encabezado/cuerpo y espacio entre ítems. |
| Ícono desalineado | Posición del ícono y longitud del texto del encabezado en pantallas pequeñas. |
Resultado
Tu página ahora tiene una sección de FAQ o acordeón funcional. Los visitantes pueden expandir solo las respuestas que necesitan, lo que mantiene la página escaneable mientras aborda objeciones en profundidad.
Documentación Relacionada
- Referencia del elemento Acordeón
- Secciones y contenedores
- Elemento Texto
- Visión general del Page Builder
FAQ
¿Cuándo debo usar un acordeón en lugar de texto simple?
Usa un acordeón para FAQs, políticas, especificaciones o detalles de apoyo que los visitantes pueden expandir solo cuando lo necesitan. Mantén copy de ventas esencial visible fuera de paneles ocultos.
¿Puedo reordenar preguntas de FAQ después de crearlas?
Sí. Reordena los ítems en la lista de ítems del acordeón. Publica de nuevo si la página ya estaba en vivo.
¿La primera FAQ debe estar abierta por defecto?
Depende de tu página. Abrir el primer ítem puede abordar la objeción principal de inmediato. Mantener todas las filas contraídas deja la sección más compacta.
¿Puedo agregar links dentro de las respuestas del acordeón?
Sí. Puedes incluir links en el cuerpo del contenido. Pruébalos después de publicar para confirmar que se abren correctamente en mobile.
¿Cuántos ítems de FAQ debo agregar?
La mayoría de las landing pages funcionan bien con aproximadamente 5–10 preguntas enfocadas. Demasiadas filas pueden abrumar visitantes mobile incluso cuando están contraídas.