Patrones de bloques de WordPress: ¿cómo usarlos para diseñar sus páginas?

¿Sabes qué son exactamente los patrones de bloqueo de WordPress? ¿O quieres saber cómo usarlos para diseñar tus páginas? Si ese es el caso, entonces este artículo tutorial es para ti.

Simplemente, puede entender los patrones de bloques como una colección de bloques preensamblados que puede usar para sus páginas en WordPress. Además, hay algunos patrones de bloques exclusivos para pies de página, encabezados, páginas, etc.

Por lo tanto, los patrones de bloques de WordPress son secciones de contenido prefabricadas construidas con bloques. Le ayudan a diseñar fácilmente sus páginas, publicaciones y diferentes áreas de su sitio. Sin duda, puede ahorrar mucho tiempo usando patrones de bloques de WordPress.

¿Quieres saber cómo usar los patrones de bloques de WordPress? ¡Preparamos esta sencilla guía tutorial solo para ti! ¡Vamos a empezar!.

Presentamos los patrones de bloques de WordPress

Echemos un vistazo más de cerca al patrón de bloques de WordPress antes de ver cómo usarlo para diseñar sus páginas.

Como se mencionó anteriormente, los patrones de bloques de WordPress son básicamente plantillas formadas por unos pocos bloques. Puede incluir dos o más bloques y se colocan de manera específica para adaptarse a una página, publicación, barra lateral o cualquier otra parte de un sitio web.

Por ejemplo, puede encontrar patrones de bloque para una llamada a la acción, descripción del producto, tabla de precios, testimonio, equipo, contacto, galería, lista de características, etc. Además, puede obtener patrones de bloque para el encabezado, pie de página, página 404, etc. .

El objetivo principal de los patrones de bloques es ayudar a los usuarios de WordPress a diseñar páginas hermosas de manera más eficiente. En lugar de combinar bloques uno por uno, los patrones de bloques precombinados le permiten diseñar mucho más fácil y rápido.

Además, los patrones de bloques vienen con los ajustes de configuración para esos bloques preensamblados. De esta manera, puede adaptar fácilmente el patrón a su favor haciendo algunos pequeños ajustes como cambiar su color, contenido y más detalles.

En esencia, las principales razones para usar patrones de bloques de WordPress para diseñar sus páginas se pueden destacar como:

• En lugar de tener que diseñar piezas individuales de forma repetitiva, puede ahorrar tiempo utilizando un patrón.
• Resulta útil para crear diseños de página más complejos por su cuenta.
• Puede hacer uso de patrones prefabricados diseñados profesionalmente por desarrolladores.
• Le ayuda a ser más productivo al permitirle reutilizar estilos de contenido particulares que crea con frecuencia.
• Los patrones son altamente configurables y puede utilizarlos en una variedad de temas y diseños dentro de esos temas.

¿Dónde puedes encontrar patrones de bloques de WordPress?

Ahora, es posible que se pregunte dónde puede encontrar los patrones de bloqueo de WordPress, ¿verdad?

Bueno, te alegrará saber que el núcleo de WordPress viene con algunos patrones de bloques. Puede usarlos directamente desde la interfaz del editor de páginas para diseñar sus páginas.

Además, también puede encontrar varios hermosos patrones de bloques directamente desde el directorio de patrones de bloques de WordPress en WordPress.org.

Estos patrones de bloque son enviados por colaboradores de todo el mundo, al igual que los temas y complementos de WordPress. Un equipo de revisión en WordPress.org revisa cada patrón de bloque enviado y luego los aprueba.

Incluso puede crear hermosos patrones de bloques y enviarlos al directorio de WordPress.org. Le mostraremos cómo hacerlo en este artículo, así que quédese con nosotros hasta el final.

Dicho esto, avancemos a cómo usar los patrones de bloques de WordPress para diseñar sus páginas.

¿Cómo usar el patrón de bloques de WordPress para diseñar sus páginas?

Básicamente, existen 2 métodos sencillos para utilizar los patrones de bloques de WordPress para diseñar sus páginas. Entonces, veamos estos métodos individualmente.

Método 1: desde la interfaz del editor

El primer método es usar patrones de bloques de WordPress directamente desde la interfaz del editor.

Aquí, lo guiaremos a través de cómo usar los patrones de bloques de WordPress desde la interfaz del editor para crear sus páginas paso a paso.

