Crear Popups en WordPress con Popup Maker

por | diciembre 19, 2019

popup maker logo

Si quieres crear popups en WordPress de forma sencilla y sin complicarte demasiado, continúa leyendo y te mostraremos como hacerlo con un plugin sencillo y gratuito. El nombre completo del plugin es Popup Maker – Popup Forms, Opt-ins & More.

Como sabéis, WordPress tiene miles de plugins. Un tipo de los más utilizados, son los que nos permiten mostrar una ventana superpuesta al usuario, para indicarle que haga algo en concreto, por ejemplo, suscribirse a nuestro Blog.

Los popup son un arma de doble filo. Si los utilizamos de forma adecuada, nos pueden ser muy útiles. Sin embargo, si abusamos de ellos, el usuario que nos visita no tendrá una experiencia de navegación positiva, ya que pueden llegar a ser muy molestos.

Instalación de Popup Maker

Para instalar Popup Maker nos vamos a «Plugins > Añadir nuevo» y una vez escrito el texto «Popup Maker», debería de salir en primer lugar.

popup-maker-instalacion

Una vez que esté instalado y activado, tendremos en el menú prinpipal de WordPress los enlaces a las opciones de configuración de este plugin.

 popup-maker-menu

Las páginas principales de configuración de las que disponemos en esta versión del plugin son las siguientes:

  • Añadir Ventana emergente. Nos permite crear los popups que vayamos a usar en nuestro sitio.
  • Todas Ventanas emergentes. Aqui tenemos el listado de las ventanas emergentes que vayamos creando.
  • Extender. Al principio hemos dicho que es un plugin gratuito, lo cual es cierto. Pero, también tiene una versión de pago, en la que podemos usar funciones adicionales. En esta página, se muestran todas las posibilidades que nos ofrece el plugin, para crear popups en WordPress en su versión premium.
  • Suscriptores. Aqui, se muestra el informe de los suscriptores que hayamos captado a través del formulario de suscripción que tiene por defecto el plugin.
  • Temas de la ventana emergente. Esta sección, está destinada a cambiar el aspecto visual de la ventana emergente. Podemos configurar colores, sombras, bordes, etc. El plugin trae varios temas predefinidos, pero nosotros podemos crear o modificar los que queramos.
  • Ajustes. En esta zona, podemos establecer las opciones generales del plugin, como pueden ser: tema por defecto, texto de información, opciones de privacidad, etc.
  • Herramientas. En esta parte, es posible visualizar la información del sistema y opciones de importación.
  • Ayuda y Soporte. Página en la que disponemos de enlaces para este tipo de cuestiones.

Añadir una Ventana Emergente

popup-maker-nuevo-popup

Para crear popups en WordPress mediante este plugin, usaremos este enlace. En primer lugar tenemos que darle un nombre (que es obligatorio) y, después escribiremos el título del menú emergente (que es opcional).

Después, en el editor, escribiremos el texto que deseemos mostrar en el menú emergente. También tenemos la posibilidad de insertar un shortcode, para colocar el formulario de suscripción que trae por defecto este plugin. Esto lo podemos hacer, utilizando la opción correspondiente de la barra de herramientas del editor.

popup-maker-insertar-shortcode

Disparadores

Después de escribir el texto del popup, tenemos que configurar cual va a ser el motivo o evento por el que se debe mostrar el menú emergente. Estos eventos son los disparadores. En esta versión tenemos la posibilidad de utilizar dos diferentes:

  • Al hacer clic. El popup se va a mostrar cuando el usuario pulse en un determinado enlace.
  • Tiempo de retraso / autoapertura. La ventana emergente se visualiza cuando transcurra un tiempo determinado. A esto en programación se le llama timer.

Al hacer  Clic

Para añadir este disparador, pulsaremos en el botón «Añadir nuevo disparador» y, seleccionaremos el de tipo «clic». La opción de «establecer la cookie» la dejaremos sin marcar, (ahora veremos para que sirve la cookie).

popup-maker-disparador-al-hacer-clic

A continuación pulsaremos el botón «Añadir». Después tenemos que configurar la siguiente ventana.

popup-maker-disparador-clic-ajustes

Aquí, en el campo «Selectores CSS adicionales», hay que introducir los selectores CSS de los elementos HTML que queramos que muestren la ventana emergente al hacer clic sobre ellos. Pueden ser uno o varios y, podemos utilizar cualquier tipo de selector, ya sea de clase, id, etc.

En el «Nombre de cookie», se elige una cookie que hayamos creado previamente, para controlar cuando vuelve a mostrarse el popup, más adelante veremos en detalle este tema.

Si hacemos clic en la opción «Avanzado», disponemos de un check que, si está activado, nos permite abrir tanto la ventana emergente, como ejecutar la funcionalidad que tenga asignada el evento clic (por ejemplo, descargar un archivo).

Tiempo de Retraso / Autoapertura

popup-maker-disparador-retraso-apertura

En este disparador, podemos definir el tiempo que hay que esperar hasta que aparezca la ventana emergente. Si hacemos clic en el botón «Añadir», podemos observar que aparece la siguiente ventana.

