¡Crear ventanas emergentes popup con el editor de bloques de WordPress! ¿qué clase de magia es esta?

Apunta esto: Siempre que Nelio saque algún nuevo plugin pruébalo, porque te estarás perdiendo algo bueno, eso seguro. Yo lo tengo en mi lista, así que cuando vi que publicaban un nuevo plugin, en este caso para crear ventanas emergentes, las conocidas como popups, había que probarlo.

El plugin se llama Nelio Popups, para no confundir y eso, y se instala gratis desde el instalador de WordPress, como cualquier otro plugin. Una vez activo verás un nuevo elemento en el menú de administración de WordPress llamado Nelio Popups, y aquí empieza y (casi) termina todo.

Y es que Nelio Popups añade básicamente un nuevo tipo de contenido, como las entradas y las páginas, con el que puedes crear tus ventanas emergentes, con tu editor de bloques de siempre, pero con algunas características especiales.

Cómo crear una ventana emergente popup

Para crear tu primera ventana emergente simplemente pulsas el botón de añadir nuevo y se abre el editor de bloques, el tuyo, el de siempre.

La diferencia frente a editar una entrada o una página es que aquí el tipo de contenido, la ventana emergente, tiene una serie de elementos de personalización, de atributos, diferentes, siendo los principales estos:

  • Título – El nombre de tu ventana emergente, solo útil a nivel interno.
  • Activar ventana emergente – Si quieres que la ventana emergente se muestre con los ajustes que hayas definido.
  • Personalización (con varias secciones, una por cada icono):
    • Estilo – Aquí puedes cambiar colores, tamaño, aspecto, animaciones, etc.
    • Páginas – Para elegir dónde quieres que se muestre la ventana emergente.
    • Disparadores – Define cuándo quieres que se muestre la ventana emergente.
    • Restricciones – Por si quieres controlar que no se muestre en ciertas condiciones.
    • Avanzados – Algunos ajustes más de comportamiento de la ventana emergente.

Veremos alguno de estos elementos más en detalle, pero la estructura es muy simple y, básicamente, el proceso de crear tu ventana emergente es el siguiente:

  1. Creas tu ventana emergente en el editor, usando todos los bloques que quieras y tengas instalados en tu editor (el plugin Nelio Popups no añade ningún bloque específico, tienes los mismos que puedes usar en entradas y páginas, tanto los de WordPress como los de colecciones de bloques que tengas activas).
  2. Le pones nombre a tu ventana emergente en sus ajustes.
  3. Configuras el aspecto y comportamiento de la ventana emergente.
  4. Publicas los cambios y activas la ventana emergente, si quieres. El botón de vista previa del editor abre una nueva pestaña del navegador, en la que se mostrará la portada de tu web y la ventana emergente en acción, algo siempre útil para comprobar los ajustes que hayas realizado.

Como verás, nada complicado, al contrario. En mi caso, por deformación profesional, me puse a buscar pantallas de ajustes y configuraciones pero no había nada más, es tan simple y eficaz como esto, creas una ventana emergente y configuras cómo y dónde se mostrará.

Personalizar la ventana emergente popup

Como te decía, hay montones de opciones para personalizar las ventanas emergentes una vez hayas creado tu diseño con bloques. Algunas son especialmente interesantes, así que vamos a ver las principales.

Diseño de la ventana emergente

 

 

El primer icono de ajustes nos va a permitir configurar todos los aspectos de diseño de la ventana emergente, a saber:

  • Tamaño – Desde automático a pantalla completa, entre otros.
  • Ubicación – Todas las posiciones posibles.
  • Relleno y márgenes
  • Animación – Cuatro disponibles actualmente.
  • Retardo y velocidad – Por si quieres darle emoción a la cosa
  • Añadir superposición – Para oscurecer la web mientras se muestra el popup

Por supuesto, en cada apartado tienes montones de ajustes posibles, que se muestran al activarlo.

Páginas donde se visualizará el popup

Estos ajustes me han parecido enormemente interesantes, sobre todo como está resuelto el asunto en el plugin, todo un acierto. Y es que resulta que tienes aparentemente pocas opciones:

  • Mostrar en todas partes – Si lo activas se mostrará en toda la web.
  • Mostrar en los grupos seleccionados – Aquí puedes especificar la visibilidad basada en condiciones, con variables O e Y, y puedes aplicar múltiples, como en los plugins de ajustes de visibilidad de widgets.
  • Dejar que cada página decida – Y esto me parece una genialidad, pues añade al editor de bloques una nueva sección (Nelio Popups) para que en cada entrada o página decidas si se mostrarán ventanas emergentes y cuáles, da igual cómo hayas configurado cada ventana emergente, con lo que tienes el control total de la visualización de estos elementos. Si pones «Auto» se mostrarán las ventanas emergentes según estén configuradas, si eliges «Ninguna» no se mostrará ninguna, da igual cómo esté configurada, y para finalizar puedes elegir activar en cada contenido ventanas emergentes concretas, da igual su estado.

