Blocksy: el mejor tema para WordPress para trabajar con Gutenberg

Por Ashot Mezhlumyan Baghdasaryan · Actualizado el 15 August 2026

En esta clase vamos a instalar y configurar Blocksy, el tema de WordPress que utilizaremos como base durante el curso. Lo he elegido por su velocidad, su nivel de personalización y su integración con Gutenberg y Stackable.

También instalaremos Blocksy Companion, el complemento que amplía las posibilidades del tema con sitios de inicio, extensiones y opciones adicionales. Después haremos un recorrido por sus apartados principales para que entiendas qué función cumple cada uno.

Existen muchos temas gratuitos y de pago para WordPress. Algunos están orientados a blogs, otros a tiendas online y otros intentan servir para cualquier tipo de proyecto. En este curso he preferido trabajar con una única base para que podamos centrarnos en crear y posicionar la web sin cambiar constantemente de herramientas.

En mi caso, elijo Blocksy principalmente por su nivel de personalización. Me permite controlar muchos aspectos visuales de la web desde el personalizador de WordPress: colores, tipografías, cabecera, pie de página, diseño del blog, entradas, páginas y barras laterales.

Blocksy encaja bien dentro de este sistema porque cada herramienta se ocupa de una parte diferente de la web:

• Blocksy controla el diseño general y la estructura del sitio.
• Gutenberg permite crear y editar el contenido.
• Stackable amplía las posibilidades de Gutenberg con nuevos bloques.
• Blocksy Companion añade extensiones, sitios de inicio y opciones complementarias.
• WPForms permite crear formularios cuando los necesitamos.

La instalación de Blocksy se realiza desde el repositorio de temas de WordPress. No es necesario descargar inicialmente ningún archivo externo.

En el escritorio de WordPress, entra en: Apariencia > Temas

Después, pulsa el botón Añadir nuevo tema.

En el buscador de temas escribe: Blocksy

Cuando aparezca el tema, pulsa Instalar y espera a que WordPress complete el proceso. Después selecciona Activar.

Para ampliar las funciones del tema vamos a instalar también Blocksy Companion.

Después de activar Blocksy, normalmente encontrarás una recomendación para instalar su complemento. También puedes buscarlo desde:

Plugins > Añadir nuevo plugin Escribe en el buscador: Blocksy Companion

Pulsa Instalar ahora y, cuando finalice la instalación, selecciona Activar.

Con Blocksy Companion activo tendremos acceso a más opciones, extensiones y sitios de inicio. A partir de este momento, Blocksy funcionará como un pequeño centro de control desde el que podremos acceder a distintas herramientas del tema.

Una vez instalado Blocksy y activado Blocksy Companion, entra en la pestaña Blocksy > Inicio. Desde aquí encontrarás accesos directos a las principales opciones del personalizador de WordPress.

Cada acceso abre directamente su apartado correspondiente dentro de Apariencia > Personalizar, por lo que no tendrás que buscar las opciones manualmente.

En este apartado configuramos la paleta de colores global de la web. Los colores que definamos aquí podrán reutilizarse en diferentes elementos y modificarse posteriormente desde un único lugar.

Blocksy permite configurar los colores de:

• Texto base.
• Enlaces.
• Selección de texto.
• Bordes.
• Todos los encabezados, del H1 al H6.
• Cada encabezado H1, H2, H3, H4, H5 y H6 por separado.
• Fondo del sitio.

Mi recomendación es utilizar una paleta sencilla: un color principal, uno secundario, un color para llamadas a la acción y varios tonos neutros para fondos y textos.

Desde aquí podemos controlar la tipografía general de la web y configurar cada tipo de texto por separado.

Blocksy permite modificar:

• Fuente base.
• Encabezados H1, H2, H3, H4, H5 y H6.
• Botones.
• Citas.
• Párrafos de cita.
• Texto preformateado.
• Pies de imagen o figcaption.
• Familia de fuente de respaldo.

En cada elemento podremos elegir la familia tipográfica, el tamaño, el peso y otros ajustes disponibles.

En la configuración mostrada en esta clase utilizamos Roboto como fuente base y para los encabezados principales. También podemos definir una fuente de respaldo, como Sans Serif, que se utilizará cuando la fuente elegida no esté disponible

