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 GenerateBlocks2. La filosofía de GenerateBlocks3. Claves prácticas para aprovechar su sistema visual de CSSa) Domina las jerarquíasb) Usa unidades relativasc) Saca partido al diseño responsivod) Aprovecha las clases personalizadase) Usa efectos visuales con intención4. Buenas prácticas visuales sin escribir CSS5. 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.

Ver todos los episodios