Disparadores de la ventana emergente

Estos ajustes suelen ser el mayor potencial en cualquier sistema de ventanas emergentes, pues es donde decides cuándo se mostrarán los popups, con varias posibilidades.

Nelio Popups ofrece 4 acciones gratuitas en este plugin:

  • Acción del ratón – Para personalizar en qué selector CSS se abrirá al hacer clic o pasar el cursor.
  • Visualización de la página – Nada más abrir la página.
  • Desplazamiento del scroll – A partir de qué porcentaje de scroll aparecerá.
  • Retardo de tiempo – Defines después de cuántos segundos, etc, quieres que se muestre.

Además, en la versión premium de Nelio Popups, tendrás más opciones, algunas fantásticas:

  • Intención de salir – Se mostrará cuando el usuario saque el cursor de la página o vaya a teclear algo en la barra de navegación.
  • Inactividad – Tras un tiempo de inactividad.
  • Manual – Tras una acción manual. (clics, etc.)
  • Lectura de página – Tras un tiempo de lectura de la página que decidas.
  • WooCommerce – En situaciones relacionadas con páginas de una tienda online (tras añadir al carrito, al llegar a finalizar compra, etc.)

Restricciones de la ventana emergente

Aquí encontrarás algunos límites que puedes aplicar de situaciones en la que los usuarios verán o no la ventana emergente:

  • Que no se abra otro popup mientras este esté activo – Esto es algo que no encontrarás en ningún otro plugin, y es alucinante que así sea.
  • Evitar que abra este popup si hay otro activo – Lo mismo pero al revés, fundamental.
  • Mostrar (o no) en dispositivos móviles.
  • Limitar las veces que un mismo visitante verá el popup (Premium)
  • Retardo entre visualizaciones consecutivas – Para no agobiar a tus visitantes mostrándoles cada página o cada día el mismo popup (Premium).

 

 

Ajustes avanzados de la ventana emergente

Esta, aunque básica, es una sección de ajustes muy recomendable, pues te permite añadir algunos comportamientos interesantes a tu ventana emergente:

  • Cerrar al pulsar la tecla ESC – Considero que es un básico de usabilidad y accesibilidad, y deberías tener siempre activo.
  • Cerrar al hacer clic fuera – Igual, toda facilidad para el usuario de salir de una ventana emergente es poca.
  • Bloquear el scroll del cuerpo – De la página que está detrás de la ventana emergente, se entiende. Me parece interesante tenerlo activo.
  • Crear una cookie personalizada al abrirse la ventana emergente – Ajustes premium para un mayor control de las visualizaciones, de cara a las estadísticas que la gente de Nelio incorpora en la versión de pago.

¿Qué tal funciona?

El plugin funciona a la perfección. Acaba de salir publicado pero el equipo de Nelio no solo son grandes desarrolladores, sino que son a su vez amantes de WordPress y participantes de la comunidad, así que no sacan nada sin haberlo probado y usarlo ellos mismos, algo que más empresas deberían hacer, para que no les hagan los usuarios de beta testers, algo más común de lo habitual.

Crear ventanas emergentes es facilísimo, solo dependes de los bloques que tengas disponibles y de tu gusto estético a la hora de crearlas.

¿Le falta algo al plugin?

Eso también, y como acaba de salir, y estoy seguro de que los amigos de Nelio lo agradecerán, les voy a proponer algunas posibles mejoras, que he echado en falta, a saber:

  • No me gusta que cada plugin que instalo de Nelio tenga su propio menú de nivel superior en la administración de WordPress. Creo que, ya que tienen cada vez más, deberían hacer un menú Nelio general, y añadir los menús de sus plugins bajo este menú genérico. La única excepción (quizás) sería este, que al ser un tipo de contenido, tiene lógica que esté en la zona de contenidos, como menú de nivel jerárquico superior, en cuyo caso le cambiaría el nombre de Nelio Popups a simplemente «Ventanas emergentes» o «Popups» en inglés.
  • Como tantos otros plugins, el usuario base no va a saber qué hacer o dónde hacerlo nada más activar el plugin. Demasiadas veces asumimos que los usuarios conocen cada menú de la administración de WordPress y que se darán cuenta de que hay uno nuevo, pero hay instalaciones con decenas de plugins, cada con su menú, donde pasará desapercibido uno más. Creo que sería interesante añadir un aviso o una ventana tras la instalación del tipo «Crear aquí tu primera ventana emergente» o algo así.
  • Bloques específicos para ventanas emergentes – Pues sí, en mi caso no me han hecho falta porque ya tengo alguna colección de bloques que incluye de todo tipo de formularios para boletines, botones, cajas y casillas de selección, pero WordPress por defecto no incluye estos elementos y para muchos tipos de ventanas emergentes son imprescindibles. Estaría bien que el mismo plugin añadiese al menos 2 bloques: formulario de suscripción, con posibilidad de conexión a los principales servicios, que al final es para lo que más se usan los popups, y uno de casilla de selección única (para aceptar condiciones y esas cosas)
  • Que los submenús de Premium y Soporte abran en pestaña nueva, no en la misma ventana en la que estás, para que no te echen de tu admin de WordPress. Un pequeño detalle.