popup-maker-disparador-configuracion-retraso

Aqui se elige, tanto el retardo del popup en aparecer, como la cookie que deseemos vincular.

Ahora tenemos que añadir una cookie y realizar su configuración. Para crearla pulsaremos en el botón «Añadir nueva cookie».

popup-maker-añadir-cookie

Recordemos, que la cookie nos va a servir para establecer las condiciones en las que se tiene que volver a mostrar la ventana emergente. Las opciones que tenemos disponibles para crearla son las siguientes:

  • Al cerrarse la ventana.
  • Al abrirse la ventana.
  • Formulario de suscripción: satisfactoriamente.
  • Formulario de suscripción: ya suscrito.
  • Mediante javascript.

Una vez elegida la opción de «cuando se crea la cookie», pulsaremos el botón «Añadir» y aparecerá esta ventana:

popup-maker-ajustas-cookie-general.

En los ajustes, introducimos el nombre de la cookie y, el tiempo de caducidad, es decir, el tiempo que pasará hasta que se muestre de nuevo el menú emergente. Aquí es donde debemos tener cuidado, ya que un tiempo demasiado corto, provocará que aparezca muy a menudo la ventana y moleste al usuario.

Los valores que se pueden introducir en el «Tiempo de la cookie» con éstos:

  • seconds.
  • minute(s).
  • hour(s),
  • day(s),
  • month(s).
  • year(s).

En la opción «Avanzado», disponemos de dos «checks» más para configurar el comportamiento de la cookie. Esta es la ventana:

popup-maker-ajustes-cookies-avanzado

Ahora lo que haremos será vincular el disparador con la cookie correspondiente. Para ello nos vamos al disparador, lo editamos y elegimos la cookie que deseemos.

popup-maker-vincular-cookies

Objetivos

El paso siguiente, será establecer las condiciones en las que se va a mostrar el menú emergente. Por defecto, sale por todos lados, pero esta configuración no es la mas apropiada. Para configurar esta parte, haremos clic en «objetivos» y, se visualizará una página como ésta:

popup-maker-objetivos

Para elegir donde va a mostrarse el popup, hay que seleccionar una condición. Las condiciones son el tipo de contenido en el que aparecerá el menú emergente. Se pueden seleccionar varias condiciones y, encadenarse con los operadores (AND y O).

No vamos a enumerar cada condición en detalle, pero si diremos los tipos de contenido en los que se puede crear la condicion, son los siguientes:

  • General.
  • Entradas.
  • Páginas.
  • Medios.
  • Formatos.
  • Categorías.
  • Etiquetas.

Visualización

popup-maker-ajustes-visualizacion

En esta parte se configura el aspecto visual que va a tener el popup. Se puede elegir el tema que deseemos, así como también es configurable el tamaño, animación y posición de la ventana emergente.

Cerrar

popup-maker-ajustes-boton-cerrar

En esta opción vamos a establecer la configuración del botón «cerrar». Se puede elegir un texto personalizado, el tiempo desde que se pulsa hasta que se cierra el popup y, también si queremos que se cierre pulsando las teclas (ESC o F4).

Todas las Ventanas Emergentes

Aqui podemos ver el listado de todos los popups que hemos creado. Aparece el campo llamado «Ver», en el que se muestran todas las ocasiones en las que se ha visualizado el menú emergente.

Extender. Funciones Premium

Si hacemos clic en este enlace,  aparecen las extensiones «Premium» del plugin. Entre ellas podemos destacar: estadísticas, verificación de edad, popup modales ajax, integración con Aweber y mailchimp, etc.

poup-maker-extensiones

Ajustes

popup-maker-ajustes

En la ventana de «Ajustes», se configuran las opciones globales del plugin. Podemos establecer cuál será el tema por defecto, mensajes personalizados, configuraciones del formulario de suscripción y también todo lo relacionado con la privacidad.

Herramientas / Ayuda y Soporte

En el menú herramientas, aparece información relativa a la configuración del Servidor y WordPress. En el enlace de «Ayuda y Soporte», nos incrusta una página de la web oficial del plugin con diversa información sobre documentación y ayuda.

Conclusión

popup-maker-ejemplo-popup

El Plugin para crear popups en WordPress, Popup Maker, es uno de los mas funcionales que he podido probar. La parte más complicada de entender es la de vincular el disparador y la cookie. Una vez que esto se entiende, podemos realizar cualquier tipo de ventana emergente sin ningún tipo de complicación.

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 3.3)

Un pensamiento en “Crear Popups en WordPress con Popup Maker

  1. Ana

    Buenos dias:

    Después de confirgurar Popup Maker con un formulario de suscripción Contact form 7, no consigo que cuando se rellene el formulario se cierre este popup. En el disparador, tengo asociado una cookie llamada Contact Form 7 realizado, por el que se debería cerrar al rellenar y enviar el formulario y no mostrarse en un mes.
    El caso es que rellena el formulario y cuando te suscribes, sale una flechita redonda en la parte de la izquierda abajo y se queda pensando eternamente y no cierra el popup.

    Por favor, ¿Podrias ayudarme?
    Gracias y un saludo,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *