Cómo crear y registrar patrones de bloques en WordPress

How to Create Block Patterns in WordPress

El editor de bloques de WordPress, también conocido como Gutenberg, se lanzó allá por 2018. Las nuevas funciones añadidas a esta revolucionaria actualización facilitaron más que nunca la creación de páginas web dinámicas con el mínimo esfuerzo.

Desde su lanzamiento, se han añadido muchas funciones nuevas a Gutenberg para permitir una personalización aún mayor.

Gutenberg WordPress plugin

Con la versión 5.5, WordPress añadió el uso de colecciones de bloques curadas llamadas Patrones de bloques Gutenberg.

En este artículo hablaremos de los patrones de bloques, en qué se diferencian de los bloques normales y cómo registrar bloques personalizados.

¿Qué son los bloques Gutenberg?

Patrones de bloques Gutenberg son diseños predefinidos que se construyen a partir de múltiples bloques de Gutenberg. Son similares a los bloques normales, ya que puedes editarlos una vez insertados, igual que los bloques normales.

Sin embargo, hay una diferencia significativa entre los patrones de bloques y los bloques reutilizables estándar en Gutenberg.

Cuando añades un bloque reutilizable, permanece igual en todo el sitio web. Si utilizas el mismo bloque en otras páginas e intentas cambiarlo, se alterarán los bloques en todo el sitio.

Con los patrones de bloques, puede cambiar el diseño y la funcionalidad con un diseño coherente sin afectar a ningún otro bloque.

¿Por qué son tan útiles los patrones de bloques Gutenberg?

Los diseños de bloques te ayudan a crear páginas bonitas y los patrones de bloques hacen lo mismo. Los patrones de bloques te permiten personalizar cada instancia del diseño utilizado.

Así podrá crear páginas más atractivas, más rápidamente.

Un lienzo en blanco puede suponer un reto. Pero con los patrones de bloques, resulta mucho más fácil.

Puedes coger el patrón que quieras de la página de WordPress Directorio de patrones de bloques y utilícelo en su sitio web.

block pattern library

Esto le ahorrará mucho tiempo y esfuerzo a la hora de diseñarlo todo desde cero.

¿Son los patrones de bloques mejores que los constructores de páginas?

Crear un sitio web no consiste sólo en darle un aspecto atractivo. También hay que tener en cuenta el rendimiento del sitio web, los diseños, los diseños prediseñados y otros elementos.

Estos son algunos de los fundamentos en los que comparamos los patrones de bloques de Gutenberg con otros constructores de páginas.

Rendimiento del sitio web

Si buscas un rendimiento óptimo, los patrones de bloques de Gutenberg están muy por delante de los constructores de páginas. Esta es la mayor ventaja de usar Gutenberg sobre cualquier constructor de páginas.

Los creadores de páginas ofrecen muchas funciones que ayudan a crear páginas atractivas. Sin embargo, estas funciones suelen conllevar una sobrecarga que puede ralentizar el rendimiento de la página.

Un sitio web rápido ayuda a optimización de motores de búsqueda y ayuda a mejorar la experiencia del usuario. A la gente no le gustan los sitios web lentos, así que cuanto más rápido, mejor.

Está demostrado que Gutenberg es más rápido que otros constructores de páginas porque forma parte de WordPress, por eso nos gusta tanto.

Salud y seguridad en las obras

En cuanto a la salud y seguridad del sitio, los patrones de bloques de Gutenberg son mucho más fiables que los constructores de páginas. Esto se debe a que los bloques forman parte de WordPress y están diseñados para funcionar a la perfección con WordPress.

Eso no quiere decir que los creadores de páginas sean malos, sólo que están atornillados a WordPress en lugar de ser parte de él. Es lógico que tengan puntos débiles.

Plantillas y diseños

Gutenberg tiene un montón de patrones de bloques que puede utilizar en su sitio web. Se trata de bloques prefabricados que te ayudan a diseñar tu sitio web de forma eficiente.

Cuando comparamos page builders como Divi, Elementor, o Beaver Builder, estos vienen con sitios web completos con todo lo que necesitas, ya diseñados y listos para usar.

Así que tienen las de ganar.

Ni los constructores de páginas ni los patrones de bloques necesitan ningún tipo de codificación. Sin embargo, los patrones de bloques no tienen la funcionalidad de arrastrar y soltar que suele verse en los constructores de páginas.

Coste

Este es uno grande.

Gutenberg viene incluido con WordPress y es totalmente gratuito. Puedes comprar complementos premium, pero son completamente opcionales.

Los creadores de páginas tienen versiones gratuitas, que son suficientes para empezar. Si quieres ir más allá, tendrás que pagar.

La mayoría de los creadores de páginas premium tienen cuotas de licencia anuales que pueden costar cientos de dólares cada año. Puedes perderte actualizaciones importantes si te saltas un pago.

¿Qué significa registrar un patrón de bloques?

Como ya hemos comentado, WordPress tiene su propio repositorio de patrones de bloques. Puedes utilizar patrones de este repositorio y usarlos en tu sitio web arrastrándolos y soltándolos en su lugar.

Pero, ¿y si creas tu propio patrón?

En este tutorial, utilizaremos el tema Astra. Astra es totalmente Compatible con Gutenberg y es el más adecuado para este fin.

No te preocupes si no utilizas Astra, ya que este método funciona con casi todos los temas.

Cómo registrar un patrón de bloques

Aquí tiene una guía paso a paso para registrar un patrón de bloques.

Paso 1: Instalar el plugin Custom Block Patterns

Instale y active el Plugin de patrones de bloques personalizados por LOOS.

custom block pattern plugin

El plugin Custom Block Patterns te ayuda a crear tu propio patrón, como tú quieras.

Normalmente tendrías que crear un patrón y luego añadir la función register_block_pattern() para que el patrón de bloque se active.

Con este plugin, puedes evitar todo ese código y crear tus propios patrones directamente en el editor de bloques de WordPress.

Paso 2: Crear el patrón del bloque

También puedes utilizar los diseños preexistentes y personalizarlos para crear los tuyos propios.

A continuación te explicamos cómo crear tu propio patrón de bloques:

Vaya al panel de control de WordPress y seleccione Patrones de bloques > Añadir nuevo.

add new block pattern

Haga clic en el botón "+" para encontrar los bloques que necesitas añadir. También puedes explorar todos los bloques y diseños prediseñados.

Create new block pattern

Arrastre el diseño que desee al editor.

import new block pattern

Paso 3: Personalizar el diseño

Personaliza el diseño según tus necesidades. Esta parte depende totalmente de tu creatividad.

Puedes añadir un botón, o texto, o tal vez cambiar el color y la imagen de fondo. Usted decide.

Publique el patrón que ha creado haciendo clic en el botón "Publique".

publish a new block pattern

Ahora su patrón de bloques está listo para ser utilizado.

Paso 4: Utiliza el patrón en otras entradas y páginas

Ahora que el patrón está creado, puedes empezar a utilizarlo de diferentes maneras. Puedes añadirlo a una página o post.

Cuando se diseñan de una forma determinada, los patrones también pueden utilizarse en las barras laterales.

Ahora, utilicemos este patrón en otros lugares:

  1. Vaya a Cuadro de mandos >Páginas > Página nueva.
  2. Haga clic en el botón "+" para encontrar los bloques que necesitas añadir. También puedes explorar todos los bloques y diseños prediseñados.
  3. Haga clic en el menú desplegable de "Patrones".
  4. Haga clic en el botón "Patrones de bloques personalizados" para encontrar los patrones de bloques que ha creado.
how to add custom block pattern

Arrastre el patrón de bloques que desee y suéltelo en la página.

add custom block pattern

Preguntas frecuentes sobre el patrón de bloques Gutenberg

¿Qué es el patrón Gutenberg?

Los patrones de bloques de Gutenberg son diseños prefabricados formados por bloques de Gutenberg normales. Actúan como bloques normales, pero pueden ser exclusivos de una página o entrada determinada, a diferencia de los bloques normales.

El diseño estandarizado facilita la creación de una página más atractiva con menos esfuerzo, tiempo y energía que si tuviera que diseñar cada cosa usted mismo.

¿Cómo personalizo los bloques de Gutenberg?

Una vez abierta una página, puedes añadir bloques en ella y empezar a personalizarla.

  • Para añadir una nueva página, vaya a Panel de WordPress > Páginas > Añadir nuevo.
  • Añade un bloque utilizando el botón " añadir nuevo bloque ".+".
  • Una vez que hagas clic en el botón, verás una serie de bloques Gutenberg para añadir a tu página actual.
  • También puede hacer clic en "Ver todo"para ver todos los bloques y diseños de bloques.
importing block pattern

Puede añadir, eliminar o cambiar atributos de los bloques añadidos sobre los diseños para personalizar un bloque.

¿Cómo se hacen los patrones Gutenberg?

Puedes hacer patrones Gutenberg usando plugins como Custom Block Patterns Plugin. Este plugin te ayuda a registrar directamente los bloques con tu instalación de WordPress.

¿Cómo se utilizan los patrones de bloques?

Si tienes un diseño recurrente en diferentes páginas de tu sitio web y tiene diferentes piezas de información para mostrar, los patrones de bloques son el camino a seguir.

Esto crea una coherencia en el patrón y los colores aunque la información del bloque esté personalizada para la página concreta.

Cree hoy mismo su patrón de bloques

WordPress incluye una amplia gama de opciones de personalización y plugins que facilitan más que nunca la tarea de crear diseños personalizados. Incluso puede crear páginas personalizadas en WordPress utilizando patrones.

Con los patrones de bloques de Gutenberg en su lugar, puede crear un hermoso sitio web profesional de forma rápida y sencilla.

En este artículo, cubrimos cómo puedes crear tus diseños de bloques sin tener que editar código. Los plugins controlan los diseños que mantienen tus diseños seguros, incluso si cambias de tema.

En el futuro, Gutenberg mejorará y traerá más opciones de personalización para WordPress.

¿Ya has creado tu patrón de bloques? Háznoslo saber en los comentarios.

Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.

2 comentarios
  1. Bob Profile Pic

    Tengo la última versión tanto de WordPress como de Astra y ya no veo la opción de Block Patterns. Antes lo hacía e incluso creé los míos propios que están en uso en la web. Sin embargo, ahora ya no veo la opción de insertar patrones de Bloques y los patrones en uso no se cargan. Sólo me aparece el mensaje "El bloque se ha eliminado o no está disponible". ¿Algún consejo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

La descarga está a un solo clic

Download Checklist

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio