WordPress Block Patterns: La guía completa para principiantes

Si eres usuario de WordPress, sin duda estás familiarizado con Gutenberg y con el concepto de bloque. Después de todo, Gutenberg existe desde hace más de dos años y se está convirtiendo rápidamente en la forma predominante de crear un sitio web en WordPress.

Pero, ¿estás familiarizado con los patrones de bloques? Este aspecto de Gutenberg suele ser ignorado o desconocido incluso por los usuarios más experimentados de WordPress.

Esto no es bueno, ya que el uso de patrones de bloques tiene muchas ventajas, especialmente para los sitios web más pequeños.

En este post, cubriremos todo lo que necesitas saber sobre los patrones de bloques de WordPress Gutenberg.

En primer lugar, hablaremos exactamente de qué y cómo funcionan. A continuación, te guiaremos en la descarga, edición y creación de tus propios patrones.

¿Listo para aprender sobre patrones de bloques?

Acerca de WordPress Block Patterns

¿Qué es exactamente un patrón de bloques? El término puede parecer algo intimidatorio, pero no se preocupe, es muy sencillo.

Empecemos este post examinando las distintas partes de un patrón de bloques y cómo funcionan.

¿Qué son los patrones de bloques de WordPress?

Los patrones de bloques son diseños prediseñados y listos para usar que se componen de bloques de WordPress. Te permiten crear fácilmente un diseño complejo de bloques en cuestión de segundos y guardarlo como una plantilla.

A continuación, puede utilizar estos patrones en cualquier parte de su sitio web para recrear secciones repetitivas con el mínimo esfuerzo.

Esto supone una gran mejora con respecto a tener que crear manualmente un diseño añadiendo un bloque cada vez.

Pero espera, ¿qué es un bloque de WordPress?

Los bloques de WordPress son el elemento básico que compone Gutenberg, la nueva(s) versión(es) de WordPress.

En pocas palabras, un bloque no es más que un elemento predefinido que puedes añadir a tu página. Algunos ejemplos son los bloques de texto, los bloques de redes sociales, los bloques para incrustar vídeos de YouTube y otros.

Si eres totalmente nuevo en Gutenberg, echa un vistazo a nuestro Guía para principiantes sobre el editor Gutenberg de WordPress. Cubrimos todo lo que necesitas saber sobre el uso de Gutenberg.

Así, un patrón de bloques es simplemente una colección de bloques. Por ejemplo, el patrón "Logotipos de socios" que aparece a continuación es una colección de bloques que crean una sección de patrocinadores/socios destacados. Fácil, ¿verdad?

Lo mejor de los patrones es que se pueden guardar, reutilizar y compartir para utilizarlos en otros sitios web de WordPress.

Esto significa que puede reutilizar el mismo patrón en varias páginas o entradas en cualquier lugar. También puedes utilizar patrones en distintas áreas de tu sitio web, como cabeceras, pies de página y barras laterales.

Una metáfora que puede ayudarle a entender los patrones de bloques es la de un receta. Los patrones de bloques son esencialmente pequeñas recetas de contenido de bloques Gutenberg.

Puede descargar recetas (patrones), utilizarlas para crear su propia comida (contenido del sitio web), guardarlas para utilizarlas más tarde e incluso compartirlas con sus amigos, familiares o colegas.

En esencia, facilitan la creación de contenidos sin tener que empezar de cero.

¿Se imagina tener que cocinar un nuevo tipo de comida sin receta alguna? Llevaría mucho más tiempo, sería enormemente ineficaz y probablemente menos apetitoso.

Los patrones de bloques son básicamente lo mismo. La imagen de abajo muestra el patrón de bloques "Introducción con Galería", o receta.

¿Por qué debería utilizar los patrones de bloques de WordPress?

Hay cuatro grandes razones por las que debería considerar el uso de patrones de bloques:

