¿Buscas una forma de crear un popup de pantalla completa para tu sitio de WordPress?
Un popup de pantalla completa puede ser increíblemente efectivo para capturar leads. Están diseñados para convencer y convertir atrayendo toda la atención del visitante hacia ellos.
Pero tener que codificar uno desde cero es un verdadero fastidio. Por un lado, tendrías que saber suficiente HTML, CSS y Javascript para crear el popup junto con las reglas de activación para cuándo mostrarlo. Luego, tendrías que crear una integración manual con tu proveedor de servicios de correo electrónico. Y finalmente, tendrías que lidiar con cualquier problema de privacidad y seguridad.
Buenas noticias: hay una forma mucho más sencilla.
En este artículo, te mostraremos cómo lanzar un popup de pantalla completa en WordPress sin necesidad de código y en menos de 10 minutos.
Vamos a ello.
¿Qué es un Popup de Pantalla Completa en WordPress?
Un popup de pantalla completa es un formulario de suscripción que aparece con un efecto cinematográfico de pantalla completa. Piensa en ello como ver una película en Netflix en modo de pantalla completa. Cuando aparece un formulario de suscripción de pantalla completa, no puedes ver el resto del sitio de WordPress. De esta manera, toda tu atención se centra en el popup.
Aquí tienes un ejemplo:
Puedes usar popups de pantalla completa para:
- Dar la bienvenida a nuevos visitantes
- Ofrecer un cupón de descuento
- Dirigir a los visitantes a su mejor contenido
- Enviar a los visitantes a sus perfiles de redes sociales
Y más. Incluso puedes crear formularios de contacto emergentes. Los popups son súper flexibles y, siempre que seas creativo, puedes configurar fácilmente los que generan más conversiones.
Cómo Crear un Popup de Pantalla Completa en WordPress
Ahora que entiendes qué es un popup de pantalla completa y por qué querrías crear uno, ¿cómo lo creas? Recomendamos usar OptinMonster para crear todos tus popups.
OptinMonster es el kit de herramientas de conversión n.º 1 del mundo y lo hemos utilizado nosotros mismos. OptinMonster hace que sea muy sencillo crear popups potentes que convierten. Y nunca tendrás que usar ningún código.
Incluso escribimos una reseña completa de OptinMonster.
Puedes echarle un vistazo, o empezar con tu campaña ahora mismo. Todo lo que tienes que hacer es registrarte en OptinMonster y seguir el resto de este artículo.
Paso #1: Crear una Campaña
Ve a tu panel de OptinMonster y pulsa el botón Crear:
Selecciona la opción Plantilla para empezar a crear un optin usando una plantilla prediseñada:
Selecciona Pantalla completa para empezar con las plantillas de popup de pantalla completa:
Luego, elige una plantilla de campaña. Puedes elegir la que quieras, pero en este tutorial usaremos la plantilla de campaña Recomendación de producto (Gamificada).
Después de seleccionar tu plantilla, ponle un nombre a tu campaña. Recuerda que este nombre de campaña es para ti y probablemente crearás un montón de estos popups con diferentes opciones de segmentación. Así que, ponle un nombre significativo a la campaña o acabarás muy confundido más adelante.
Además, dependiendo de tu plan, también puedes usar OptinMonster en varios sitios. Por lo tanto, selecciona el sitio web donde deseas mostrar tu campaña.
Pulsa Empezar a Construir cuando hayas terminado.
Paso #2: Edita tu Popup
Con OptinMonster, obtendrás un constructor visual de popups de arrastrar y soltar. Una vez que hayas terminado de crear tu campaña, podrás editar hasta el más mínimo detalle de tu popup. Empieza editando el titular de tu popup:
La parte más increíble aquí es que simplemente haces clic en cualquier texto que quieras editar y lo cambias en línea. No hay necesidad de rellenar un formulario ni de editar ningún código HTML en el popup.
Puedes editar todo lo que quieras sobre tu popup de pantalla completa. Cuando estés satisfecho con la apariencia del formulario de suscripción, puedes pasar a configuraciones más avanzadas.
Paso #3: Establece las Reglas de Visualización del Popup de Pantalla Completa
Las reglas de visualización están destinadas a definir cuándo aparece tu campaña en tu sitio y quién la ve.
Nuestra recomendación es que cambies la condición del disparador a intención de salida:
Haz clic en Siguiente Paso para elegir la Acción. Aquí, te recomendamos que establezcas Mostrar la vista de campaña en Vista de Inclusión, que establezcas mostrar con MonsterEffect en cualquier animación de entrada que desees, y reproducir efecto de sonido en cualquier efecto de sonido para tu popup.
Y luego, haz clic en el botón Siguiente Paso. Puedes ver el alcance completo de tu configuración en la pestaña Resumen.
Paso #4: Añadir un Botón de Clic para Suscribirse a tu Popup
Las notificaciones push te ayudan a aumentar el tráfico y la interacción de tu sitio web de forma automática. Y si tienes una tienda online, PushEngage también te ayuda a aumentar tus ventas al ayudarte a crear notificaciones push de comercio electrónico automatizadas.
Puedes empezar gratis, pero si te tomas en serio el crecimiento de tu negocio, deberías comprar un plan de pago. Además, antes de comprar cualquier servicio de notificaciones push, deberías consultar esta guía sobre costes de notificaciones push.
Aquí tienes un vistazo rápido de lo que obtienes con PushEngage:
- Campañas automatizadas de alta conversión
- Múltiples opciones de segmentación y programación de campañas
- Seguimiento de objetivos y análisis avanzados
- Pruebas A/B inteligentes
- Un gestor de eacute;xito dedicado
Verás que PushEngage es, sin duda, la mejor opción si quieres generar tráfico, interacción y ventas para tu negocio. Y si tienes un presupuesto limitado, siempre puedes ser un poco creativo con tus notificaciones push.
Primero, a ilde{n}ade un bloque de HTML a tu ventana emergente desde la barra lateral en OptinMonster.
Aquí es donde vamos a añadir el código para recopilar suscriptores de notificaciones push. Primero, pega el siguiente código para crear un botón clicable:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications</button>Pega el c ilde{o}digo donde dice que puedes a ilde{n}adir HTML:
Por supuesto, puedes jugar con los estilos para que tenga un aspecto m ilde{a}s atractivo. A continuaci ilde{o}n, haremos que el bot ilde{o}n recopile suscriptores de notificaciones push cuando se haga clic en ilde{e}l.
Diríjase a la página principal de PushEngage y haga clic en el botón Empezar:
Luego, querrás seleccionar el plan gratuito para probar PushEngage o elegir un plan de pago si te tomas en serio el crecimiento de tu negocio. Los planes de pago vienen con más opciones de campaña y la capacidad de crear listas de suscriptores aún más grandes.
En tu panel de control de PushEngage, ve a Configuración del sitio » Detalles del sitio y haz clic en el botón Haz clic aquí para obtener instrucciones de configuración. En Cualquier sitio, obtendrás tu código de instalación:
ADVERTENCIA: Necesitas copiar el código que obtienes de tu panel de control. El código es único para cada usuario de PushEngage. No podrás copiar el código de la imagen y recopilar suscriptores de notificaciones push.
Una vez que tengas el código en tu panel de PushEngage, toma el segundo script y añádele código adicional. Tu código final debería parecerse a esto:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>A ilde{n}ade este c ilde{o}digo al bloque de HTML en OptinMonster justo despu ilde{e}s del c ilde{o}digo de tu bot ilde{o}n y entre el bloque de c ilde{o}digo de <div></div> ¡y listo!
Paso #5: Configura tu Integración de Correo Electrónico
El siguiente paso es configurar tu integración de correo electrónico. Haz clic en Añadir nueva integración en la pestaña Integraciones y selecciona tu proveedor de servicios de correo electrónico:
Recomendamos usar Drip para tu marketing por correo electrónico si aún no tienes un proveedor de servicios de correo electrónico.
Paso #6: Publica tu Popup de Pantalla Completa en WordPress
Cuando creas una nueva campaña, está Pausada por defecto.
Ve a la pestaña Publicar en el menú superior para ver las Opciones de publicación. Luego, establece el estado en Publicar y selecciona la plataforma del sitio web:
Si tienes un sitio de WordPress, el plugin de OptinMonster se encarga del resto de la configuración automáticamente. Es lo mismo para Shopify y BigCommerce. Para cualquier otro sitio, haz clic en Cualquier sitio y pega el código de inserción en el encabezado de tu sitio web:
¡Y listo!
Qué Hacer Después de Crear un Popup de Pantalla Completa en WordPress
¡Eso es todo por ahora, amigos!
Haznos saber si este artículo te ha sido útil. Crear popups en tu sitio puede ayudarte a convertir tu tráfico en suscriptores de correo electrónico y clientes potenciales genuinos. Y te recomendamos encarecidamente que empieces a crear popups de pantalla completa de inmediato.
Y si buscas una forma asequible de aumentar tu tráfico, te recomendamos usar notificaciones push. Las notificaciones push pueden ayudarte a atraer más tráfico recurrente y a aumentar la interacción en el sitio. También puedes crear campañas automatizadas de notificaciones push que generen ventas.
¿No estás convencido? Consulta estos recursos:
- 7 estrategias inteligentes para aumentar la participación del cliente
- ¿Son efectivas las notificaciones push? 7 estadísticas + 3 consejos de expertos
- Cómo configurar notificaciones push de carritos abandonados (tutorial fácil)
- Cómo añadir un plugin de WordPress de notificaciones web a tu sitio
Le recomendamos que utilice PushEngage para crear sus campañas de notificaciones push. PushEngage es el software de notificaciones push número 1 del mundo. Por lo tanto, si aún no lo ha hecho, ¡empiece con PushEngage hoy mismo!
