ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

La pestaña Diseño le da control completo sobre cómo su popup se ve y se siente en el escaparate. Desde plantillas y tipografías hasta animaciones, colores, botones, estilo de coupon, e incluso CSS personalizado, casi todos los elementos visuales se pueden personalizar para que coincida con su identidad de marca.

Esta guía explica cada opción de diseño disponible para que pueda crear popups pulidos y de alta conversión.

⚠️ Antes de empezar

Para configurar la configuración de diseño:

→ Abrir un popup existente
→ O crear un nuevo popup primero

Luego cambiar a la Diseño tab dentro del editor popup.

ℹ️ Algunas secciones de diseño sólo aparecen para tipos específicos de popup o características habilitadas.

Ejemplos

• El temporizador de cuenta atrás sólo aparece para la cuenta regresiva PopUps
• El estilo de cupón sólo aparece cuando la pantalla de cupón está habilitada
• Slice styling sólo aparece para Spin Wheel PopUps

🎨 Plantilla

Las plantillas le permiten aplicar instantáneamente estilos visuales pre-designados a su popup. Esto ayuda a los comerciantes a lanzar popups de estilo profesional rápidamente sin configurar manualmente cada configuración de diseño individual.

Esto es útil cuando quieres un popup de estilo profesional sin personalizar manualmente cada configuración.

Ejemplos disponibles

• Dawn
• Viernes Negro
• Belleza
• Festive
• Forest
• Océano
• Aqua
• Electricidad
• Partido

Puede personalizar más adelante la plantilla seleccionada.

👀 Visibilidad

Controla qué dispositivos debe aparecer el popup. Esto ayuda a crear experiencias de popup más específicas dependiendo de si los clientes están navegando desde dispositivos de escritorio o móviles.

Opciones disponibles

• Escritorio y móvil - visibles en todas partes
• Sólo escritorio — ocultos en dispositivos móviles
• Sólo móvil — ocultos en dispositivos de escritorio

Esto es útil cuando se crean campañas específicas para dispositivos.

🖼️ Popup Background

Esta sección controla el estilo de fondo de ventana emergente. El estilo de fondo juega un papel importante en cómo apelar visualmente y captar la atención que el popup siente en el escaparate.

Fondo de color único

Usa un color de fondo sólido para el popup.

Puedes:

• Elija un color visualmente
• O pegar un código de color HEX manualmente

Gradient Background

Crea un efecto gradiente de dos colores.

Cuando está habilitado, aparecen ajustes adicionales:

• Grado en ángulo
• Color gradiente inicial
• Color gradiente final

ℹ️ Los controles de gradiente sólo se activan después de habilitar el fondo de gradiente.

🌫️ Antecedentes generales

Controla la superposición del almacén que se muestra detrás del popup. El overlay ayuda a cambiar el enfoque del cliente hacia el popup separando visualmente del resto del contenido de la tienda.

Por ejemplo, cuando se abre un popup, el resto del escaparate puede aparecer atenuado con una superposición oscura transparente para llamar la atención hacia el popup.

Opciones disponibles

• No hay antecedentes — El popup aparece sin una superposición
• Dim Background — añade una superposición semitransparente detrás del popup

📐 Popup Layout " Border

Estas configuraciones controlan la estructura y forma de popup general. Ajustar el espaciado, las fronteras y el tamaño correctamente ayuda al popup a sentirse limpio, más equilibrado y pulido visualmente.

📏 Tamaño de la Popup

Controla las dimensiones generales del popup.

Opciones disponibles

• Pequeña
• Mediana
• Grande
• Página completa

Los tamaños de popup más grandes proporcionan más espacio para imágenes, productos y contenido adicional.

🎨 Popup Window Color de fondo

Establece el color de fondo del contenedor popup en sí.

Puedes:

• Use el selector de color
• O introduzca manualmente un código de color HEX

🟦 Corner Radius

Controla lo redondeado que aparecen las esquinas popup.

Ejemplos

• Valores inferiores → esquinas más afiladas
• Valores superiores → esquinas redondeadas más suaves

🧱 Tamaño de la frontera

Controla el espesor de la frontera popup.

El valor se mide en píxeles.

🎨 Color de la frontera

Establece el color de la frontera popup.

