WordPress Semanal

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


Listen Later

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. 1. Para quién es GenerateBlocks
  2. 2. La filosofía de GenerateBlocks
  3. 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. 4. Buenas prácticas visuales sin escribir CSS
  5. 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 episodesView all episodes
                    Download on the App Store

                    WordPress SemanalBy Gonzalo Navarro

                    • 4.8
                    • 4.8
                    • 4.8
                    • 4.8
                    • 4.8

                    4.8

                    8 ratings


                    More shows like WordPress Semanal

                    View all
                    Emilcar Daily by Emilcar

                    Emilcar Daily

                    24 Listeners

                    Radio Fitness Revolucionario by Marcos Vázquez

                    Radio Fitness Revolucionario

                    141 Listeners

                    iSenaCode Live by Sergio Navas

                    iSenaCode Live

                    85 Listeners

                    mixx.io by Álex Barredo

                    mixx.io

                    40 Listeners

                    Podcast de Itnig: Historias de startups by itnig

                    Podcast de Itnig: Historias de startups

                    7 Listeners

                    Cupertino, podcast sobre Apple by Álex Barredo, Ángel Jiménez, Matías Zavia

                    Cupertino, podcast sobre Apple

                    15 Listeners

                    Apple Coding Daily by Julio César Fernández Muñoz

                    Apple Coding Daily

                    24 Listeners

                    Inteligencia Artificial by Pocho Costa

                    Inteligencia Artificial

                    17 Listeners

                    kaizen con Jaime Rodríguez de Santiago by Jaime Rodríguez de Santiago

                    kaizen con Jaime Rodríguez de Santiago

                    41 Listeners

                    Freelandev - Vivir del desarrollo en WordPress by Nahuai Badiola y esther solà

                    Freelandev - Vivir del desarrollo en WordPress

                    0 Listeners

                    Loop Infinito (by Xataka) by Applesfera

                    Loop Infinito (by Xataka)

                    57 Listeners

                    Tengo un Plan by Sergio Beguería y Juan Domínguez

                    Tengo un Plan

                    70 Listeners

                    El Estoico | Estoicismo en español by El Estoico

                    El Estoico | Estoicismo en español

                    67 Listeners

                    WordPress Pódcast (español) by WPpodcast Team

                    WordPress Pódcast (español)

                    2 Listeners

                    monos estocásticos by Antonio Ortiz, Matías S. Zavia

                    monos estocásticos

                    4 Listeners