Paso 1: Crear una nueva página

Para diseñar una página, primero deberá crear una nueva página. Entonces, después de iniciar sesión en su tablero de WordPress, navegue a las 'Páginas' en la navegación izquierda de su tablero. Luego, haga clic en la opción 'Agregar nuevo' .

Con eso, ahora serás llevado a la interfaz del editor de páginas. Por ejemplo, llamemos a la página ' Usar patrones de bloques de WordPress '.

Después de eso, puede ver el ícono '+' en la esquina superior izquierda. Haga clic en él para que aparezca el insertador de contenido.

Paso 2: Explore patrones de bloques

Al hacer clic en él, verá 2 subopciones en la barra lateral que aparece. Son Bloques y Patrones. Ahora, cambie a la pestaña 'Patrones' .

A continuación, haga clic en la opción 'Explorar' para explorar varios patrones de bloques disponibles en su interfaz.

Luego, verá la página como se muestra arriba. Puede utilizar el menú de la derecha para recorrer varias categorías de patrones. Como destacados, botones, columnas, galería, encabezados, texto, etc. También puede buscar un patrón de bloque específico por nombre en el cuadro de búsqueda.

Paso 3: Integración de patrones de bloques

Después de eso, integremos algunos patrones de bloques en nuestra página. Por ahora, vayamos al menú 'Encabezados' y veamos los patrones de encabezado disponibles.

Entre los varios estampados disponibles, puedes elegir el que más te guste. Aquí hemos elegido el patrón de encabezado " Medios y texto en un contenedor de altura completa ".

Simplemente puede hacer clic en el patrón elegido para integrarlo.

Ahora, simplemente verá que el patrón de encabezado ya está integrado en su página, como se muestra en la captura de pantalla anterior. Puede personalizar aún más el patrón a su elección, que se le ocurrirá en breve.

De la misma manera, exploremos los patrones de 'Galería' . Y, aquí hemos elegido el patrón de galería ' Imágenes compensadas con descripción '. Como antes, simplemente haga clic en el patrón elegido para integrarlo.

En una integración exitosa, verá la página como se muestra a continuación. Con eso, ha hecho uso del patrón de la galería.

Del mismo modo, hay otros varios patrones disponibles. Todo lo que necesita hacer es explorar el patrón requerido e integrarlo de la misma manera que se indicó anteriormente.

Paso 4: Personalización de patrones de bloques

Después de hacer uso de ciertos patrones de bloqueo de WordPress, es posible que desee personalizarlo a su elección.

Entonces, personalicemos el patrón de encabezado que hemos integrado antes.

Simplemente puede hacer clic en el patrón de encabezado en su página para acceder a las posibilidades de personalización.

Una vez que haga eso, encontrará las diversas configuraciones en el lado derecho de su editor.

Con la opción de color, puede poner el color de su elección en el texto y el fondo.

Además, simplemente puede hacer clic en la imagen para acceder al botón 'Reemplazar' . Y cargue la imagen que desee de la Biblioteca de medios .

Del mismo modo, puede simplemente hacer clic en el encabezado y editar el texto. ¡Cómo hemos cambiado a ' Diarios de viaje! ' aquí.

Además, también puede cambiar el nivel del encabezado, el color, la tipografía, el tamaño y más.

Asimismo, puedes personalizar el estilo del botón, el color, el estilo y el radio del borde, y muchos más.

De esta manera, puede personalizar el patrón de bloques de WordPress a su elección utilizando todas las posibilidades de personalización proporcionadas.

De manera similar, puedes personalizar otros varios patrones que hayas integrado para diseñar tu página. Es realmente así de simple.

Paso 5: Vista previa de la página

Una vez que haya terminado con la personalización, en la esquina superior derecha, puede ver el botón "Vista previa" . Simplemente haga clic en él para obtener una vista previa de la página que acaba de diseñar usando los patrones.

Una vez que esté de acuerdo con su página diseñada, puede hacer clic en el botón 'Publicar' para vivir su página diseñada.

De esta manera, puede crear un magnífico diseño en su sitio web con los patrones de bloques de WordPress directamente desde la interfaz del editor en muy poco tiempo.

Con eso, avancemos al siguiente método para usar patrones de bloques de WordPress.

