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.
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.
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.
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.
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.
Y ya está, ya puedes visualizarlo para ver cómo queda.
Como siempre, puedes realizar las modificaciones que quieras y añadirle las propiedades y efectos que necesites.
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
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á.
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