1. Para ganar tiempo
2. Utilizar patrones prefabricados creados por diseñadores profesionales
3. Para guardar patrones que quieras reutilizar a menudo
4. Son flexibles, personalizables e independientes del tema.

Repasemos cada uno de ellos.

1. Ahorrar tiempo

En primer lugar, los patrones de bloques reducirán el tiempo necesario para crear un sitio web. En lugar de tener que crear elementos individuales una y otra vez, puede utilizar un patrón.

Esto resulta especialmente útil si desea repetir determinados patrones o diseños varias veces en su sitio web.

2. Utilizar patrones prefabricados creados por diseñadores profesionales

Otra gran razón para utilizar patrones de bloques es que así puedes aprovechar las habilidades de diseñadores y desarrolladores profesionales.

Descargando patrones de la Directorio de patrones de bloques de WordPress, puede ahorrarse tener que diseñar un diseño usted mismo. Hay cientos de patrones prediseñados que cubren todo, desde cabeceras hasta cajas de suscripción. Combinando estos elementos, puedes crear un bonito diseño sin necesidad de ser diseñador.

3. Para guardar patrones que utiliza a menudo

En un nivel muy básico, los patrones te permiten ser más eficiente y reutilizar ciertos estilos de contenido que creas a menudo.

La mayoría de los sitios web tienen un número bastante reducido de diseños de página diferentes, como la página de inicio, la página del blog, las entradas y otras páginas estándar. En muchos sitios, el diseño de este tipo de páginas es bastante uniforme.

Sin embargo, si desea realizar una personalización, tendrá que hacer cambios para cada tipo de página individual. Con los patrones de bloques, puedes guardar las plantillas de bloques de patrones que utilices a menudo.

4. Flexibilidad, personalización e independencia temática

Por último, los patrones merecen la pena porque son piezas de contenido altamente personalizables que pueden utilizarse en diferentes lugares. En concreto, pueden utilizarse en diferentes temas y en diferentes plantillas dentro de esos temas.

Esto le permite evitar recrear los mismos elementos una y otra vez y se ve bien cuando se combina con Temas compatibles con Gutenberg.

¿Cómo funcionan los patrones de bloques de WordPress?

En última instancia, los patrones de bloques están diseñados para sustituir a los códigos cortos, las complejas opciones de tema, copiar y pegar código incrustado y otras tareas engorrosas que ahora son necesarias para personalizar un sitio web de WordPress.

Mediante el uso de plantillas de patrones de bloques, puede implementar fácilmente una selección de contenidos preestablecida.

Patrones de bloque frente a Elementor o Beaver Builder

Si ha utilizado creadores de páginas como Elementor o Beaver Builder antes, puede que te preguntes qué diferencia a los patrones de WordPress de ellos o de plugins similares. Todos ellos son esencialmente constructores de páginas, cuando se llega a esto.

Bueno, puedes pensar en los bloques y patrones de bloques de Gutenberg como una actualización de los constructores de páginas.

A diferencia de los constructores de páginas, Gutenberg está construido por los propios desarrolladores de WordPress, lo que significa que se alinea con la estructura general del código y el diseño del resto de WordPress. Esto le da una gran ventaja sobre otros page builders, especialmente de cara al futuro.

Aunque Beaver Builder y Elementor sin duda seguirán siendo útiles en el futuro, si estás empezando y quieres una solución sencilla que lo cubra todo, probablemente deberías ir directamente a Gutenberg.

Seguirá siendo el constructor de páginas "por defecto" de WordPress y, de hecho, la forma predeterminada de crear contenido para WordPress.

Dicho esto, Gutenberg es "contenido primero", lo que significa que está diseñado principalmente para escribir y crear otros tipos de contenido que van en puestos.

Beaver Builder y Elementor, por otro lado, están más diseñados para crear páginas de contenido estático. Existen muchos plantillas para Elementor o Beaver Builder que ponen de relieve este hecho.

En última instancia, no es una mala estrategia utilizar ambos Gutenberg y un page builder, siempre y cuando no te importe aprender a usar dos plugins e interfaces de diseño diferentes.