Al entrar en esta opción accedemos al personalizador de la Cabecera global. La configuración se divide principalmente en Elementos y Cabeceras.

Dentro de Elementos encontramos los componentes que podemos arrastrar y soltar:

• Botón.
• Buscar.
• Cuenta.
• HTML.
• Logotipo.
• Menú 1.
• Menú 2.
• Redes sociales.

La cabecera dispone de tres filas:

1. Fila superior.
2. Fila principal.
3. Fila inferior.

Cada fila puede organizarse en tres columnas. Para añadir un elemento, solo tenemos que arrastrarlo hasta la posición deseada.

Al pulsar sobre un elemento se abren sus ajustes específicos. Si pulsamos sobre el nombre de una fila, podremos configurar toda esa fila.

Dentro de Cabeceras, al seleccionar Cabecera global, encontramos opciones como:

• General: funcionalidad de efecto fijo y funcionalidad de transparencia.
• Diseño: fondo y apariencia de la cabecera.

El constructor del pie de página funciona de forma parecida al de la cabecera. También dispone de una zona de Elementos y otra de Pie de página.

Entre los elementos disponibles encontramos:

• Áreas de widgets del 1 al 6.
• Copyright.
• Menú.
• Redes sociales.

Podemos arrastrarlos y soltarlos dentro de las tres filas que salen en la parte de abajo de la pantalla, dependiendo de la zona donde quieras meter cada elemento, dependería del diseño y los objetivos.

Al pulsar sobre un elemento se abren sus opciones. Al pulsar sobre una fila podremos configurar el diseño completo de esa zona. Dentro de Pie de página global podemos ajustar:

• Estructura del contenedor: por defecto, en caja o ancho completo.
• Efecto de aparición al hacer scroll.
• Fondo del contenedor.
• Relleno superior, derecho, inferior e izquierdo.

También podemos revisar el resultado desde las vistas de escritorio, tableta y móvil.

Este apartado controla la página donde se muestra el listado general de entradas.

En primer lugar, podemos activar o desactivar el título del blog. Yo recomiendo desactivarlo y añadir el H1 manualmente, ya que así tendremos un mayor control sobre el título principal de la página.

Dentro de Estructura de Blog encontramos las pestañas:

• General.
• Diseño.

Desde la pestaña General podemos configurar:

• Número de columnas.
• Número de entradas.
• Opciones de las tarjetas.
• Espaciado vertical del área de contenido.
• Barra lateral.
• Paginación.
• Efecto de aparición de las tarjetas.

En las opciones de tarjeta y paginación encontraremos ajustes adicionales al desplegar cada apartado.

Este apartado controla la apariencia de cada entrada individual del blog.

Podemos activar o desactivar el título de la entrada y configurar su estructura desde las pestañas:

• General.
• Diseño.

Entre las principales opciones encontramos:

• Estilo del área de contenido: ancho o en caja.
• Espaciado vertical del contenido.
• Imagen destacada.
• Etiquetas.
• Caja de compartir.
• Caja de autor.
• Navegación entre entradas.
• Entradas relacionadas.
• Comentarios.

No es necesario activar todos estos elementos. Debemos mostrar únicamente aquellos que aporten valor y faciliten la lectura del contenido.

Este apartado controla la estructura general de las páginas estáticas, como Inicio, Servicios, Contacto o Sobre nosotros.

Podemos activar o desactivar el título de la página y configurar su estructura desde las pestañas:

• General.
• Diseño.

Las principales opciones disponibles son:

• Estilo del área de contenido: ancho o en caja.
• Espaciado vertical del contenido.
• Imagen destacada.
• Caja de compartir.
• Comentarios.

Estos ajustes funcionan como una configuración general, aunque posteriormente podremos adaptar páginas concretas de forma individual.

Este apartado solo tendrá efecto cuando hayamos activado una barra lateral en una página o entrada concreta.

La barra lateral no se activa globalmente para todos los tipos de contenido. Debemos elegir individualmente en qué páginas o entradas queremos mostrarla.

La configuración se divide en:

