Cómo agregar una ventana emergente a los sitios de WordPress libremente y rápidamente

Cuando visita un sitio web, ¿alguna vez ha visto una imagen o mensaje que se muestra repentinamente en la pantalla? Esta es la ventana emergente o la ventana de notificación del sitio.
Se esconde el contenido
1. ¿Por qué debería usar una ventana emergente en un sitio web de negocios?
2. Agregue una ventana emergente a WordPress con Plugin PopUp Builder
2.1. Paso 1: elija el tipo emergente
2.2. Paso 2: Agregue contenido a la ventana emergente
2.3. Paso 3: Configure la ubicación de la pantalla y la condición de la ventana emergente
2.4. Paso 4: Personalizar la pantalla emergente
2.5. Paso 5: Personalizar otras configuraciones avanzadas
3. Las últimas palabras
La ventana emergente es una estrategia de marketing popular y eficiente, utilizada por muchos empresarios y propietarios de sitios web. Para agregar una ventana emergente a WordPress, puede usar un complemento gratuito para hacerlo de forma rápida y simple. Incluso si no es un experto, solo lleva 10 minutos seguir nuestras instrucciones.
¿Por qué debería usar una ventana emergente en un sitio web de negocios? La imagen a continuación es un ejemplo para la ventana emergente de un sitio web comercial. Se ve genial, ¿no?

La ventana emergente no solo es increíble (si logras diseñar una buena y atractiva), sino que tiene muchos otros beneficios, como:
Promover información importante, ventas y campañas de marketing, …
Instar, aumentar la tasa de conversión
Generar plomo
Agregue una ventana emergente a WordPress con Plugin PopUp Builder para agregar una ventana emergente a su sitio de WordPress, puede contratar una empresa de diseño web creíble o un programador. Sin embargo, para ahorrar tiempo y dinero, el complemento es la mejor opción. Entre los muchos complementos emergentes disponibles, PopUp Builder puede ser el más fácil de usar y más efectivo. Es un complemento gratuito y disponible en WordPress.org, por lo que solo tiene que instalar y activar el complemento directamente en el tablero.
Después de haber terminado, siga estos pasos a continuación. Paso 1: Elija el tipo emergente ahora, el submenú del constructor emergente aparecerá en el tablero. Vaya allí, haga clic en Agregar noticias y elija uno de los 4 tipos de ventanas emergentes proporcionadas.

Para una mejor ilustración, la siguiente imagen muestra cómo se muestran los 4 tipos de ventanas emergentes proporcionadas por este complemento en el frente.

Después de haber elegido el tipo deseado, pase al siguiente paso. Paso 2: Agregue el contenido a la ventana emergente primero, brinde una ventana emergente para administrarlo más fácilmente.

Los diferentes tipos de ventana emergente necesitan contenido diferente. Vamos a profundizar en cada tipo. Agregue contenido a ventanas emergentes de Facebook en la interfaz para crear Windows emergente de Facebook, debe completar esta información:

El mensaje que aparece en la ventana emergente. Debe usar una necesidad de alentar a los lectores a interactuar. También debe agregar fotos, pancartas, para que sea más sorprendente.
Ingrese la URL de Facebook.
Elija una apariencia para la ventana emergente por capricho. Básicamente, estos aspectos no son tan diferentes. Por lo tanto, puedes probarlos y elegir el favorito.
Haga clic aquí para ocultar el botón de distribución si lo desea. Y que tengo:
Agregue contenido a Windows de imágenes emergentes Aquí solo tiene que cargar la imagen o ingresar el enlace de la imagen. Este complemento acepta JPG, PNG y GIF.

Esta es una buena pancarta que hice solo para la campaña del Black Friday de mi sitio:

Agregar contenido a Windows emergente HTML Agregar contenido emergente HTML es el mismo que escribe una publicación en WordPress Gutenberg Editor. Puede insertar imágenes, videos, tablas, botones, citas, etc. O cualquier otro contenido que acepte el editor de WordPress. La interfaz es algo similar al editor de Gutenberg, por lo que es bastante amable y nativa.

Y esta es mi ventana emergente HTML en el front-end:

Agregue contenido a las ventanas emergentes para la suscripción aquí tenemos suficiente contenido para completar y personalizar para el formulario de suscripción. Sin embargo, lo que más necesita ver son los campos en el formulario, como el nombre, el nombre, el correo electrónico y personalizar el sustituto y el campo obligatorio.

Después de eso, desplácese hacia abajo y personalice la pantalla del formulario en términos de la forma del formulario, el estilo de las entradas, los estilos de los botones de referencia para hacerlo más sorprendente y más adecuado con el sitio web.

En particular, en la sección después de la suscripción exitosa, elige con tacto un mensaje adecuado o la información que desea mostrar a los usuarios después de suscribirse. Por ejemplo, puede mostrar calificaciones, cupones, regalos, tarjetas de regalo, … para estos suscriptores. Al hacerlo, puede dibujar las impresiones de los usuarios y mejorar su experiencia.