Patrones de bloques frente a los bloques reutilizables de Gutenberg

¿Cuál es la diferencia entre un patrón de bloques y un bloque reutilizable? Bueno, puedes pensar en un patrón de bloques como una colección de bloques reutilizables.

En lugar de guardar y reutilizar un solo bloque, puedes guardar un patrón entero y reutilizarlo cuando quieras. Puedes incluir tantos bloques como quieras en tu patrón.

Uso de plantillas de bloques de patrones de WordPress

Ahora que sabemos qué Los patrones de bloques de WordPress son, vamos a hablar de su uso.

Existen básicamente tres formas de obtener un patrón de bloques:

• Utilice Plantillas Astra Starter u otra solución de plantillas temáticas
• Cópielo desde el Biblioteca de patrones de bloques
• Créalo tú mismo

Plantillas Astra Starter

La nuestra Paquete Starter Templates ahora viene con un montón de Gutenberg Block Patterns incorporados. Estas plantillas son un gran ahorro de tiempo que hacen que sea fácil de añadir rápidamente diferentes elementos de diseño a su sitio.

Para utilizar los patrones de bloques de Starter Templates, cree una nueva página o entrada y haga clic en el botón azul grande Starter Templates de la cabecera.

A continuación, pulse la tecla Patrones . Ahora verás un directorio con todas las plantillas disponibles. Selecciona la que quieras utilizar y pulsa Importación.

Por fin verás tu nuevo patrón de bloques. Bien hecho. 

Obtenga más información sobre Starter Templates para Gutenberg en la entrada de nuestro blog o en el siguiente vídeo.

La biblioteca de bloques de WordPress

¿Desea descargar un patrón prefabricado? No hay problema. Ahora hay una biblioteca de patrones de bloques que han sido creados por diseñadores, desarrolladores y otros usuarios de WordPress.

Vea nuestro vídeo a continuación o siga leyendo para obtener más información.

Hay cientos de patrones disponibles que cubren todo, desde botones, columnas, galerías, cabeceras, imágenes y mucho más. Para descargarlos, visite la página Directorio de patrones de bloques de WordPress.

Desplácese hacia abajo y verá una lista de patrones que puede utilizar en su propio sitio. Seleccione un patrón y/o busque algo específico. Hay muchos tipos diferentes de patrones y puedes filtrar las categorías por Botones, Columnas, Galería, Encabezado, Imágenes y Texto.

Una vez que encuentre un patrón que le guste, haga clic en el botón Copia situado junto a él. El código se copiará en el portapapeles de su ordenador.

A continuación, accede a tu sitio web WordPress y crea una nueva página o entrada. Pasa el ratón por encima del Editor de bloques y, a continuación, desplázalo hasta el lugar donde quieras que esté el patrón. Pega el código en el editor.

¡Voilà! Ahora tendrá un nuevo patrón de bloques en su sitio web.

Cómo crear una plantilla de bloques de patrones para WordPress

Hablemos de cómo crear tu propia plantilla de bloques de patrones para WordPress. Mientras que usted puede descargar los pre-hechos de la biblioteca, es probable que también quieren ser capaces de crear el suyo propio.

Esto es especialmente cierto si tiene muchas páginas con el mismo diseño. En lugar de recrear el diseño cada vez, puedes crear un patrón de bloques y añadirlo al contenido.

Sin embargo, esto puede resultar algo complicado si no eres desarrollador. Si es desarrollador, tendrá que consulte la API de Block Patterns y la documentación correspondiente.

Afortunadamente, existen algunos plugins que facilitan enormemente la creación de un patrón de bloques. Hay dos opciones básicas:

• Utilice un plugin de fragmentos de código y copia/pega tú mismo el código del patrón
• Utilice el complemento de patrón de bloques de BlockMeisterque le permite crear sus propios patrones o convertir una selección de bloques en su propio patrón personalizado.

