08. Diseño responsivo con Gutenberg
¿Qué aprenderás?
Sección titulada «¿Qué aprenderás?»En este tutorial aprenderemos a utilizar el editor de bloques de WordPress, conocido como Gutenberg, para construir páginas que se adapten a distintos tamaños de pantalla.
Aplicaremos los contenidos a nuestro portafolio profesional UX/UI, utilizando como referencia el prototipo desarrollado previamente en Figma.
Trabajaremos con bloques de estructura, imágenes, botones, distribución del contenido y espaciados.
También aprenderemos a detectar problemas responsivos y a decidir si debemos solucionarlos desde Gutenberg o desde Blocksy.
Objetivos de aprendizaje
Al finalizar esta lección podrás:
- Comprender el papel de Gutenberg en la construcción del contenido.
- Diferenciar los ajustes de Blocksy y los ajustes particulares de los bloques.
- Utilizar la vista de lista para reconocer estructuras y bloques anidados.
- Construir secciones mediante los bloques Grupo, Fila y Pila.
- Configurar composiciones con Columnas y Cuadrícula.
- Aplicar la opción Stack on mobile cuando esté disponible.
- Incorporar imágenes responsivas y configurar textos alternativos.
- Utilizar los bloques Medios y texto y Fondo o Cover.
- Crear botones y distribuirlos adecuadamente.
- Comprender márgenes, rellenos y separación entre bloques.
- Revisar los anchos y alineaciones del contenido.
- Verificar las páginas en distintas pantallas utilizando Chrome DevTools.
- Nivel: Inicial e intermedio.
- Herramientas: WordPress, Gutenberg, Blocksy, Figma y Google Chrome.
- Requisito previo: Haber configurado Blocksy, el header y el footer.
- Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.
- Modalidad: Actividad práctica sobre una instalación WordPress de desarrollo.
- Plugins adicionales: No necesarios para los ejercicios básicos.
1. ¿Qué es Gutenberg?
Sección titulada «1. ¿Qué es Gutenberg?»Gutenberg es el editor de bloques de WordPress.
Permite construir el contenido de páginas y entradas mediante elementos que podemos insertar, organizar, personalizar y combinar.
Cada bloque representa una parte del contenido.
Por ejemplo:
- Un título puede crearse mediante un bloque Encabezado.
- Un texto puede escribirse en un bloque Párrafo.
- Una fotografía puede incorporarse mediante Imagen.
- Una sección puede organizarse con Grupo.
- Una distribución horizontal puede construirse con Fila.
- Una composición de varias columnas puede elaborarse con Columnas.
¿Qué significa trabajar con bloques?
Sección titulada «¿Qué significa trabajar con bloques?»Significa organizar una página mediante componentes independientes y reutilizables.
Esto facilita editar contenidos sin tener que modificar directamente archivos HTML.
Sin embargo, debemos comprender la estructura de los bloques para evitar composiciones desordenadas.
Gutenberg y diseño responsivo
Sección titulada «Gutenberg y diseño responsivo»Los bloques pueden utilizar reglas de distribución que se adaptan al espacio disponible.
Algunos incluyen opciones responsivas específicas, como Stack on mobile.
Otros dependen de su diseño, del tema activo y de los estilos aplicados.
Por eso, no basta con insertar bloques: necesitamos comprobar su comportamiento real.
Documentación oficial
Sección titulada «Documentación oficial»2. Diferencias entre Blocksy y Gutenberg
Sección titulada «2. Diferencias entre Blocksy y Gutenberg»En los tutoriales anteriores configuramos las opciones visuales generales de Blocksy.
Ahora utilizaremos Gutenberg para diseñar el contenido de cada página.
Responsabilidades principales
Sección titulada «Responsabilidades principales»| Necesidad | Herramienta |
|---|---|
| Configurar el encabezado | Blocksy Header Builder |
| Configurar el pie de página | Blocksy Footer Builder |
| Definir colores globales | Blocksy |
| Definir tipografía principal | Blocksy |
| Establecer el ancho general | Blocksy |
| Crear una sección de presentación | Gutenberg |
| Crear tarjetas de proyectos | Gutenberg |
| Insertar imágenes y botones | Gutenberg |
| Ajustar el espacio interior de una tarjeta | Gutenberg |
| Organizar columnas de una sección | Gutenberg |
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Si el contenido de una página es demasiado estrecho, primero debemos identificar si el problema corresponde al contenedor global de Blocksy o al bloque utilizado.
Si una tarjeta tiene demasiado relleno interior, el problema probablemente se encuentra en la configuración del bloque que construye esa tarjeta.
La regla principal es identificar el origen del problema antes de modificarlo.
3. Planificar la página desde Figma
Sección titulada «3. Planificar la página desde Figma»Antes de comenzar, abre el prototipo del portafolio profesional UX/UI.
Vamos a trabajar sobre una sección de proyectos destacados.
Estructura propuesta
Sección titulada «Estructura propuesta»La sección contendrá:
- Un título principal de sección.
- Un texto introductorio.
- Tres tarjetas de proyectos.
- Una imagen por proyecto.
- Un título y una descripción por tarjeta.
- Un enlace para revisar cada proyecto.
Comportamiento esperado
Sección titulada «Comportamiento esperado»En escritorio: las tarjetas pueden organizarse en tres columnas.
En móvil: las tarjetas deben reorganizarse para mantener una lectura cómoda.
Ejemplo conceptual
Sección titulada «Ejemplo conceptual»Escritorio:
Proyecto A | Proyecto B | Proyecto C
Móvil:
Proyecto A
Proyecto B
Proyecto C
Aspectos que debemos registrar
Sección titulada «Aspectos que debemos registrar»- Ancho de la sección.
- Espacio entre las tarjetas.
- Dimensiones y proporciones de las imágenes.
- Jerarquía de los textos.
- Colores utilizados.
- Espaciado interior.
- Comportamiento en pantallas pequeñas.
Estos criterios provienen del diseño de Figma y deben guiar nuestra implementación.
4. Abrir una página con Gutenberg
Sección titulada «4. Abrir una página con Gutenberg»Ingresar al editor de bloques
Ingresa al escritorio de WordPress.
En el menú lateral, selecciona Páginas → Todas las páginas.
Busca la página del portafolio que vas a desarrollar.
Puedes utilizar Inicio o una página de pruebas creada para la actividad.
Selecciona Editar.
Comprueba que se abra el editor de bloques.
Identifica la barra de herramientas superior, el área de contenido y el panel lateral de configuraciones.
Recomendación
Sección titulada «Recomendación»Para practicar, es preferible trabajar sobre una página de prueba o una copia de la página original.
De esta manera podrás experimentar sin afectar el contenido principal del sitio.
Documentación oficial
Sección titulada «Documentación oficial»5. Comprender la vista de lista
Sección titulada «5. Comprender la vista de lista»Cuando una página contiene muchos bloques, puede resultar difícil seleccionar un elemento específico.
Esto ocurre especialmente con bloques anidados.
Por ejemplo, una tarjeta podría tener esta estructura:
- Grupo.
- Imagen.
- Pila.
- Encabezado.
- Párrafo.
- Botón.
La Vista de lista, llamada List View en inglés, permite inspeccionar esa estructura.
¿Por qué es importante?
Sección titulada «¿Por qué es importante?»Porque permite identificar cuál es el bloque contenedor y cuáles son sus bloques hijos.
Esta diferencia es fundamental cuando necesitamos modificar:
- Fondos.
- Espaciados.
- Alineaciones.
- Orden de los elementos.
- Configuraciones de una sección completa.
Abrir y utilizar la Vista de lista
Dentro de Gutenberg, ubica el control Vista general del documento en la barra superior.
Ábrelo y selecciona Vista de lista, si no aparece seleccionada.
Observa la estructura de bloques de la página.
Selecciona un bloque desde la lista.
Comprueba cómo se destaca el elemento correspondiente dentro del contenido.
Si existen bloques anidados, expande sus contenedores.
Practica seleccionando tanto el bloque padre como uno de sus bloques hijos.
Documentación oficial
Sección titulada «Documentación oficial»6. Utilizar el bloque Grupo
Sección titulada «6. Utilizar el bloque Grupo»El bloque Grupo permite reunir varios bloques dentro de un contenedor.
Es especialmente útil para construir secciones completas.
Por ejemplo, podemos utilizarlo para agrupar:
- Un título de sección.
- Un párrafo introductorio.
- Una composición de tarjetas.
- Un botón de acción.
Ventajas de utilizar Grupo
Sección titulada «Ventajas de utilizar Grupo»Podemos aplicar configuraciones comunes a los elementos de una sección.
Entre ellas:
- Color de fondo.
- Espaciado interior.
- Separación entre elementos.
- Ancho del contenido.
- Algunas opciones de distribución.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Crearemos un Grupo para la sección Proyectos destacados.
Crear un contenedor para la sección de proyectos
Dentro de Gutenberg, selecciona el botón + para insertar un bloque.
Busca Grupo.
Inserta el bloque en la posición donde irá la sección de proyectos.
Dentro del Grupo, agrega un bloque Encabezado.
Escribe Proyectos destacados.
Configura su nivel semántico según la estructura de la página. Por ejemplo, H2 si la página ya tiene un título principal H1.
Después, incorpora un bloque Párrafo con una breve introducción a los proyectos.
Abre la Vista de lista para comprobar que los dos bloques se encuentran dentro del Grupo.
Documentación oficial
Sección titulada «Documentación oficial»7. Comprender el bloque Fila
Sección titulada «7. Comprender el bloque Fila»El bloque Fila, denominado Row en inglés, permite organizar bloques horizontalmente.
Puede utilizarse para colocar elementos uno al lado de otro.
Ejemplos de uso
Sección titulada «Ejemplos de uso»- Un título acompañado de un enlace.
- Dos botones relacionados.
- Un icono junto a un texto.
- Elementos breves de una misma sección.
Consideración responsiva
Sección titulada «Consideración responsiva»Una fila horizontal no garantiza por sí sola un resultado adecuado en móviles.
Debemos revisar si la fila permite que su contenido pase a varias líneas cuando no existe suficiente espacio.
También debemos evaluar si realmente necesitamos una fila horizontal.
Crear una fila horizontal
Dentro del Grupo que creaste, inserta un bloque Fila.
Agrega un texto breve, por ejemplo Explora mis proyectos.
Incorpora a su lado un enlace como Ver todos.
Selecciona el bloque Fila desde la Vista de lista.
Revisa sus opciones de justificación y alineación.
Busca el control que permite distribuir el contenido en varias líneas, si está disponible.
Comprueba el resultado al reducir el ancho de la vista previa.
Documentación oficial
Sección titulada «Documentación oficial»8. Utilizar el bloque Pila
Sección titulada «8. Utilizar el bloque Pila»El bloque Pila, llamado Stack, organiza sus elementos verticalmente.
Resulta útil cuando queremos mantener un orden de lectura de arriba hacia abajo.
Ejemplo de una tarjeta
Sección titulada «Ejemplo de una tarjeta»Una tarjeta de proyecto puede contener:
- Imagen.
- Título.
- Descripción.
- Enlace o botón.
Estos elementos pueden organizarse mediante una Pila.
Diferencia entre Grupo, Fila y Pila
Sección titulada «Diferencia entre Grupo, Fila y Pila»| Bloque | Comportamiento principal |
|---|---|
| Grupo | Agrupa elementos dentro de un contenedor |
| Fila | Organiza elementos horizontalmente |
| Pila | Organiza elementos verticalmente |
Crear una composición vertical
Dentro del editor, inserta un bloque Pila.
Agrega un bloque Imagen o utiliza un marcador temporal.
Después incorpora un bloque Encabezado.
Escribe el nombre de un proyecto ficticio.
Añade un bloque Párrafo con una descripción breve.
Selecciona la Pila desde la Vista de lista.
Observa que los elementos mantienen una secuencia vertical.
Revisa el control de separación entre bloques, si está disponible.
Documentación oficial
Sección titulada «Documentación oficial»9. Construir una sección con Columnas
Sección titulada «9. Construir una sección con Columnas»El bloque Columnas permite crear una distribución horizontal con varias áreas de contenido.
Es especialmente útil para:
- Tarjetas de proyectos.
- Secciones de servicios.
- Comparaciones.
- Presentaciones visuales.
- Composiciones de texto e imagen.
Para la actividad construiremos una sección con tres columnas.
Estructura propuesta
Sección titulada «Estructura propuesta»Columnas
- Columna 1.
- Imagen.
- Título.
- Descripción.
- Botón.
- Columna 2.
- Imagen.
- Título.
- Descripción.
- Botón.
- Columna 3.
- Imagen.
- Título.
- Descripción.
- Botón.
Insertar tres columnas para proyectos
Dentro del Grupo de proyectos, selecciona el botón +.
Busca el bloque Columnas.
Insértalo en la sección.
Elige una distribución de tres columnas, si aparece entre las opciones iniciales.
También puedes seleccionar el bloque Columnas y configurar el número de columnas desde el panel lateral.
Comprueba que existan tres contenedores de columna.
Utiliza la Vista de lista para identificarlos.
Construir el contenido de las tarjetas
Selecciona la primera columna.
Incorpora los bloques necesarios:
- Imagen del proyecto.
- Encabezado con el nombre.
- Párrafo descriptivo.
- Botón o enlace al proyecto.
Utiliza los contenidos definidos para el portafolio ficticio.
Repite una estructura equivalente en la segunda y tercera columna.
Para mantener la consistencia, revisa:
- Tamaño de las imágenes.
- Jerarquía de títulos.
- Espaciados.
- Presentación de los botones.
- Longitud aproximada de las descripciones.
Documentación oficial
Sección titulada «Documentación oficial»10. Configurar Stack on mobile
Sección titulada «10. Configurar Stack on mobile»El bloque Columnas incorpora una opción importante para el diseño responsivo: Stack on mobile.
Esta opción permite que las columnas se organicen verticalmente cuando el espacio disponible es reducido.
En el bloque Columnas de WordPress, normalmente se encuentra activada de forma predeterminada.
¿Por qué es útil?
Sección titulada «¿Por qué es útil?»Si mantenemos tres columnas en una pantalla pequeña, cada tarjeta podría quedar demasiado estrecha.
Al reorganizar las columnas verticalmente:
- Las imágenes pueden disponer de mayor ancho.
- Los textos resultan más legibles.
- Los botones tienen más espacio.
- Se reduce el riesgo de contenido comprimido.
Activar y comprobar Stack on mobile
Selecciona el bloque padre Columnas, no una columna individual.
Puedes utilizar la Vista de lista para seleccionarlo correctamente.
Abre su configuración lateral.
Busca la opción Stack on mobile, o su equivalente traducido.
Comprueba que esté activada.
Utiliza la vista previa móvil o abre el sitio a un ancho reducido.
Observa si las tarjetas pasan de una distribución horizontal a una vertical.
Compara la legibilidad antes y después del cambio.
Importante
Sección titulada «Importante»Este ajuste modifica la distribución de las columnas, pero no necesariamente corrige problemas como imágenes demasiado grandes, textos extensos o rellenos excesivos.
Esos problemas deben revisarse en los bloques correspondientes.
Documentación oficial
Sección titulada «Documentación oficial»11. Conocer el bloque Cuadrícula
Sección titulada «11. Conocer el bloque Cuadrícula»El bloque Cuadrícula, denominado Grid en inglés, permite organizar elementos mediante una estructura de filas y columnas.
Es útil cuando necesitamos presentar varios elementos con una distribución repetida.
Ejemplo de uso
Sección titulada «Ejemplo de uso»Una galería de seis proyectos podría utilizar una cuadrícula.
Dependiendo de su configuración, el número de columnas puede adaptarse al espacio disponible.
Diferencia con Columnas
Sección titulada «Diferencia con Columnas»Columnas permite configurar una distribución de columnas que puede apilarse en móvil.
Cuadrícula ofrece un sistema de distribución en formato grid, con opciones que pueden ajustarse según la cantidad de elementos y el ancho disponible.
¿Cuál debemos utilizar?
Sección titulada «¿Cuál debemos utilizar?»Para el ejercicio inicial de tres tarjetas, Columnas es una opción sencilla y apropiada.
Para una colección más extensa de proyectos, Cuadrícula puede ser una alternativa interesante.
Explorar el bloque Cuadrícula
En una zona de prueba de la página, inserta un bloque Cuadrícula.
Incorpora tres o cuatro bloques de contenido breve.
Selecciona el bloque padre desde la Vista de lista.
Revisa las opciones de distribución disponibles.
Busca las alternativas de configuración automática o manual de columnas, según la versión instalada.
Ajusta la distribución y observa cómo responde cuando disminuye el ancho.
Compara este comportamiento con el bloque Columnas utilizado anteriormente.
Documentación oficial
Sección titulada «Documentación oficial»12. Utilizar Medios y texto
Sección titulada «12. Utilizar Medios y texto»El bloque Medios y texto, o Media & Text, permite colocar una imagen junto a un área de contenido.
Es especialmente útil para:
- Una presentación profesional.
- Una sección Sobre mí.
- Un caso de estudio.
- Una introducción a un proyecto.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Podemos colocar:
Lado izquierdo: fotografía o imagen del diseñador.
Lado derecho: título, descripción y enlace al portafolio.
Comportamiento móvil
Sección titulada «Comportamiento móvil»Este bloque también dispone de la opción Stack on mobile.
Al activarla, la imagen y el contenido pueden reorganizarse verticalmente en pantallas pequeñas.
Construir una sección Medios y texto
En una sección de prueba, inserta el bloque Medios y texto.
Selecciona una imagen desde la biblioteca de medios o carga una imagen apropiada.
En el área de contenido, incorpora:
- Un encabezado.
- Un párrafo.
- Un enlace o botón, si corresponde.
Selecciona el bloque padre.
Revisa la proporción entre el espacio destinado a la imagen y el destinado al texto.
Busca y activa Stack on mobile, si no está activada.
Comprueba la reorganización del contenido en una pantalla estrecha.
Documentación oficial
Sección titulada «Documentación oficial»Media & Text Block — WordPress
13. Configurar imágenes responsivas
Sección titulada «13. Configurar imágenes responsivas»Las imágenes son fundamentales para un portafolio de diseño.
Sin embargo, una configuración incorrecta puede provocar:
- Recortes indeseados.
- Distorsiones.
- Desbordamientos.
- Archivos excesivamente pesados.
- Problemas de legibilidad del contenido.
Recomendaciones generales
Sección titulada «Recomendaciones generales»Utiliza imágenes apropiadas para la web.
Evita insertar una imagen de dimensiones muy superiores a las necesarias sin una justificación.
Mantén las proporciones originales cuando corresponda.
Comprueba que el contenido importante permanezca visible.
Relación de aspecto
Sección titulada «Relación de aspecto»La relación de aspecto describe la proporción entre ancho y alto de una imagen.
Por ejemplo:
| Relación | Uso posible |
|---|---|
| 1:1 | Miniaturas cuadradas |
| 4:3 | Tarjetas de proyectos |
| 16:9 | Imágenes panorámicas |
| 3:4 | Composiciones verticales |
Estas relaciones son ejemplos y deben ajustarse al diseño del proyecto.
Cover y Contain
Sección titulada «Cover y Contain»En los controles de imagen compatibles encontramos:
Cover: llena el área disponible, pero puede recortar una parte de la imagen.
Contain: conserva visible la imagen completa, aunque puede dejar espacio libre.
Ajustar una imagen de proyecto
Selecciona una imagen de una tarjeta del portafolio.
Abre los ajustes del bloque.
Identifica los controles de dimensiones y proporción disponibles.
Compara la relación de aspecto con el prototipo de Figma.
Cuando corresponda, ajusta la proporción de presentación.
Revisa las opciones Cover y Contain, si aparecen.
Comprueba que el recorte no elimine información visual importante.
Busca el campo de texto alternativo y escribe una descripción que comunique el contenido relevante de la imagen.
Si la imagen es puramente decorativa, revisa cómo marcarla correctamente según las opciones de tu versión de WordPress.
Texto alternativo
Sección titulada «Texto alternativo»El texto alternativo ayuda a comunicar el contenido significativo de una imagen a quienes utilizan lectores de pantalla.
No es necesario repetir frases como “imagen de” en todas las descripciones.
Describe la información visual que aporta al contexto.
Documentación oficial
Sección titulada «Documentación oficial»14. Crear una sección visual con Cover
Sección titulada «14. Crear una sección visual con Cover»El bloque Fondo, conocido como Cover, permite utilizar una imagen, un video o un color de fondo junto con contenido superpuesto.
Es útil para construir:
- Un hero de presentación.
- Un banner de proyecto.
- Una sección destacada.
- Una llamada a la acción.
Ejemplo para el portafolio
Sección titulada «Ejemplo para el portafolio»Podemos utilizar una imagen de fondo y añadir un título:
Diseñando experiencias digitales
Debajo incorporamos un texto breve y un botón para revisar los proyectos.
Consideraciones responsivas
Sección titulada «Consideraciones responsivas»Una imagen de fondo puede mostrar recortes diferentes en escritorio y móvil.
Por ello, debemos comprobar la posición del elemento principal de la fotografía.
También debemos revisar el contraste entre el texto y la imagen.
Construir un banner con Cover
Inserta un bloque Fondo, o Cover, dentro de una sección de prueba.
Selecciona una imagen apropiada.
Agrega un encabezado y un texto breve.
Revisa las opciones de altura mínima y posición del contenido.
Si la imagen lo requiere, ajusta su punto focal.
Configura una superposición o fondo que permita leer claramente el texto.
Abre la vista móvil y comprueba si alguna parte importante de la imagen queda recortada.
Evita utilizar una altura fija excesiva que produzca una composición incómoda en teléfonos.
Documentación oficial
Sección titulada «Documentación oficial»15. Crear botones y llamadas a la acción
Sección titulada «15. Crear botones y llamadas a la acción»Los botones permiten destacar acciones importantes.
Dentro del portafolio UX/UI podemos utilizarlos para:
- Ver proyectos.
- Consultar un caso de estudio.
- Visitar una página de contacto.
- Explorar servicios profesionales.
Diferencia entre Buttons y Button
Sección titulada «Diferencia entre Buttons y Button»En Gutenberg encontramos un bloque contenedor llamado Botones, o Buttons.
Dentro de él podemos incorporar uno o varios bloques Botón.
Esto permite administrar las acciones como un conjunto.
¿Qué debemos revisar?
Sección titulada «¿Qué debemos revisar?»- Texto del botón.
- Destino del enlace.
- Contraste.
- Tamaño.
- Espaciado interior.
- Separación entre botones.
- Comportamiento en pantallas estrechas.
Crear y configurar botones
Dentro de una sección de Gutenberg, inserta el bloque Botones.
Agrega un botón con la etiqueta Ver proyectos.
Configura su enlace hacia la página de proyectos de tu WordPress.
Si el diseño de Figma lo requiere, agrega un segundo botón de contacto.
Selecciona el bloque padre Botones.
Revisa la orientación, justificación y separación entre elementos.
Busca la opción que permite distribuir los botones en varias líneas cuando el espacio resulta insuficiente.
Comprueba que ninguno se desborde en móvil.
Recomendación UX/UI
Sección titulada «Recomendación UX/UI»Utiliza etiquetas que describan acciones concretas.
Por ejemplo, Ver proyectos comunica mejor el destino que un texto genérico como Haz clic aquí.
Documentación oficial
Sección titulada «Documentación oficial»16. Comprender márgenes, rellenos y espaciados
Sección titulada «16. Comprender márgenes, rellenos y espaciados»Los espacios son fundamentales para establecer relaciones visuales entre los elementos.
En Gutenberg encontramos diferentes controles de dimensiones.
Padding
Sección titulada «Padding»El padding, o relleno, es el espacio interior de un bloque.
Separa el contenido de sus bordes.
El margin, o margen, representa el espacio exterior del elemento.
Permite separarlo de otros componentes.
Block Spacing
Sección titulada «Block Spacing»Es la separación entre bloques hijos dentro de un contenedor compatible.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Una tarjeta de proyecto puede necesitar:
- Padding para separar su contenido de los bordes.
- Espaciado entre la imagen y el título.
- Espaciado entre la descripción y el botón.
- Separación exterior respecto de otras tarjetas.
¿Qué sucede en móvil?
Sección titulada «¿Qué sucede en móvil?»Un relleno horizontal demasiado grande puede dejar poco espacio para el contenido.
Por ello, debemos revisar los valores utilizados, especialmente cuando son fijos.
Ajustar dimensiones de una tarjeta
Selecciona desde la Vista de lista el contenedor de una tarjeta.
Abre el panel lateral de configuraciones.
Busca Dimensiones, o Dimensions.
Identifica los controles de:
- Padding.
- Margin.
- Block Spacing.
Es posible que debas abrir el menú de opciones adicionales para mostrar algunos controles.
Ajusta el relleno interior tomando como referencia el diseño de Figma.
Después revisa la separación entre los bloques de la tarjeta.
Comprueba el resultado en una pantalla estrecha.
Importante
Sección titulada «Importante»No todos los bloques presentan exactamente los mismos controles.
Las opciones dependen del tipo de bloque, de la versión de WordPress y del soporte del tema activo.
Documentación oficial
Sección titulada «Documentación oficial»Dimension Settings Overview — WordPress
17. Configurar los anchos y alineaciones
Sección titulada «17. Configurar los anchos y alineaciones»El ancho del contenido influye directamente en la composición visual.
Gutenberg permite utilizar diferentes opciones de alineación según el bloque y el tema.
Entre ellas pueden encontrarse:
- Alineación normal.
- Alineación amplia.
- Ancho completo.
- Alineación izquierda.
- Alineación centrada.
- Alineación derecha.
Diferencias importantes
Sección titulada «Diferencias importantes»Normal: utiliza el ancho del área de contenido definida.
Amplio: permite extender el bloque más allá del ancho estándar, dentro de los límites admitidos.
Ancho completo: puede extender el bloque hasta el ancho disponible de su contenedor exterior.
Relación con Blocksy
Sección titulada «Relación con Blocksy»En el Tutorial 05 aprendimos a configurar Maximum Site Width, Narrow Container Width y otros parámetros globales.
Estos valores pueden influir en la presentación de los bloques.
No debemos asumir que seleccionar ancho completo siempre hará que un elemento ocupe todo el viewport.
El resultado dependerá también de la estructura de la página y sus contenedores.
Comprobar las alineaciones de una sección
Selecciona el Grupo principal de proyectos.
Abre las opciones de alineación de su barra de herramientas.
Identifica las alternativas disponibles.
Compara la alineación normal con una opción amplia, cuando esté habilitada.
Si utilizas ancho completo, observa cómo responde dentro de la estructura de la página.
Revisa la configuración global de Blocksy si el resultado no coincide con el esperado.
Comprueba también que la sección mantenga una separación lateral apropiada en móvil.
Documentación oficial
Sección titulada «Documentación oficial»18. Mantener colores y tipografías consistentes
Sección titulada «18. Mantener colores y tipografías consistentes»Al configurar la apariencia de los bloques debemos respetar la identidad visual definida previamente.
¿Qué debemos considerar?
Sección titulada «¿Qué debemos considerar?»- Tipografías principales.
- Jerarquía de encabezados.
- Colores globales.
- Colores de fondo.
- Contraste de los textos.
- Estilos de botones y enlaces.
Evitar configuraciones innecesarias
Sección titulada «Evitar configuraciones innecesarias»No es conveniente introducir una tipografía distinta en cada tarjeta si todas deben utilizar la misma identidad visual.
Tampoco necesitamos introducir manualmente un color hexadecimal en cada bloque si podemos utilizar una referencia global de la paleta.
Importancia de la jerarquía semántica
Sección titulada «Importancia de la jerarquía semántica»La jerarquía visual debe relacionarse con la estructura HTML.
Por ejemplo:
- H1 para el título principal de la página.
- H2 para las secciones importantes.
- H3 para títulos de proyectos dentro de esas secciones.
No debemos utilizar H1, H2 o H3 exclusivamente como una herramienta para modificar el tamaño visual.
Aplicar estilos coherentes a la sección
Abre el bloque principal de la sección de proyectos.
Revisa los colores y tipografías aplicados.
Compáralos con las configuraciones globales realizadas en Blocksy.
Selecciona uno de los títulos de las tarjetas.
Comprueba que su nivel de encabezado sea apropiado.
Revisa el tamaño visual y la familia tipográfica.
Después comprueba el estilo de los botones.
Realiza las modificaciones necesarias sin alterar elementos que ya cumplen con el prototipo.
19. Vista previa y edición responsiva
Sección titulada «19. Vista previa y edición responsiva»WordPress permite previsualizar una página en diferentes tamaños de pantalla.
Sin embargo, debemos diferenciar dos acciones:
Previsualizar: observar cómo se distribuye el contenido a un ancho determinado.
Editar estilos por dispositivo: establecer valores específicos para diferentes tamaños de pantalla.
Limitaciones importantes
Sección titulada «Limitaciones importantes»Las opciones de edición responsiva dependen de la versión de WordPress, el tema y las funcionalidades habilitadas.
WordPress 7.1 incorporó herramientas de estilos responsivos para los temas de bloques compatibles.
En nuestro proyecto utilizamos Blocksy y su personalizador, por lo que no debemos asumir que tendremos disponibles esos mismos controles dentro de Gutenberg.
Si no aparece una opción para editar el tamaño de fuente o padding por dispositivo, no significa necesariamente que exista un error.
Podemos continuar utilizando los ajustes propios de los bloques y las configuraciones de Blocksy que correspondan.
Recordatorio
Sección titulada «Recordatorio»Una vista previa móvil dentro del editor no sustituye la comprobación del sitio real en el navegador.
Revisar la vista previa en distintos tamaños
Guarda los cambios de la página de prueba.
Busca el control de vista previa del editor.
Revisa las opciones disponibles para escritorio, tableta y móvil.
Observa el comportamiento de:
- Tarjetas de proyectos.
- Imágenes.
- Botones.
- Textos.
- Separaciones.
- Anchos.
Comprueba que el bloque Columnas reorganice el contenido según su configuración.
Si encuentras un problema, selecciona el bloque correspondiente mediante la Vista de lista y revisa sus ajustes.
Documentación oficial
Sección titulada «Documentación oficial»20. Comprobar el diseño con Chrome DevTools
Sección titulada «20. Comprobar el diseño con Chrome DevTools»Después de revisar la vista previa, debemos abrir el sitio en Google Chrome.
Chrome DevTools permite evaluar el comportamiento del contenido con anchos más específicos.
Esto nos ayudará a comprobar si el diseño funciona entre los tamaños de referencia.
Pruebas recomendadas
Sección titulada «Pruebas recomendadas»| Dispositivo de referencia | Ancho de prueba |
|---|---|
| Móvil pequeño | 360 px |
| Móvil amplio | 390 px |
| Tableta | 768 px |
| Escritorio | 1280 px |
Estos valores son únicamente dimensiones de prueba.
No representan obligatoriamente los puntos de quiebre utilizados por Gutenberg o Blocksy.
¿Qué debemos detectar?
Sección titulada «¿Qué debemos detectar?»- Desbordamientos horizontales.
- Imágenes recortadas incorrectamente.
- Tarjetas demasiado estrechas.
- Botones superpuestos.
- Espacios excesivos.
- Títulos con cortes incómodos.
- Diferencias importantes con Figma.
Realizar el diagnóstico responsivo
Abre la página de proyectos en Google Chrome.
Activa Chrome DevTools.
Utiliza el modo de dispositivos para probar diferentes anchos.
Comienza con 360 píxeles.
Desplázate por todas las secciones de la página.
Comprueba que las tarjetas se organicen correctamente.
Revisa las imágenes, botones, títulos y espacios.
Repite las pruebas en 390, 768 y 1280 píxeles.
Si encuentras un problema, utiliza la herramienta de inspección para identificar el elemento.
Anota si el origen parece estar en:
- Un bloque de Gutenberg.
- Un ajuste global de Blocksy.
- Una imagen o contenido.
- Un estilo particular de la plantilla.
Después, vuelve al editor correspondiente para corregirlo.
Documentación oficial
Sección titulada «Documentación oficial»21. Errores frecuentes
Sección titulada «21. Errores frecuentes»Las columnas no se reorganizan en móvil
Sección titulada «Las columnas no se reorganizan en móvil»Posible causa: Stack on mobile está desactivado.
Qué revisar: configuración del bloque padre Columnas.
No puedo seleccionar el contenedor correcto
Sección titulada «No puedo seleccionar el contenedor correcto»Posible causa: estás seleccionando un bloque hijo.
Qué revisar: Vista de lista y jerarquía de bloques.
Las imágenes aparecen recortadas
Sección titulada «Las imágenes aparecen recortadas»Posible causa: relación de aspecto, escala Cover o punto focal.
Qué revisar: ajustes del bloque Imagen o Cover.
Los botones se salen de la pantalla
Sección titulada «Los botones se salen de la pantalla»Posible causa: distribución horizontal rígida, ancho excesivo o textos extensos.
Qué revisar: bloque Botones y su capacidad de ajustarse al espacio.
Hay demasiado espacio entre elementos
Sección titulada «Hay demasiado espacio entre elementos»Posible causa: márgenes, rellenos o separación entre bloques.
Qué revisar: Dimensiones en el bloque correspondiente.
La sección no ocupa el ancho esperado
Sección titulada «La sección no ocupa el ancho esperado»Posible causa: limitaciones del contenedor, alineaciones o configuración global del tema.
Qué revisar: ajustes de Gutenberg y Layout de Blocksy.
Los cambios se ven diferentes en el editor y en el sitio
Sección titulada «Los cambios se ven diferentes en el editor y en el sitio»Posible causa: diferencias entre la previsualización y los estilos finales del tema.
Qué revisar: página real, caché si corresponde, configuración de bloques y estilos de Blocksy.
No aparecen opciones de diseño por dispositivo
Sección titulada «No aparecen opciones de diseño por dispositivo»Posible causa: la funcionalidad no está disponible para el tema o la versión instalada.
Qué revisar: soporte de WordPress y disponibilidad de los controles en esa instalación.
No es necesario instalar un plugin adicional únicamente para completar este tutorial.
22. Actividad práctica
Sección titulada «22. Actividad práctica»Crear una sección de proyectos responsiva
Sección titulada «Crear una sección de proyectos responsiva»El objetivo será construir una sección de proyectos destacados utilizando Gutenberg.
La estructura deberá respetar el diseño establecido en Figma.
Parte A. Analizar
Sección titulada «Parte A. Analizar»Revisa:
- Distribución de escritorio.
- Distribución móvil.
- Tipografías.
- Colores.
- Espaciados.
- Imágenes.
- Botones y enlaces.
Parte B. Construir
Sección titulada «Parte B. Construir»En Gutenberg:
- Inserta un bloque Grupo.
- Agrega el título de la sección.
- Incorpora una descripción introductoria.
- Crea una composición con Columnas.
- Construye tres tarjetas de proyectos.
- Incorpora imágenes y textos.
- Configura los botones y enlaces.
Parte C. Adaptar
Sección titulada «Parte C. Adaptar»Comprueba:
- Stack on mobile.
- Tamaño de imágenes.
- Espaciados.
- Alineaciones.
- Visibilidad de botones.
- Jerarquía visual.
Parte D. Verificar
Sección titulada «Parte D. Verificar»Abre la página en Chrome DevTools.
Revisa el resultado en los siguientes anchos:
- 360 px.
- 390 px.
- 768 px.
- 1280 px.
Identifica los problemas que encuentres y determina dónde corresponde corregirlos.
Parte E. Comparar Figma y WordPress
Sección titulada «Parte E. Comparar Figma y WordPress»Completa esta tabla:
| Elemento | Prototipo Figma | Implementación Gutenberg | Resultado |
|---|---|---|---|
| Estructura de sección | Completar | Completar | Completar |
| Columnas | Completar | Completar | Completar |
| Imágenes | Completar | Completar | Completar |
| Tipografías | Completar | Completar | Completar |
| Espaciados | Completar | Completar | Completar |
| Botones | Completar | Completar | Completar |
| Vista móvil | Completar | Completar | Completar |
Evidencias de aprendizaje
Sección titulada «Evidencias de aprendizaje»Registra:
- Vista de la sección en escritorio.
- Vista de la sección en móvil.
- Estructura de bloques en List View.
- Configuración de Columnas.
- Configuración de imágenes y botones.
- Comparación con Figma.
- Problemas detectados y correcciones aplicadas.
Esta actividad complementa los contenidos prácticos de la Unidad III y no reemplaza las indicaciones de la pauta oficial de evaluación.
23. Lista de verificación
Sección titulada «23. Lista de verificación»Lista de verificación
Marca las actividades que hayas completado.
24. Documentación oficial
Sección titulada «24. Documentación oficial»Las siguientes referencias permiten profundizar en los bloques y configuraciones abordadas.
Introducción al editor
Sección titulada «Introducción al editor»Organización y jerarquía
Sección titulada «Organización y jerarquía»Distribución del contenido
Sección titulada «Distribución del contenido»Contenido visual
Sección titulada «Contenido visual»Interacción
Sección titulada «Interacción»Dimensiones y estilos
Sección titulada «Dimensiones y estilos»Integración con Blocksy
Sección titulada «Integración con Blocksy»Pruebas responsivas
Sección titulada «Pruebas responsivas»Próximo tutorial
Sección titulada «Próximo tutorial»En la siguiente lección realizaremos la corrección responsiva integral del portafolio UX/UI.
Compararemos la implementación en WordPress con el prototipo realizado en Figma.
Identificaremos diferencias en la estructura, tipografía, colores, imágenes, espaciados y comportamiento responsivo.
Posteriormente aplicaremos correcciones justificadas utilizando Blocksy, Gutenberg y Chrome DevTools.