Crear popups en WordPress con Popup Maker

Crear popups en WordPress con Popup Maker 01

Existen muchos plugins para crear popups en WordPress, pero os vamos a explicar uno que consideramos de los más completos que hemos probado, dado que permite generar cookies para no mostrarlos en un determinado tiempo y seleccionar las páginas donde se muestra, y además es gratuito. Se trata del plugin Popup Maker.

 

Instalación y configuración de Popup Maker en WordPress

La instalación y configuración del plugin Popup Maker es muy sencilla. Tan solo hay que instalarlo y activarlo. Nos aparecerá un elemento del menú cerca de la parte superior (llamado Popup Maker) con varios apartados.

Crear popups en WordPress con Popup Maker menu

El plugin se compone del listado de popups que vamos creando, temas para maquetar su visualización, extensiones de pago para ampliar las funcionalidades del plugin y el apartado de configuración.

De entrada no es necesario realizar ninguna modificación en el apartado de configuración, dado que sirve para controlar la carga de estilos CSS y las fuentes de Google.

Diseño de los popups

El apartado de temas (Popup Themes) es muy interesante dado que nos permite diseñar los popups como queramos, guardar todos los diseños como temas de forma independiente (además de 6 temas que ya vienen incorporados y son editables) y asignar a cada popup el tema que queramos que tenga.

Crear popups en WordPress con Popup Maker temas

El editor de temas cuenta con muchas opciones de maquetación, desde el color y transparencia del fondo, definir un borde y sombra, estilo y tipografía del título y el contenido, diseño del botón cerrar, etc.

Crear popups en WordPress con Popup Maker editar temas

Cuenta con previsualización para poder ver el aspecto que tendrá el popup. No entraremos en detalle en este apartado porque es muy intuitivo.

Creación de un popup en WordPress con Popup Maker

Una vez tenemos el diseño claro vamos a crear un popup. Para ello pulsamos el apartado del menú “Add Popup”. Se abrirá una pantalla similar a la de las entradas y páginas.

Disponemos de dos títulos, el primero es el nombre que le damos al popup. El segundo es el título que se mostrará en la parte superior del popup.

A continuación tenemos el editor de texto donde introduciremos el contenido del popup de la manera habitual.

En la barra lateral derecha hay un cuadro “Theme Settings” donde seleccionaremos el tema que queremos utilizar en este popup.

Crear popups en WordPress con Popup Maker nuevo

En el cuadro de la parte inferior “Display Settings”, tenemos más opciones para maquetar el popup, como es el ancho que tendrá, el efecto de animación a la hora de mostrarse y la posición respecto a la pantalla.

También podemos modificar el modo en que se cierra el popup, permitiendo definir teclas rápidas con las que poder cerrarlo (pulsar fuera del popup , Esc o F4).

Ahora viene la parte más compleja de la configuración:

  • Cuándo aparece el popup.
  • Cada cuánto tiempo se muestra.
  • En qué partes de la web se muestra.

 

Cuándo aparece el popup en la web

Existen dos maneras en las que aparece un popup:

  • Automáticamente. El popup se abre por sí mismo cuando carga una página y se muestra en pantalla.
  • Al pulsar un enlace. Podemos vincular un popup a un enlace o botón de manera que al pulsar se nos abre el popup, por ejemplo para mostrar información adicional o un formulario para rellenar.

Crear popups en WordPress con Popup Maker triggers

El cuadro “Triggers” es el que se utiliza para configurarlo. Pulsamos el botón Add New Trigger y se nos abrirá un popup para elegir entre “Auto Open” o “Click Open”. Seleccionamos el que queremos y pulsamos “Add”.

Crear popups en WordPress con Popup Maker triggers selector

Si seleccionamos “Auto Open” la siguiente ventana nos permite configurar cuánto tiempo queremos que espere desde que se carga la página para mostrarlo. El tiempo está en milisegundos, por lo que 1000ms es 1 segundo. Aparece otra opción de configuración, Cookie. Esta opción la dejaremos como está porque servirá para configurar cada cuánto tiempo dejamos de mostrar el popup.

Si hemos seleccionado “Click Open” la ventana nos pide un selector CSS. Esto es una clase o id con el que se vinculará la apertura el popup.

Si tenemos un enlace de este tipo, por ejemplo:

<a href=”#”>Más Información</a>

 

Si queremos vincularlo con el popup le añadimos un identificador:

<a id=”popup-informacion” href=”#”>Más Información</a>

 

En este caso, en la ventana de configuración de “Click Open” escribiríamos: #popup-informacion

Aparece una casilla que dice “Do not prevent the default click functionality”. Esta casilla es útil si, por ejemplo, el enlace anterior permite también descargar un fichero. Si no marcamos la casilla, no se ejecutará la acción de descargar el fichero. Tendremos que marcarla para que haga las dos acciones.

En la configuración “Click Open” también aparece la opción de añadir una cookie, pero sin que haya ninguna creada por defecto. Esto es así porque no es habitual utilizar una cookie para este tipo de popups.

Con esto quedaría configurado cuándo aparece el popup. 

Cada cuánto tiempo se muestra el popup