• General.
• Diseño.

Desde aquí podemos ajustar:

• Ancho de la barra lateral.
• Separación respecto al contenido.
• Espaciado interno del contenedor.
• Espaciado vertical entre widgets.
• Barra lateral fija.
• Visibilidad de la barra lateral.
• Posición en dispositivos móviles: superior o inferior.

Mi recomendación es utilizarla únicamente cuando ayude al usuario. En muchas páginas es preferible trabajar sin barra lateral para mantener la atención en el contenido principal.

Los sitios de inicio son diseños prediseñados que podemos importar para utilizar como punto de partida.

En lugar de comenzar con una web completamente vacía, podemos instalar una estructura que ya incluya páginas, estilos y distribuciones preparadas. Para acceder a estas plantillas, entra en la pestaña:

Blocksy > Sitios de inicio

Dentro de esta sección encontraremos diferentes filtros. En la instalación que utilizo aparecen opciones para filtrar por:

• Categoría.
• Plantillas gratuitas o Pro.
• Tipo de maquetador.

Estos filtros resultan útiles cuando existe una gran cantidad de diseños disponibles. Por ejemplo, podemos buscar una plantilla para un blog, una empresa, una tienda o un proyecto de servicios. Después podemos limitar el resultado a las opciones gratuitas.

Este paso es importante. Cuando colocamos el cursor sobre una plantilla, Blocksy muestra información sobre el sistema con el que ha sido creada. Una plantilla puede estar diseñada para:

• Gutenberg.
• Elementor.
• Brizy.

En este curso trabajamos con Gutenberg y Stackable. Por tanto, antes de importar una plantilla debemos comprobar que utiliza Gutenberg.

No recomiendo importar una plantilla de Elementor para intentar reconstruirla después con Gutenberg. Es mejor seleccionar desde el principio una opción compatible con nuestro flujo de trabajo.

Otro dato que debemos comprobar es si el sitio de inicio está disponible gratuitamente o requiere la versión Pro.

El hecho de que una plantilla sea Pro no significa necesariamente que sea mejor para nuestro proyecto. Lo importante es que su estructura encaje con el tipo de web que queremos crear.

Para seguir el curso, podemos utilizar una plantilla gratuita compatible con Gutenberg o empezar desde una instalación limpia.

Dentro del panel también encontraremos una pestaña de plugins útiles. Esta sección presenta herramientas que pueden complementar el tema. No es necesario instalar todos los plugins que aparecen.

Cuantos más plugins añadimos, mayor será la necesidad de mantenerlos, actualizarlos y comprobar que realmente aportan algo al proyecto.

El plugin principal que utilizo junto con Blocksy es Stackable – Gutenberg Blocks. Stackable añade nuevos bloques al editor de WordPress y amplía las opciones de diseño.

Esto nos permite crear diseños más completos sin abandonar Gutenberg.

En mi flujo de trabajo, Blocksy controla la estructura general de la web y Stackable se utiliza dentro de las páginas para construir el contenido.

Otro plugin que utilizo es WPForms.

WordPress no incluye de forma predeterminada un sistema completo para crear formularios de contacto. WPForms nos permite añadirlos mediante una interfaz visual y después insertarlos dentro de una página.

Podemos utilizarlo para crear:

• Formularios de contacto.
• Formularios de solicitud.
• Formularios de registro.
• Cuestionarios sencillos.
• Formularios para captar información.

No es necesario instalarlo en la primera fase cuando todavía no vamos a crear formularios. Podemos añadirlo cuando llegue el momento de construir la página de contacto u otro apartado que lo necesite.

El resto de plugins de la pestaña pueden resultar útiles en proyectos concretos.

Por ejemplo:

• TranslatePress puede utilizarse en una web multilingüe.
• Modula está relacionado con la creación de galerías.
• Elementor y Brizy son maquetadores visuales.
• HubSpot ofrece herramientas relacionadas con marketing y gestión de contactos.
• JetEngine y Greenshift amplían las posibilidades de creación y diseño.

En este curso no instalaremos estas herramientas automáticamente. Solo debemos añadir un plugin cuando sepamos qué problema resuelve y por qué lo necesitamos.

