Mejor plugin Pop up WordPress: WP Popup Maker

Los pop up son muy útiles para informar sobre novedades a los clientes, mostrarles las últimas ofertas o animarles a subscribirse a una newsletter.

Encontrar un plugin de popup que se ajuste a tus necesidades y tu tema de WordPress puede resultar complicado. Aunque he probado varios plugins muy buenos hace un par de meses descubrí WP popup maker y desde entonces se ha convertido para mi en el mejor plugin popup de WordPress.

Como no me gusta quedarme estos tesoritos de WordPress para mi sola te voy a explicar cómo configurar y sacarle el máximo partido a este plugin. ¡Vamos a ello!

¿Por qué popup maker es el mejor plugin de popup de WordPress gratuito?

A pesar de que he probado muchos plugins de popup ninguno se acababa de ajustar a mis necesidades. Muchos de ellos servían únicamente para pedir a los usuarios que se suscribiesen a la newsletter, pero si ese no era el objetivo, valían más bien de poco. WP Popup maker se diferencia del resto en las siguientes cuestiones:

Facilidad de diseño

La forma de construir el pop up es realizando el diseño como lo harías en una página normal. En caso de constructores como Divi, Elementor o WPBakery diseñarás el plugin tal y como lo harías con cualquier página. De esta manera puedes añadir y personalizar los bloques a tu antojo. Esto también ayuda a mantener el diseño del pop up en línea con el del resto de la web.

Versatilidad

Al poder construir tu diseño desde cero no dependes de configuraciones preestablecidas. Siempre que incluyas un popup en la web debe perseguir un objetivo concreto:

• Que los usuarios se subscriban a tu newsletter para poder impactarles con tus estrategias de email marketing.
• Conseguir leads.
• Aumentar ventas informando sobre novedades y ofertas.
• Lo que se te ocurra.

El problema es que muchos plugins de pop up están diseñados únicamente para el primer objetivo, sin permitirte realizar ninguna modificación. Wp popup maker permite añadir los bloques y llamadas a la acción que necesites para conseguir tus objetivos.

No hay que salir de WordPress para configurarlo

Me he encontrado muchos plugins en los que, para poder insertar un pop up en tu web, primero hay que registrarse en una página para elegir el diseño. Esto es un trabajo innecesario. La mayoría de las veces ese proceso de registro será largo y tedioso y te servirá únicamente para dos cosas:

• Descargar una plantilla que nada personalizable que desentone totalmente con el diseño de tu web.
• Que te metan en listas de subscripción y te estén bombardeando a correos todas las semanas.

Para mí una regla básica en la instalación de plugins en WordPress es que el proceso sea sencillo, intuitivo y no demasiado extenso. Con Wp pop up maker es tan sencillo como instalarlo y empezar a diseñar.

¡Es gratis!

¿A quién no le gusta lo gratis?

Popup Maker es un plugin totalmente gratuito. Puedes configurar y ajustar todas las opciones del plugin gratis por lo que permite una máxima personalización sin gastarse ni un euro.

Control de apertura

A diferencia de otros plugins, popup maker permite elegir cuándo se mostrará en pop up y cuáles son los condicionantes para que este salte o no. Veremos como configurarlo más adelante.

Cómo instalarlo

Para instalar este plugin simplemente deberas ir al apartado de plugins>añadir nuevo y buscar “popup maker” en el buscador. El plugin en cuestión es este:

Otra opción es ir a la página de descarga del plugin y subir posteriormente el archivo. Para que no tengas que buscarla puedes pulsar aquí.

Cómo configurar wp pop up maker

Antes de lanzarte a crear tus plugins con Popup Maker hay ciertas cosas que debes saber. Te recomiendo que leas todos los pasos, porque como todo en WordPress esta herramienta tiene algunos trucos que harán ahorrarte más de un quebradero de cabeza.

Compatibilidad con constructor de bloques

Si estás utilizando un constructor por bloques como Divi, Elementor, WPBaquery te recomiendo que actives este check:

Se encuentra en Ajustes del plugin> General. Si no marcas esta opción es probable que algunos estilos de tus páginas se modifiquen.

Si aún marcando esta opción siguen variando algunos estilos juega con las opciones del apartado “misclánea”.

El primero se encuentra en “miscelánea>miscelánea”

Las otras opciones se encuentran en miscelánea>activos

Creación de un nuevo pop up

Para crear tu primer pop up deberás pulsar en “Crear ventana emergente”. En este caso se abrirá una página parecida a cuando creas cualquier entrada en tu WordPress.

Debes configurar los siguientes apartados:

• Nombre de la ventana emergente: simplemente para administrarlos
• Título de la ventana emergente: Se muestra en el pop up, si no quieres que se muestre no lo rellenes.
• Analítica: este apartado es realmente útil si reutilizas un pop up. Si marcas la casilla “restablecer contadores” y guardas, el apartado de analítica volverá a 0 y podrás volver recoger datos de aperturas y conversiones desde 0.
• Apartado de diseño: Dependerá de si estás construyendo con el editor de bloques de WordPress o un maquetador visual.
• Ajustes de ventana emergente: todos las configuraciones que tienen que ver como la apertura, apariencia y cierre del pop up.