✨ Popup Animation

Controla cómo entra el popup en la pantalla. Las animaciones de entrada ayudan a que el popup se sienta más suave e interactivo mientras que también lo hace más notable para los visitantes.

Opciones disponibles

• Fade
• Slide
• Bounce

Las animaciones ayudan a que el popup se sienta más suave e interactivo.

🔘 Botón flotante

ℹ️ Esta sección sólo aparece cuando Botón de acción flotante está habilitado en el Índice tab.

La configuración del botón flotante le permite personalizar la apariencia del botón que los visitantes hacen clic para abrir su popup. Estas opciones te ayudan a combinar el botón con el branding de tu tienda mientras lo mantienes visible y fácil de interactuar.

Ajustes disponibles

🔷 Forma

Elija la forma general del botón flotante.

Opciones disponibles

• Redonda
• Plaza
• Pill
• Circle

🎨 Button Color

Controla el color del icono o texto mostrado en el botón flotante.

Puedes:

• Elija un color usando el selector de color
• Introduzca un código de color HEX manualmente

🖌️ Tamaño de la fuente

Controla el tamaño del icono o texto mostrado dentro del botón flotante.

El valor se mide en píxeles.

🟫 Color de fondo

Establece el color de fondo del botón flotante.

Puedes:

• Elija un color usando el selector de color
• Introduzca un código de color HEX manualmente

🌑 Sombra

Añade un efecto de sombra opcional alrededor del botón flotante.

Opciones disponibles

• Ninguno
• Pequeña
• Mediana
• Grande

🧱 Color de la frontera

Controla el color de la frontera del botón flotante.

📐 Corner Radius

Controla cómo aparecen las esquinas del botón flotante.

Los valores superiores crean una apariencia más suave y redondeada.

🔤 Tipografía

Los ajustes de tipografía controlan cómo aparecen todos los elementos de texto dentro del popup. Estos ajustes ayudan a mantener la consistencia visual a través de encabezados, descripciones, botones y mensajes de validación para que el popup se sienta profesionalmente diseñado y fácil de leer.

La aplicación soporta fuentes incorporadas junto con fuentes temáticas.

🏷️ Título Tipografía

Controla el estilo del título popup.

Ajustes disponibles

• Título Fuente
• Título Tamaño
• Título Color

📝 Descripción Tipografía

Controla el estilo de la descripción popup.

Ajustes disponibles

• Descripción Fuente
• Descripción Tamaño
• Descripción Color

⚠️ Mensaje de error

Controla los mensajes de error de validación mostrados para ambos:

• Campos de correo electrónico
• Número de teléfono campos

Ajustes disponibles

• Fuente de error
• Tamaño del mensaje de error
• Mensaje de error

📝 Input Field Styling

Esta sección controla la aparición de campos de entrada de correo electrónico y número de teléfono. El estilo de entrada adecuado mejora la legibilidad y ayuda a las formas a sentirse más confiable y alineado visualmente con su marca de tienda.

Ajustes disponibles

• Texto de entrada Color
• Color de fondo de entrada
• Input Border Color

Estos ajustes ayudan a que sus campos de formulario coincidan con su marca de tienda.

🔘 Button Styling

Controla el diseño del botón de llamada a acción popup. Dado que el botón es generalmente el elemento de conversión principal dentro del popup, el estilo correctamente puede mejorar significativamente las tasas de clic a través y compromiso.

🔤 Button Font

Elija la familia de fuentes utilizada dentro del botón.

Puede utilizar:

• Fuentes temáticas
• Fuentes incorporadas

🎨 Button Color

Controla el color de fondo del botón.

🔠 Tamaño del texto del botón & Color

Este ajuste controla:

• Tamaño del texto (campo izquierdo)
• Elija de color de texto (campo medio)
• Valor de color HEX (campo derecho)

Ejemplo

• Texto blanco grande en botón oscuro
• Texto negro pequeño en botón brillante

Rincón Radius

Controla cómo aparecen los botones redondeados.

Los valores superiores crean botones más suaves.

🎟️ Coupon Styling

ℹ️ Esta sección sólo aparece cuando la pantalla de cupón está habilitada dentro de la pestaña Contenido.