Blocksy Companion añade una sección de extensiones.

Estas extensiones incorporan funciones adicionales al tema. Algunas son gratuitas y otras forman parte de la versión Pro.

La disponibilidad exacta puede depender de la versión del tema y del complemento que estemos utilizando. En la instalación mostrada en esta clase encontramos las siguientes opciones.

La versión Pro incluye extensiones adicionales. Entre las que aparecen en la instalación utilizada para esta clase encontramos:

Una duda habitual cuando se empieza a trabajar con WordPress es entender la diferencia entre el tema, el editor y los plugins de bloques.

Gutenberg es el editor de bloques incluido en WordPress. Con él podemos crear páginas y entradas utilizando bloques de párrafo, encabezado, imagen, lista, botón, columnas y muchos otros elementos.

Para ampliar sus posibilidades utilizaremos Stackable, un plugin que añade nuevos bloques y más opciones de personalización.

Seguimos trabajando dentro de Gutenberg, pero disponemos de herramientas adicionales para crear secciones más completas y controlar mejor aspectos como los colores, espacios, fondos, botones y columnas.

Por su parte, Blocksy se encarga del diseño global de la web. Desde sus opciones podemos configurar la cabecera, el pie de página, la estructura del blog, las barras laterales, los colores y las tipografías.

En resumen, Blocksy controla la apariencia general del sitio, mientras que Gutenberg y Stackable nos permiten crear el contenido de cada página o entrada. En mi caso, esta combinación resulta más sencilla y cómoda que depender de un maquetador visual independiente.

Blocksy también es compatible con Elementor, Brizy y otros maquetadores. Sin embargo, esa compatibilidad no significa que tengamos que utilizarlos.

Durante el curso trabajaremos con Gutenberg y Stackable.

Por eso, cuando importemos un sitio de inicio, comprobaremos que la plantilla elegida está preparada para Gutenberg.

La ventaja de este sistema es que mantenemos el contenido dentro del editor de bloques de WordPress y reducimos la dependencia de un maquetador externo.

Una de las funciones que más útiles me resultan es la posibilidad de exportar la configuración del personalizador e importarla después en otra web que tenga instalados Blocksy y Blocksy Companion.

Esta opción es especialmente práctica cuando trabajamos con varios proyectos y queremos reutilizar una misma base visual sin configurar de nuevo los colores, las tipografías, la cabecera, el pie de página, el blog, las entradas, las páginas, las barras laterales o el CSS personalizado.

Para acceder a esta función entra en: Personalización > General > Gestionar opciones

Desde esta pantalla podemos realizar tres acciones:

• Exportar personalizaciones: descarga un archivo con los ajustes del personalizador.
• Importar personalizaciones: permite subir el archivo exportado y aplicar la configuración en otra instalación.
• Restablecer opciones: devuelve todos los ajustes a sus valores predeterminados.

Para importar la configuración, la nueva web debe tener activos Blocksy y Blocksy Companion. Después solo tendremos que subir el archivo generado anteriormente y pulsar Importar personalizaciones.

La exportación también puede incluir el CSS personalizado, lo que permite trasladar pequeños ajustes visuales sin tener que copiarlos manualmente.

Una vez realizada la importación, conviene revisar el resultado. Algunos elementos, como el logotipo, las imágenes, los menús, los widgets, las páginas asignadas o determinados plugins, pueden depender de la instalación original y necesitar ajustes manuales.

La importación nos ahorra mucho trabajo, pero debemos utilizarla como punto de partida y revisar siempre la web antes de dar la configuración por terminada.

En esta clase hemos instalado Blocksy y Blocksy Companion, hemos recorrido sus apartados principales y hemos visto cómo se relaciona el tema con Gutenberg y Stackable.

También hemos revisado los sitios de inicio, los plugins útiles, las extensiones gratuitas y Pro y la posibilidad de exportar e importar los ajustes del personalizador.

A partir de ahora utilizaremos esta instalación como base para continuar construyendo la web. No necesitas dominar todavía todas las opciones de Blocksy. Lo importante es que sepas dónde encontrarlas y entiendas qué función cumple cada herramienta dentro del sistema.