Cómo usar los patrones de bloques de WordPress: una guía simple

Desde el lanzamiento de WordPress 5.8 en 2021, los patrones de bloques se han convertido en una forma cada vez más popular de crear contenido en WordPress. Permiten que los desarrolladores y diseñadores los utilicen en todos los aspectos de sus sitios web, incluidos encabezados, pies de página, publicaciones, páginas y más. Como beneficio adicional, los usuarios pueden guardar patrones de bloques de WordPress para que el proceso de diseño sea más rápido y fácil. En esta publicación, discutiremos qué son los patrones de bloque y cómo usarlos. Empecemos.

¿Qué son los patrones de bloque de WordPress?

Al crear contenido en WordPress, puede insertar un grupo de bloques en sus publicaciones o páginas para mostrar su contenido de una manera hermosa y funcional. Estos grupos de bloques se denominan patrones de bloques de WordPress. WordPress ofrece una serie de patrones de bloques prefabricados dentro del repositorio de WordPress. Además, la mayoría de los temas de WordPress también tendrán una colección de ellos. Los patrones de bloques se pueden editar tan fácilmente como cualquier bloque que cree. Los patrones pueden contener varios bloques o incluso páginas enteras. Y, con la edición completa del sitio en WordPress, se pueden usar en cualquier lugar e incluso son útiles para crear encabezados, pies de página, plantillas de página, consultas y más.

Patrones de bloques de WordPress frente a bloques reutilizables

Como se indicó anteriormente, un patrón de bloque es un grupo de bloques que se pueden insertar en una publicación, página, parte de plantilla o plantilla. Los patrones de bloques se pueden insertar en varias ubicaciones, pero se pueden cambiar individualmente . Los patrones de bloques se pueden guardar como bloques reutilizables, pero una vez que eso suceda, cambiará en todos los lugares donde se use ese bloque reutilizable. Básicamente, los bloques reutilizables adquieren una propiedad global, mientras que los patrones de bloques son una colección de bloques que se pueden editar para que tengan un aspecto diferente, independientemente de cuántas veces se usen en un sitio web.

Cómo encontrar nuevos patrones de bloques de WordPress

Hay algunos lugares para encontrar patrones de bloques de WordPress. La primera forma es dentro de su propio tema de WordPress. Como se mencionó anteriormente, la mayoría de los temas contienen patrones de bloques que puede usar para su sitio web. Por ejemplo, el tema Twenty Twenty-Two tiene una colección decente de patrones. Puede elegir entre categorías que incluyen columnas, texto, galerías, páginas y más.

Otra forma de encontrar patrones de bloques es dentro del directorio de patrones de bloques de WordPres. Actualmente hay más de 65 páginas de patrones para usar, incluidos encabezados, pies de página, estructuras alámbricas, columnas, botones y más.

Cómo agregar patrones de bloques a su sitio

Agregar patrones de bloques a su sitio web es un proceso simple. Si desea buscar dentro de su tema para agregar un patrón, simplemente haga clic en el ícono azul + en la parte superior izquierda de su pantalla.

A continuación, vaya a Patrones . Seleccione el patrón que desea usar, luego haga clic en él para agregarlo automáticamente a su página.

Otra forma de agregar patrones de bloques a su sitio es copiarlos y pegarlos desde el directorio de patrones. Navegue hasta el directorio de patrones, ubique el patrón de su elección, luego desplace el cursor sobre él para revelar el botón de copiar .

A continuación, vuelve a tu página. Haga clic dentro del tablero de edición y haga clic con el botón derecho y seleccione pegar , o use CTRL + V (en Windows) o CMD + V (Mac) . Su patrón de bloque aparecerá en la página. Puede reorganizar su ubicación haciendo clic en la vista de lista y luego arrastrándola a la ubicación deseada.

Cómo usar patrones de bloques en WordPress

Usar patrones de bloques en WordPress es fácil. Como se mencionó anteriormente, se pueden editar como cualquier otro bloque. Ahora que sabe cómo acceder a ellos y agregarlos a su sitio, repasemos cómo editarlos.

Por lo general, cuando importa un patrón de bloque a su página, se agrupará. Agrupar bloques facilita arrastrarlos por la página, así como ajustar configuraciones como el ancho, el color, el tamaño de la tipografía, el relleno y el espacio entre bloques, en el propio grupo.