Por lo demás me ha parecido una genial idea ofrecer una herramienta sencilla de creación de ventanas emergentes popup, basada en el editor de bloques, para no tener que recurrir a costosos y pesados maquetadores de este tipo de elementos, y así aprovechar los recursos ya disponibles en nuestra web.

Pero no me creas, anímate e instala el plugin Nelio Popups y nos cuentas qué te ha parecido, seguro que los desarrolladores se pasan por aquí y puedes comentar con ellos tus impresiones 😉

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 9

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

8 comentarios en “¡Crear ventanas emergentes popup con el editor de bloques de WordPress! ¿qué clase de magia es esta?”

  1. Buenas, Fernando.

    ¡Muchísimas gracias por compartir con tu audiencia nuestro plugin! En Nelio siempre seguimos tus publicaciones para estar al tanto de las novedades en el ecosistema WordPress y, sinceramente, es todo un honor poder ser una de las noticias del día.

    Por cierto, muchas gracias también por los comentarios finales sobre cómo podemos mejorar el plugin. Los anotamos a nuestra lista de tareas 🙂 Como desarrolladores, es fácil olvidar qué va a sentir un usuario nuevo cuando use por primera vez tu plugin… así que tus ideas nos resultan extremadamente útiles.

    Desde aquí me gustaría animar a tu público para que lo prueben y nos hagan llegar sus comentarios. Creemos que maquetar las ventanas emergentes a través del editor nativo de Gutenberg es el camino lógico y más prometedor de cara al futuro, de ahí que hayamos optado por esta solución. Cualquier problema, duda o necesidad que os surja, enviádnosla y estaremos encantados de ayudaros.

    ¡Gracias de nuevo!

    1. Gracias David por cocrear el plugin, y gracias Fernando por darlo a conocer y explicar su funcionamiento… Tras instalarlo y crear un popup, me he encontrado con que no aparecía… por lo que he desactivado el resto de plugins, y el popup se ha mostrado… Finalmente he ido activando los plugin uno a uno, para ver que el plugin causante de que «Nelio Poups» no funcione, es «Mejoras y optimizaciones WPO» de Fernando Tellado.

      Otro plugin que causa un inconveniente es «One Click Accessibility», pues añade el botón al popup en la parte inferior derecha (y si lo clicas se despliegan las opciones hacia abajo, que no se ven por salirse del popup)

      Gracias de nuevo… Abrazo…

      1. Gracias por el aviso, Jose. Vamos a investigar qué pasa con el plugin de optimizaciones WPO de Fernando (ya que el problema quizás suceda también con otros plugins de optimización) y ver cómo lo podemos arreglar. También echaremos un vistazo a One Click Accessibility.

        1. Gracias a ti David… He probado en otros dos sitios que tienen los mismos plugins… y en estos no funciona ni con el resto de plugins desactivados…. ¿Qué otra razón podría haber además de incompatibilidad con otros plugins?

          Seguiré probando en las próximas semanas…

          Feliz Finde… Y Comienzode…

          1. Hola, Jose.

            Acabamos de publicar la versión 1.0.6, la cual corrige el fallo que comentabas con el plugin de Fernando.

            El problema estaba en las optimizaciones que suelen aplicar los plugins de WPO. En concreto, una de las optimizaciones que aplican (el de Fernando incluido) es retrasar la carga y ejecución de los scripts externos usando el atributo «defer». El problema está en que no es posible retrasar la carga y ejecución de scripts inline, con lo que un script inline (encolado con «wp_add_inline_script», por ejemplo) que depende de un script «deferred» fallará, porque su dependencia no estará resuelta en el momento de su ejecución.

            En nuestro caso hemos podido refactorizar el código de Nelio Popups para solucionarlo y eliminar esa dependencia entre scripts externos y scripts inline. Pero es algo que los plugins de WPO como el de Fernando deberían tener en cuenta y no aplicar una estrategia tan agresiva a la hora de poner «defer». De hecho, es un problema bastante complejo al que los desarrolladores de WordPress llevan tiempo dándole vueltas (puedes ver este ticket: https://core.trac.wordpress.org/ticket/12009).

            En cuanto al tema One Click Accessibility, se trata de un caso un poco especial. Nelio Popups carga el contenido de los popups con un iframe. Originalmente no era así, pero vimos que era la única forma de garantizar que el contenido del popup tuviera todos los scripts y estilos necesarios. Al tratarse de un iframe, no podemos garantizar que su tamaño sea lo suficientemente grande como para que el flotante de OCA quepa. Así que, una de dos: o (a) pones un alto mínimo explícito al iframe para que se vea el flotante o, lo que en mi opinión es «mejor», (b) desactivas OCA dentro de un popup.

            Para desactivar OCA en los popups de Nelio, puedes usar el filtro «pojo_a11y_frontend_is_toolbar_active» y pasarle una función que compruebe que no «is_singular» de tipo «nelio_popup». Pongo el código aquí, pero no sé si se verá bien formateado en el comentario:

            add_filter(
              'pojo_a11y_frontend_is_toolbar_active',
              function() {
                return ! is_singular( 'nelio_popup' );
              }
            );

            Finalmente, comentarte que hemos corregido algún detalle más que hemos detectado a raiz de tu comentario. Si puedes probarlo de nuevo, te agradeceremos que nos digas si ya se solucionaron todos los problemas o no.

            ¡Gracias de nuevo y un saludo!

        2. Gracias a ti David por la mejora y la respuesta… He añadido la función que compartes, y efectivamente, «One Click Accessibility» ya no se muestra en el popup… Tras actualizar «Nelio Popups», probé con el plugin PWO activado, y el popup funcionó… pero tras editar el popup, seguía mostrando el antiguo, supongo que será cosa de la caché del navegador… Y al probar en modo incógnito, y en el navegador Tor, el popup solo aparece con PWO desactivado…

          Una última cuestión: Yo creo una versión estática del sitio WP. ¿Para que el popup funcione en la versión estática, no es suficiente con copiar la carpeta «nelio-popups» y pegarla en la carpeta «plugins» de la versión estática? Lo pregunto porque así lo he hecho, pero el popup no se muestra…

          Gracias de nuevo… Abrazo…

          1. pero tras editar el popup, seguía mostrando el antiguo, supongo que será cosa de la caché del navegador…

            Sí, es probable. Asegúrate de vaciar la cache de tu servidor también.

            Por otro lado, ten en cuenta que otra de las «mejoras» que suelen incorporar los plugins de WPO es eliminar el número de versión de los scripts. Yo no soy partidario de ello (por más que Google Page Speed y similares se quejen si no lo haces), porque esos números solo cambian si el contenido del script ha cambiado… y si el contenido del script ha cambiado, lo que tú quieres es estar seguro de que el navegador de tus visitantes se dará cuenta de ello y pedirá la nueva versión a tu servidor (cosa que no pasa si se elimina el parámetro de versión). De ahí que tuvieras que forzar el refresco en tu navegador…

            ¿Para que el popup funcione en la versión estática, no es suficiente con copiar la carpeta «nelio-popups» y pegarla en la carpeta «plugins» de la versión estática?

            Ni idea. Dependerá de cómo se genere esa versión estática… En resumidas cuentas, nuestro plugin pone dos cosas en el HTML de tu web: un JSON con los popups que hay activos y un JavaScript que, por cada popup, se encarga de mostrarlo cuando y donde toca. Si generas la versión estática con un conjunto de popups activo y luego cambias cuáles están activos y cuáles no, el JSON que hay en la el HTML estático no reflejaría la realidad de tu backend.

        3. Genero la versión estática mediante el plugin «Simply Static». En general funciona bien, pero siendo nuevo el plugin «Nelio Popups», es comprensible que «Simply Static» no genere una versión estática correcta respecto a los popup… Al ver que la carpeta «nelio-popups» generada por «Simply Static» no contenía todos los archivos, copié y pegué la carpeta «nelio-popups» manualmente, pensando que así se solucionaría, pero sigue sin mostrar el popup… Puesto que la carpeta «nelio-popups» de la versión estática es idéntica a la carpeta «nelio-popups» de la versión WP, supongo que la causa del error está en el código html generado por «Simply Static» (aunque me ha parecido correcto)

          Volveré a probar tras futuras actualizaciones de los plugins, o veré si encuentro otra forma de generar la versión estática…

          Gracias de nuevo por la aportación y la ayuda… y mucho éxito…

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • 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

 

Ir arriba
Ir al contenido