Por ejemplo, este es el correo electrónico emergente para mi suscripción. Una vez que hayan sido enviados, mostraré una notificación sobre la campaña de descuento del Black Friday, instando a los clientes a ir de compras. Accece Popup Builder> Todos los suscriptores para administrar a los suscriptores.
Incluso puede enviar correos electrónicos a los suscriptores a la pestaña Boletín.

Después de haber agregado contenido, desplácese hacia abajo. Verá muchas otras opciones de configuración. Cavemos en cada opción en los pasos 4.5.6. Paso 3: Configure la ubicación de visualización y la condición de la ventana emergente Configure la ubicación de visualización en la sección Reglas de visualización emergente, debemos ajustar dónde aparecerá la ventana emergente. Puede elegir en todas partes para mostrarlo en cada página, publicar, etiquetar o personalizarlo, o mostrarlo en cierto lugar. También puede hacer clic en el indicador (?) Para obtener más detalles.

Por ejemplo, elijo la ubicación como una página determinada, elijo “IS” para mostrarla y elegir la página de visualización como “Inicio”. Además, puede agregar otras ubicaciones eligiendo ADD.


Configure la condición de visualización en la sección Eventos emergentes, elija el momento en que aparezca la ventana emergente (cuando el sitio web se haya cargado durante unos segundos, cuando los usuarios hacen clic en algún lugar, etc.). Este complemento acepta las siguientes condiciones de visualización:

Al cargar: la ventana emergente aparecerá automáticamente después de unos segundos (puede agregar el número de segundos a la pestaña de retraso) desde el momento en que el sitio ha terminado de cargar.
Establecer por clase CC: permita a los usuarios hacer clic en un componente para activar la ventana emergente. Este componente dependerá de su identificación. Esta parte es bastante complicada, por lo que sería bueno leer la documentación cuidadosamente.

Al hacer clic: Similar a la sección establecida por CSS Class, pero no debe usar la ID de ventana emergente para instalar el “botón” para activarlo. En su lugar, si elige predeterminado en la sección Opciones, el complemento creará un predeterminado. Clase para la ventana emergente en la sección de clase predeterminada, como se muestra a continuación.
Si elige CSS personalizado, complete la clase que creó en la sección de clase personalizada.

Después de eso, agregue la clase emergente al CSS del componente que desee. Por ejemplo, en esta publicación, agregué un botón y clase que quiero en la sección de clase CSS adicional.

Este es el resultado en el front-end:
Haga clic en el paso: cuando pase con el mouse en un componente, aparecerá la ventana emergente. Puede hacer lo mismo que en la sección On -Hick.

Paso 4: Personalice la pantalla emergente después del paso 3, tenía una ventana emergente básica. Pero si quieres ser más sorprendente, desplácese hacia abajo hasta la sección de diseño. Aquí puede personalizar algunos componentes, como la interfaz, la superposición, el fondo para hacerlo perfecto como se prefiere.

Además, en la sección Dimensiones, ajuste el ancho y la longitud eligiendo el modo personalizado o eligiendo el modo receptivo para que el tamaño coincida automáticamente con el contenido.

Paso 5: Personalice otras configuraciones avanzadas. Estas configuraciones avanzadas le permiten configurar la pantalla y la interacción con la ventana emergente … de una manera más detallada. Por ejemplo, puede elegir cómo cerrar la ventana emergente en la sección Cerrar la configuración. Hay muchas maneras de cerrarlo, como presionar ESC o agregar un botón de cierre, … elija uno o más, dependiendo de usted.

Si desea agregar efectos de cierre y apertura de la ventana Pop -Up o ajustar las horas en que se muestra para un usuario, desplácese hacia abajo a la sección de opción Pop -Up. Solo tiene que hacer clic en la opción deseada y termina. Tenga en cuenta que cuando usa el complemento gratuito de Builder PopUp, las secciones llamadas opción de desbloqueo de color amarillo, como en la imagen a continuación, son características de la versión Pro. Debe comprar varias extensiones de este complemento para usarlos. Finalmente, en la barra lateral, hay una opción muy interesante: agregar un botón fijo para mostrar la ventana emergente al hacer clic. Este botón flotante es muy conveniente, lo que permite a las personas verlo en cualquier momento y en cualquier lugar. Su diseño también es agradable y no molesto.

Este es el botón flotante en el sitio:

O puede deshabilitarlo haciendo clic.

Finalmente, haga clic en la publicación para completar. Por lo tanto, completó la ventana emergente después de 6 pasos desde la configuración básica a avanzada. ¡Hiciste un buen trabajo! Las últimas palabras, como puede ver, agregar una ventana emergente a WordPress no es realmente complicado. Solo tienes que tener un poco de paciencia al personalizar su exhibición, ¡ese es todo el trabajo duro! Además, hay muchas cosas para aumentar la tasa de conversión del sitio web. Si desea crear una página de destino eficiente, debe leer más artículos sobre cómo crear una página de conversión grande o cómo crear una página de producto. ¡Suerte!