Una introducción a los temas de bloques de WordPress

Si usa WordPress, probablemente ya esté familiarizado con los temas. Estos elementos de diseño forman la base de la apariencia y el estilo general de su sitio web. Desde WordPress 5.9, también puede aprovechar los temas de bloque de WordPress. Sin embargo, es posible que se pregunte cómo funciona esta nueva característica .

Con un tema de bloques de WordPress, todo el diseño de su sitio web se compone de bloques. Este diseño incluye áreas de contenido y sin contenido en su sitio, como encabezados y pies de página. Por lo tanto, usar un tema de bloque le permite editar la apariencia de su sitio sin tocar el Personalizador o los archivos del tema.

En la guía de hoy, exploraremos qué es un tema de bloque de WordPress y le mostraremos algunos ejemplos clave. Luego explicaremos cómo usar y editar un tema de bloque para que se ajuste a sus necesidades de diseño. ¡Empecemos!

¿Qué es un tema de bloque de WordPress?

Un tema de bloque de WordPress es, tal vez como era de esperar, un tema compuesto de bloques. Cada parte de su página es ajustable y móvil, incluidos los elementos que no son de contenido, como encabezados, pies de página, menús, logotipos y títulos.

Los temas de bloque son una parte de la edición completa del sitio de WordPress (FSE). Este concepto se incorporó al software central con WordPress 5.9.

Con FSE, puede acceder a un nuevo Editor de sitios que le permite crear diseños de bloques y editarlos para que se ajusten a sus necesidades. Además, puede usar estilos globales para realizar cambios radicales en el diseño de su tema y la apariencia general del sitio web.

En general, los temas de bloque y FSE pueden acelerar su proceso de diseño y ayudarlo a personalizar su sitio web en un nivel granular. Puede diseñar el sitio que desee sin sumergirse en los archivos de su tema o jugar con CSS personalizado.

Tres ejemplos de temas de bloque de WordPress

Puede encontrar temas de bloque de WordPress utilizando el filtro de edición completa del sitio en WordPress.org:

Dado que los temas de bloques aún son relativamente nuevos, hay un número limitado de opciones. Para ayudarlo a tomar una decisión más informada, ¡aquí hay una descripción general rápida de tres de las mejores opciones!

1. Veintidós

Twenty Twenty-Two es el tema de bloque predeterminado de WordPress. Fue lanzado junto con la versión 5.9 y desarrollado por el equipo de WordPress.org:

Twenty Twenty-Two está diseñado en torno a un motivo de pájaro, destinado a simbolizar la diversidad, la versatilidad y la singularidad de los diferentes sitios web. Además, dado que el tema se desarrolló para lanzarse con FSE, está optimizado para patrones y plantillas de bloques.

En general, Twenty Twenty-Two es una opción versátil adecuada para diferentes tipos de sitios. Ya sea que esté ejecutando un blog, una cartera o una tienda de comercio electrónico, este tema puede ayudarlo a crear un sitio web simple y personalizable. Lo mejor de todo es que es completamente gratis.

2. base de bloques

Si está buscando un tema de bloque de WordPress minimalista, podría considerar usar Blockbase. Este tema proviene de Automattic, la empresa detrás de WordPress.com y complementos como Jetpack:

Blockbase tiene un diseño muy simple. Esta configuración le permite construir su sitio web desde una pizarra en blanco mientras se familiariza con las características de FSE. Blockbase viene con plantillas totalmente personalizables que puede modificar para que se ajusten a sus necesidades de diseño.

Además, Blockbase se define como un "tema universal". Esto significa que puedes editarlo con el Editor de sitio completo o el Personalizador clásico. Por lo tanto, Blockbase puede ser una excelente opción para la transición entre temas clásicos y de bloques.

3. Tove

Tove es otro tema de bloque de WordPress gratuito que es muy fácil de usar. Aunque este tema está diseñado específicamente para cafeterías y restaurantes, puede ajustarlo para adaptarse a diferentes tipos de negocios:

Tove se envía con más de 40 patrones de bloques, incluidas múltiples variaciones de encabezado y pie de página. Por lo tanto, puede armar publicaciones y páginas en el menor tiempo posible. También tiene un diseño amigable e informal para ayudarlo a conectarse mejor con sus clientes.

Además, Tove es un tema muy ligero. No utiliza JavaScript y no carga imágenes en la interfaz de su sitio de forma predeterminada. Como tal, puede ayudarlo a optimizar los tiempos de carga de su página y mejorar su Core Web Vitals.

Cómo editar temas de bloques de WordPress en el Editor del sitio

