¿Cómo utilizar la sección Preguntas frecuentes en el Editor de bloques de Waclis?
La sección Preguntas frecuentes del Editor de bloques de Waclis permite responder de manera organizada las dudas más habituales que pueden tener los visitantes de tu Página web.
Puedes utilizarla para responder consultas relacionadas con:
compras;
envíos;
medios de pago;
garantías;
devoluciones;
servicios;
contratación;
tiempos de entrega;
cobertura;
instalación;
funcionamiento;
soporte;
requisitos;
procesos;
características particulares de tu propuesta.
Waclis incluye diferentes diseños dentro de:
Secciones → Preguntas frecuentes
Puedes elegir una composición prediseñada y luego personalizar:
preguntas;
respuestas;
títulos;
categorías;
colores;
fondos;
espacios;
cantidad de preguntas;
comportamiento responsive.
¿Qué es una sección de Preguntas frecuentes?
Una sección de Preguntas frecuentes, también conocida como FAQ, reúne preguntas que los visitantes suelen realizar y sus correspondientes respuestas.
Por ejemplo:
PREGUNTAS FRECUENTES
¿Realizan envíos?
Sí. Realizamos envíos a diferentes localidades...
¿Qué medios de pago aceptan?
Puedes utilizar...
¿Cuánto demora mi pedido?
El tiempo depende de...
Su objetivo principal es ayudar al visitante a encontrar respuestas rápidamente sin necesidad de contactar a la empresa por cada consulta básica.
¿Cuándo conviene utilizar Preguntas frecuentes?
Puedes utilizar esta sección cuando detectes preguntas que se repiten habitualmente.
Por ejemplo:
¿Hacen envíos a mi ciudad?
¿Cómo puedo pagar?
¿El producto tiene garantía?
¿Cómo solicito presupuesto?
¿Cuánto demora la implementación?
¿Necesito conocimientos técnicos?
¿Qué ocurre después de contratar?
Si varias personas preguntan lo mismo, probablemente esa información merece estar disponible en la Página web.
Una FAQ debe resolver dudas reales
No conviene llenar la sección con preguntas inventadas solamente para hablar de las ventajas de la empresa.
Por ejemplo:
¿Por qué somos la mejor empresa del mercado?
puede funcionar más como contenido comercial que como una pregunta frecuente real.
Es preferible utilizar consultas que verdaderamente ayuden al visitante.
Ejemplo para una Página web de productos
PREGUNTAS FRECUENTES
¿Realizan envíos?
Sí. Puedes consultar las alternativas de envío disponibles durante el proceso de compra.
¿Puedo retirar mi pedido?
Las modalidades de retiro disponibles dependen de las opciones habilitadas por la empresa.
¿Qué medios de pago aceptan?
Durante el proceso de compra podrás consultar los medios de pago disponibles.
¿Cómo consulto por un producto?
Puedes utilizar los medios de contacto publicados en la Página web.
Ejemplo para una empresa de servicios
PREGUNTAS FRECUENTES
¿Cómo solicito un presupuesto?
Puedes comunicarte con nuestro equipo y contarnos las características del proyecto.
¿Cuánto demora el trabajo?
El plazo depende del alcance y complejidad de cada proyecto.
¿Trabajan con empresas de cualquier tamaño?
Evaluamos cada necesidad para definir la solución más apropiada.
¿Ofrecen soporte después de la implementación?
Consulta las condiciones de acompañamiento disponibles para el servicio contratado.
Preguntas frecuentes y Acordeones no son lo mismo
Esta diferencia es importante porque en el Editor de bloques encontrarás categorías separadas:
Preguntas frecuentes
y
Acordeones
Preguntas frecuentes
Define principalmente qué contenido estás comunicando.
Por ejemplo:
¿Realizan envíos?
¿Aceptan tarjetas?
¿Hay garantía?
Acordeón
Define principalmente cómo se organiza visualmente el contenido.
Un acordeón puede utilizarse para:
preguntas frecuentes;
especificaciones;
condiciones;
instrucciones;
políticas;
información técnica;
cualquier grupo de contenidos desplegables.
Una FAQ puede utilizar un acordeón
Si el diseño elegido utiliza elementos desplegables, conceptualmente puedes tener:
▸ ¿Realizan envíos?
▸ ¿Qué medios de pago aceptan?
▸ ¿Los productos tienen garantía?
Al abrir una pregunta:
▾ ¿Realizan envíos?
Sí. Realizamos envíos...
En este caso:
el contenido es FAQ
y
la interfaz utiliza un acordeón.
Pero una FAQ no necesita obligatoriamente un acordeón
También puedes utilizar una presentación donde las respuestas estén visibles:
¿Realizan envíos?
Sí. Realizamos envíos a diferentes localidades.
¿Qué medios de pago aceptan?
Puedes consultar las alternativas disponibles...
La elección dependerá de:
cantidad de preguntas;
extensión de las respuestas;
diseño;
experiencia que quieras ofrecer.
¿Cuándo conviene mostrar las respuestas directamente?
Puede funcionar bien cuando:
tienes pocas preguntas;
las respuestas son breves;
quieres que toda la información sea visible inmediatamente.
Por ejemplo:
¿Realizan envíos?
Sí.
¿Hay garantía?
Sí, según las condiciones correspondientes.
¿Puedo solicitar presupuesto?
Sí, puedes comunicarte con nuestro equipo.
¿Cuándo conviene utilizar un formato desplegable?
Puede resultar más cómodo cuando:
tienes muchas preguntas;
las respuestas son más extensas;
quieres reducir la longitud visual de la sección;
necesitas organizar diferentes temas.
En esos casos, un componente de tipo Accordion puede ser apropiado.
¿Cómo agregar una sección de Preguntas frecuentes?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.
Después abre:
Secciones
y selecciona:
Preguntas frecuentes
Paso 1: abre Preguntas frecuentes
Waclis mostrará las alternativas prediseñadas disponibles.
Elige principalmente según:
cantidad de preguntas;
distribución;
longitud de las respuestas;
estilo visual;
espacio disponible.
No es necesario conservar los textos de ejemplo.
Paso 2: agrega la sección
Selecciona el diseño que quieras utilizar.
Después podrás reemplazar cada pregunta y respuesta.
Paso 3: modifica el título general
Puedes utilizar títulos como:
Preguntas frecuentes
¿Tienes alguna duda?
Todo lo que necesitas saber
Resolvemos tus dudas
La opción más directa suele ser:
Preguntas frecuentes
porque el visitante reconoce inmediatamente el objetivo de la sección.
Paso 4: reemplaza cada pregunta
Selecciona el elemento correspondiente a la pregunta.
Según el diseño puede ser:
Heading;
Paragraph;
elemento interno de un Accordion;
otro componente de texto.
Utiliza Navigator si resulta difícil identificarlo.
Las preguntas deben escribirse como las formularía el cliente
En lugar de:
Información sobre envíos
puede ser más fácil de comprender:
¿Realizan envíos?
Otro ejemplo
En lugar de:
Medios de pago
puedes utilizar:
¿Qué medios de pago puedo utilizar?
Esto hace que la sección se parezca más a las dudas reales del visitante.
Utiliza lenguaje claro
Evita preguntas demasiado técnicas cuando el cliente no utiliza esa terminología.
Por ejemplo:
¿Cuáles son las condiciones operativas asociadas al despacho logístico?
podría simplificarse a:
¿Cuánto demora el envío?
si eso representa mejor la duda real.
Una pregunta por concepto
Evita combinar demasiadas dudas dentro del mismo título.
Por ejemplo:
¿Realizan envíos, cuánto cuestan, cuánto demoran, qué empresa utilizan y qué ocurre si no estoy en mi domicilio?
Es preferible dividirlo.
Por ejemplo
¿Realizan envíos?
¿Cuánto demora el envío?
¿Cómo puedo consultar el costo?
¿Qué ocurre si no puedo recibir el pedido?
Esto facilita encontrar la respuesta correcta.
Paso 5: escribe la respuesta
La respuesta debería resolver directamente la pregunta.
Evita comenzar con largos textos institucionales.
Ejemplo
Pregunta:
¿Cuánto demora el envío?
Respuesta poco directa:
Nuestra empresa trabaja desde hace muchos años buscando siempre ofrecer el mejor servicio a todos nuestros clientes...
Mejor
El tiempo de entrega depende del destino y de la modalidad de envío seleccionada. Podrás consultar las opciones disponibles al realizar tu compra o comunicarte con nuestro equipo.
Primero responde.
Después agrega contexto si realmente es necesario.
Coloca la información importante al comienzo
Si la respuesta principal es:
Sí, realizamos envíos.
no la escondas al final de un párrafo.
Puedes comenzar:
Sí. Realizamos envíos...
Respuestas breves cuando sea posible
Una FAQ no debería convertirse automáticamente en un manual completo.
Por ejemplo:
¿Puedo cambiar un producto?
puede tener una respuesta resumida y, si existe una política detallada, puedes dirigir al visitante hacia ella.
Utiliza enlaces para ampliar información
Si una respuesta requiere mucha explicación, puedes incluir un enlace o botón cuando el diseño lo permita.
Por ejemplo:
¿Cuáles son las condiciones de devolución?
Puedes consultar todos los requisitos y plazos en nuestra política de devoluciones.
[ Ver política ]
Esto mantiene la FAQ fácil de recorrer.
No copies una política completa dentro de una respuesta
Si tienes una página con condiciones detalladas, normalmente no es necesario repetir todo.
Utiliza la FAQ para responder de forma resumida.
Cantidad de preguntas
No existe una cantidad obligatoria.
Puedes utilizar:
4;
6;
8;
10;
otra cantidad según la necesidad.
Lo importante es que todas aporten valor.
Pocas preguntas
Si tienes:
3 o 4 preguntas
puede funcionar muy bien una composición abierta y sencilla.
Muchas preguntas
Si tienes:
15 o 20 preguntas
puede ser conveniente:
utilizar acordeones;
dividir por categorías;
crear varias secciones;
priorizar las preguntas principales.
Evita una lista interminable
Una FAQ con decenas de preguntas sin organización puede ser difícil de utilizar.
Si tienes mucho contenido, considera agruparlo.
Agrupar por categorías
Por ejemplo:
COMPRAS
¿Cómo realizo un pedido?
¿Qué medios de pago aceptan?
¿Puedo modificar mi pedido?
ENVÍOS
¿Realizan envíos?
¿Cuánto demoran?
¿Cómo consulto el seguimiento?
CAMBIOS Y GARANTÍAS
¿Puedo realizar un cambio?
¿Los productos tienen garantía?
Esto facilita localizar la información.
Puedes crear varias Sections
Por ejemplo:
Section
Preguntas sobre compras
Section
Preguntas sobre envíos
Section
Preguntas sobre garantías
No es obligatorio colocar todo dentro de una única Section.
Utiliza títulos intermedios
Si el diseño lo permite, puedes insertar:
Heading;
separadores;
pequeños textos introductorios;
para organizar categorías.
Ordena las preguntas por importancia
Las primeras deberían responder las consultas más frecuentes.
Por ejemplo:
1. ¿Cómo compro?
2. ¿Qué medios de pago aceptan?
3. ¿Realizan envíos?
4. ¿Cuánto demora?
5. ¿Hay garantía?
No necesariamente debes ordenarlas según el momento en que fueron agregadas.
También puedes seguir el recorrido del cliente
Otra estrategia es ordenarlas según la experiencia.
Por ejemplo:
ANTES DE COMPRAR
↓
COMPRA
↓
ENVÍO
↓
POSTVENTA
Esto puede ser especialmente útil en procesos complejos.
Preguntas sobre compra
Ejemplos:
¿Cómo realizo un pedido?
¿Necesito crear una cuenta?
¿Qué medios de pago puedo utilizar?
¿Puedo solicitar presupuesto?
Preguntas sobre envío
¿Realizan envíos?
¿A qué zonas llegan?
¿Cuánto demora?
¿Cómo puedo hacer seguimiento?
Preguntas sobre postventa
¿Los productos tienen garantía?
¿Cómo solicito asistencia?
¿Cómo realizo un cambio?
FAQ para servicios
Puedes estructurar:
CONTRATACIÓN
¿Cómo comienzo?
¿Qué información necesitan?
IMPLEMENTACIÓN
¿Cuánto demora?
¿Necesito conocimientos técnicos?
SOPORTE
¿Qué ocurre después de la implementación?
¿Cómo solicito ayuda?
No respondas algo que puede cambiar con demasiada frecuencia si no podrás mantenerlo
Por ejemplo:
¿Cuánto cuesta el envío a determinada ciudad?
Si ese valor cambia constantemente, puede resultar difícil mantenerlo actualizado.
Puedes responder de forma más sostenible:
El costo del envío depende del destino y de la modalidad seleccionada. Consulta las alternativas disponibles durante tu compra.
Cuando corresponda.
Mantén la información actualizada
Una FAQ desactualizada puede generar más confusión que no tenerla.
Revisa periódicamente:
precios;
tiempos;
medios de pago;
condiciones;
cobertura;
políticas;
enlaces.
No prometas condiciones que no siempre pueden cumplirse
Por ejemplo:
Todos los pedidos llegan en 24 horas.
si existen destinos o situaciones donde no aplica.
Es preferible redactar condiciones precisas.
Preguntas desplegables mediante Accordion
Si la sección elegida utiliza un componente tipo:
Accordion / Accordeon
puedes encontrar una estructura con diferentes elementos internos.
Utiliza Navigator para identificar:
contenedor del acordeón;
cada elemento;
encabezado;
contenido.
No elimines solamente el texto de un item
Si quieres eliminar una pregunta completa, selecciona la unidad correspondiente.
Por ejemplo:
Accordion
├── Item 1
│ ├── Pregunta
│ └── Respuesta
│
├── Item 2
│ ├── Pregunta
│ └── Respuesta
Si quieres eliminar Item 2, selecciona su contenedor completo.
Clonar una pregunta
Si necesitas agregar una nueva:
identifica la unidad completa;
utiliza Clonar elemento;
reemplaza:
pregunta;
respuesta;
enlaces;
IDs si correspondieran.
Cuidado con IDs al clonar componentes interactivos
Los componentes desplegables pueden utilizar identificadores para relacionar diferentes partes de su estructura.
Si trabajas con HTML o IDs personalizados, revisa especialmente las copias.
No mantengas IDs personalizados duplicados dentro de la página.
Utiliza primero las herramientas visuales
Si el componente funciona correctamente y solamente necesitas cambiar:
preguntas;
respuestas;
colores;
no es necesario modificar su HTML o JavaScript.
Conserva la estructura existente.
No elimines Classes internas del Accordion
Una estructura interactiva puede depender de Classes necesarias para:
abrir;
cerrar;
mostrar;
ocultar;
organizar contenido.
No reemplaces esas Classes arbitrariamente.
Si deja de abrir o cerrar
Antes de agregar CSS o JavaScript:
utiliza Deshacer si el problema apareció después de un cambio;
revisa Navigator;
comprueba que no hayas eliminado la unidad incorrecta;
revisa Classes e IDs modificados;
compara con una unidad que siga funcionando.
Acordeón con una sola pregunta abierta
El comportamiento exacto dependerá de la composición utilizada.
No necesitas modificar la lógica del componente si su funcionamiento actual satisface la necesidad.
Concéntrate primero en:
contenido;
orden;
estilos;
legibilidad.
Preguntas visibles o cerradas inicialmente
La mejor opción depende de la cantidad de contenido.
Con pocas preguntas puedes priorizar visibilidad.
Con muchas, una interfaz más compacta puede facilitar el recorrido.
No escondas información crítica
Si existe una condición que el usuario necesariamente debe conocer antes de realizar una acción, evalúa si debería aparecer únicamente dentro de una FAQ.
Por ejemplo:
condición comercial esencial;
requisito obligatorio;
limitación importante.
La FAQ debe complementar la información principal, no esconderla.
Longitud de las respuestas
Una respuesta puede ocupar:
una línea;
varias líneas;
un pequeño listado.
Pero si necesitas una explicación muy extensa, puede ser mejor enlazar hacia otra página.
Listados dentro de respuestas
Puedes utilizar listas cuando la información lo justifique.
Por ejemplo:
¿Qué necesito para solicitar presupuesto?
Necesitarás indicarnos:
- Producto o servicio de interés.
- Cantidad aproximada.
- Plazo requerido.
- Datos de contacto.
Esto puede ser más fácil de leer que un único párrafo.
No abuses de listas dentro de todas las respuestas
Utiliza el formato más simple según el contenido.
Enlaces dentro de la FAQ
Puedes utilizar Links para dirigir hacia:
contacto;
productos;
condiciones;
políticas;
documentación;
páginas específicas.
Utiliza textos de enlace claros
Es preferible:
Ver política de devoluciones
que:
Haz clic aquí
El visitante entiende inmediatamente qué encontrará.
FAQ y SEO
Las Preguntas frecuentes también pueden ayudar a organizar información utilizando expresiones que los visitantes suelen buscar o preguntar.
Sin embargo, redacta principalmente pensando en las personas.
No repitas palabras de forma artificial ni crees preguntas que nadie formularía solamente para incorporar términos.
Utiliza preguntas específicas
Por ejemplo:
¿Puedo comprar desde otro país?
es más útil que:
Información internacional
porque comunica claramente la duda.
FAQ y contenido duplicado
Evita copiar exactamente la misma explicación en:
Home;
Productos;
FAQ;
Footer;
otras páginas;
si no es necesario.
Puedes resumir y enlazar hacia la fuente principal.
Diseño de la Section
Una FAQ puede utilizar:
fondo blanco;
fondo gris;
Cards;
divisores;
Accordion;
dos columnas;
una columna central.
Elige según la cantidad de contenido.
Una columna
Puede resultar ideal para respuestas relativamente extensas.
¿Pregunta 1?
Respuesta...
¿Pregunta 2?
Respuesta...
Dos columnas
Puede funcionar cuando las respuestas son breves.
[ Pregunta 1 ] [ Pregunta 2 ]
[ Pregunta 3 ] [ Pregunta 4 ]
Cuidado con el orden en dos columnas
En desktop puede verse bien, pero en móvil debes comprobar en qué secuencia aparecen las preguntas.
El orden debe seguir teniendo sentido.
Responsive
Una FAQ de dos columnas puede convertirse en:
Desktop
[ Pregunta 1 ] [ Pregunta 2 ]
[ Pregunta 3 ] [ Pregunta 4 ]
Mobile
[ Pregunta 1 ]
[ Pregunta 2 ]
[ Pregunta 3 ]
[ Pregunta 4 ]
Comprueba el Accordion en móvil
Si utiliza componentes desplegables, prueba:
abrir preguntas;
cerrar;
textos largos;
enlaces;
scroll;
botones si existen.
No basta con comprobar que visualmente se vea correcto.
Tamaño de las preguntas
Las preguntas deben distinguirse claramente de las respuestas.
Puedes utilizar:
mayor Font weight;
color;
tamaño;
separación.
No hagas que las respuestas parezcan preguntas
Mantén una jerarquía clara.
Por ejemplo:
¿Realizan envíos? ← más destacado
Sí. Realizamos envíos... ← contenido
Espacio entre preguntas
Una FAQ necesita suficiente separación.
Evita:
PreguntaRespuestaPreguntaRespuestaPregunta
Utiliza:
Margin;
Padding;
divisores;
según el diseño.
Cards para FAQ
Una composición puede utilizar:
┌──────────────────────────┐
│ ¿Realizan envíos? │
│ Sí. Realizamos... │
└──────────────────────────┘
En ese caso puedes personalizar:
fondo;
borde;
Border radius;
Padding.
Si las Cards comparten Class
Por ejemplo:
faq-item
puedes aprovechar estilos compartidos.
Linked styles puede ser útil para mantener:
mismo Padding;
mismo borde;
misma tipografía.
No personalices cada pregunta de forma diferente sin motivo
Una FAQ funciona mejor con una interfaz predecible.
Evita:
Pregunta 1 → azul
Pregunta 2 → rojo
Pregunta 3 → verde
salvo que los colores representen categorías claramente definidas.
Iconos de abrir/cerrar
Si el diseño desplegable utiliza iconos:
+
−
o:
▾
▸
mantén una apariencia coherente.
No es necesario reemplazarlos salvo que tengas un objetivo concreto.
Hover en preguntas desplegables
Puedes utilizar un Hover sutil para indicar que la pregunta es interactiva.
Por ejemplo:
cambio de fondo;
cambio de color;
borde.
No exageres el Hover
Una FAQ debe priorizar la lectura.
Un efecto demasiado intenso puede distraer.
Hover no debe ser la única señal
En dispositivos táctiles no existe la misma interacción.
Utiliza también elementos como:
ícono;
forma de Card;
jerarquía visual;
para comunicar que la pregunta puede abrirse.
Animaciones
Si el componente ya dispone de una interacción de apertura/cierre, normalmente no necesitas agregar animaciones adicionales a cada respuesta.
Puedes utilizar:
Avanzado → Animate on scroll
sobre:
toda la Section;
el bloque general;
si quieres una entrada visual.
Evita animar cada pregunta con efectos distintos
La FAQ es principalmente una herramienta funcional.
Mantén la interfaz simple.
Sección FAQ en Home
Puedes utilizarla cerca del final:
Banner
↓
Beneficios
↓
Productos / Servicios
↓
Testimonios
↓
Preguntas frecuentes
↓
CTA / Contacto
Esto permite resolver objeciones antes de la acción final.
FAQ en una landing page
Puede resultar especialmente útil antes de un CTA.
Por ejemplo:
PLAN / SERVICIO
↓
BENEFICIOS
↓
TESTIMONIOS
↓
FAQ
↓
[ CONTRATAR / CONSULTAR ]
La sección responde dudas que podrían impedir avanzar.
FAQ en Productos
Puedes utilizar un bloque editable para responder preguntas generales relacionadas con:
compra;
entrega;
financiación;
garantía.
No intentes reemplazar con FAQ la información específica de cada producto.
FAQ específica de una página
También puedes crear preguntas relacionadas exclusivamente con una sección.
Por ejemplo:
Curso
↓
Preguntas sobre inscripción
Servicio
↓
Preguntas sobre implementación
Landing
↓
Preguntas sobre la promoción
No todas las preguntas necesitan estar concentradas en una única FAQ general.
FAQ y Contacto
Una buena sección de Preguntas frecuentes no debería impedir que el cliente pueda consultar algo no contemplado.
Puedes finalizar con:
¿No encontraste la respuesta que buscabas?
[ Contáctanos ]
Esto combina autoservicio con atención.
Ejemplo de cierre
¿TIENES OTRA CONSULTA?
Nuestro equipo puede ayudarte.
[ Contactar ]
Puede funcionar como CTA posterior a la FAQ.
No conviertas todas las respuestas en “Contáctanos”
Por ejemplo:
¿Realizan envíos?
Contáctanos.
¿Qué medios de pago aceptan?
Contáctanos.
¿Hay garantía?
Contáctanos.
no resuelve realmente las preguntas.
Responde lo que puedas directamente.
FAQ como herramienta para reducir consultas repetidas
Una buena sección puede ayudar a disminuir preguntas básicas.
Pero para conseguirlo debe contener información concreta y fácil de encontrar.
Aprende de las consultas reales
Puedes construir la FAQ utilizando preguntas que recibas habitualmente por:
WhatsApp;
correo;
redes sociales;
formularios;
equipo comercial;
soporte.
Estas son excelentes fuentes para detectar dudas frecuentes.
Revisa periódicamente qué preguntas siguen siendo útiles
Puede ocurrir que una pregunta deje de ser relevante.
Por ejemplo:
¿Atienden durante una determinada situación temporal?
meses después puede quedar desactualizada.
Elimina contenido que ya no corresponda.
También pueden aparecer nuevas preguntas
Si tu equipo empieza a recibir repetidamente:
¿Puedo integrar este servicio con X?
puede ser una señal de que conviene agregarla.
No necesitas conservar el orden original de la sección prediseñada
Puedes:
mover preguntas;
eliminar;
clonar;
reorganizar.
Utiliza Navigator para seleccionar la unidad correcta.
Ejemplo práctico: FAQ de una Página web comercial
Queremos:
PREGUNTAS FRECUENTES
¿Realizan envíos?
Sí. Realizamos envíos según las alternativas disponibles.
¿Qué medios de pago puedo utilizar?
Puedes consultar las opciones habilitadas durante el proceso de compra.
¿Los productos tienen garantía?
Las condiciones dependen del producto adquirido.
¿Puedo solicitar presupuesto?
Sí. Puedes comunicarte con nuestro equipo.
Paso 1
Abre:
Secciones → Preguntas frecuentes
Paso 2
Selecciona una composición.
Paso 3
Reemplaza el Heading general.
Paso 4
Reemplaza cada pregunta.
Paso 5
Reemplaza cada respuesta.
Paso 6
Elimina preguntas que no necesites.
Paso 7
Clona unidades si necesitas agregar más.
Paso 8
Ordena las preguntas por importancia.
Paso 9
Comprueba responsive.
Paso 10
Si utiliza Accordion, prueba la interacción.
Paso 11
Guarda.
Paso 12
Utiliza:
Ver página
Ejemplo práctico: FAQ por categorías
PREGUNTAS FRECUENTES
COMPRAS
¿Cómo realizo un pedido?
...
¿Qué medios de pago aceptan?
...
ENVÍOS
¿Realizan envíos?
...
¿Cuánto demora?
...
GARANTÍAS
¿Los productos tienen garantía?
...
¿Cómo solicito asistencia?
...
Este enfoque funciona cuando existe mucha información.
Ejemplo práctico: FAQ de un servicio
ANTES DE COMENZAR
¿Qué información necesitan para presupuestar?
...
¿Realizan una reunión inicial?
...
IMPLEMENTACIÓN
¿Cuánto demora?
...
¿Quién participa del proyecto?
...
DESPUÉS DE LA IMPLEMENTACIÓN
¿Existe soporte?
...
¿Cómo solicito cambios?
...
¿Qué hacer si la FAQ queda demasiado larga?
Puedes:
eliminar preguntas poco frecuentes;
simplificar respuestas;
agrupar por categorías;
utilizar Accordion;
dividir en varias secciones;
enlazar hacia documentación más detallada.
¿Qué hacer si todas las respuestas son muy largas?
Quizás la FAQ está intentando reemplazar una documentación completa.
Utiliza respuestas resumidas y dirige hacia contenidos específicos.
¿Qué hacer si una pregunta no se abre?
Si utilizas un componente Accordion:
utiliza Deshacer si acabas de modificar la estructura;
revisa Navigator;
compara con otra pregunta que funcione;
comprueba Classes e IDs;
evita modificar JavaScript si no es necesario.
¿Qué hacer si al clonar una pregunta el comportamiento se rompe?
Revisa especialmente:
estructura;
IDs personalizados;
enlaces internos;
Classes.
Clona la unidad completa y no partes aisladas del componente interactivo.
¿Qué hacer si una pregunta queda abierta visualmente todo el tiempo?
Primero comprueba si corresponde al diseño seleccionado.
No modifiques CSS para esconder el contenido sin revisar antes la estructura del componente.
¿Qué hacer si las respuestas se ven bien en desktop pero mal en celular?
Revisa:
Width;
Padding;
columnas;
tipografía;
textos largos;
enlaces.
Una FAQ debería poder leerse cómodamente en una sola columna móvil cuando sea necesario.
¿Qué hacer si aparece scroll horizontal?
Revisa:
Width fijo;
Min Width;
enlaces largos;
tablas dentro de respuestas;
elementos incrustados;
Padding;
CSS personalizado.
¿Qué hacer si una URL muy larga desborda?
Cuando sea posible utiliza un texto de enlace:
Ver condiciones completas
en lugar de mostrar una dirección extensa como contenido visible.
CSS personalizado para FAQ
Si necesitas un estilo avanzado, utiliza Classes específicas.
Por ejemplo:
faq-section
faq-list
faq-item
faq-question
faq-answer
CSS con scope
.faq-section .faq-item {
border-bottom: 1px solid #ddd;
}
.faq-section .faq-question {
font-weight: 600;
}
Evita
h3 {
font-weight: 600;
}
si solo quieres modificar las preguntas de esta sección.
Accordion y CSS
Si el componente utiliza Classes necesarias para su funcionamiento, conserva las existentes.
Puedes agregar Classes propias sin eliminar arbitrariamente las estructurales.
Ejemplo
Si un elemento ya tiene varias Classes necesarias, puedes agregar:
faq-question
manteniendo las anteriores.
IA para personalizar una FAQ
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Estoy trabajando con una sección de Preguntas frecuentes en Waclis.
La sección utiliza:
.faq-section
Cada unidad utiliza:
.faq-item
La pregunta utiliza:
.faq-question
La respuesta utiliza:
.faq-answer
Quiero:
- separación clara entre preguntas;
- preguntas con mayor peso tipográfico;
- Border radius de 12 px;
- Padding de 20 px;
- una columna en celular.
No modifiques otras secciones.
No elimines ninguna Class existente del componente.
No agregues JavaScript.
Devuélveme solamente el CSS necesario.
También puedes pedir ayuda para redactar las preguntas
Por ejemplo:
Tengo una empresa que vende [producto o servicio].
Estas son las consultas que recibimos habitualmente:
[pegar consultas]
Organízalas como una sección de Preguntas frecuentes.
Agrupa preguntas similares.
Redacta las respuestas en español neutro.
No inventes condiciones comerciales que no estén presentes en la información que te proporcioné.
Esto puede ayudarte a transformar consultas reales en una FAQ organizada.
Importante al utilizar IA para las respuestas
No permitas que invente:
garantías;
plazos;
precios;
cobertura;
políticas;
condiciones comerciales.
Proporciona siempre la información real.
Puedes pedir que detecte preguntas duplicadas
Por ejemplo:
Tengo estas 20 preguntas de clientes.
Identifica cuáles preguntan esencialmente lo mismo y propón una versión unificada para evitar repeticiones.
Esto puede ayudarte a reducir la cantidad.
Buenas prácticas para Preguntas frecuentes
Recomendamos:
utilizar preguntas reales;
escribirlas como las formularía el visitante;
responder directamente;
mantener respuestas claras;
priorizar las preguntas más importantes;
agrupar por categorías cuando haya muchas;
enlazar documentación extensa en lugar de copiarla completa;
mantener la información actualizada;
utilizar Navigator antes de clonar o eliminar;
conservar Classes necesarias en componentes desplegables;
comprobar la interacción móvil;
limitar CSS a la sección;
finalizar con un CTA de contacto cuando corresponda.
Errores frecuentes
Inventar preguntas solamente para promocionar la empresa
Utiliza dudas reales.
Confundir FAQ con Acordeón
FAQ es el contenido; Accordion es una forma de presentarlo.
Escribir preguntas como títulos genéricos
Prefiere preguntas reales.
Colocar varias dudas dentro de una sola pregunta
Divide conceptos.
Responder con largos textos institucionales antes de resolver la duda
Responde primero.
Crear respuestas demasiado extensas
Resume y enlaza cuando corresponda.
Incluir demasiadas preguntas sin organización
Agrupa por categorías.
Utilizar información desactualizada
Revisa periódicamente.
Clonar solamente el Heading de una pregunta
Selecciona la unidad completa.
Repetir IDs personalizados en componentes desplegables
Mantén cada ID único.
Eliminar Classes internas del Accordion
Puede dejar de funcionar.
Agregar JavaScript cuando el componente ya funciona
Modifica solamente lo necesario.
Utilizar dos columnas con respuestas largas en celular
Adapta la estructura.
Utilizar Hover como única indicación de interacción
Recuerda los dispositivos táctiles.
Utilizar CSS global
Limita el scope a FAQ.
Convertir cada respuesta en “Contáctanos”
Resuelve directamente las dudas cuando puedas.
No probar cada pregunta después de guardar
Comprueba la interacción mediante Ver página.
Flujo recomendado
1. REUNIR PREGUNTAS REALES
↓
2. ELIMINAR REPETICIONES
↓
3. PRIORIZAR
↓
4. AGRUPAR POR TEMAS SI ES NECESARIO
↓
5. ELEGIR DISEÑO
↓
6. AGREGAR SECCIÓN
↓
7. REEMPLAZAR PREGUNTAS
↓
8. REDACTAR RESPUESTAS
↓
9. AJUSTAR CANTIDAD
↓
10. CONFIGURAR ENLACES
↓
11. REVISAR ESTRUCTURA / ACCORDION
↓
12. ADAPTAR RESPONSIVE
↓
13. PROBAR INTERACCIÓN
↓
14. GUARDAR CAMBIOS
↓
15. VER PÁGINA
Checklist antes de publicar una FAQ
Las preguntas representan dudas reales.
Eliminé preguntas repetidas.
Las preguntas están redactadas claramente.
Cada pregunta trata un tema concreto.
Las respuestas resuelven directamente la consulta.
No inventé condiciones comerciales.
Los datos están actualizados.
Los enlaces funcionan.
Las respuestas extensas fueron resumidas cuando correspondía.
Organicé por categorías si existen muchas preguntas.
No quedan textos de ejemplo.
Revisé Navigator.
Las unidades clonadas mantienen una estructura correcta.
Los IDs personalizados son únicos.
Las Classes necesarias del componente se mantienen.
Las preguntas desplegables abren correctamente.
Las preguntas desplegables cierran correctamente cuando corresponde.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
Las respuestas son legibles en móvil.
No existe scroll horizontal inesperado.
El CSS personalizado está limitado a esta sección.
Existe una alternativa de contacto si el visitante no encuentra su respuesta.
Probé el resultado mediante Ver página.
En resumen
La sección Preguntas frecuentes permite anticipar y responder las dudas habituales de los visitantes.
Puedes utilizarla para informar sobre:
compras;
pagos;
envíos;
garantías;
servicios;
implementación;
soporte;
procesos;
requisitos.
La clave no está en agregar muchas preguntas, sino en responder las preguntas correctas.
Recuerda:
Preguntas frecuentes → define el contenido.
Acordeón → define una posible forma de organizar ese contenido.
Una buena FAQ debería ser:
clara;
concreta;
fácil de recorrer;
actualizada;
organizada;
responsive.
Cuando tengas muchas preguntas:
prioriza → agrupa → simplifica → enlaza información adicional.
Y si el visitante continúa teniendo una duda, puedes finalizar la sección con una llamada a la acción para contactar a tu equipo.
De esta forma, la FAQ no solo organiza información: también puede mejorar la experiencia del visitante y reducir consultas repetitivas.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp