October 08, 2025

497 | Diseña como un pro con GenerateBlocks (sin escribir CSS)

15 minutes

Escúchalo en:

En el episodio 497 de WordPress Semanal hablamos de cómo usar GenerateBlocks y sus herramientas para maquetar con control y precisión, sin recurrir a código ni constructores pesados.

Tabla de contenidos

1. Para quién es GenerateBlocks
2. La filosofía de GenerateBlocks
3. Claves prácticas para aprovechar su sistema visual de CSS
- a) Domina las jerarquías
- b) Usa unidades relativas
- c) Saca partido al diseño responsivo
- d) Aprovecha las clases personalizadas
- e) Usa efectos visuales con intención
4. Buenas prácticas visuales sin escribir CSS
5. Toma acción

1. Para quién es GenerateBlocks

Muchos usuarios de WordPress se sienten limitados al diseñar porque no dominan CSS.

GenerateBlocks cambia eso: su enfoque es pensar en CSS sin tener que escribirlo.

Combínalo con el theme hermano: GeneratePress

2. La filosofía de GenerateBlocks

Cada ajuste visual en GenerateBlocks representa una propiedad CSS real.

Container → estructura y fondo (div o section)

Grid → flexbox o grid layout

Spacing → margin y padding

Typography → fuentes, tamaños y alturas

Entender esto te permite diseñar con lógica, no solo con apariencia.
GenerateBlocks no te oculta el CSS: te enseña a usarlo de forma visual.

3. Claves prácticas para aprovechar su sistema visual de CSS

a) Domina las jerarquías

Cada bloque hereda estilos del contenedor padre.

Usa los padres para definir estructura, fondo o tipografía base.

Los hijos solo para ajustes puntuales.

b) Usa unidades relativas

Sustituye los píxeles por em, rem, % o vh/vw.

Así logras un diseño fluido y adaptable sin media queries.

c) Saca partido al diseño responsivo

Casi todos los ajustes (espaciado, tamaño, visibilidad) tienen versión móvil, tablet y escritorio.

Es CSS responsivo, pero aplicado visualmente.

d) Aprovecha las clases personalizadas

Añade clases desde la pestaña “Advanced” para crear estilos globales.

Ejemplo: .btn-principal para todos los botones de llamada a la acción.

Esto reduce trabajo y mantiene coherencia visual.

e) Usa efectos visuales con intención

Hover, sombras, bordes redondeados o fondos con degradado: todo sin tocar código.

Úsalos para destacar, no para saturar.

4. Buenas prácticas visuales sin escribir CSS

Define variables globales de color y tipografía.

Evita contenedores innecesarios: menos es más.

Piensa primero en la estructura y después en el estilo.

Reutiliza bloques globales para mantener coherencia entre páginas.

5. Toma acción

GenerateBlocks es una forma moderna de aplicar CSS sin escribirlo, entendiendo lo que hay detrás.
Si aprendes los fundamentos del CSS y los combinas con GenerateBlocks, tendrás un control de diseño total.

Te recomiendo ver mis cursos de CSS básico aplicado a WordPress y GenerateBlocks, donde lo explico paso a paso con ejemplos reales. También puedes revisar el curso de GeneratePress.

Plugin de la semana

El plugin de la semana es Frontend User Avatar, con el que los usuarios pueden subir y gestionar su propio avatar directamente desde el frontend de tu web, sin acceder al panel de administración ni depender de Gravatar. Es gratuito, ligero y muy útil en webs de membresía, comunidades o directorios con perfiles públicos.

Contenidos recomendados

Vídeo de la Zona Código: redirigir al último contenido publicado en el login

Curso de GenerateBlocks

Newsletter de WordPress Semanal

La entrada 497 | Diseña como un pro con GenerateBlocks (sin escribir CSS) es una artículo de Gonzalo Navarro.

...more

View all episodes

By Gonzalo Navarro

4.8

88 ratings