Crear popups en WordPress con Popup Maker (Actualizado)

Crear popups en WordPress con Popup Maker 01

Actualizado a la versión 1.7.28

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, y después el cuadro de configuración del popup.

crear popups en wordpress con popup maker

En la pestaña “Display” en el apartado “Appearance” seleccionaremos el tema que queremos utilizar en este popup.

En el resto de apartados de esta pestaña 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 en la pestaña “Close“, 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 pulsarlo se nos abra el popup, por ejemplo para mostrar información adicional o un formulario para rellenar.

crear popups en wordpress con popup maker

La pestaña “Triggers” es el que se utiliza para configurarlo. Pulsamos el botón Add New Trigger y se nos abrirá un popup para elegir entre “Time Delay/Auto Open” o “Click Open”. Seleccionamos el que queremos y pulsamos “Add”.

crear popups en wordpress con popup maker

Si seleccionamos “Time Delay/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. Además podemos enlazar una cookie previamente creada. De momento no hemos creado ninguna así que lo dejaremos en blanco.

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

En la pestaña Advanced” 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 enlazar una cookie pero no es habitual utilizarla 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” necesitaremos crear una cookie para cada cuánto tiempo queremos que se muestre el popup. Si creamos un popup que se muestra automáticamente al acceder a cualquier página de 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

Pulsaremos el botón “Add New Cookie” para crear una cookie, que después enlazaremos con Trigger Auto Open que hemos definido.

crear popups en wordpress con popup maker

Lo primero que nos pregunta es en qué momento se generará esta cookie. Esto es muy interesante e importante. Las opciones que ofrecen son cuando se cierra o abre el pop, cuando se envía un formulario de suscripción o cuando se envío un formulario de contacto de Contact Form 7 (también está Manual Javascript, pero esto es más complejo y no es necesario). Si tenemos un popup meramente informativo, podemos seleccionar On Popup Open o On Popup Close. Pero si, por ejemplo, se trata de una suscripción o una encuesta, no es lógico que después de haberla rellenado se le vuelva a mostrar. En estos casos seleccionaríamos alguna de las otras opciones. En realidad, para estos casos lo ideal es crear dos cookies y enlazarlas al popup, una por si no lo rellena de duración corta (1 día o 1 semana) y otra de duración más larga en caso de haberlo rellenado (1 año, por ejemplo).

Una vez seleccionada la opción que queremos 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.

Una vez creadas las cookies editamos el Trigger que hemos creado antes (pulsando el icono del lápiz) y en el campo Cookie Name seleccionamos las cookies que queramos enlazar.

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

Para hacerlo tenemos la pestaña “Targeting“. 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. (Las siguientes capturas de pantalla corresponden a una versión anterior del plugin pero con los mismos campos configurables).

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?
2 Votos, Promedio: 4.5 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.

14 Comentarios

  1. JOHN EDISON
    | Responder

    Buenas Tardes,

    Instale y configure el plugin para mostrar un popup pero este no se muestra nunca nisiquiera cuando doy previsualización solo quiero un popup simple en el home pero aun asi no funciona he probado muchos plugins pero aun asi no funciona. Tengo que adjuntar alguna configuración o algo para que mis plugins funcionen???

    quedo atento muchas gracias.

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

      Buenas John. La verdad que así es difícil poderte ayudar.
      Como comprobaciones, asegúrate de haber puesto un disparador (trigger) al Popup, de tipo Autoapertura (Auto Open). Y no le pongas ninguna cookie, para que se muestre siempre.

      Por otra parte comentas que no te funciona ningún plugin, y eso puede significar que hay algún conflicto, seguramente en algún script, con el tema utilizado o algún plugin. Para ver si hay algún error de este tipo, si utilizas Google Chrome o Mozilla Firefox ponte en la página principal de tu web y pulsa F12. Te aparecerá una ventana para desarrolladores. A la derecha (en Chrome) en caso de haber errores aparecerá una cruz roja con un número (el número de errores encontrados). Si pinchas sobre el número te mostrará los errores.

      Pónnos los errores que te aparecen y a ver si podemos detectar lo que ocurre.
      Saludos.

  2. Buenas Juan,
    Perdona molestarte de nuevo pero no lo consigo poner.

    Dentro de tengo puesto href=”#politica” y también id=”#politica” sería así?

    • Julio
      | Responder

      Hola Jorge, prueba quitando el “#” del id, id=”politica”.

      Saludos

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

        Gracias por participar Julio.
        Esa era la corrección que iba a decirle pero ya lo había resuelto. Al usar la # en un sitio y después en otro, se llegan a confundir, y en mi respuesta WordPress ha interpretado como un enlace lo que había escrito, y no aparece escrito.

        En el id no se pone #. Sólo en el href y en selector del popup maker.

  3. jorge
    | Responder

    Buenos días Juan,

    Te expongo mi duda. Yo quiero que aparezca un Popup cuando pinchas en “Política de Privacidad” con un cuadro de información sobre esta.

    Ya he creado un Popup con este cuadro y en “triggers” -> “extra selectors” he puesto #politica (nombre del pop up)

    Bien, ahora que tendría que poner en la palabra “política de privacidad” de mi texto, la cual quiero que al pinchar salga el Pop up?

    He probado Política de Privacidad, ¿qué enlace debo poner en href para que salte el Pop up?

    Muchas gracias,
    saludos

  4. Angel
    | Responder

    Hola, buen dia.

    Como podria usarlo para trabajar con el login, register?

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

      Buenas Angel.
      Para usarlo como registro de usuarios, si tienes el plugin Contact form 7 puedes utilizar el plugin Frontend Registration – Contact Form 7, que añade la funcionalidad de usar el formulario para registro. Con esto, creas el formulario y copias dentro del popup el shortcode. Si luego en cualquier parte de tu web pones un enlace, por ejemplo, Regístrate, y en el popup defines un trigger Click Open, con el identificador #registro, ya lo tendrías.

      Espero que te sirva.

  5. alyzu
    | Responder

    Hola quisiera eliminar el pop Up y lo hice, pero sigue apareciendo, no entiendo que debo hacer.
    Gracias

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

      Hola alyzu.
      Lo que comentas es bastante extraño. ¿Has eliminado el popup y en el listado de popups (All Popups) ya no sale?
      Si es así lo que se me ocurre es que es un tema de caché, que tu web conserva una versión anterior. Si utilizas algún plugin como WP Super Cache, o similar, accede a él y dile que borre toda la caché. A ver si así lo solucionas. También puede que tengas caché del servidor. En estos caso puede ser sólo cuestión de esperar a que refresque (1 o 2 días).
      Saludos.

  6. 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.