Para realizar cambios en un bloque individual dentro del grupo, simplemente haga clic para editarlo. La edición de bloques individuales no requiere que los desagrupa, y se editan de la misma manera que los bloques normales. Por ejemplo, observemos el bloque de imagen dentro de nuestro patrón. Puede agregar enlaces, recortar, agregar texto o reemplazar la imagen, como lo haría de otra manera.

Puede agregar tantos patrones de bloques como desee en su diseño. Agregar patrones es una manera fácil de crear contenido hermoso en un instante. Además, eliminar bloques es igual de simple. Si desea eliminar un patrón de la página, simplemente haga clic en el elemento principal en la vista de lista o haga clic en el menú de puntos suspensivos en el editor de páginas, luego haga clic en Eliminar grupo .

Cómo crear y guardar sus propios patrones de bloques en WordPress

Hay algunas formas de crear y guardar patrones de bloques en WordPress. La forma en que lo haga depende de su nivel de experiencia y de si desea compartirlo con otros. Profundicemos para aprender a crear, guardar y compartir patrones de bloques.

Crear patrones de bloques en el directorio de patrones de WordPress

Este método requiere que tengas una cuenta de WordPress, pero es la forma más sencilla de crear patrones para usar en tu sitio web. Comience dirigiéndose al directorio de patrones de WordPress. A continuación, haga clic en crear un nuevo patrón .

A continuación, deberá iniciar sesión o crear una nueva cuenta de WordPress. Una vez que haya iniciado sesión, será redirigido al editor de patrones. Funciona igual que el editor de páginas en su propio sitio web. Como beneficio adicional, tendrá acceso a imágenes libres de regalías para usar en sus patrones. Para comenzar, asigne un nombre a su patrón, luego comience a agregar bloques haciendo clic en el botón negro + .

Una vez que termine de diseñar su patrón de bloques, es hora de guardarlo para usarlo en su sitio web. Hay dos opciones para guardar su patrón. Elegir guardar borrador le permitirá guardar el patrón para su uso exclusivo . Podrá mantener su patrón en la nube y acceder a él en cualquier momento para copiarlo y pegarlo en su sitio web.

Para acceder a sus patrones, vuelva a la página del directorio de patrones y haga clic en el enlace Mis patrones. Tanto sus borradores como sus favoritos pueden usarse en sus sitios de WordPress.

Envíe su patrón de bloque a WordPress

WordPress permite a sus usuarios crear y enviar patrones de bloques para que todos sus usuarios los utilicen en los temas de bloques de WordPress. De hecho, la galería de patrones es solo eso: patrones enviados por el usuario. Para crear un patrón de bloque para el envío, siga los pasos de la sección anterior. Sin embargo, esta vez, hará clic en el botón Enviar . Su patrón pasará por un proceso de revisión antes de ser agregado al directorio. Una vez en vivo, su patrón será visible en el directorio de patrones de WordPress donde cualquiera puede acceder a él.

Use un complemento para crear patrones de bloques

Con la creciente popularidad de los bloques de Gutenberg, existen más opciones que nunca para guardar patrones de bloques en sus sitios web. Hasta hace poco, si quería crear un patrón de bloque dentro de WordPress, tenía que codificarlo usted mismo, lo cual no es fácil de usar para principiantes. Afortunadamente, hay algunas opciones para las personas que desean crearlas fácilmente.

Complemento CoBlocks

CoBlocks es creado por GoDaddy. Le brinda una colección de más de 40 bloques para usar en su sitio web, además de la capacidad de crear patrones de bloques y registrarlos. El proceso es simple y solo toma unos pocos pasos. Primero, crea tu diseño preferido. A continuación, seleccione los bloques que desea incluir en su patrón. Finalmente, seleccione Agregar patrón de diseño .

Nombra tu patrón, dale una descripción opcional y asígnale una categoría. Finalmente, haga clic en Guardar patrón .

Para ver su patrón recién creado, vaya a la pestaña Patrones, seleccione la categoría asignada y desplácese hacia abajo para verlo.

Blockmeister - Generador de patrones de bloques

Otra opción es el complemento Blockmeister – Block Pattern Builder. El proceso es muy similar al de CoBlocks. Sin embargo, este complemento no le brinda ningún bloque adicional para sus diseños. Simplemente le da la capacidad de crear patrones de bloques. Para comenzar, cree su diseño, luego seleccione todos los bloques que se incluirán en él. A continuación, haga clic en el menú de puntos suspensivos en la vista de lista y seleccione Agregar a patrones de bloques .