Diseño

El diseño de tu popup en este plugin se divide en dos partes:

1. El diseño del contenido del pop up.
2. El diseño de la caja del pop up.

#1 Diseño del contenido del pop up

En lo referente al contenido del pop up dependerá del tema y de qué constructor estés utilizando.

Puede elegir el color de fondo, títulos, tipografías, imágenes, distribución y llamadas a la acción que desees.

Puedes añadir formularios o suscripciones a tu newsletter conectándolo con plataformas como Mailchimp, tal y como lo diseñarías en una página normal.

Ten en cuenta estos consejos a la hora de diseñar tus pop up:

• Incluye mensajes e imágenes llamativos: Añade un mensaje que llame la atención del usuario acompañado de una imagen llamativa para conseguir más conversiones. Pero ¡ojo! evita que la imagen pese demasiado o podría afectar gravemente a tu tiempo de carga. Si quieres saber cómo optimizar imagenes en WordPress para no subir mucho tiempo de carga haz click en el enlace para ver una guía muy completa.
• No añadas mucho contenido a tu pop up: Up pop up no debe tener grandes dimensiones ni condensar mucho contenido. Diseña tu pop up teniendo en cuenta que se va a superponer al resto de elementos de tu página. El mensaje no debe ocupar más de la pantalla del dispositivo del usuario. Si tu usuario se encuentra un pop up en el que tenga que hacer scroll o cuyo contenido salga de la pantalla, no va a estar muy feliz.
• Quita los paddings y márgenes: El diseño va a ir encerrado en una caja a la que podrás cambiar posteriormente los márgenes. Mi consejo es que quites todos los márgenes y paddings de tus secciones y filas, tanto arriba como a los lados para después añadirlos a la caja si fuesen necesario.
• Alinea el diseño de tu pop up con el de tu web: Sí, el pop up debe diferenciarse del resto del contenido, pero debe tener una armonía con la imagen, tipografías y colores de tu web. Diseña de manera que el aspecto de tu pop up esté en sintonía con el resto de web si no quieres que parezca spam.

#2 Diseño de la caja del pop up

Si ya has conseguido diseñar el contenido de tu pop up, ¡perfecto! Ya tienes parte del trabajo hecho. Ahora queda una parte también muy importante: diseñar la caja que contiene el pop up. Para ello tendrás que configurar los siguientes puntos en Pop up maker:

• Márgenes y bordes de la caja
• Forma de cerrar la caja
• Donde se va a ver el pop up
• Tamaño de la caja
• Cómo va a aparecer y cerrar la caja

Para configurar todo lo referente a la apariencia de la caja que contiene el pop up tendremos que ajustar los parámetros en los “temas de la ventana emergente” del plugin. Aquí encontrarás varios temas personalizables donde puedes ajustar tu diseño.

En este apartado podrás modificar un tema existente o crear uno nuevo

Una vez dentro de la página de edición de temas encontrarás una ventana de “ajustes de temas” donde ir ajustando todos los parámetros y una ventana de previsualización.

Dentro de la ventana de ajustes de temas encontramos varias pestañas:

#1 SUPERPOSICION

En el apartado “superposición” podrás ajustas los siguientes parámetros:

• Color del fondo de la página cuando el pop up está abierto
• Su opacidad

#2 CONTENEDOR

En esta sección podrás ajustar los siguientes aspectos del contenedor que contiene el pop up:

• Contenedor: El relleno y tamaño del borde del contenedor.

• Fondo: el color y opacidad del fondo del pop up.
• Borde: el color, grosos y estilo del borde.
• Mostrar sombra: ajustes referentes a la sombra de la caja del pop up.

#3 TÍTULO

En esta sección podrás ajustar cuestiones referentes al título. Solo tendrás que configurarlo en caso de que hayas puesto un título cuando creaste el pop up en este apartado:

Aquí encontrarás configuraciones referentes a la tipografía y colores del título

#4 CONTENIDO

En esta sección podrás modificar la fuente del texto de tu pop up. Yo no suelo tocar este apartado porque me gusta elegir la tipografía y colores cuando estoy diseñando el contenido del pop up.

#5 CERRAR

Estos ajustes sirven para configurar como se verá el icono de cerrar del pop up.

• General: Texto o icono que aparecerá para cerrar el pop up y configuraciones sobre el lugar que ocupa.
• Tamaño: dimensiones del botón de cerrar.
• Fondo: color y opacidad del fondo del botón.
• Fuente: tamaño, color y estilo de la tipografía.
• Borde: diseño del borde del botón
• Mostrar sombra: configuración de la sombra del botón.
• Sombra del texto: ajustes sobre la sombra del texto del botón.

