Tanto si llevas tiempo trabajando en la comunidad de WordPress como si acabas de llegar a la plataforma, probablemente hayas oído hablar de los «temas de bloques». Quizá utilizas un tema clásico en tu sitio y te planteas cambiar a uno de bloques. O puede que ni siquiera sepas por dónde empezar a elegir un tema.
Vamos a profundizar en los temas de bloques. En esta entrada explicaremos qué son y analizaremos sus ventajas. Después veremos brevemente cómo cambiar a uno, conoceremos algunos ejemplos y aprenderemos a configurar y utilizar un tema de bloques.
¿Qué son los temas de bloques en WordPress?
Los temas de bloques son un tipo de tema muy potente que permite editar sin código todos los aspectos de un sitio de WordPress, incluidos la cabecera, el pie de página y las plantillas de página. Para ello utilizan bloques —elementos individuales como párrafos, imágenes y columnas— que puedes arrastrar y soltar para crear el sitio.
Con los temas de bloques, incluso quien apenas tenga experiencia puede diseñar y crear un sitio atractivo. Al mismo tiempo, los desarrolladores pueden aprovechar su potencia para agilizar el trabajo y crear sitios aún más complejos y eficaces.
¿Qué es la edición completa del sitio (FSE) en WordPress?
La edición completa del sitio (FSE) reúne las funciones que amplían el uso de los bloques más allá del contenido y lo extienden a todos los aspectos de un sitio web. Así, cualquiera puede crear y diseñar desde páginas y entradas hasta procesos de pago y barras laterales sin trabajar con código.
Los elementos principales de la edición completa del sitio son:
- El Editor del sitio, la interfaz con la que se crean páginas, plantillas, partes de plantilla y otros elementos mediante bloques
- La herramienta Estilos, que permite configurar la apariencia de los bloques y del sitio en su conjunto
- Las plantillas, que definen diseños para elementos como entradas del blog y páginas de finalización de compra
- Las partes de plantilla, que incluyen elementos individuales como cabeceras y pies de página
- Los patrones de bloques, agrupaciones de diseño que puedes reutilizar en el sitio, como una tabla de precios
- El archivo theme.json permite a quienes saben programar configurar con más detalle los estilos y ajustes predeterminados de los bloques
Los temas de bloques dan acceso a las funciones de edición completa del sitio. Sin uno activado, el sitio no puede utilizar estas herramientas.
¿Qué ventajas ofrece utilizar un tema de bloques?
Los temas de bloques ofrecen numerosas ventajas. Veamos algunas de ellas con más detalle.
1. Posibilidad de editar todo tu sitio de WordPress sin código
Gracias a la edición completa del sitio, puedes utilizar bloques para crear desde páginas y entradas hasta páginas de finalización de compra, plantillas de entradas del blog y cabeceras. Solo tienes que arrastrar y soltar elementos en la página y utilizar un sencillo panel de ajustes para personalizar su aspecto y funcionamiento.
También puedes aprovechar funciones como el panel Estilos, desde el que se configuran los colores, las fuentes, el espaciado y otras opciones de diseño de todo el sitio.
Esto permite que cualquiera pueda crear un sitio web atractivo y funcional, aunque no sea desarrollador.
2. Un flujo de trabajo mejorado
Tanto los desarrolladores con experiencia en WordPress como quienes están empezando pueden trabajar mucho más rápido con temas de bloques. En lugar de editar archivos del tema o escribir código para cambiar plantillas y otros elementos del sitio, basta con arrastrar y soltar los elementos y modificar sus ajustes.
Con los bloques reutilizables puedes crear y configurar un bloque exactamente como quieras, guardarlo y utilizarlo tantas veces como necesites en todo el sitio. Cuando modifiques uno, el cambio se aplicará a todas sus instancias.
Además, los patrones de bloques permiten añadir rápidamente secciones completas a páginas y plantillas, por lo que no hace falta crear cada elemento por separado.
3. Mejor rendimiento del sitio
Con un tema de bloques puedes crear un sitio con todas las funciones necesarias sin instalar un plugin de maquetación de páginas. Así evitas la sobrecarga de este tipo de herramientas y sigues disfrutando de funciones avanzadas.
Además, el código que genera el editor de bloques es más ligero y limpio que el de los plugins de maquetación. Por tanto, una misma plantilla debería cargarse más rápido si se crea con el editor de bloques que con un maquetador de páginas.
4. Capacidad para adaptarse al futuro de WordPress
Los temas de bloques y la edición completa del sitio son el futuro de WordPress. Constantemente aparecen nuevos temas y funciones que pueden mejorar tu sitio. Además, los desarrolladores de plugins siguen creando herramientas que facilitan aún más la integración de sus funciones en el Editor del sitio.
Si quieres preparar tu sitio de WordPress para el futuro, la mejor opción es un tema de bloques.
¿En qué se diferencian los temas de bloques de los temas clásicos de WordPress?
En pocas palabras, los temas de bloques están formados íntegramente por bloques, mientras que los temas clásicos de WordPress solo los utilizan para contenidos como páginas y entradas. En lugar del Personalizador de WordPress y de las áreas de Navegación y Widgets, el diseño y el funcionamiento del sitio se editan desde el Editor del sitio.
En cuanto al código, los temas de bloques se componen de plantillas de HTML basadas en bloques, mientras que los temas clásicos utilizan archivos PHP. El almacenamiento de archivos también se organiza de forma distinta en cada tipo de tema.
¿Se puede convertir un tema clásico en uno de bloques?
¡Sí, por supuesto! Aunque los pasos para convertir un tema clásico en uno de bloques varían según los temas con los que trabajes, el proceso suele ser el siguiente:
- Haz una copia de seguridad de tu sitio y utiliza un sitio de pruebas si es posible.
- Copia todo el contenido de los widgets y el código personalizado. Asegúrate también de que los plugins existentes sean compatibles con el nuevo tema de bloques.
- Elige y activa el nuevo tema de bloques.
- Configura los estilos globales del sitio.
- Crea la estructura del sitio.
- Ajusta —o vuelve a crear— las páginas y entradas que sea necesario.
- Prueba todo el sitio y publica el nuevo diseño.
Consulta todos los detalles en nuestra guía para cambiar de un tema clásico a uno de bloques.
Cinco ejemplos de temas de bloques de WordPress
¿Quieres ver algunos temas de bloques en funcionamiento? Hay muchas opciones excelentes, pero vamos a analizar cinco de ellas con más detalle.
1. Twenty Twenty-Three
El tema Twenty Twenty-Three es comunitario: además de ser gratuito, lo crea y mantiene la comunidad de WordPress.
Su base sencilla lo convierte en una opción perfecta para empezar a utilizar temas de bloques. También es una excelente elección para sitios sencillos y ofrece muchas posibilidades para darles tu toque personal.
Incluye diez variaciones de estilo únicas y varias plantillas sencillas, entre ellas las de error 404, Búsqueda y Archivo.
2. Bricksy
Bricksy es otra opción gratuita disponible en el repositorio de temas de WordPress.org. Está repleto de patrones de bloques con los que diseñar un sitio moderno de forma rápida y sencilla. Por ejemplo, puedes arrastrar y soltar cuadrículas de imágenes, atractivos diseños de columnas o incluso patrones de página completos. Después solo tienes que personalizarlos a tu gusto.
El tema Bricksy también ofrece una versión premium con funciones adicionales y soporte del equipo de desarrollo.
3. Blockpress
El tema Blockpress se presenta como un «tema de bloques con muchas funciones», una descripción muy acertada. Presta especial atención al rendimiento, con funciones como la carga condicional de recursos y plantillas optimizadas para WooCommerce.
Además de adoptar la edición completa del sitio, incluye multitud de patrones de bloques y plantillas de página completas que facilitan y agilizan el diseño.
4. Mugistore
Este tema de bloques premium (59 USD) está pensado específicamente para tiendas de comercio electrónico e incluye bloques para minicarritos, categorías de productos, llamadas a la acción, páginas de precios y mucho más. También ofrece variaciones de estilo y diseños de página predefinidos para crear un sitio realmente personalizado.
Si no tienes una tienda, también puedes consultar los demás temas de AinoBlocks, con diseños para pequeñas empresas, medios de noticias en línea y currículos.
5. Tove
El tema Tove es otra opción gratuita disponible en el repositorio de WordPress.org. Aunque se diseñó pensando en cafeterías y restaurantes, puedes utilizar la edición completa del sitio para adaptarlo a cualquier sector.
Incluye más de 40 patrones de bloques —tablas de precios, llamadas a la acción, imágenes de cabecera, preguntas frecuentes y otros elementos—, además de varios diseños de cabecera y pie de página.
Cómo configurar y utilizar un tema de bloques de WordPress
Una vez que hayas elegido un tema de bloques, es hora de instalarlo y activarlo en tu sitio web. Si estás trabajando con un sitio web existente, asegúrate de hacer una copia de seguridad completa antes de seguir las instrucciones que aparecen a continuación. La mejor opción para ello es una herramienta como Jetpack VaultPress Backup, que incluye copias de seguridad en tiempo real y restauraciones rápidas y sencillas.
Ahora, inicia sesión en el panel de administración de tu WordPress y ve a Apariencia → Temas. Después, haz clic en Añadir nuevo en la parte superior.
Si el tema de bloques que quieres utilizar está disponible en el repositorio de temas de WordPress.org, búscalo con la barra de la esquina superior derecha.
Si has descargado el tema desde otra fuente, como el sitio de un desarrollador de temas premium, haz clic en el botón Subir tema de la esquina superior izquierda. Allí podrás elegir el archivo del tema y subirlo a tu sitio.
Pasa el cursor sobre el tema que quieras usar y haz clic en Instalar → Activar. ¡Ahora ya puedes empezar a usar y personalizar tu tema!
Cómo personalizar el diseño de un tema de bloques
Después de instalar el tema, querrás personalizarlo para adaptarlo a tus necesidades y a tu marca. Veamos algunas formas de hacerlo.
Ten en cuenta que para este tutorial utilizaremos el tema Twenty Twenty-Three.
Editar la navegación de un tema de bloques
Empieza por ir a Apariencia → Editor en el panel de administración de tu sitio. Después, selecciona Navegación.
Aunque puede haber elementos de navegación en otros lugares, como el pie de página o la barra lateral, nos centraremos en el menú principal, que suele estar en la cabecera.
En el panel Navegación verás una lista de las páginas del menú principal. Para cambiar su orden, haz clic en una de ellas y arrástrala hasta el lugar deseado. También puedes hacer clic en los puntos suspensivos verticales que aparecen al pasar el cursor sobre una página para moverla hacia arriba o abajo, visitarla o eliminarla por completo del menú.
Si haces clic en el icono del lápiz situado junto al nombre del menú, accederás a una nueva página en la que podrás añadir y eliminar elementos mediante el bloque Navegación.
A la derecha volverás a ver la lista de páginas. Al hacer clic en el icono negro +, podrás elegir distintos elementos para añadir, como enlaces a páginas, enlaces personalizados, iconos sociales y barras de búsqueda. Haz clic en Ver todo para consultar todas las opciones.
Para añadir un enlace a una página de tu sitio, solo tienes que hacer clic en Enlace a página.
Busca la página que quieras añadir y selecciónala para que aparezca en el menú. En la vista previa de la esquina superior izquierda, haz clic en un elemento para editar sus opciones desde el panel de la derecha. Por ejemplo, puedes cambiar el nombre de la página o modificar la URL.
En el menú que aparece justo encima del elemento que quieras editar puedes poner el texto en negrita o cursiva, añadir un menú desplegable y mucho más.
Prueba todas estas herramientas y añade páginas hasta conseguir exactamente el aspecto y el funcionamiento que buscas. Cuando hayas terminado, haz clic en el botón azul Guardar de la esquina superior derecha.
Cambiar los estilos de un tema de bloques
De vuelta en el Editor, elige Estilos para acceder a todas las opciones de estilo del tema que utilizas. Verás una cuadrícula de estilos predefinidos entre los que puedes elegir. Selecciona uno para previsualizarlo a la derecha.
Puedes elegir uno de ellos, modificarlo como prefieras o continuar con los pasos siguientes. Haz clic en el icono del lápiz para abrir el panel Estilos a la derecha del Editor.
La primera opción que verás es Tipografía. Al hacer clic en ella aparecerá una lista de elementos como texto, enlaces y encabezados.
Por ejemplo, selecciona Encabezados para elegir la tipografía de todos los encabezados del sitio. Configura la fuente, la apariencia —negrita, cursiva, etc.—, la altura de línea, el espaciado entre letras y el uso de mayúsculas.
De vuelta en el panel Estilos, selecciona Colores. Ahí podrás definir tu Paleta, que controla las opciones disponibles al crear páginas, entradas y plantillas en todo el sitio. Esto agiliza mucho el proceso de diseño y proporciona a todas las personas que trabajan en él la información necesaria para mantener la coherencia.
También puedes definir los colores predeterminados de elementos como el texto, el fondo y los enlaces.
De nuevo en el panel Estilos, elige la opción Diseño. Desde ahí puedes definir la anchura del área de contenido principal, así como su relleno y el espaciado entre bloques.
El último elemento del panel Estilos es Bloques. Esta sección permite configurar los ajustes globales de bloques concretos. Al abrirla por primera vez verás todos los bloques de tu biblioteca. Puedes recorrer la lista o utilizar el cuadro de búsqueda para localizar uno.
Las opciones varían según el bloque, pero veamos el bloque Botón. Al abrirlo aparecerán sus ajustes específicos, como el color del texto y del fondo, la tipografía, el relleno, el borde y los efectos.
Los cambios que realices se aplicarán a todas las instancias de ese bloque en el sitio. Como ves, esto puede ahorrarte muchísimo tiempo.
Crear y editar las páginas de tu sitio
De vuelta en el Editor del sitio, también verás la opción Páginas. Aquí aparecerá una lista de las páginas de tu sitio. Haz clic en una para consultar información, editarla o enviarla a la papelera. También puedes elegir Gestionar todas las páginas para ir a la sección Páginas del escritorio de WordPress.
En este artículo no explicaremos cómo crear y editar páginas, ya que puedes hacerlo con el editor de bloques aunque no utilices un tema de bloques. Si quieres un tutorial completo, consulta nuestra guía del editor de bloques de WordPress.
Editar las plantillas incluidas con tu tema de bloques
Haz clic en Plantillas en el Editor del sitio. Accederás a una lista de las plantillas incluidas con el tema.
Las plantillas varían según el tema, pero veamos una habitual: Individual, que se utiliza para las entradas del blog. Al hacer clic en Individual, verás todos los bloques incluidos de forma predeterminada, como Título, Contenido de la entrada e Imagen destacada de la entrada.
Puedes modificarlos como prefieras. Por ejemplo, puedes mover la imagen destacada debajo del título o cambiar la fuente del texto de las entradas.
También puedes añadir bloques nuevos a la plantilla. En nuestro ejemplo ya hemos añadido una llamada a la acción que aparecerá al final de cada entrada, antes de la sección de comentarios.
Ahora vamos a añadir iconos sociales debajo del título de la entrada para que los lectores accedan fácilmente a tus cuentas y encuentren más contenido. Localiza el bloque Iconos sociales y arrástralo justo debajo del bloque Título.
Haz clic en el icono + del extremo derecho para añadir una cuenta social.
Puedes elegir una opción de la lista, hacer clic en Ver todo para consultar todas o utilizar la barra de búsqueda para encontrar la que necesitas. Repite el proceso con todas las cuentas que quieras incluir.
Después, haz clic en cada icono para añadir un enlace a tu cuenta.
Utiliza la barra de herramientas que aparece sobre el bloque Iconos sociales para cambiar la alineación, reordenar los iconos y realizar otros ajustes. También puedes usar el panel Ajustes de la derecha para modificar, por ejemplo, la forma y el color de los iconos.
Cuando hayas terminado, haz clic en el botón azul Guardar de la esquina superior derecha. Los cambios se reflejarán en todos los tipos de contenido que utilicen esa plantilla.
Imagina todo lo que puedes conseguir personalizando las plantillas con tanta facilidad: crear rápidamente una atractiva página 404 con tu marca, simplificar el proceso de pago, añadir una llamada a la acción a la página de búsqueda o incluir tablas de tallas en todas las páginas de producto. Las posibilidades son prácticamente ilimitadas.
Editar patrones y partes de plantilla
En el Editor del sitio, abre la sección Patrones. Verás una lista de tus patrones, es decir, diseños basados en bloques para distintas secciones de las páginas, como formularios, banners y llamadas a la acción.
Las partes de plantilla también se componen de bloques, pero suelen pertenecer a la estructura general del sitio y no a páginas o entradas concretas; por ejemplo, la cabecera y el pie de página. En este tutorial abriremos la parte de plantilla Pie de página.
En este caso está configurada para mostrar un bloque Título del sitio y otro Párrafo. Vamos a crear algo con más contenido. Primero eliminaremos lo que hay y después añadiremos un bloque Columnas y seleccionaremos 33 / 33 / 33. Así se crearán tres columnas del mismo tamaño.
En la primera columna añadiremos un bloque Iconos sociales; en la segunda, un bloque Últimas entradas; y en la tercera, nuestro logotipo.
De nuevo, al hacer clic en Guardar, los cambios se reflejarán en todo el sitio.
Nivel avanzado: cómo crear un tema de bloques desde cero
Hay varias situaciones en las que quizá quieras crear tu propio tema. Puede que seas desarrollador y necesites algo personalizado para los sitios de tus clientes, o que gestiones varios sitios y quieras utilizar en todos el mismo tema con idénticas personalizaciones. Por suerte, la edición completa del sitio hace que el proceso sea mucho más sencillo de lo que imaginas.
El primer paso es descargar el tema de bloques que prefieras para utilizarlo como punto de partida. Después, personalízalo siguiendo los pasos anteriores.
El siguiente paso es instalar el plugin Create Block Theme, que es gratuito y está disponible en el repositorio de WordPress. Una vez activado el plugin, ve a Apariencia → Create Block Theme en el panel de administración de tu WordPress.
Verás varias formas de exportar el tema:
- Exportar (exporta el tema activo con los cambios que has realizado)
- Crear tema hijo (crea un tema hijo que utiliza el tema activo como principal)
- Clonar (clona el tema activo)
- Sobrescribir (guarda los cambios del usuario como cambios del tema y elimina los primeros)
- Crear tema en blanco (genera un tema vacío dentro del directorio de temas)
- Crear una variación de estilo (guarda los cambios como una variación de estilo del tema activo)
Según la opción elegida, quizá tengas que rellenar algunos campos adicionales, como el nombre del tema y el del autor. Después podrás generar el tema, descargarlo como archivo .zip y utilizarlo en cualquier sitio.
¿Quieres desarrollar un tema de bloques completamente desde cero? Consulta toda la información sobre cómo hacerlo en el manual de recursos para desarrolladores de WordPress.
Preguntas frecuentes sobre los temas de bloques
¿Aún tienes dudas? Respondamos algunas preguntas frecuentes sobre los temas de bloques.
¿Tiene alguna limitación el uso de temas de bloques?
En general, los temas de bloques son muy flexibles. Permiten crear cualquier diseño para tu sitio, incluso sin trabajar con código.
Sin embargo, algunos plugins todavía no son compatibles con los temas de bloques. Entre ellos se encuentran los diseñados para editar menús clásicos, los gestores de comentarios incompatibles con los bloques de comentarios y los que utilizan el Personalizador de WordPress.
No obstante, la mayoría de los plugins consolidados de WordPress se están adaptando para funcionar sin problemas con los temas de bloques y el Editor del sitio.
¿Son los temas de bloques compatibles con todos los plugins de WordPress?
Aunque la mayoría de los plugins consolidados funcionan sin problemas con los temas de bloques, en algunos casos tendrás que buscar una solución alternativa. Por ejemplo:
- Un plugin que solo funciona mediante widgets
- Una herramienta diseñada para modificar menús clásicos en lugar del bloque Navegación
- Un plugin de gestión de comentarios incompatible con los bloques de comentarios
- Un plugin que utiliza exclusivamente el Personalizador de WordPress
Aun así, en la mayoría de las situaciones podrás utilizar las herramientas que necesites.
¿Puedo utilizar CSS personalizado para aplicar estilos a mi tema de bloques?
Sí, por supuesto. Ve a Apariencia → Editor y selecciona Estilos. Después, haz clic en el icono «Editar estilos», con forma de lápiz. Se abrirá el panel Estilos. Una vez allí, haz clic en los puntos suspensivos verticales de la esquina superior derecha y, a continuación, en CSS adicional.
Ahora puedes añadir el CSS que quieras para personalizar el aspecto del sitio.
¿Puedo utilizar un tema de bloques para personalizar la cabecera y el pie de página?
Sí, precisamente ahí destacan los temas de bloques. Puedes crear la cabecera, el pie de página y los menús de navegación del sitio simplemente arrastrando y soltando bloques.
En el panel de administración, ve a Apariencia → Editor → Patrones. Debajo de Partes de plantilla, verás la cabecera y el pie de página. Haz clic en el que quieras editar y, después, utiliza los bloques como lo harías normalmente. Puedes consultar la sección «Editar patrones y partes de plantilla» de este artículo para obtener instrucciones más detalladas.
Estas son algunas formas de mejorar la cabecera y el pie de página con bloques:
- Crear menús de navegación rápidamente
- Añadir una barra de búsqueda para que la información sea más fácil de encontrar
- Incluir iconos sociales en la cabecera o el pie de página
- Mostrar una lista de entradas recientes en el pie de página
- Añadir un formulario de suscripción por correo electrónico al pie de página
¡Las posibilidades son infinitas!
¿Puedo utilizar un tema de bloques para configurar el menú de navegación?
Sí, puedes hacerlo. En el panel de administración, ve a Apariencia → Editor → Navegación. Allí podrás añadir páginas y enlaces a tu menú, anidar elementos para crear submenús, eliminar elementos y mucho más.
¿Puedo crear un tema de bloques hijo?
Sí, puedes crear un tema hijo cuyo tema principal sea uno de bloques. Así podrás modificar el tema hijo sin editar el código del principal. Muchos temas ya incluyen un tema hijo, pero también puedes crear uno con el plugin Create Block Theme. Si sabes programar, también puedes hacerlo manualmente.
¿Hay algún aspecto de rendimiento que deba tener en cuenta al utilizar temas de bloques?
En la mayoría de los casos, utilizar un tema de bloques mejorará el rendimiento de tu sitio de WordPress. Estos temas solo cargan los estilos de los bloques que se muestran en la página y no necesitan poner manualmente en cola las hojas de estilo; ambas cosas reducen los tiempos de carga.
Además, un tema de bloques ofrece todas las funciones y posibilidades de diseño que necesitas sin tener que instalar multitud de plugins ni utilizar herramientas de creación de sitios repletas de funciones innecesarias.
Si quieres reducir aún más los tiempos de carga del sitio, instala un plugin como Jetpack Boost. Está diseñado específicamente para WordPress, aplica carga diferida a las imágenes, mejora las métricas Core Web Vitals, incluye una potente CDN de imágenes y analiza la velocidad del sitio para que puedas optimizarla.
Jetpack 