En la siguiente guía, vamos a utilizar el Block Pattern Builder de BlockMeister, ya que es la solución más sencilla y rápida. Si tiene más conocimientos técnicos, consulte la página Manual oficial de patrones de bloques.

En primer lugar, instala el plugin. Puedes conseguirlo en el repositorio de WordPress o buscando en la web Plugins de su sitio web.

A continuación, vaya a Patrones de bloques > Añadir nuevo patrón en la barra lateral de WordPress.

Ahora estarás en la página estándar del editor de Gutenberg. Crea el patrón que te gustaría usar añadiendo todos los bloques que desees.

También puede elegir las categorías que tendrá el nuevo patrón. Por defecto, se asignará a una nueva categoría con el nombre de su sitio web ("Sitio web de prueba" en nuestro ejemplo).

Cuando hayas terminado, pulsa publicar.

Ahora verá su patrón en la lista de la página Patrones de bloques > Todos los patrones página. Si desea añadirlo a una página, entrada u otro lugar, también aparecerá allí:

Bastante fácil.

Editar un patrón de bloque de WordPress en su entrada / página

Ahora que ya tiene un patrón de bloques de WordPress, puede que quiera hacerle algunos cambios menores. Después de todo, es probable que tenga un diseño específico o sabor a su sitio y desea personalizar el patrón de bloques para que coincida con ella.

Para editar el patrón, sólo tienes que pasar el ratón por encima del bloque que quieras cambiar y hacer clic en él. Verás que aparecen algunos ajustes básicos. Si haces clic en los tres puntos de la parte derecha del panel, podrás acceder a más opciones.

¡Buen trabajo! Usted puede personalizar cada uno de los bloques para adaptarse a sus necesidades específicas para esa página o post.

Cómo convertir bloques reutilizables en patrones de bloques

¿Y si tienes bloques reutilizables y quieres convertirlos en un patrón? Existe un ingenioso complemento que facilita este proceso.

Se llama Bloques reutilizables ampliados y se puede descargar gratuitamente en el repositorio de WordPress.

Veamos brevemente cómo utilizarlo.

Una vez que haya descargado, instalado y activado el plugin, vaya a Bloques > Gestionar bloques reutilizables en la barra lateral de WordPress.

Allí verás una lista de los bloques que tienes guardados. Para convertir uno en patrón, basta con hacer clic en el gran icono azul Convertir a patrón de bloques botón.

Ahora verás tu patrón listado en el creador de entradas/páginas. Así de sencillo.

Bloques Gutenberg - Spectra

Por último, hablemos brevemente de otro útil plugin desarrollado por Brainstorm Force, el equipo que está detrás del tema Astra. Se llama Spectra y puede descargarlo gratuitamente desde el repositorio de WordPress.

Este es un pequeño plugin que añade funcionalidad extra al editor Gutenberg. Con respecto a los bloques, el plugin añade un montón de nuevos tipos de bloque, incluyendo:

• Clasificación por estrellas
• Formularios
• Fichas
• Lottie (animación)
• Esquema de revisión
• Cita en bloque

Es una forma superfácil de maximizar tu productividad cuando trabajas con bloques.

Concluimos nuestra guía de patrones de bloques

En este post, hablamos sobre los patrones de bloques de WordPress Gutenberg, cómo funcionan y cómo puedes usarlos en tu propio sitio. También te mostramos cómo crear los tuyos propios mediante un plugin.

Los patrones de bloques son una forma fantástica de aumentar la productividad, utilizar diseños profesionales y, en general, ahorrarte mucho tiempo a la hora de crear tus propios bloques. crear un sitio web con WordPress.

Si aún no los utiliza, le recomendamos encarecidamente que les eche un vistazo.

¿Has utilizado patrones de bloques en tu página web? Comparta su sitio a continuación y (si es posible) ¡comparta un enlace a los patrones que utilizó para que otros puedan usarlos también!