Esta sección controla la apariencia del contenedor de código de cupón. Una sección de cupones de estilo visual hace que los descuentos se destacan más claramente y anima a los visitantes a copiar y utilizar la oferta durante el checkout.

🧾 Coupon Border Style

Elija el estilo fronterizo que rodea el área de cupón.

Ejemplos disponibles

• Sólido
• Dashed

🎨 Color de la frontera

Controla el color de la frontera del cupón.

🔤 Color de texto

Controla el color de texto mostrado dentro de la sección de cupones.

🖼️ Color de fondo

Controla el color de fondo de contenedor de cupón.

❎ Cerrar Icon Styling

Controla la apariencia del icono de popup cerca. A pesar de que es un pequeño elemento, la combinación del estilo icono con el diseño popup general ayuda a mantener una experiencia de usuario más limpia y pulida.

Ajustes disponibles

• Cerrar Icon Color
• Tamaño del icono

Opciones de tamaño disponibles

• Pequeña
• Mediana
• Grande

Regreso del tiempo del juego

ℹ️ Esta sección sólo aparece para Cuentadown PopUps.

Controla la apariencia visual del temporizador de cuenta atrás. El estilo de temporizador adecuado ayuda a crear la urgencia, asegurando que la cuenta regresiva siga siendo legible y visualmente coherente con el resto del diseño popup.

Ajustes disponibles

• Timer Style
• Timer Font
• Tamaño del tiempo
• Timer Color
• Color de fondo del temporizador
• Label Font
• Tamaño de la etiqueta
• Label Color

Estos ajustes ayudan a crear urgencia mientras mantiene el temporizador alineado visualmente con su escaparate.

🎡 Rueda de giro — Slice Styling

ℹ️ Esta sección sólo aparece para Spin Wheel PopUps.

Esta sección controla el estilo visual de las rodajas de rueda giratoria y componentes de rueda. Ajustar cuidadosamente estos ajustes puede hacer que la rueda se sienta más vibrante, juguetona y apropiada atención para los visitantes.

🎨 Colores de cáliz

Controles alternando los colores de fondo de rebanada.

Ajustes disponibles

• Slice 1 Color
• Slice 2 Color

Estos colores se alternan en toda la rueda.

🔤 Slice Label Styling

Controla el estilo de texto mostrado en cada rebanada de rueda.

Ajustes disponibles

• Slice Label Color
• Tamaño de la etiqueta de cáliz
• Slice Label Font

💬 Slice Mensaje Styling

Controla el estilo de rebanada recompensa o mensajes ganadores.

Ajustes disponibles

• Slice Mensaje fuente
• Tamaño del mensaje de Slice
• Color del mensaje

🎯 Colores de componentes de rueda

Controla los elementos de diseño de ruedas restantes.

Ajustes disponibles

• Color de borde de rueda
• Arrow Color
• Center Circle Color

💻 Custom CSS

💡 Los usuarios avanzados pueden aplicar su propio estilo CSS personalizado directamente dentro del editor popup.

Esto le permite personalizar elementos más allá de los controles de diseño estándar. Es especialmente útil para los comerciantes que quieren un estilo avanzado, ajustes móviles específicos, o una personalización visual más profunda.

🧩 Selectores comunes

El editor proporciona selectores listos como:

• .futureblink-popup
• .futureblink-popup .title
• .futureblink-popup .description
• .futureblink-popup .cta-button
• .futureblink-popup .close-btn

✅ Aplicando CSS

Después de añadir su CSS:

→ Aplicar para probar los estilos inmediatamente.

ℹ️ Si los estilos no se aplican correctamente, añadir !important a cada declaración se recomienda.

Ejemplo

.futureblink-popup .title {
color: #000 !importante;
}

🚀 Resultado final

Una vez configurado con éxito:

✅ Tu popup coincide con tu identidad de marca
✅ Tipografía, botones y entradas se sienten visualmente consistentes
✅ Las secciones de cupón y los temporizadores parecen pulidos
✅ Los popups de rueda giratoria se vuelven más visualmente atractivos
✅ Animaciones y superposiciones mejoran el enfoque del cliente
✅ CSS personalizado proporciona a los usuarios avanzados control más profundo
✅ Los clientes experimentan un diseño de popup más limpio y profesional 🎨

Actualizado el: 10/09/2026