Cómo agregar ventanas emergentes
Las campañas de marketing son esenciales para cualquier tienda online, ya que captan la atención de los visitantes y destacan ofertas especiales, promociones por tiempo limitado y productos específicos. Una de las formas más eficientes de implementarlas es mediante ventanas emergentes que aparecen directamente en tu sitio web.
En esta guía, aprenderás a agregar ventanas emergentes en tu tienda Ecommerce.
¿Qué son las ventanas emergentes?
Las ventanas emergentes te permiten mostrar mensajes personalizados en la parte superior de tu tienda online. El propósito del mensaje puede variar. Algunos de los usos más comunes de las ventanas emergentes son:
- ofertas de bienvenida
- promociones
- suscripciones a boletines, etc.
Puedes crearlas visualmente en el Website Builder, controlar quién las ve y cuándo, y activarlas o desactivarlas en cualquier momento.
Cómo añadir ventanas emergentes
En el Website Builder, navega por el menú lateral izquierdo y abre la sección Ventanas emergentes, donde se muestran todas las ventanas emergentes de tu sitio. Cada ventana emergente tiene uno de dos estados:
- Activa: publicada y visible para los visitantes en tu sitio web (sujeta a sus reglas de visualización).
- Inactiva: borrador. Los cambios en una ventana emergente inactiva no se publican; la revisión permanece en estado de borrador hasta que la actives.
Haz clic en el botón + AÑADIR NUEVO en la parte superior de la sección.
Aparecerá una nueva ventana donde puedes seleccionar una plantilla de ventana emergente o crear un nuevo diseño desde cero.
- Las plantillas están organizadas en las categorías Bienvenida, Promociones y Suscribirse listadas a la izquierda. La primera plantilla de la categoría Bienvenida se muestra y selecciona por defecto.
- Para empezar desde cero, usa + AÑADIR VENTANA EMERGENTE EN BLANCO en la parte superior de la galería.
- Al seleccionar una plantilla, aparecerá el botón Añadir ventana emergente. Al hacer clic en Añadir ventana emergente, se creará la ventana emergente a partir de la plantilla elegida y se abrirán sus Ajustes para que puedas configurarla de inmediato.
Cómo editar una ventana emergente
Pasa el cursor sobre cualquier ventana emergente en la lista de Ventanas emergentes y selecciona el icono de Acciones (tres puntos) a la derecha.
Las opciones del menú son:
| Acción | Qué hace |
|---|---|
| Ajustes | Abre el panel de ajustes de la ventana emergente. |
| Mostrar en | Salta directamente a las reglas de Mostrar en para esta ventana emergente. |
| Activar | Abre una ventana de confirmación que te permite publicar la ventana emergente. |
| Desactivar | Despublica la ventana emergente y la devuelve al estado de borrador. |
| Duplicado | Crea una copia exacta de la ventana emergente seleccionada con todos los ajustes predefinidos. La copia se establece como Borrador por defecto. |
| Eliminar | Muestra una ventana de confirmación que permite eliminar la ventana emergente. |
Ajustes
El panel de Ajustes tiene dos pestañas: General (predeterminada) y Mostrar en.
General
| Campo | Opciones / comportamiento |
|---|---|
| Estado de la ventana emergente | Inactiva (configurado por defecto) o Activa. |
| Nombre de la ventana emergente | Obligatorio. Para una ventana emergente nueva, el nombre predeterminado es #(Nombre de la categoría) #(número) si se eligió una plantilla o #Nueva-VentanaEmergente #(número) si se creó una ventana emergente en blanco. Se puede cambiar el nombre posteriormente. |
| Mostrar a | Define qué tipo de visitantes pueden ver la ventana emergente. Las opciones son Todos los usuarios (predeterminada), Solo registrados o Solo invitados. |
| Regla de visualización | Establece el activador de la ventana emergente. Las opciones son Retardo de tiempo, Desplazamiento o Tiempo y desplazamiento (predeterminada). Si se selecciona Tiempo y desplazamiento, aparecerá al desplazarse o después del tiempo preestablecido, según lo que ocurra primero. |
| Retraso de tiempo | Disponible para Retardo de tiempo o Tiempo y desplazamiento: Después de 5 segundos (predeterminado), Después de 10 segundos o Después de 30 segundos. |
| Desplazamiento | Mostrado para Desplazamiento o Tiempo y desplazamiento: 25% abajo (por defecto), 50% abajo o 75% abajo. |
| Mostrar en móviles | Define si la ventana emergente se muestra en dispositivos móviles o no. Activado por defecto. |
| Reaparecer después de | Determina la frecuencia con la que aparece la ventana emergente. Las opciones son 1 día, 7 días, 14 días, 30 días (predeterminado) y Nunca. |
Mostrar en
La pestaña Mostrar en controla dónde aparece la ventana emergente en tu sitio web.
El control principal es el interruptor Mostrar en todas partes, que está activado por defecto:
- Activado: la ventana emergente se muestra en todo el sitio, incluidas las nuevas páginas, marcas, productos o categorías que añadas posteriormente. Los cuatro selectores de categoría que aparecen a continuación están bloqueados; las selecciones anteriores se conservan en modo de solo lectura.
- Desactivado: permite seleccionar dónde aparece la ventana emergente. Puedes elegir entre las siguientes categorías de elementos del sitio web: Páginas, Marcas, Categorías y Productos. Si una categoría no contiene elementos, no se mostrará en este menú.
Cada categoría tiene una casilla de verificación principal junto a su nombre que funciona como Seleccionar todo: al marcarla, se seleccionan todos los elementos (los elementos que se añadan en el futuro se seleccionarán automáticamente) en esa categoría, al desmarcarla se borrará. Usa el cuadro de Búsqueda para encontrar rápidamente un elemento específico.
Cómo cambiar el estado de la ventana emergente
Al activar o desactivar una ventana emergente, siempre se te pedirá confirmación, ya que al activarla se vuelve visible públicamente:
Haz clic en PUBLICAR para confirmar, o CANCELAR para dejar el estado sin cambios.
Cómo editar el diseño de las ventanas emergentes
Haz clic en el nombre de una ventana emergente en la lista para abrirla en el editor visual. La ventana emergente se mostrará en un lienzo atenuado, lista para editar.
Las ventanas emergentes se basan en una cuadrícula y puedes añadir componentes a la misma. Los componentes disponibles son: Texto, Imagen, Botón, Vídeo, Formulario de contacto, Formas, Formulario de suscripción, Código y Artículo individual (de tu tienda).
Haz clic en cualquier parte de la ventana emergente (en su fondo, no en ninguno de sus componentes) para abrir la ventana emergente Editar ventana emergente. Tiene dos pestañas: General y Diseño.
General controla la cuadrícula y la tarjeta:
- Cuadrícula: Espacio y Espacio entre filas, configurados en Ninguno, S, M (predeterminado) o L.
- Tarjeta: Relleno y Radio de esquina, cada uno configurado en Ninguno, S, M (por defecto), o L.
Diseño controla la apariencia:
- Paleta: elige una de las paletas de colores preestablecidas.
- Fondo: elige Color o Imagen. Color muestra un selector de color y la opción Color de superposición. Imagen te permite añadir una imagen de fondo:
Una vez añadida una imagen, aparecen controles adicionales: Tamaño de la imagen (Original, Rellenar, Ajustar), Posición de la imagen (Superior izquierda, Superior central, Superior derecha, Izquierda, Centro —predeterminado, Derecha, Inferior izquierda, Inferior central, Inferior derecha), Fondo (Desplazamiento, Fijo) y Superposición/Color de la superposición.
Cómo previsualizar las ventanas emergentes
En la vista previa del editor, una ventana emergente activa se muestra siempre que se cumplan sus reglas de visualización. La frecuencia de reaparición se anula durante la vista previa, por lo que la ventana emergente se muestra siempre, lo que facilita la comprobación del trabajo.