Si hemos escogido la opción “Auto Open” en el cuadro “Cookies” nos aparecerá la cookie que se ha creado. Las cookies guardan información en el navegador que en este caso son útiles para controlar cada cuánto queremos que se muestre el popup.

Crear popups en WordPress con Popup Maker cookies

Si creamos un popup que en muestra automáticamente en toda la web y no definimos una cookie, en cada página que abra aparecerá el popup, y puede terminar siendo muy molesto.

Crear popups en WordPress con Popup Maker cookies configurar

En la cookie que se ha creado tenemos un enlace con un lápiz para poder editarlo. Lo pulsamos y se abrirá una ventana con la configuración. Hay dos configuraciones importantes:

  • La primera es la casilla “Use Session Cookie?” Si la marcamos lo que hará es mostrar el popup sólo una vez mientras tengas el navegador abierto. Si lo cierras y vuelves a acceder, aparecerá de nuevo.
  • La segunda configuración es definir un tiempo durante el cual no se mostrará el popup (Cookie Time). Se configura en inglés, y puede ser, por ejemplo una semana (1 week), o 1 día (1 day). Podemos utilizar segundos, minutos, horas, días, meses y años. Debemos mantener marcada la casilla “Sitewide Cookie” para que no muestre el popup hasta que pase el tiempo especificado que hemos definido antes.

Con esto ya tendríamos configurado cada cuánto queremos mostrar el popup. Ya solo queda un paso:

Dónde queremos mostrar el popup en la web

Lo último que nos queda por configurar es dónde queremos mostrar el popup dentro de nuestra web. Si queremos que se muestre en cualquier página a la que se acceda no habrá que hacer nada, por defecto se muestra en todas las páginas. Pero puede darse el caso que queramos mostrar un popup para unas páginas concretas, por ejemplo los servicios o la página de contacto, o que la suscripción al blog se muestre sólo en el blog.

Crear popups en WordPress con Popup Maker condiciones mostrar 01

Para hacerlo en la barra lateral derecha tenemos el cuadro “Conditions”. De entrada tenemos un selector y 2 casillas que nos permiten ocultar el popup en móvil y tablet, según nos interese. Si desplegamos el selector nos aparecerán todos los apartados de la web, desde las entradas con sus categorías y etiquetas y las páginas estáticas, hasta todos los post type creados (Woocommerce, productos, portfolios, testimonios, …). Esto permite especificar con mucha exactitud dónde se mostrará el popup.

Crear popups en WordPress con Popup Maker condiciones mostra 02

Si por ejemplo queremos mostrar un aviso cuando un cliente de una tienda hecha con Woocommerce llega al carrito, podemos seleccionar “Cart Page” y sólo se mostrará en esa página. Si nos fijamos, al hacer la primera selección el cuadro cambia. Aparece “+ OR” y “+ AND”. Esto permite añadir condiciones para mostrarse. Si quisiéramos que el popup se viese también en la página de Finalizar compra, pulsaríamos el enlace “+ OR”. Aparecerá un nuevo selector y seleccionaremos la página “Checkout Page”.

Crear popups en WordPress con Popup Maker condiciones mostra 03

Si por el contrario no queremos que se vea el popup en una página, seleccionamos la página y después pulsamos el icono con el signo de admiración que aparece delante. Se pondrá en rojo y significa lo opuesto, o sea, que en lugar de que se vea en esa página, que NO se vea en esa página. Con esto podemos hacer todas las combinaciones que se nos ocurran.

Crear popups en WordPress con Popup Maker condiciones mostra 04

Con esto ya hemos terminado, por fin, de crear y configurar nuestro popup. Hay muchas opciones de configuración que lo hacen parecer complejo, pero con un poco de práctica se le puede sacar mucho partido. Es de los plugins gratuito más completos que he visto, y es de agradecer.

¿Te ha gustado este artículo?
0 Votos, Promedio: 0 de 5

Estés donde estés, si necesitas un sitio web, tienda online, campañas de e-mailing o gestión de tus redes sociales, no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.

2 Comentarios

  1. esther
    | Responder

    Hola. Instalé ese plugin pero cuando voy a añadir un nuevo popup no puedo visualizar “theme settings” en la barra lateral derecha.

    • Juan Manuel Martínez
      Juan Manuel Martínez
      | Responder

      Hola Esther. El plugin ha hecho una actualización en la que ha cambiado bastante el aspecto. Tendré que actualizar la información para no crear confusión.

      Ahora toda la información que aparecía en la barra lateral aparece en la parte inferior, como tabs (o pestañas). Se llama Popup Settings, apartado Display. Ahí hay varias opciones. La primera es Appearance, y es donde seleccionas el tema para el popup.

      Espero que te sirva.

Deja un comentario

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

Información sobre protección de datos

Responsable: Cowalencia S.C.
Fin del tratamiento: Controlar el spam, gestión de comentarios.
Legitimación: Tu consentimiento.
Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
Derechos: Acceso, rectificación, portabilidad, olvido.
Contacto: info@covalenciawebs.com.
Información adicional: Más información en nuestra política de privacidad.