We use cookies and similar technologies to improve your experience, analyse traffic, and personalise content. You can accept all cookies or reject non-essential ones.
Personaliza la apariencia visual de tu encuesta’s — elige entre cuatro tipos de diseño, aplica temas y ajusta colores, fuentes y espaciado para adaptarlos a tu marca.
SurveyAnalytica ofrece cuatro tipos de diseño distintos que controlan cómo se presentan las preguntas a los encuestados. Cada diseño está optimizado para casos de uso diferentes — desde formularios tradicionales de varias páginas hasta experiencias conversacionales modernas. Los diseños funcionan en todos los canales de distribución (enlace directo, incrustación en correo electrónico, código QR, widget de sitio web y más).
Abre el panel de Estilo en el creador de encuestas y expande la sección Diseño. Haz clic en un tipo de diseño para aplicarlo de inmediato. Un texto emergente explica cada diseño al pasar el cursor.
Diseño de formulario clásico con varias preguntas por página. Incluye navegación de páginas en la parte inferior. Ideal para encuestas largas con muchas preguntas, agrupando preguntas relacionadas en páginas lógicas.
Una pregunta a la vez con una página de inicio dedicada. Ideal para encuestados móviles. Los estudios muestran que este diseño logra tasas de finalización más altas al reducir la carga cognitiva.
Experiencia conversacional tipo chat con navegación por desplazamiento. Las preguntas aparecen como burbujas de mensaje. Muy atractivo para comentarios de clientes, encuestas NPS y sondeos informales.
Encuesta basada en tarjetas deslizables con gestos táctiles y animaciones fluidas. Adaptado al tacto y moderno. Perfecto para experiencias interactivas en tablets y dispositivos móviles.
| Característica | Paginado | Pregunta única | Diálogo | Carrusel |
|---|---|---|---|---|
| Preguntas por pantalla | Varias | Una | Por desplazamiento | Una (tarjeta) |
| Navegación | Botones Siguiente/Anterior | Botón Continuar | Desplazar + escribir | Deslizar / flechas |
| Indicador de progreso | Barra de progreso + número de página | Barra de progreso + porcentaje | Posición de desplazamiento | Indicador de puntos |
| Ideal para | Encuestas largas y estructuradas | Móvil, sondeos rápidos | Comentarios, NPS | Interactivo, tablets |
| Optimizado para móvil | Sí | Excelente | Excelente | Excelente |
| Página de inicio | Opcional | Sí (integrada) | Opcional | Opcional |
Transforma al instante el aspecto de tu encuesta aplicando un tema prediseñado. SurveyAnalytica incluye una biblioteca de temas seleccionados que abarca 13 categorías — desde temas corporativos profesionales hasta diseños creativos vibrantes, temas oscuros y temas con fondo fotográfico. Cada tema establece colores, tipografía, estilos de botones, apariencia de la barra de progreso y más con un solo clic.
| Categoría | Descripción | Temas de ejemplo |
|---|---|---|
| Profesional | Temas limpios y apropiados para negocios con tonos neutros | Ocean Blue, Slate Pro, Navy Classic |
| Moderno | Diseños contemporáneos con acentos llamativos y líneas limpias | Neo Mint, Urban Chic, Gradient Wave |
| Minimalista | Estética simplificada con amplio espacio en blanco | Mint Fresh, Paper White, Zen Garden |
| Vibrante | Temas atrevidos y coloridos que destacan | Sunset Glow, Coral Reef, Tropical |
| Oscuro | Fondos oscuros con acentos de alto contraste | Midnight, Obsidian, Dark Matter |
| Corporativo | Temas de nivel empresarial para encuestas formales | Corporate Steel, Executive, Trust Blue |
| Creativo | Temas expresivos con elementos lúdicos | Electric Purple, Neon Pop, Art Deco |
| Salud | Temas tranquilos y accesibles para contextos médicos | Clinical Blue, Wellness Green, Care Soft |
| Educación | Temas amigables y legibles para uso académico | Campus Gold, Scholar, Classroom |
| Tecnología | Diseños orientados a la tecnología con estética digital | Cyber Teal, DevOps Dark, Silicon |
| Finanzas | Temas confiables y conservadores para encuestas financieras | Bank Green, Trust Gold, Fiscal Blue |
| Retail | Temas orientados al cliente para comercio electrónico y venta minorista | Shop Red, Cart Orange, Brand Pop |
| Foto | Temas con imagen de fondo y efectos de superposición | Mountain Vista, City Lights, Nature |
Cada tarjeta de tema en la galería muestra una vista previa en miniatura en vivo que incluye:
Más allá de los temas, tienes control granular sobre cada elemento visual de tu encuesta. El panel de Estilo en el creador de encuestas te permite personalizar colores, fuentes, tamaños, pesos y espaciado para cada elemento de forma independiente. Los estilos personalizados se pueden aplicar sobre un tema o crearse desde cero.
Los selectores de color están disponibles para todos los elementos de texto y fondo. Haga clic en cualquier muestra de color para abrir un selector de color con entrada hexadecimal. Se pueden personalizar los siguientes colores:
SurveyAnalytica se integra con Google Fonts, dándole acceso a cientos de tipografías. Seleccione una fuente en el menú desplegable del panel de Estilo. La fuente se aplica globalmente a todo el texto de la encuesta: títulos, preguntas, opciones, botones y descripciones utilizan todos la familia de fuentes seleccionada.
El contenido de la encuesta puede alinearse a la izquierda, al centro o a la derecha. La configuración de alineación controla la ubicación horizontal de todo el contenido de la encuesta dentro del contenedor. La alineación a la izquierda es la predeterminada y se recomienda para encuestas más largas. La alineación al centro funciona bien para encuestas cortas y enfocadas.
El panel de Estilo organiza los controles en secciones colapsables para cada tipo de elemento. Expanda una sección para configurar sus propiedades específicas:
| Propiedad | Qué controla | Valores de ejemplo |
|---|---|---|
| Estilo de pregunta | Tamaño de fuente, color y peso del texto de la pregunta | 16px, #2C2D5F, Medium (500) |
| Estilo de opción | Tamaño de fuente, color, peso y fondo de las opciones de respuesta | 14px, #A0A0AE, Regular (400), fondo #F4F6F7 |
| Estilo de botón | Fondo del botón Siguiente/Enviar, color del texto, radio del borde | Fondo #32DEFF, texto #33344B, redondeado 4px |
| Estilo de descripción | Texto de ayuda debajo del título de la encuesta y las preguntas | 16px, #666666, Regular (400) |
| Caja de pregunta | Estilo del contenedor de cada tarjeta de pregunta | Fondo transparente, radio de borde 8px, relleno 20px |
| Número de pregunta | Visualización, color y tamaño de la etiqueta numérica | Visible/oculto, #A0A0AE, 14px |
| Título de la encuesta | Texto del título principal en la parte superior de la encuesta | 28px, #2C2D5F, Semi-Bold (600) |
| Título de página | Texto del encabezado de sección/página | 22px, #2C2D5F, Semi-Bold (600) |
| Pie de página / T&C | Color del texto y fondo del pie de página | 14px, texto #ffffff, fondo #2C2D5F |
| Etiquetas de propiedad/calificación | Etiquetas para propiedades de NPS, calificaciones y matrices | 14px, #A0A0AE, Regular (400) |
Cada elemento de texto admite cuatro niveles de peso de fuente:
| Peso | Valor | Mejor para |
|---|---|---|
| Light | 300 | Descripciones sutiles, texto de ayuda |
| Regular | 400 | Texto del cuerpo, opciones, contenido general |
| Medium | 500 | Preguntas, etiquetas, énfasis |
| Bold | 600 | Títulos, encabezados, elementos de llamada a la acción |
Cada pregunta representada en su encuesta se compone de varias capas con estilo. Comprender la anatomía de una tarjeta de pregunta le ayuda a realizar personalizaciones específicas. El siguiente diagrama muestra cómo se asigna cada propiedad de estilo a un elemento visible.
El sistema de temas sigue un modelo de prioridad en cascada. Cuando personaliza el estilo de una encuesta, las propiedades se resuelven en este orden:
Para un estilo rápido y global, SurveyAnalytica ofrece escalas preestablecidas que se aplican en cascada a múltiples elementos de la encuesta simultáneamente. En lugar de ajustar individualmente los tamaños de fuente y los valores de espaciado, seleccione un nivel de escala y todas las propiedades relacionadas se actualizarán juntas. Esto se denomina Modo Simple; actívelo en la parte superior del panel de Estilo.
| Categoría de ajuste preestablecido | Opciones | Qué afecta |
|---|---|---|
| Tipografía | Compacta (12-20px), Pequeña (14-24px), Mediana (16-28px), Grande (18-36px), Extra Grande (20-48px) | Tamaños de fuente del título de la encuesta, título de página, título de pregunta, descripción, opción, botón, número de pregunta y pie de página |
| Espaciado | Compacto (8-12px), Pequeño (12-16px), Mediano (16-24px), Grande (20-32px), Amplio (28-48px) | Separación entre preguntas, separación entre opciones, relleno de sección, relleno de contenido, relleno y margen de la caja de pregunta |
| Radio de borde | Ninguno (0px), Sutil (4-6px), Mediano (8-12px), Redondeado (12-16px), Píldora (24-50px) | Esquinas de botones, esquinas de opciones, esquinas de la caja de pregunta, esquinas de los campos de entrada, esquinas de las tarjetas |
| Densidad | Compacta, Cómoda, Amplia | Multiplicador de relleno general, multiplicador de separación, tamaño del área táctil (40-56px), relleno de opciones y botones |
| Elemento | Compacto | Pequeño | Mediano | Grande | Extra Grande |
|---|---|---|---|---|---|
| Título de la Encuesta | 20px | 24px | 28px | 36px | 48px |
| Título de Página | 16px | 18px | 20px | 24px | 32px |
| Título de Pregunta | 14px | 16px | 18px | 20px | 24px |
| Descripción | 12px | 14px | 16px | 18px | 20px |
| Opciones | 12px | 14px | 16px | 18px | 20px |
| Botones | 12px | 14px | 16px | 18px | 20px |
| Número de Pregunta | 11px | 12px | 14px | 16px | 18px |
| Pie de página / T&C | 10px | 12px | 14px | 16px | 18px |
Los preajustes proporcionan valores de referencia. Cualquier valor explícito que establezcas en el Modo Avanzado (por ejemplo, cambiar el tamaño de fuente de la pregunta a 22px) anula el valor del preajuste para esa propiedad específica. Las demás propiedades siguen usando la escala del preajuste. Esto te ofrece lo mejor de ambos mundos: ajustes globales rápidos mediante preajustes y control quirúrgico mediante anulaciones explícitas.
Haz que tu encuesta sea inconfundiblemente tuya. Sube el logotipo de tu empresa, define una imagen de fondo de marca o ajusta el color de fondo con control de opacidad. Todos los elementos de marca se configuran en el panel de Estilo y se aplican de inmediato en la vista previa de la encuesta.
Sube el logotipo de tu empresa (PNG, JPG, SVG). Define la posición como arriba a la izquierda, arriba al centro o arriba a la derecha. Ajusta el tamaño del logotipo (180px por defecto) y la opacidad (0-100). El logotipo aparece en la parte superior de la encuesta para todos los encuestados.
Sube una imagen de fondo o proporciona una URL. La imagen llena el fondo de la encuesta con tamaño de cobertura, fijación fija y posición centrada. Combínala con un control deslizante de opacidad de superposición para mejorar la legibilidad.
Define un color de fondo sólido con control de opacidad (0-100). Elige cualquier color hexadecimal y ajusta la transparencia para crear efectos sutiles o dramáticos. Funciona de forma independiente o debajo de una imagen de fondo.
Define tus colores primario, secundario y de acento. Estos se propagan a los botones, opciones seleccionadas, barras de progreso y destacados en toda la encuesta para mantener una marca coherente.
| Propiedad | Valor Predeterminado | Descripción |
|---|---|---|
| Tamaño | cover | La imagen se escala para llenar toda el área de fondo |
| Repetición | no-repeat | La imagen no se repite en mosaico |
| Posición | center center | La imagen se centra tanto horizontal como verticalmente |
| Fijación | fixed | La imagen permanece fija mientras el contenido se desplaza (efecto parallax) |
| Opacidad | 100 | Opacidad total (0 = totalmente transparente, 100 = totalmente opaco) |
La barra de progreso ofrece a los encuestados una indicación visual de cuánto han avanzado en la encuesta. Aparece en la parte superior de la encuesta y se actualiza automáticamente a medida que se responden preguntas o se navega entre páginas.
La barra de progreso puede mostrarse u ocultarse mediante el conmutador de visibilidad en el panel de Estilo. Cuando está visible, se muestra como una barra horizontal con un relleno que crece de izquierda a derecha.
| Propiedad | Valor Predeterminado | Descripción |
|---|---|---|
| Fondo de la Pista | #5657AA | La parte sin rellenar de la barra de progreso |
| Color de Relleno | #32DEFF | El color de la parte rellenada/completada |
| Altura | 12px | Grosor vertical de la barra de progreso |
| Radio de Borde | 50px (forma de píldora) | Redondeo de las esquinas de la barra de progreso |
| Opacidad | 100 | Transparencia de la barra de progreso (0-100) |
| Fondo del Encabezado | #2C2D5F | Color de fondo del contenedor que aloja la barra de progreso |
| Diseño | Cálculo del progreso | Estilo de visualización |
|---|---|---|
| Paginado | Página actual / total de páginas | Barra horizontal en la parte superior, etiqueta de número de página |
| Pregunta única | Pregunta actual / total de preguntas | Barra horizontal en la parte superior con porcentaje |
| Diálogo | Preguntas respondidas / total de preguntas | Barra horizontal en la parte superior |
| Carrusel | Tarjeta actual / total de tarjetas | Indicador de puntos en la parte inferior de la tarjeta |
Ajuste con precisión qué elementos son visibles en su encuesta. Los interruptores de visibilidad le permiten mostrar u ocultar componentes específicos sin eliminarlos, algo útil para crear experiencias de encuesta limpias y sin distracciones.
| Elemento | Predeterminado | Descripción |
|---|---|---|
| Barra de progreso | Visible | Muestra u oculta el indicador de progreso en la parte superior |
| Números de pregunta | Visible | Muestra u oculta el distintivo numérico junto a cada pregunta |
| Indicador de obligatoriedad | Visible | Muestra u oculta el asterisco rojo (*) en las preguntas obligatorias |
| Título de la encuesta | Visible | Muestra u oculta el encabezado principal del título de la encuesta |
| Descripción de la encuesta | Visible | Muestra u oculta el texto de descripción debajo del título |
| Temporizador | Oculto | Muestra u oculta el temporizador de cuenta regresiva (si está configurado) |
| Títulos de página | Visible | Muestra u oculta los encabezados de sección/página |
| Descripciones de página | Visible | Muestra u oculta las descripciones de sección/página |
| Logotipo | Visible | Muestra u oculta el logotipo cargado |
| Pie de página | Visible | Muestra u oculta la barra de pie de página/términos y condiciones |
| Powered By | Visible | Muestra u oculta la marca de SurveyAnalytica |
SurveyAnalytica admite transiciones fluidas entre páginas y preguntas. Las animaciones están activadas de forma predeterminada y pueden configurarse en los ajustes del tema.
| Ajuste | Predeterminado | Opciones |
|---|---|---|
| Animaciones activadas | Sí | Activa o desactiva todas las animaciones |
| Duración | 0,3 s | Velocidad de las animaciones de transición |
| Suavizado (easing) | ease-out | Curva de suavizado de la animación |
| Transición de página | fade | fade, slide, none |
| Transición de pregunta | fade | fade, slide, none |
| Sombras de tarjeta | Desactivado | Activa la sombra paralela en las tarjetas de pregunta |
| Propiedad | Valor predeterminado | Ubicación |
|---|---|---|
| Tipo de diseño | paginated | Style > Layout |
| Familia tipográfica | Poppins | Style > Font |
| Alineación | left | Style > Layout |
| Color de fondo | #ffffff (blanco) | Style > Colours |
| Color de texto principal | #2C2D5F | Style > Text |
| Color de texto secundario | #A0A0AE | Style > Text |
| Fondo del botón | #32DEFF | Style > Button |
| Color de texto del botón | #33344B | Style > Button |
| Fondo de opción | #F4F6F7 | Style > Options |
| Fondo de opción seleccionada | #32DEFF | Style > Options |
| Relleno de la barra de progreso | #32DEFF | Style > Progress Bar |
| Pista de la barra de progreso | #5657AA | Style > Progress Bar |
| Fondo del pie de página | #2C2D5F | Style > Footer |
| Fondo del cuadro de pregunta | transparente | Style > Question Box |
| Radio de borde del cuadro de pregunta | 8px | Style > Question Box |
| Color del indicador de obligatoriedad | #FF4444 | Style > Required |
| Ancho máximo del contenido | 800px | Style > Layout |