💥¡Ventana emergente o Popup en MailerLite y WordPress!✅

Hola amigos de Marieú Technology Corporation, ¡Ventana Emergente o Popup en MailerLite y WordPress! En efecto, en esta guía, paso a paso, aprenderás a agregar tiempos, color, textos, campos de correo, botón de suscribirte, redes sociales, checklist de políticas, comportamiento, instalación y activación de un Popup en Mailerlite y WordPress.💥✅

MailerLite es una plataforma de sevicios de marketing digital por correo electrónico. Entre algunas herramientas que proporciona son las campañas de emails, segmentación de suscriptores, formularios integrados, entre otros. La instalación del formulario de registro con plugin de MailerLite se realiza por medio de WordPress. Donde, podrás integrar un formulario en tu página y almacenar suscriptores.

¿Cómo diseñar una ventana emergente o popup con MailerLite y WordPress?

MailerLite, internamente dentro de esta plataforma, nosotros vamos a crear un nuevo formulario tipo popup. Después de ello, nosotros vamos a editar el diseño, vamos a incluir algunos campos. Para el lado de Wordpress, nosotros vamos a instalar MailerLite.

Diagrama de Arquitectura: ¡Ventana emergente o Pop up con MailerLite y WordPress!
Fuente: Elaboración Propia.

Una vez que hemos iniciado sesión, tenemos en la parte izquierda la opción de agregar un formulario. En particular, nosotros vamos a crear un popup, asignar un nombre, Marieú Corp. Después de ello, vamos a seleccionar el tipo de formulario. Si es un popup o ventana de emergente, si es un formulario incrustado dentro de tu página web o, si no, si es una ventana de promoción. Vamos a seleccionar la primera opción, ponemos «save and continue».

Podemos aquí crear un nuevo grupo o seleccionar un grupo que ya tenemos creado, para poder almacenar todos estos «subscribers». En particular, nosotros vamos a crear una nuevo, «clientes popup Marieú Corp.», y colocamos «create», «continue».

Tenemos una vista de todos los templates o, si no, por categoría: featured popups; full screen, si queremos que sea toda la pantalla completa; half screen, si de repente queremos que sea en la parte de media, un modal, un slidebox, entre otros. Nosotros, en particular, vamos a seleccionar «featured popup» y vamos a optar por el primero Mystery launch o misterio de lanzamiento, «choose».

Tenemos un apartado en la mano derecha, donde nos muestran los bloques que podemos agregar a este popup. Tenemos textos, a nivel de imágenes, a nivel de social links, que son las redes sociales. Eso es en cuanto a bloques, vamos con el diseño. Dentro del diseño, ya podemos ver, a detalle, lo que son las fuentes, quizás hacerlo un poco más ancho, el width, podemos ir cambiando las imágenes.

Vamos a iniciar con un cambio del background, para eso nosotros seleccionamos el background y cambiamos. Seleccionamos la imagen de Marieú, ponemos insertar y, aquí, nosotros vemos que no tiene un ancho adecuado. Para eso, colocamos «save» y vamos a reducir un poco el «width», le vamos a asignar unos 580.

Respecto al tiempo: días, horas, minutos y segundos. «Expiration dates» hasta enero, miércoles 10. Ya con eso, aumenta los días, en este caso, 35.

Vamos a ir a «settings», donde podemos ver el estilo. Vamos a cambiar el color, entonces aquí pegamos el código hexadecimal, ya tenemos un color lila oscuro, ponemos «save». Después de ello, vamos a aterrizar en los textos. Para el caso del título, vamos a cambiar de negro a blanco. A nivel de código hexadecimal, todos en F y ponemos «save».

Vamos a colocar, «pronto lanzamos», en el caso del título, «recibe una notificación cuando lo lancemos». En la parte inicial, vamos a colocar un emoji de sorpresa. Si nosotros queremos cambiar aquí el subtítulo, abrimos cambiamos el color, un color celeste. Reducir un poco el tamaño, tamaño de la fuente, vamos a dejarlo en 16.