Hay algunas formas diferentes de editar un tema de bloque y ajustar su configuración. Aquí hay tres de los escenarios más comunes.

1. Usar estilos globales
2. Editar plantillas
3. Ajustar partes de la plantilla

1. Usa estilos globales

Antes de FSE, normalmente ajustaba la apariencia de su tema usando el Personalizador de WordPress. Dependiendo de su tema, es posible que tenga acceso a solo unas pocas o varias configuraciones de diseño. Además, puede usar CSS personalizado para personalizar aún más su tema.

Sin embargo, con los temas de bloque de WordPress, puede aplicar la configuración de estilo global desde el Editor del sitio. Aquí, puede modificar fácilmente la apariencia de su tema y aplicar todos los cambios en todo su sitio web. También puede aislar estos ajustes en páginas específicas.

Para comenzar con los estilos globales, vaya a Apariencia → Editor en su panel de WordPress. Ahora verá el nuevo Editor del sitio, que se abrirá en su página de inicio de forma predeterminada:

Luego, seleccione el ícono Estilos en la barra de menú superior derecha. Ahora debería ver un nuevo menú de configuración donde puede personalizar la tipografía, la paleta de colores y los diseños de su tema:

Tenga en cuenta que también puede ajustar la configuración de estilo para bloques específicos. Estas personalizaciones se aplicarán a todos los mismos elementos en su sitio web. Por ejemplo, puede editar su botón, navegación o bloques de iconos sociales.

Cuando esté satisfecho con los cambios, continúe y guárdelos. Puede volver en cualquier momento para editar la configuración de estilo global de su tema.

2. Editar plantillas

Los temas de bloque de WordPress también vienen con plantillas integradas. Estos son diseños personalizados para páginas específicas, como su archivo o página 404. Es posible que tenga acceso a páginas adicionales según el tema de bloque que elija.

Para acceder y editar estas plantillas desde el Editor del sitio, haga clic en el icono de WordPress en la esquina superior izquierda. Luego puede seleccionar Plantillas para ver los diseños disponibles para su tema de bloque:

Haga clic en una de estas plantillas para editarla. En nuestro ejemplo, ajustaremos la página 404 para nuestro sitio web:

Tenga en cuenta que esta plantilla se compone de varios bloques. Si selecciona uno de los elementos, puede usar la configuración del bloque para personalizar su apariencia:

Tenga en cuenta que puede agregar nuevos bloques a su plantilla y guardar su configuración para aplicar sus personalizaciones. Además, puede crear nuevas plantillas volviendo al menú Plantillas y haciendo clic en Agregar nuevo :

Solo tendrá que agregar bloques a su nueva página y configurar sus ajustes para elegir dónde se muestra. Sin embargo, algunos temas pueden restringir los tipos de nuevas plantillas que puede crear. Como puede ver en la imagen de arriba, Twenty Twenty-Two solo le permitirá hacer una plantilla de página principal.

3. Ajusta las partes de la plantilla

Además de las plantillas, también puede editar su tema de bloque de WordPress ajustando las partes de su plantilla. Estos son elementos más pequeños que se utilizan dentro de sus plantillas generales. En la mayoría de los casos, las partes de su plantilla serán las áreas de encabezado y pie de página de su tema.

Para editar las partes de la plantilla de su tema, abra el Editor del sitio y haga clic en el ícono de WordPress . Ahora, seleccione Partes de plantilla y elija el elemento que desea ajustar. En nuestro ejemplo, editaremos el encabezado del tema:

Ahora puede controlar la configuración de la parte de la plantilla en el panel derecho, incluida su justificación, orientación, color y borde. Cualquier cambio que realice se aplicará a su sección de encabezado en todo su sitio web.

Al igual que con las plantillas, también puede diseñar nuevas partes de plantilla. Simplemente navegue de regreso al menú Elementos de la plantilla y seleccione Agregar nuevo en la esquina superior derecha:

Por ejemplo, puede diseñar un nuevo encabezado, pie de página o parte de plantilla general para su tema. Solo asegúrese de guardar los cambios cuando haya terminado.

Comience hoy mismo con los temas de bloques de WordPress

️ Si eres nuevo en el bloqueo de temas, podrías considerar usar Twenty Twenty-Two. Este tema de bloque predeterminado es fácil de usar y hace un buen uso de la edición completa del sitio (FSE). Alternativamente, puede buscar en el repositorio de temas de WordPress otras opciones de temas de bloques.

¿Tiene alguna pregunta sobre el uso de temas de bloque de WordPress? ¡Háganos saber en la sección de comentarios!