Método 2: desde el directorio de patrones de bloques de WordPress

Del mismo modo, si no puede encontrar el patrón que está buscando en la interfaz del editor, entonces hay otro método para usted. Eso es usar patrones de bloques de WordPress directamente desde el directorio de patrones de bloques de WordPress.

Entonces, veamos cómo usar los patrones de bloques de WordPress del directorio de patrones de bloques de WordPress para diseñar sus páginas paso a paso. Síganos mientras lo guiamos.

Paso 1: Vaya a WordPress.org y navegue a Patrones

Para utilizar el patrón del patrón de bloque de WordPress directamente, primero vaya al sitio web oficial de WordPress.org.

Ahora, verá varias opciones en la barra de navegación, como complementos, temas, patrones, aprender, etc.

Para eso, debe hacer clic en la opción 'Patrones' .

Paso 2: Explora los patrones

Después de eso, será llevado a la página como se muestra en la imagen a continuación. Desde aquí, ahora puede explorar varios patrones de bloques disponibles en el repositorio.

Generalmente, los patrones se clasifican como Botones, Columnas, Destacados, Galería, Encabezado, etc. También puede buscar el tipo de patrón que está buscando desde el cuadro de búsqueda.

A partir de ahora, en la subsección Columnas, exploramos y elegimos el patrón ' Dos columnas con imagen y descripción de párrafo '.

Paso 3: haga clic en la opción Copiar patrón

Entonces, una vez que haya encontrado el patrón que está buscando, simplemente haga doble clic en él para obtener una vista previa del patrón.

Y en la parte superior izquierda, puede ver la opción 'Copiar patrón' . Haga clic en él para copiar el patrón.

Alternativamente, puede simplemente pasar el mouse sobre el patrón. Con eso, verás la opción 'Copiar' . Simplemente, haga clic en él para copiar el patrón.

Paso 4: pegue el patrón en la página

Después de eso, ahora debe volver al editor de su página de WordPress.

Ahora, debe pegar el patrón que acaba de copiar del directorio de WordPress en el editor de su página . Y por lo tanto, verá los cambios como se muestra en la imagen de abajo.

Paso 5: Personalización del patrón

Luego, puede personalizar aún más el patrón a su elección. Al igual que en el método anterior, puede personalizar el patrón de la misma manera.

Entonces, hagamos algunos ajustes y cambios en el patrón para que sea nuestra elección.

Simplemente puede hacer doble clic en el bloque de patrón para acceder a las posibilidades de personalización en el lado derecho.

Puede cambiar fácilmente el texto del patrón a su elección editando directamente la interfaz del patrón.

Además, desde la configuración de personalización del lado derecho, puede realizar cambios fácilmente en el texto. Como personalizar el color del texto, el color de fondo, el tamaño de la tipografía, la apariencia del texto, mayúsculas y minúsculas, etc.

Del mismo modo, puede cambiar el color predeterminado de la columna a su elección. Todo lo que necesita hacer es simplemente hacer clic en la columna a la que desea cambiar de color.

Y simplemente coloque el color de su elección en la configuración de personalización tal como se muestra en la captura de pantalla anterior.

Asimismo, puede reemplazar la imagen predeterminada del patrón con la imagen de su elección.

Además, puede adaptar el estilo predeterminado de la imagen, personalizar el tamaño de la imagen, personalizar las dimensiones de la imagen y mucho más. Además, también puede eliminar cualquier bloque dentro del patrón que considere innecesario para su página.

A continuación, personalicemos la sección de botones del patrón.

Puede cambiar el estilo del botón, el color del texto y del fondo, el radio del borde, la configuración del ancho, la tipografía, etc.

Siguiendo el mismo proceso, puedes torcer y girar cada rincón y grieta del patrón para personalizarlo.

Paso 6: Vista previa de la página

Una vez que haya terminado de personalizar, busque el botón "Vista previa" en la esquina superior derecha. Simplemente haga clic en él para ver una vista previa de la página que acaba de crear con los patrones.

Una vez que esté satisfecho con su página diseñada, haga clic en el botón ' Publicar' para que su página esté activa.

De esa manera, puede crear rápidamente un diseño de página elegante para su sitio web. Todo con la ayuda de los patrones de bloques de WordPress de la biblioteca de patrones de bloques de WordPress. ¿No es genial?