Vamos a cambiar el campo del correo y el botón, para eso seleccionamos el campo y aperturamos la opción de «editar». En el apartado derecho, podemos cambiar aquí el texto, correo, ponemos «save changes». Vamos a colocar «suscribirse». Ahora vamos a cambiar el color. Ponemos en «settings», pegamos el código hexadecimal que se alinea mucho a su página web y ahí vemos el cambio, eso es el «hover». Vamos a cambiarle y lo ponemos un poco más oscuro, entonces ahí notamos el cambio. Faltaría el borde de la entrada, vemos que hay un borde de color rojo, vamos a cambiarlo también a morado oscuro. Vamos a input y aquí, en «border», lila oscuro, ponemos «save».

Vamos a agregar un bloque de redes sociales o social links, nos dan los iconos sociales, pegamos el enlace de nuestras redes sociales. Entonces, ahí ya hemos asignado las tres redes sociales. Vamos a cambiar el estilo o el color, en este caso, vamos a colocarle «white» o blanco y, finalmente, vamos a agregar un checklist.

Seleccionamos «sign up form settings» y vamos a agregar un checkbox, para confirmar nuestras políticas de privacidad. Para cada uno de estos, vamos a aggar un enlace, seleccionamos link e insertamos nuestra página de términos y condiciones y políticas. Abrimos siempre en una nueva ventana, para que no se perjudique ese popup y ponemos «insertar». Ponemos un color claro y seleccionamos «save». Para el caso de los links, vamos a checkbox, vamos a cambiarle el color, colocamos blanco. «Done editings», en la esquina superior derecha.

¿Cuál sería el comportamiento que nosotros deseamos que tenga esta ventana emergente?, esperar 5 segundos antes de mostrar la ventana emergente; mostrar, de repente, cuando estamos deslizando nuestra página web al 50% o, si no, antes de cerrar la página. Nosotros lo vamos a colocar, cuando el usuario se desplaza en un 50%, en nuestra página web. La frecuencia con que se va a repetir la ventana emergente, al mismo usuario, cada mes. El cronograma, de repente, queremos nosotros que siempre la ventana emergente aparezca desde las 3 hasta las 6 de la tarde. Si no queremos un programa y queremos que sea las 24 horas, ponemos ninguno. En cuanto a la visibilidad, si queremos que aplique a cualquiera de los «slug» que tenemos, lo dejamos así, si no, podemos colocar una igualdad estricta. Solamente a la página principal se estaría aplicando, guardar cambios.

Recuerden que este fragmento de JavaScript, podemos agregarlo nosotros manualmente, ingresando al administrador de tareas desde nuestro Hosting o, si no, agregando el plugin de WordPress. Nosotros lo vamos a hacer con el plugin. Ya estamos dentro de Wordpress, vamos a ir a plugins, añadimos nuevo plugins: MailerLite Signup forms. Vamos a MailerLite, una vez que esté activado, dentro de settings, nosotros tenemos que agregar la API Key y, después, activar el MailerLite Popups.

Entonces, para la integración de la API Key, nos vamos a integraciones. Nosotros vamos a usar la API de MailerLite. Generamos un nuevo toque, ponemos el nombre y se va a generar un código. Ese código que se genera, nosotros lo vamos a pegar exactamente aquí. Lo actualizamos y ya lo tendríamos instalado, dentro de Wordpress.

Diseño de Popup o Ventana emergente en MailerLite.
Fuente: Elaboración Propia.

Resultados Finales

Vamos a activarlo, status lo ponemos activar. Entonces, aquí estamos en la página de Marieú Corp., bajamos, nos deslizamos y nos aparece la siguiente ventana. Tenemos el tiempo que hemos agregado, el usuario ingresa aquí su correo, se suscribe. Antes de suscribirse tiene que aceptar los «términos y condiciones» y les llega, a su correo, los datos del usuario. ¡Listo, gracias amigos de Marieú Technology Corporation!