Cómo agregar una ventana emergente a los sitios web de WordPress de forma rápida y gratuita

Al visitar un sitio web, ¿alguna vez ha visto una imagen o un mensaje que se muestra repentinamente en la pantalla? Esa es la ventana emergente o de notificación del sitio web.

Popup es una estrategia de marketing popular y eficaz, utilizada por muchos empresarios y propietarios de sitios web. Para agregar una ventana emergente como esa a WordPress, puede usar un complemento gratuito para hacerlo rápido y simple. Incluso si no es un experto, solo le llevará 10 minutos seguir nuestras instrucciones.

¿Por qué debería utilizar una ventana emergente en un sitio web empresarial?

La siguiente imagen es un ejemplo de la ventana emergente de un sitio web empresarial. Se ve muy bien, ¿no?

La ventana emergente no solo es impresionante (si logra diseñar una que combine bien y sea atractiva), sino que también tiene muchos otros beneficios como:

• Promocionar información importante, campañas de venta y marketing,…
• Llamada a la acción, aumenta la tasa de conversión
• Generar prospectos

Agregue una ventana emergente a WordPress con el complemento Generador de ventanas emergentes

Para agregar una ventana emergente a su sitio web de WordPress, puede contratar una empresa de diseño web creíble o un codificador. Sin embargo, para ahorrar tiempo y dinero, el complemento es la mejor opción. Entre una gran cantidad de complementos emergentes, Popup Builder puede ser el más fácil de usar y efectivo.

Es un complemento gratuito y está disponible en wordpress.org, por lo que solo necesita instalar y activar el complemento directamente en el Panel de control.

Al terminar, siga estos pasos a continuación.

Paso 1: elige el tipo de ventana emergente

Ahora se mostrará el submenú Creador de ventanas emergentes en el Panel de control. Vaya allí, haga clic en Agregar noticias y elija uno de los 4 tipos de ventanas emergentes proporcionados.

Para una mejor ilustración, la imagen a continuación muestra cómo los 4 tipos de ventanas emergentes proporcionados por este complemento se muestran en la parte frontal.

Después de elegir el tipo que desea, vaya al siguiente paso.

Paso 2: agregar contenido a la ventana emergente

Primero, asigne un nombre a la ventana emergente para administrarla más fácilmente.

Los diferentes tipos de ventanas emergentes necesitan diferentes contenidos. Profundicemos en cada tipo.

Agregar contenido a ventanas emergentes de Facebook

En la interfaz para crear ventanas emergentes de Facebook, debe completar esta información:

1. El mensaje que aparece en la ventana emergente. Debe usar una oración de llamado a la acción para alentar a los lectores a interactuar. Además, debe agregar imágenes, pancartas para que sea más impresionante.
2. Inserta la URL de Facebook.
3. Elija un diseño para la ventana emergente a su antojo. Básicamente, estos diseños no son tan diferentes. Así, puedes probarlos y elegir tu favorito.
4. Haga clic aquí para ocultar el botón de compartir si lo desea.

Y esto es lo que tengo:

Agregar contenido a ventanas emergentes de imágenes

Aquí solo necesita cargar la imagen o insertar el enlace de la imagen. Este complemento es compatible con JPG, PNG y GIF.

Este es un hermoso banner que hice yo mismo para la campaña del Black Friday de mi sitio web:

Agregar contenido a ventanas emergentes HTML

Agregar contenido a la ventana emergente HTML es como escribir una publicación en el editor de WordPress Gutenberg. Puede insertar imágenes, videos, tablas, botones, citas,… o cualquier otro contenido que admita el editor de WordPress. La interfaz es algo similar al editor de Gutenberg, por lo que es bastante amigable y nativa.

Y esta es mi ventana emergente HTML en la interfaz:

Agregar contenido a las ventanas emergentes de suscripción

Aquí tenemos bastante contenido para completar y personalizar para su formulario de suscripción. Sin embargo, lo que más debe tener en cuenta son los campos del formulario, como el nombre , el apellido , el correo electrónico , y personalizar su marcador de posición y el campo obligatorio .

Después de eso, desplácese hacia abajo y personalice la visualización del formulario en términos de las opciones de fondo del formulario, el estilo de las entradas, los estilos del botón Enviar para que sea más sorprendente y coincidente con el sitio web.

En particular, en la sección Después de una suscripción exitosa , elija con tacto un mensaje adecuado o la información que desea mostrar a sus usuarios después de que se suscriban. Por ejemplo, puede mostrar notas de agradecimiento, cupones, obsequios, tarjetas de regalo,… para estos suscriptores. Al hacer eso, puede arrastrar las impresiones de los usuarios y mejorar su experiencia.