Una vez hayas hecho todas las configuraciones necesarias para conseguir el diseño del pop up que tenías en la cabeza debes aplicárselo. Para ello ve a la página de configuración de tu nuevo pop up y en la ventana “ajustes de la ventana emergente>visualización>apariencia” elige el tema que acabas de configurar.

Activadores

Ahora que ya tienes diseñado tu pop up debes elegir la periodicidad con la que va a aparecer y en con qué condiciones lo va a hacer. Es decir, en qué situaciones va a saltar el pop up al usuario.

Para hacerlo debes irte a «ajustes de la ventana emergente>activadores” pulsar en nuevo activador.

Aquí podrás elegir el tipo de activador:

• Al hacer click: debes añadir la clase del pop up para que al pulsar un botón este se abra.
• Tiempo de retraso/ apertura: el pop up saltará a los segundos que indiques.

También podrás elegir el evento que determinen cuando se repite la visualización del pop up. Esto sirve para que la ventana emergente no esté saltando repetidamente y provoque una mala experiencia de usuario. Hay 4 opciones:

• Al abrirse la ventana: tras abrirse la ventana no volverá a aparecer el pop up hasta que caduque la cookie de sesión.
• Al cerrarse la ventana
• Al enviar un formulario: el pop up no parará de saltar hasta que el usuario envíe el formulario vinculado al pop up.
• Formulario de suscripción: satisfactoriamente
• Formulario d suscripción: ya suscrito
• Manual

Tras elegir el tipo de evento, podrás hacer ajustes en la caducidad de la cookie. Es especialmente importante que dejes marcada la opción de “cookie global al sitio” si no quieres que los usuarios sean bombardeados con tu pop up en todas las páginas:

Visualización

En el apartado de visualización podrás hacer algunos ajustes sobre cómo va a aparecer el pop up: la posición, dimensiones, sonidos, etc.

Son configuraciones que dependen más de tus gustos, pero me gustaría que prestases especial atención a las opciones que muestran en “avanzado”:

• Desactivar superposición: si marcas esta opción no aparecerá tu pop up.
• Apilable: en caso de que tengas varias ventanas emergentes esto hará que unas superpongan sobre las otras, manteniéndolas abiertas a la vez. Recomiendo dejarlo desactivado.
• Desactiva reposicionamiento: por defecto pop up maker hace que tu ventana emergente sea responsive y se adapte a la ventana del navegador, por ello es conveniente dejar este check desactivado.
• Z-index de la ventana emergente: este es un valor CSS que hace que el pop up aparezca por encima de cualquier elemento de tu página. Mejor deja el valor por defecto.

Objetivos

En este apartado puedes elegir en qué páginas sale tu pop up. con los operadores booleanos Y/O:

• Y: Este booleano hace que el pop up aparezca en todas las páginas seleccionadas hasta que se cumpla el evento que limite su repetición
• O: Con este booleano el pop aparecerá 1 vez en la sesión en la primera página que visite de las que hayas seleccionado.

En este apartado también podrás elegir si el pop up no se muestra en dispositivos móviles o tablets.

Elegir como cerrar el pop up

¡Ya estás en la recta final! Con las configuraciones que has hecho hasta ahora has conseguido que tu pop up impacte a tu público. Ahora bien, una vez aparece en la pantalla hay dos opciones:

• Que el usuario siga el pop up
• Que el usuario lo cierre

Por muchas ganas que tengamos de que el usuario haga caso a nuestro pop up, sería muy mala práctica si no le diésemos una opción para cerrarlo.

En el apartado «Cerrar» podrás hacer las configuraciones necesarias para facilitar el cierre del pop up a tu usuario.

• Botón: elige el texto y el retardo con el que aparecerá el botón de cerrar. Yo te aconsejo que pongas 0 retardo. Puede ser negativo para tu experiencia de usuario que tarde en encontrar el botón pertinente.
• Envío del formulario: Puedes optar por que el pop up solo se cierre si el usuario envía el formulario integrado. Esta opción en ocasiones justificadas, como que el usuario haya pulsado un botón para descargar un recurso gratuito y necesite rellenar el formulario para poder enviárselo.
• Métodos alternativos: La herramienta pop up maker ofrece otros métodos para cerrar la ventana emergente a parte de el botón de cerrar, como hacer click fuera del pop up, pulsar ESC o F4. Mi opción preferida sigue siendo un botón visible de cerrar.

¡Enhorabuena! Tras esta guía has conseguido crear pop ups con la herramienta pop up maker como un profesional. Es cierto que la herramienta tiene muchas opciones de configuración y puede resultar confusa al principio, pero una vez le coges el tranquillo y conocer todas la posibilidades de personalización que tiene no vas a querer usar otro plugin.

¿Te ha quedado alguna duda? ¡Déjamela en comentarios y te ayudo!