Crea ventanas emergentes con patrones de WordPress

Publicada en WordPress.

Desde que en diciembre del 2018 con la versión de WordPress 5.0 apareció el editor de bloques Gutenberg, éste ha ido evolucionando aproximándose cada vez más a un editor WYSIWYG, permitiendo crear páginas y entradas añadiendo y moviendo bloques de todo tipo.

Pero esto sólo fue el principio, con la versión de WordPress 5.5 aparecieron los patrones de bloques. La idea de un patrón de bloques es muy sencilla: son secciones o fragmentos predefinidos formados por un grupo de bloques que puedes utilizar en la creación de páginas y entradas. Los patrones de bloques pueden ser algo tan simple como una sección en la que se muestran dos botones o un apartado de precios con diseños llamativos y complejos, o incluso el diseño de toda una página.

Añadiendo un patrón de bloques en una página
Añadiendo un patrón de bloques en una página.

Con un clic de ratón, la creación de páginas con diseños muy atractivos nunca había sido tan fácil. Y de la misma forma en que podemos crear páginas, también podemos crear ventanas emergentes usando patrones. Veamos cómo.

Usa patrones con el plugin Nelio Popups

Nelio Popups es un plugin de creación de ventanas emergentes totalmente integrado en el editor de bloques con todas las ventajas que ello comporta. De la misma forma en que creas una nueva página, con Nelio Popups también puedes crear ventanas emergentes con bloques y patrones.

Tras instalar y activar el plugin, haz clic en «Añadir nueva» para que se te abra el editor de popups que es prácticamente idéntico al editor de bloques de páginas y entradas con el que estás familiarizado.

Creación de un nuevo popup con Nelio Popups
Creación de un nuevo popup con Nelio Popups.

Puedes añadir los bloques que quieras para crear el diseño que quieras mostrar en el popup. Por ejemplo, en la siguiente imagen ves la edición de un popup creado con un encabezado, un párrafo, una imagen y un botón.

Creación del popup parecido al de CRS
Creación del popup parecido al de CRS.

Además, como también puedes ver en la imagen anterior, en la barra lateral del popup tienes disponibles un gran conjunto de propiedades sobre cómo quieres que se muestre el popup: tamaño, posición, efecto de animación, cómo y cuándo mostrarlo, etc.

Patrones predefinidos en Nelio Popups

Nelio Popups viene con un conjunto de patrones predefinidos para que crees ventanas emergentes en cuestión de segundos. Éstos los encontrarás en la barra lateral derecha, en la pestaña «Patrones». Con sólo hacer clic en el patrón, se te copiará el conjunto de bloques que lo conforman adaptándose al estilo que tengas definido en el tema.

Creación de una ventana emergente a partir de un patrón predefinido
Creación de una ventana emergente a partir de un patrón predefinido.

En la siguiente galería, te muestro imágenes de las capturas de pantalla de previsualización con el tema Twenty Twenty de los popups creados con los patrones predefinidos de Nelio Popups.

Patrones incluidos en tu tema

Adicionalmente a los patrones que vienen predefinidos en el plugin de Nelio Popups, también puedes crear nuevos popups con los patrones que ya te vienen del tema. En el editor de popups, de la misma forma en que harías al editar cualquier página, selecciona el patrón que quieras de la lista de los que tienes disponibles en tu tema y haz clic en el mismo para que se inserte en el editor.

Creando un popup a partir de un patrón del tema
Creando un popup a partir de un patrón del tema.

Y ya está, ya puedes visualizarlo para ver cómo queda.

Previsualización del popup creado con un patrón disponible en el tema
Previsualización del popup creado con un patrón disponible en el tema.

Como siempre, puedes realizar las modificaciones que quieras y añadirle las propiedades y efectos que necesites.

Directorio de patrones en WordPress.org

Además, como ya sabes, actualmente en el directorio de patrones de WordPress.org dispones de más de 800 diseños de patrones que puedes copiar gratuitamente. Y el directorio no para de crecer…

Aunque puedas pensar que los patrones publicados sólo están pensados para crear páginas, fíjate que muchos los puedes utilizar para crear popups. Por ejemplo, haciendo una búsqueda por «CTA», seguramente encontrarás más de uno que te gustará.

Patrones con los que construir ventanas emergentes
Patrones de WordPress.org con los que construir ventanas emergentes.

Para crear un popup a partir de cualquiera de ellos, sólo debes hacer clic en el botón «Copiar» que aparece al pasar con el ratón por encima del patrón, pegarlo en el editor de popups y ya lo tienes disponible para modificarlo como quieras.

Bien fácil, ¿verdad?

Resumiendo

Si los patrones para la construcción de páginas ya están aquí para quedarse, ¿por qué no aprovecharlos para también construir popups? Usando un plugin como Nelio Popups, totalmente integrado con el editor de bloques de WordPress, esto es muy fácil. Bien a partir de los patrones predefinidos en el propio plugin o bien a partir de los patrones que el tema tenga instalados, o bien copiando cualquier patrón de los que tienes disponible en el directorio de patrones de WordPress.org, en un par de clics ya tienes un popup creado.

Imagen destacada de Toa Heftiba en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.