Por ejemplo, esta es la ventana emergente de correo electrónico de mi suscripción. Una vez que se hayan enviado, mostraré una notificación sobre la campaña de rebajas del Black Friday, instando a los clientes a ir de compras.

Vaya a Creador de ventanas emergentes> Todos los suscriptores para administrar los suscriptores.

Incluso puede enviar correos electrónicos a los suscriptores en la pestaña Boletín .

Después de agregarle contenido, desplácese hacia abajo. Verá muchas otras opciones de configuración. Analicemos cada opción en los pasos 4, 5, 6.

Paso 3: configurar la ubicación de visualización y el estado de la ventana emergente

Configurar la ubicación de la pantalla

En la sección Reglas de visualización de ventanas emergentes, debemos ajustar dónde aparecerá o no aparecerá la ventana emergente.

Puede elegir En todas partes para mostrarlo en cada página, publicación, etiqueta o personalizar, o mostrarlo en un lugar determinado que desee. También puede hacer clic en la información sobre herramientas (?) Para obtener más detalles.

Por ejemplo, elijo la ubicación como una página determinada, elijo "es" para mostrarla y elijo la página de visualización como "Inicio" . Además, puede agregar otras ubicaciones eligiendo Agregar .

Configurar la condición de visualización

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

• Al cargar : la ventana emergente aparecerá automáticamente después de unos segundos (puede agregar la cantidad de segundos en la pestaña Retraso ) desde que el sitio terminó de cargarse.

• Establecer por clase CC : permite a los usuarios hacer clic en algún componente para habilitar la ventana emergente. Este componente se basará en el ID del mismo. Esta parte es un poco complicada, por lo que es mejor que lea atentamente la documentación.

• Al hacer clic : similar a la sección de clase Establecer por CSS , pero no es necesario utilizar el ID de la ventana emergente para instalar el "botón" para habilitarlo.

En cambio, si elige Predeterminado en la sección Opciones , el complemento creará una clase predeterminada para la ventana emergente en la sección Clase predeterminada como se muestra a continuación.

Si elige CSS personalizado , complete la clase que ha creado usted mismo en la sección Clase personalizada .

Después de eso, agregue la clase de la ventana emergente en el CSS del componente que desee.

Por ejemplo, en esta publicación, agregué un botón y la clase que quiero en la sección Clases de CSS adicionales .

Este es el resultado en la parte delantera:

• Hover Click : al pasar el mouse sobre un componente, aparecerá la ventana emergente. Puede hacer lo mismo que en la sección Al hacer clic .

Paso 4: personalice la visualización de la ventana emergente

Después del paso 3, ha aparecido una ventana emergente básica. Pero si desea que sea más impresionante, desplácese hacia abajo hasta la sección Diseño . Aquí puede personalizar algunos componentes como interfaz, superposición, fondo para que sea perfecto como su favorito.

Más que eso, en la sección Dimensiones , ajuste su ancho y largo eligiendo el modo Personalizado , o eligiendo el modo Responsive para que su tamaño coincida con su contenido automáticamente.

Paso 5: personalizar otras configuraciones avanzadas

Estas configuraciones avanzadas le permiten configurar la visualización e interacción con ventanas emergentes, ... de una manera más detallada.

Por ejemplo, puede elegir cómo cerrar la ventana emergente en la sección Cerrar configuración . Hay muchas formas de cerrarlo, como presionar Esc , o agregar un botón de cierre,… Elija una o más, eso depende de usted.

Si desea agregar efectos de cierre y apertura de ventanas emergentes, o ajustar las horas en las que se muestra para un usuario, ... desplácese hacia abajo hasta la sección Opciones de ventanas emergentes. Solo necesita hacer clic en la opción que desee y listo.

Tenga en cuenta que al usar el complemento gratuito Popup Builder, las secciones denominadas Opción de desbloqueo coloreadas en amarillo como la imagen a continuación son características de la versión pro. Tienes que comprar más extensiones de este complemento para usarlas.

Finalmente, en la barra lateral, hay una opción muy interesante: agregar un botón fijo en el sitio web para mostrar la ventana emergente al hacer clic. Este botón flotante es realmente conveniente, ya que permite que las personas lo vean en todo momento y en todas partes. Su diseño también es agradable y no molesto.

Este es el botón flotante en el sitio web:

O puede desactivarlo haciendo clic en Desactivar .

Finalmente, haga clic en Publicar para hacerlo.

Así que ha completado su ventana emergente después de 6 pasos desde la configuración básica a la avanzada. ¡Has hecho un buen trabajo!

Ultimas palabras

Como puede ver, agregar una ventana emergente a WordPress no es realmente complicado. Solo tiene que ser un poco paciente al personalizar su pantalla, ¡eso 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 eficaz, es mejor que lea algunos artículos más sobre cómo crear una página de destino de alta conversión o cómo crear una página de producto.

¡Buena suerte!