El siguiente paso es nombrar su patrón, luego haga clic en Crear patrón . Una vez guardado, actualice su página para encontrar el patrón en el directorio de patrones de su tema.

Para ubicar su patrón, use el menú de categoría desplegable en patrones, luego elija el nombre de su sitio.

Patrones de bloques de WordPress frente a diseños Divi

Tanto los patrones de bloques como los diseños Divi ofrecen las mismas características básicas. Puede crearlos, editarlos, personalizarlos y guardarlos. Sin embargo, Divi tiene mucho más en términos de opciones de personalización, ahí es donde terminan las similitudes entre los dos. Verá, las personalizaciones de bloques se basan en temas, lo que significa que solo obtiene todo lo que ofrece ese tema en términos de colores, fuentes y efectos. Para obtener más opciones, los usuarios deben agregar complementos o código para obtenerlos. Con Divi, tienes una gran cantidad de opciones de personalización a tu disposición para ayudarte a crear diseños increíbles para tu sitio web.

Divi no es solo un tema de WordPress, es una plataforma completa de creación de sitios web con mucho poder bajo el capó. Divi utiliza un Visual Builder patentado de arrastrar y soltar que le permite crear hermosos diseños en la parte delantera, en tiempo real. No es necesario obtener una vista previa de su diseño en una nueva pestaña para ver cómo se verá su página en el navegador.

Divi tiene opciones de personalización ilimitadas

Hay opciones de diseño ilimitadas con más de 200 elementos del sitio web. Dentro de cada elemento, hay increíbles opciones de fondo mediante el uso del sistema de color mágico dinámico de Divi. Además, puede hacer que sus diseños impresionen con efectos de transición, desplazamiento y animación. No solo eso, puede ajustar el espaciado, el tamaño, agregar filtros y sombras de cuadro, y mucho más.

Guardar diseños usando Divi Cloud

Cuando quieras reutilizar un diseño, Divi te lo pone fácil. Puede guardar módulos, filas, secciones o incluso páginas completas con Divi. Además, los diseños se pueden guardar como globales para que cuando necesite realizar un cambio en un diseño que se está utilizando en todo su sitio, solo tenga que cambiarlo una vez. Como beneficio adicional, puede guardar sus diseños en Divi Cloud, lo que le permite usarlos en cualquier sitio web de Divi, en cualquier lugar.

Preguntas frecuentes sobre los patrones de bloques de WordPress

Con todo lo que le hemos lanzado en la publicación, es posible que tenga algunas preguntas sobre los patrones de bloques. La buena noticia es que tenemos respuestas. sigue leyendo

¿Los patrones de bloques son como bloques reutilizables?

En cierto modo, sí. Tanto los patrones de bloques como los bloques reutilizables se pueden crear, guardar y editar. Sin embargo, los bloques reutilizables se parecen más a los bloques globales. Por ejemplo, si crea un bloque reutilizable como una opción de boletín informativo para usar en todo su sitio web, hacer cambios en una instancia dará como resultado que ese cambio se realice donde sea que se muestre ese bloque. Si tuviera que usar un patrón de bloque en su lugar, podría cambiar el color de fondo, el color del botón o realizar otras ediciones de diseño sin que afecte a todas las instancias.

¿Dónde puedo obtener patrones de bloques para mi sitio web?

Como se mencionó anteriormente, puede obtenerlos en el directorio de patrones de WordPress, dentro de su tema de WordPress o con un complemento como Gutenberg Template and Pattern Library de Extendify.

¿Por qué debería usar patrones de bloques?

En resumen, es una gran manera de ahorrar tiempo. El mayor gasto de tiempo con el desarrollo de WordPress es la creación del contenido. Con los bloques de patrones, puede ahorrar tiempo y energía al crear patrones que puede usar en las páginas y publicaciones de su sitio.

¿Puedo crear bloques de patrones manualmente?

¡Usted puede! Sin embargo, deberá sentirse cómodo escribiendo y editando código para crear bloques de patrones manualmente. WordPress.org tiene una buena lección que te ayudará a guiarte en el proceso si quieres intentarlo.

Envolviendo las cosas

Los patrones de bloques brindan una manera fácil y rápida de agregar contenido a su sitio web. Además, puede encontrar hermosos diseños profesionales en el directorio de patrones de WordPress para ayudarlo a comenzar. Si no está utilizando bloques de patrones en su sitio web, le recomendamos que lo haga.

¿Está utilizando bloques de patrón en su sitio web? Si es así, díganos por qué le gusta usarlos en la sección de comentarios a continuación.