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:
- 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).
- Le pones nombre a tu ventana emergente en sus ajustes.
- Configuras el aspecto y comportamiento de la ventana emergente.
- 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 😉
La entrada ¡Crear ventanas emergentes popup con el editor de bloques de WordPress! ¿qué clase de magia es esta? la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.
0 Commentaires