05. Configuración global de Blocksy
¿Qué aprenderás?
Sección titulada «¿Qué aprenderás?»En este tutorial aprenderemos a configurar las principales opciones visuales de Blocksy para mantener un diseño coherente en todo nuestro sitio WordPress.
Tomaremos como referencia el prototipo del portafolio profesional UX/UI desarrollado anteriormente en Figma.
Nuestro propósito es aprender a implementar un sistema visual consistente, en lugar de configurar cada página de manera independiente.
Objetivos de aprendizaje
Al finalizar esta lección podrás:
- Diferenciar configuraciones globales y ajustes particulares de una página.
- Identificar las opciones principales del personalizador de Blocksy.
- Construir una paleta global a partir del diseño de Figma.
- Configurar colores de texto, encabezados, enlaces y fondos.
- Establecer las tipografías y jerarquías visuales del sitio.
- Comprender los ajustes de ancho y contenedores.
- Configurar espaciados globales del contenido.
- Reconocer qué modificaciones corresponden a Blocksy y cuáles a Gutenberg.
- Verificar la consistencia visual y el comportamiento responsivo del portafolio.
- Nivel: Inicial.
- Herramientas: WordPress, Blocksy, Gutenberg, Figma y Google Chrome.
- Requisito previo: Tener Blocksy instalado y activado.
- Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.
1. ¿Qué son las configuraciones globales?
Sección titulada «1. ¿Qué son las configuraciones globales?»Las configuraciones globales son opciones que permiten establecer reglas visuales para diferentes partes del sitio desde un lugar centralizado.
Por ejemplo, podemos definir un color principal y utilizarlo en enlaces, elementos de navegación y otras partes de la interfaz compatibles con esa configuración.
Si posteriormente modificamos el color global, los elementos que utilizan esa referencia pueden actualizarse automáticamente.
¿Por qué son importantes?
Sección titulada «¿Por qué son importantes?»Imagina que nuestro portafolio contiene las siguientes páginas:
- Inicio.
- Sobre mí.
- Proyectos.
- Servicios.
- Contacto.
Si utilizamos configuraciones independientes en cada página, mantener una identidad visual consistente puede resultar más difícil.
Las configuraciones globales nos ayudan a establecer criterios compartidos y facilitan futuras modificaciones.
Configuración global y ajuste local
Sección titulada «Configuración global y ajuste local»| Configuración | Ejemplo | Alcance |
|---|---|---|
| Global | Tipografía principal | Elementos que heredan la configuración |
| Global | Paleta de colores | Componentes vinculados a la paleta |
| Global | Ancho máximo del sitio | Distribución general |
| Local | Fondo de una sección | Bloque o página particular |
| Local | Espaciado de una tarjeta | Componente seleccionado |
Importante: una configuración global establece valores generales, pero algunos elementos pueden tener estilos específicos que los sobrescriben.
Documentación oficial
Sección titulada «Documentación oficial»Introducción a las opciones de Blocksy
2. Preparar las decisiones visuales desde Figma
Sección titulada «2. Preparar las decisiones visuales desde Figma»Antes de modificar WordPress, necesitamos recuperar las decisiones que tomamos durante la etapa de diseño UX/UI.
No debemos elegir colores, tipografías ni espaciados al azar solamente porque el personalizador ofrece muchas alternativas.
La implementación debe responder a nuestro prototipo.
¿Qué debemos identificar?
Sección titulada «¿Qué debemos identificar?»Abre tu archivo de Figma y revisa:
- Color principal de la identidad visual.
- Colores secundarios o de apoyo.
- Color de los títulos.
- Color del texto general.
- Colores de fondo.
- Familias tipográficas.
- Tamaños y jerarquías de encabezados.
- Ancho de las secciones principales.
- Espaciado entre elementos.
Ejemplo de registro
Sección titulada «Ejemplo de registro»La siguiente tabla es solamente ilustrativa. Cada estudiante debe utilizar los valores definidos en su propio proyecto.
| Elemento | Valor de ejemplo | Uso |
|---|---|---|
| Color principal | #2563EB |
Enlaces y destacados |
| Texto principal | #1F2937 |
Párrafos |
| Fondo general | #FFFFFF |
Superficies principales |
| Fondo secundario | #F3F4F6 |
Secciones destacadas |
| Fuente de títulos | Inter | Encabezados |
| Fuente de párrafos | Inter | Contenido general |
Estos valores no son obligatorios ni sustituyen los criterios de identidad visual establecidos en Figma.
Consideración importante
Sección titulada «Consideración importante»Cuando utilizamos una plantilla Starter Site de Blocksy, esta puede incorporar colores y tipografías propios.
Por eso, antes de modificarlos, debemos identificar qué configuraciones provienen de la plantilla y cuáles necesitamos adaptar.
3. Ingresar al personalizador de Blocksy
Sección titulada «3. Ingresar al personalizador de Blocksy»El personalizador permite modificar opciones visuales del tema y observar una vista previa de sus cambios.
Abrir el personalizador
Ingresa al escritorio de administración de WordPress.
En el menú lateral, selecciona Apariencia → Personalizar.
Espera a que cargue la interfaz del personalizador.
Identifica el panel de opciones y la vista previa de tu portafolio.
Reconocer las opciones globales
Revisa las secciones disponibles en el personalizador.
Busca las opciones relacionadas con:
- General Options: configuración general del sitio.
- Typography: tipografías y textos.
- Colors: paleta y colores globales.
- Layout: estructura, anchos y espaciados.
- Pages: presentación predeterminada de las páginas.
Algunas opciones se encuentran dentro de otras secciones.
Los nombres pueden aparecer traducidos o variar ligeramente según la versión de WordPress y Blocksy.
Antes de publicar cambios
Sección titulada «Antes de publicar cambios»El personalizador permite previsualizar modificaciones antes de publicarlas.
Para esta actividad recomendamos trabajar sobre una instalación de desarrollo o una copia del sitio.
No publiques cambios sobre una página de producción sin revisarlos previamente.
4. Comprender la paleta global de colores
Sección titulada «4. Comprender la paleta global de colores»Blocksy dispone de una Global Color Palette que permite mantener colores reutilizables.
La paleta puede utilizarse en diferentes elementos del tema y también está disponible en el editor de bloques para las integraciones compatibles.
¿Cómo organizaremos nuestra paleta?
Sección titulada «¿Cómo organizaremos nuestra paleta?»Podemos asignar funciones a los colores:
- Color principal.
- Color secundario.
- Texto general.
- Encabezados.
- Bordes.
- Fondos secundarios.
- Fondo principal.
Una paleta bien organizada facilita el mantenimiento de la identidad visual.
Ejemplo aplicado al portafolio
Sección titulada «Ejemplo aplicado al portafolio»En nuestro proyecto UX/UI, el color principal podría utilizarse para destacar enlaces y algunos botones.
Un color oscuro podría emplearse en los encabezados y textos.
Los fondos neutros permitirían diferenciar secciones sin distraer de los proyectos presentados.
No necesitamos utilizar muchos colores para conseguir una interfaz clara.
5. Configurar la paleta global
Sección titulada «5. Configurar la paleta global»Abrir la configuración de colores
Desde el personalizador, abre:
General Options → Colors
Si tu interfaz está traducida, busca las opciones equivalentes de configuración general y colores.
Identifica el apartado Global Color Palette.
Observa los colores disponibles.
Configurar los colores según Figma
Abre el prototipo del portafolio en Figma.
Identifica el valor hexadecimal del color principal.
Regresa a Blocksy y selecciona el color correspondiente dentro de la paleta.
Introduce el valor hexadecimal del proyecto.
Repite el procedimiento con los colores secundarios, de texto y de fondo que necesites.
Antes de continuar, comprueba visualmente que los colores introducidos sean correctos.
No modifiques todas las posiciones sin revisar primero su función.
¿Qué sucede si cambiamos la paleta?
Sección titulada «¿Qué sucede si cambiamos la paleta?»Los elementos que están vinculados a un color de la paleta pueden actualizar su apariencia cuando modificamos ese valor.
Sin embargo, los componentes con colores propios definidos localmente pueden conservar sus configuraciones.
Documentación oficial
Sección titulada «Documentación oficial»6. Configurar los colores generales del sitio
Sección titulada «6. Configurar los colores generales del sitio»Además de establecer la paleta, necesitamos definir dónde se utilizarán sus colores.
Dentro de la configuración de Blocksy encontramos opciones para elementos comunes como:
- Texto general.
- Enlaces y sus estados de interacción.
- Encabezados.
- Selección de texto.
- Fondo principal del sitio.
Asignar colores a los elementos generales
Dentro de General Options → Colors, busca los ajustes de colores globales.
Revisa las opciones correspondientes al texto principal, enlaces, encabezados y fondo del sitio.
Compara los valores actuales con las decisiones registradas desde Figma.
Cuando sea necesario, asigna los colores de la paleta que correspondan.
Comprueba el resultado en la vista previa.
Revisa especialmente:
- Legibilidad de los párrafos.
- Claridad de los encabezados.
- Visibilidad de los enlaces.
- Contraste con los fondos.
Accesibilidad: contraste de colores
Sección titulada «Accesibilidad: contraste de colores»Una combinación visualmente atractiva no siempre es legible.
Para el nivel AA de WCAG 2.2, el contraste mínimo general es:
- 4,5:1 para texto de tamaño normal.
- 3:1 para texto grande según la definición de WCAG.
No debemos depender exclusivamente del color para comunicar información importante.
Revisa que el texto de tu portafolio conserve suficiente contraste con su fondo.
Documentación oficial
Sección titulada «Documentación oficial»WCAG — Contraste mínimo de texto
7. Comprender la tipografía global
Sección titulada «7. Comprender la tipografía global»La tipografía es una parte fundamental de la identidad visual y de la experiencia de usuario.
Afecta la legibilidad, la jerarquía y la percepción profesional del portafolio.
En Blocksy podemos configurar estilos generales para:
- Texto principal o Base Font.
- Encabezados H1 a H6.
- Botones compatibles.
- Citas.
- Texto preformateado.
Conceptos importantes
Sección titulada «Conceptos importantes»Font Family: familia tipográfica.
Font Weight: peso o grosor de la tipografía.
Font Size: tamaño del texto.
Line Height: separación vertical entre líneas.
Letter Spacing: separación entre caracteres.
Ejemplo de jerarquía
Sección titulada «Ejemplo de jerarquía»| Elemento | Función |
|---|---|
| H1 | Título principal de la página |
| H2 | Secciones principales |
| H3 | Subsecciones |
| Párrafo | Contenido explicativo |
| Botón | Acción o navegación |
La jerarquía semántica HTML también es importante. Un texto no debería convertirse en H1 solamente para obtener un tamaño de fuente mayor.
8. Configurar la tipografía principal
Sección titulada «8. Configurar la tipografía principal»Abrir Typography
Desde el personalizador, regresa a sus opciones principales.
Abre Typography.
Identifica Base Font y las configuraciones de los encabezados.
Observa la familia tipográfica, tamaño, peso e interlineado configurados actualmente.
Configurar texto principal y encabezados
Consulta las tipografías utilizadas en Figma.
Dentro de Base Font, selecciona una familia tipográfica disponible que corresponda al diseño.
Revisa el tamaño y el interlineado del texto.
Después, configura los encabezados H1, H2 y H3.
Comprueba que exista una diferencia visual clara entre títulos, subtítulos y párrafos.
Revisa una página que contenga varios niveles de encabezado para evaluar los cambios.
Recomendaciones de diseño
Sección titulada «Recomendaciones de diseño»Para un portafolio profesional, conviene priorizar:
- Una familia tipográfica fácil de leer.
- Tamaños adecuados para cada nivel.
- Interlineado cómodo.
- Jerarquía visual consistente.
- Un número controlado de familias y pesos tipográficos.
Los valores exactos deben responder al diseño del proyecto y a su comprobación en diferentes pantallas.
Consideración sobre Google Fonts
Sección titulada «Consideración sobre Google Fonts»Algunas tipografías disponibles en Blocksy se cargan desde servicios externos.
Otras pueden proceder de fuentes del sistema o de extensiones adicionales.
Las opciones para subir fuentes personalizadas o servir determinadas fuentes localmente pueden depender de funcionalidades Pro.
No es necesario adquirir Blocksy Pro para realizar este tutorial.
Documentación oficial
Sección titulada «Documentación oficial»9. Comprender el layout del sitio
Sección titulada «9. Comprender el layout del sitio»El layout corresponde a la organización general de los elementos dentro de la página.
En Blocksy podemos ajustar aspectos que influyen en la presentación global del contenido.
Entre ellos encontramos:
| Opción | Función |
|---|---|
| Maximum Site Width | Ancho máximo general del sitio |
| Content Area Spacing | Separación vertical del área de contenido |
| Content Edge Spacing | Distancia entre contenido y bordes del viewport |
| Narrow Container Width | Ancho utilizado por el contenedor estrecho |
| Wide Alignment Offset | Ajuste para contenidos de alineación amplia |
Estos controles permiten establecer una base coherente para páginas con diferentes contenidos.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Una sección de proyectos puede necesitar más espacio horizontal que una página de presentación personal.
Por otra parte, una página con texto extenso puede beneficiarse de un contenedor más estrecho para facilitar la lectura.
El objetivo no es utilizar siempre el mayor ancho posible.
10. Configurar el ancho general
Sección titulada «10. Configurar el ancho general»Abrir las opciones de Layout
Desde el personalizador, abre:
General Options → Layout
Busca la configuración Maximum Site Width.
Observa el ancho máximo configurado y cómo se relaciona con la vista previa del sitio.
Identifica también los controles de ancho del contenedor estrecho y del espacio lateral.
Ajustar el ancho del contenido
Revisa el ancho de la composición principal en Figma.
Compara ese valor con la configuración actual de Maximum Site Width.
Ajusta el valor en tu instalación de prueba cuando sea necesario.
Observa cómo cambia la presentación de las secciones del portafolio.
Después revisa Content Edge Spacing y comprueba la separación entre los elementos y los bordes de la pantalla.
Realiza una prueba en una vista amplia y otra estrecha.
Evita configurar anchos que produzcan desbordamientos o compriman excesivamente el contenido.
Documentación oficial
Sección titulada «Documentación oficial»11. Configurar los espaciados globales
Sección titulada «11. Configurar los espaciados globales»Los espaciados ayudan a establecer relaciones visuales entre los elementos.
Una página con separación insuficiente puede resultar difícil de leer.
Por otra parte, un exceso de separación puede dificultar la percepción de grupos y secciones.
Tipos de espacios
Sección titulada «Tipos de espacios»Espaciado exterior: separación entre elementos o áreas.
Espaciado interior: espacio dentro de un contenedor.
Separación entre bloques: distancia vertical entre elementos consecutivos del contenido.
Blocksy permite ajustar diferentes tipos de separación desde sus opciones globales.
Content Area Spacing
Sección titulada «Content Area Spacing»Este control modifica la separación vertical del área principal de contenido con respecto a las regiones que la rodean.
Content Spacing
Sección titulada «Content Spacing»Dentro de Entry Content, encontramos un ajuste que establece un espaciado vertical predeterminado entre elementos de contenido compatibles.
Es importante diferenciarlos: no controlan exactamente lo mismo.
Revisar Content Area Spacing
Regresa a General Options → Layout.
Busca el control Content Area Spacing.
Observa su valor actual.
Utiliza una página del portafolio para comparar la distancia entre el área principal y las regiones del encabezado y pie de página.
Realiza un ajuste moderado en la instalación de prueba y observa el resultado.
Revisar el espaciado entre elementos
Desde el personalizador, abre:
General Options → Entry Content
Busca Content Spacing.
Observa la separación entre párrafos, encabezados y otros elementos de una página de prueba.
Si el diseño lo requiere, modifica el valor y compara el resultado.
Algunos bloques de Gutenberg pueden tener ajustes propios que prevalezcan sobre este valor general.
Documentación oficial
Sección titulada «Documentación oficial»12. Configuración global y configuración de páginas
Sección titulada «12. Configuración global y configuración de páginas»Aunque definamos reglas generales, algunas páginas pueden necesitar una presentación particular.
Por ejemplo:
- La página Inicio podría utilizar una composición amplia.
- La página Sobre mí podría emplear un ancho estándar.
- Un artículo extenso podría utilizar un contenedor estrecho.
- Una página de proyectos podría necesitar mayor espacio para sus imágenes.
En Blocksy existen configuraciones generales para las páginas y, en determinados casos, opciones que permiten modificar una página individualmente.
Revisar la estructura de una página
Abre Pages desde el personalizador de Blocksy.
Identifica las opciones de estructura y presentación de páginas.
Revisa los diseños disponibles, como el ancho normal o estrecho, cuando correspondan.
Compara estas configuraciones con las necesidades del portafolio.
Si tu página tiene ajustes particulares desde WordPress, comprueba si están sobrescribiendo alguna configuración global.
No necesitas cambiar todas las páginas en esta actividad.
Documentación oficial
Sección titulada «Documentación oficial»13. Relación entre Blocksy y Gutenberg
Sección titulada «13. Relación entre Blocksy y Gutenberg»Una dificultad habitual es no saber qué herramienta utilizar para realizar un ajuste.
La siguiente tabla puede ayudarte a tomar decisiones.
| Necesidad | Herramienta principal |
|---|---|
| Cambiar la paleta general | Blocksy |
| Cambiar la tipografía predeterminada | Blocksy |
| Modificar el ancho máximo del sitio | Blocksy |
| Ajustar la estructura de una página | Blocksy o ajustes de esa página |
| Crear una sección con columnas | Gutenberg |
| Modificar el fondo de un bloque | Gutenberg |
| Cambiar el espacio interno de una tarjeta | Ajustes del bloque correspondiente |
| Configurar el menú móvil | Header Builder de Blocksy |
Regla general: utiliza primero las configuraciones globales cuando el ajuste deba ser compartido por distintas páginas.
Si una modificación corresponde solamente a una sección específica, revisa las opciones particulares del bloque o componente.
Ejemplo práctico
Sección titulada «Ejemplo práctico»Si todos los títulos del portafolio utilizan una familia tipográfica incorrecta, lo adecuado es comenzar revisando Typography.
Si solamente el título de una tarjeta tiene un tamaño diferente, debemos inspeccionar ese elemento antes de modificar la tipografía global.
14. Verificar el comportamiento responsivo
Sección titulada «14. Verificar el comportamiento responsivo»Después de configurar colores, tipografías, contenedores y espaciados, debemos comprobar cómo se ve el sitio en distintas pantallas.
Utiliza las vistas disponibles del personalizador y complementa la revisión con Chrome DevTools.
Anchos de referencia para la actividad
Sección titulada «Anchos de referencia para la actividad»| Vista | Ancho de prueba |
|---|---|
| Pantalla estrecha | 360 px |
| Pantalla intermedia | 768 px |
| Pantalla amplia | 1280 px |
Estos anchos son valores de prueba. No son breakpoints obligatorios para Blocksy.
¿Qué debemos comprobar?
Sección titulada «¿Qué debemos comprobar?»Tipografía: que los títulos no se corten ni resulten desproporcionados.
Colores: que los textos mantengan suficiente contraste.
Contenedores: que el contenido no se extienda fuera del viewport.
Espaciados: que exista suficiente separación sin desperdiciar espacio.
Consistencia: que las páginas mantengan una identidad visual reconocible.
Cuidado con los ajustes responsivos
Sección titulada «Cuidado con los ajustes responsivos»No todas las opciones del personalizador permiten establecer valores diferentes para cada dispositivo.
Cuando exista un control específico por dispositivo, podrás revisar sus alternativas.
Cuando no exista, el comportamiento puede depender de las reglas responsivas que Blocksy incorpora automáticamente.
No debemos asumir que cada propiedad necesita una configuración independiente para escritorio, tableta y móvil.
15. Actividad práctica
Sección titulada «15. Actividad práctica»Configurando la identidad visual del portafolio UX/UI
Sección titulada «Configurando la identidad visual del portafolio UX/UI»En esta actividad aplicarás las configuraciones globales al proyecto desarrollado durante el semestre.
Parte A. Analizar el prototipo
Sección titulada «Parte A. Analizar el prototipo»Abre Figma e identifica:
- Colores principales y secundarios.
- Tipografías utilizadas.
- Jerarquía de títulos.
- Ancho aproximado de los contenedores.
- Espaciados principales.
Registra las decisiones en una tabla.
Parte B. Configurar Blocksy
Sección titulada «Parte B. Configurar Blocksy»En una instalación de prueba:
- Abre el personalizador.
- Revisa la paleta global.
- Introduce los colores correspondientes al proyecto.
- Configura la tipografía principal.
- Revisa H1, H2 y H3.
- Comprueba el ancho máximo del sitio.
- Evalúa los espaciados generales.
Parte C. Comparar Figma y WordPress
Sección titulada «Parte C. Comparar Figma y WordPress»Utiliza una tabla como la siguiente:
| Elemento | Valor en Figma | Configuración en Blocksy | Resultado |
|---|---|---|---|
| Color principal | Completar | Completar | Completar |
| Texto general | Completar | Completar | Completar |
| Tipografía | Completar | Completar | Completar |
| Ancho general | Completar | Completar | Completar |
| Espaciado | Completar | Completar | Completar |
Parte D. Verificar
Sección titulada «Parte D. Verificar»Revisa el portafolio en diferentes tamaños de pantalla.
Comprueba que las configuraciones globales no generen problemas de legibilidad, distribución o navegación.
Cuando encuentres una diferencia con Figma, determina si requiere una modificación global o local.
Evidencia de aprendizaje
Sección titulada «Evidencia de aprendizaje»Registra:
- La paleta de colores utilizada.
- Las configuraciones tipográficas principales.
- Los ajustes de ancho y espaciado.
- Una comparación de la implementación con el prototipo.
- Los problemas detectados y sus posibles soluciones.
Importante: esta actividad complementa el aprendizaje de la Unidad III. Los criterios de evaluación oficiales deben consultarse en la pauta académica correspondiente.
16. Errores frecuentes
Sección titulada «16. Errores frecuentes»Cambiar los colores sin consultar Figma
Sección titulada «Cambiar los colores sin consultar Figma»Problema: el sitio pierde consistencia con la identidad visual del proyecto.
Recomendación: utilizar los valores establecidos durante la fase de diseño.
Configurar cada página de manera independiente
Sección titulada «Configurar cada página de manera independiente»Problema: aparecen diferencias innecesarias entre páginas.
Recomendación: comenzar por las reglas globales y utilizar excepciones cuando estén justificadas.
Utilizar demasiadas fuentes
Sección titulada «Utilizar demasiadas fuentes»Problema: disminuye la consistencia visual y puede aumentar la carga de recursos.
Recomendación: seleccionar las familias y variantes necesarias para el proyecto.
Utilizar textos con poco contraste
Sección titulada «Utilizar textos con poco contraste»Problema: algunas personas tendrán dificultades para leer el contenido.
Recomendación: comprobar el contraste entre texto y fondo.
Modificar el ancho sin revisar dispositivos móviles
Sección titulada «Modificar el ancho sin revisar dispositivos móviles»Problema: pueden aparecer columnas comprimidas o elementos desbordados.
Recomendación: revisar el comportamiento responsivo después de cada cambio relevante.
Modificar Blocksy cuando el problema está en Gutenberg
Sección titulada «Modificar Blocksy cuando el problema está en Gutenberg»Problema: un ajuste global afecta páginas que anteriormente funcionaban correctamente.
Recomendación: inspeccionar primero el elemento para identificar dónde corresponde intervenir.
17. Lista de verificación
Sección titulada «17. Lista de verificación»Lista de verificación
Marca las actividades que hayas completado.
18. Documentación oficial
Sección titulada «18. Documentación oficial»Consulta estas referencias para profundizar en cada configuración:
Configuración general
Sección titulada «Configuración general»Getting Started with Theme Options — Blocksy
Colores globales
Sección titulada «Colores globales»Tipografía
Sección titulada «Tipografía»Anchos y contenedores
Sección titulada «Anchos y contenedores»Espaciados del contenido
Sección titulada «Espaciados del contenido»Estructura de páginas
Sección titulada «Estructura de páginas»Accesibilidad
Sección titulada «Accesibilidad»Próximo tutorial
Sección titulada «Próximo tutorial»En la siguiente lección trabajaremos con el Header Builder de Blocksy.
Aprenderemos a configurar el logotipo, la navegación principal, los elementos del encabezado y su comportamiento en dispositivos móviles.
Utilizaremos las configuraciones globales de color y tipografía establecidas en este tutorial para mantener una identidad visual coherente en todo el portafolio UX/UI.