¿Cómo crear y enviar sus propios patrones de bloques de WordPress?

Ahora que sabe cómo usar patrones de bloques para diseñar sus páginas, es posible que se pregunte si también puede contribuir a crear patrones de bloques.

Bueno, te alegrará saber que puedes hacerlo. ¿Pero es difícil? ¡Absolutamente no!

Repasaremos cómo crear sus propios patrones de bloques y enviarlos al repositorio en esta sección. Siga con nosotros mientras lo guiamos a través de los siguientes pasos:

Paso 1: crea tu cuenta en WordPress.org

Entonces, para crear y enviar patrones de bloques, debe tener una cuenta en WordPress.org. Si no es así, lo primero que debe hacer es crear su cuenta.

Puede crear fácilmente su cuenta navegando a la opción 'Registrarse' en el sitio web oficial de WordPress.org.

Y además, complete la información requerida para crear la cuenta. Es realmente así de simple.

Una vez que haya creado su cuenta, puede iniciar sesión fácilmente y seguir creando sus patrones de bloqueo.

Paso 2: cree y envíe sus patrones de bloques en el repositorio

Para crear patrones de bloque, en primer lugar, vaya al menú 'Patrones' en el sitio web oficial de WordPress.org.

Después de eso, puede ver la opción 'Crear un nuevo patrón ' como se muestra en la imagen de arriba. Haz click en eso. Con eso, verá una nueva página de edición donde puede crear su patrón.

Ahora, démosle un nombre adecuado al patrón. Por ejemplo, ' Patrón de dos columnas con doble imagen y descripción '. Luego, simplemente puede hacer clic en el ícono '+' para insertar los bloques requeridos.

Por ahora, insertemos bloques de columnas . Además, puede elegir el número de columnas que desea para su patrón.

Como aquí vamos a crear un patrón de dos columnas, hemos elegido un bloque de dos columnas 50/50 . Además, puede adaptar la columna a su elección desde la opción de configuración en el lado derecho.

Además, puede hacer clic en el ícono '+' en la columna y agregar los subbloques dentro de ella.

Entonces, insertemos el bloque Imagen . Una vez que haga eso, puede cargar cualquier imagen adecuada que se encuentre en el repositorio de WordPress.org desde la biblioteca de medios. Sin embargo, tenga en cuenta que no puede cargar su propia imagen en el patrón .

Además, puede insertar el bloque Párrafo para crear una sección de descripción en su patrón.

Del mismo modo, puede agregar otro bloque en la misma columna haciendo clic en el ícono ' + ' en el bloque.

De la misma manera, puede agregar otro bloque de párrafo en la primera columna.

Además, puede realizar la personalización necesaria para su patrón. Simplemente haga doble clic en toda la columna para acceder a la personalización.

Ahora, puede cambiar el texto y el color de fondo, el estilo del borde, el radio, el relleno y muchas otras configuraciones.

Una vez hecho esto, simplemente puede hacer clic en la opción 'Guardar borrador' en la parte superior.

Por último, puede hacer clic en el botón 'Enviar' en la esquina superior derecha para publicar su patrón.

Es así de fácil. Una vez que se apruebe su patrón, lo encontrará en el directorio oficial de patrones de WordPress.

Conclusión

¡Eso es todo, amigos! Hemos llegado al final del viaje de este artículo.

Esperamos que este artículo le haya dado una idea de los patrones de bloqueo de WordPress y cómo usarlos para diseñar sus páginas. Siguiendo los métodos anteriores, puede utilizar fácilmente los patrones de bloque de WordPress para diseñar sus páginas con elegancia en poco tiempo. Y también, crea uno si lo deseas.

Si tiene alguna confusión sobre cómo usar los patrones de bloqueo de WordPress, no dude en dejar un comentario a continuación. Nos pondremos en contacto contigo lo antes posible.

Además, no olvide compartir este artículo con sus amigos y familiares si lo disfrutó.

También podría estar interesado en nuestro otro artículo como los mejores temas de bloque de WordPress para la edición completa del sitio. Además, asegúrese de consultar este artículo sobre los mejores complementos de bloque de Gutenberg para WordPress también.

Por último, no olvide dar me gusta y seguirnos en Facebook y Twitter para obtener más artículos relacionados.