06. Header responsivo con Blocksy
¿Qué aprenderás?
Sección titulada «¿Qué aprenderás?»En este tutorial aprenderemos a diseñar y configurar el encabezado de nuestro portafolio profesional UX/UI utilizando Header Builder de Blocksy.
Trabajaremos sobre las decisiones visuales definidas previamente en Figma y las adaptaremos para computadores, tabletas y teléfonos móviles.
El propósito es construir una navegación clara, coherente, funcional y accesible.
Objetivos de aprendizaje
Al finalizar esta lección podrás:
- Comprender qué es un header y su importancia para la experiencia de usuario.
- Identificar las filas, áreas y elementos del Header Builder de Blocksy.
- Configurar el logotipo y la identidad visual del sitio.
- Crear y organizar un menú de navegación en WordPress.
- Configurar el menú de escritorio dentro de Header Builder.
- Reconocer cómo se configura el encabezado móvil.
- Utilizar Trigger y Off Canvas Area para la navegación móvil.
- Ajustar colores, tamaños, alineaciones y espaciados.
- Verificar el funcionamiento del header en diferentes dispositivos.
- Comparar el resultado implementado con el prototipo desarrollado en Figma.
- Nivel: Inicial e intermedio.
- Herramientas: WordPress, Blocksy, Figma y Google Chrome.
- Requisito previo: Tener Blocksy activo y conocer sus configuraciones globales.
- Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.
- Modalidad: Trabajo práctico en una instalación WordPress de desarrollo.
1. ¿Qué es el header de un sitio web?
Sección titulada «1. ¿Qué es el header de un sitio web?»El header, también llamado encabezado, es una región de la interfaz que generalmente aparece en la parte superior de un sitio web.
Suele contener elementos esenciales para identificar el sitio y facilitar la navegación.
Entre los componentes habituales encontramos:
- Logotipo o identidad visual.
- Nombre del sitio.
- Menú de navegación principal.
- Accesos a secciones importantes.
- Botones de acción.
- Elementos complementarios, cuando corresponde.
Importancia en UX/UI
Sección titulada «Importancia en UX/UI»El header es una de las primeras áreas que observa un visitante.
Su organización afecta la manera en que las personas encuentran contenido y comprenden la estructura del sitio.
Un encabezado debe ser:
Claro: permitir identificar rápidamente las opciones disponibles.
Consistente: mantener una estructura reconocible entre las páginas.
Responsivo: reorganizarse según el espacio disponible.
Accesible: facilitar su uso mediante teclado y tecnologías de asistencia.
Ejemplo aplicado a nuestro portafolio
Sección titulada «Ejemplo aplicado a nuestro portafolio»Para el portafolio profesional UX/UI utilizaremos como referencia:
| Elemento | Función |
|---|---|
| Logotipo | Identificar al profesional |
| Inicio | Regresar a la portada |
| Sobre mí | Presentar el perfil profesional |
| Proyectos | Mostrar trabajos realizados |
| Contacto | Facilitar la comunicación |
La organización final deberá respetar la arquitectura de información definida durante el diseño del proyecto.
2. Comprender Header Builder de Blocksy
Sección titulada «2. Comprender Header Builder de Blocksy»Header Builder es el constructor visual de encabezados de Blocksy.
Permite organizar diferentes elementos mediante una interfaz de arrastrar y soltar, sin necesidad de escribir código HTML o CSS para una estructura básica.
¿Cómo está organizado?
Sección titulada «¿Cómo está organizado?»En el encabezado de escritorio podemos trabajar con tres filas principales:
- Top Row: fila superior.
- Main Row: fila principal.
- Bottom Row: fila inferior.
Cada fila puede contener diferentes elementos y permite configurar su presentación.
Elementos disponibles
Sección titulada «Elementos disponibles»Entre los elementos que podemos encontrar están:
| Elemento | Función |
|---|---|
| Logo | Muestra la identidad del sitio |
| Menu – Desktop | Presenta la navegación de escritorio |
| Menu – Mobile | Presenta navegación adaptada a móvil |
| Trigger | Abre el área desplegable |
| Button | Incorpora un botón de acción |
| Search | Permite acceder a funciones de búsqueda |
| Socials | Muestra enlaces a redes sociales |
La disponibilidad exacta de los elementos depende de la versión de Blocksy, los plugins activos y las extensiones instaladas.
Diferencia entre escritorio y móvil
Sección titulada «Diferencia entre escritorio y móvil»El encabezado de escritorio normalmente permite una navegación horizontal.
En pantallas pequeñas suele utilizarse una estructura más compacta que combina el logotipo con un control para abrir el menú.
Blocksy dispone de configuraciones específicas para ambas presentaciones.
Documentación oficial
Sección titulada «Documentación oficial»Elementos del Header Builder — Blocksy
3. Preparar el encabezado desde Figma
Sección titulada «3. Preparar el encabezado desde Figma»Antes de modificar WordPress, revisaremos el diseño previamente realizado en Figma.
La idea no es improvisar una estructura utilizando los controles del tema.
Primero debemos comprender qué estamos intentando implementar.
Elementos que debemos identificar
Sección titulada «Elementos que debemos identificar»Abre el prototipo del portafolio y revisa:
- Logotipo y sus proporciones.
- Distribución horizontal del encabezado.
- Orden de los enlaces de navegación.
- Colores de fondo y texto.
- Tipografías.
- Espaciados y alineaciones.
- Diseño de navegación móvil.
- Estados de interacción de los elementos.
Ejemplo de planificación
Sección titulada «Ejemplo de planificación»| Elemento | Escritorio | Móvil |
|---|---|---|
| Logotipo | Izquierda | Izquierda |
| Menú principal | Horizontal | Dentro del panel móvil |
| Contacto | Enlace o botón | Enlace dentro del menú |
| Espaciado | Amplio | Compacto |
Esta tabla representa una propuesta de referencia, no una estructura obligatoria.
Antes de comenzar
Sección titulada «Antes de comenzar»Utiliza una instalación de desarrollo o una copia de tu sitio.
Si estás trabajando con una plantilla importada, revisa primero los elementos que ya están configurados.
No necesitas eliminar toda la estructura existente para aprender a utilizar Header Builder.
4. Abrir el constructor de encabezados
Sección titulada «4. Abrir el constructor de encabezados»Ingresar al Header Builder
Accede al escritorio de WordPress.
Ingresa a Apariencia → Personalizar.
Busca la sección Header, o su equivalente traducido.
Selecciónala para acceder al constructor.
Identifica el área donde puedes arrastrar elementos y configurar las filas.
Reconocer los elementos disponibles
Dentro de Header Builder, abre la pestaña Elements, si es necesario.
Observa los componentes que puedes utilizar.
Identifica especialmente:
- Logo.
- Menu – Desktop.
- Menu – Mobile.
- Trigger.
- Button.
Comprueba cuáles están disponibles en tu instalación.
Algunos pueden requerir extensiones o funcionalidades adicionales.
Documentación oficial
Sección titulada «Documentación oficial»Elementos del encabezado — Blocksy
5. Comprender las filas del encabezado
Sección titulada «5. Comprender las filas del encabezado»La estructura del encabezado de escritorio permite organizar sus elementos en tres filas.
No es obligatorio utilizar las tres.
Para nuestro portafolio profesional, podemos comenzar con una estructura simple de una sola fila principal.
Esto facilita mantener una navegación clara y evita agregar elementos innecesarios.
Propuesta inicial
Sección titulada «Propuesta inicial»Main Row
- Logotipo a la izquierda.
- Menú principal a la derecha.
Si nuestro prototipo incluye otros elementos, podremos incorporarlos posteriormente.
Organizar los elementos en la fila principal
Activa la vista de escritorio del personalizador.
Localiza la fila Main Row.
Comprueba si ya contiene los elementos Logo y Menu – Desktop.
Si alguno no está presente, arrástralo desde la sección de elementos hacia la fila.
Coloca el logotipo en el área izquierda y el menú en el área derecha.
Observa cómo cambia la vista previa del encabezado.
Configurar una fila
Sección titulada «Configurar una fila»Al seleccionar la configuración de una fila, podemos encontrar opciones relacionadas con:
- Altura.
- Ancho.
- Distribución.
- Color de fondo.
- Bordes.
- Sombras.
- Espaciado.
Estos controles permiten adaptar la estructura a las decisiones del prototipo.
Documentación oficial
Sección titulada «Documentación oficial»Desktop Header Builder — Blocksy
6. Configurar el logotipo
Sección titulada «6. Configurar el logotipo»El logotipo representa visualmente al profesional o marca personal del portafolio.
Es importante que mantenga una proporción adecuada, sea reconocible y no ocupe demasiado espacio.
En Blocksy podemos utilizar una imagen, el nombre del sitio o una combinación de ambos.
Preparación del archivo
Sección titulada «Preparación del archivo»Antes de incorporarlo, comprueba:
- Que el logotipo corresponde a la versión final definida en Figma.
- Que tiene dimensiones adecuadas.
- Que su fondo y sus colores funcionan sobre el encabezado.
- Que no contiene espacios vacíos innecesarios.
- Que se mantiene legible en tamaños reducidos.
Puedes utilizar formatos de imagen compatibles con WordPress.
Si utilizas SVG, considera que WordPress puede requerir configuraciones adicionales para permitir su carga. No instales plugins ni modifiques la seguridad del sitio únicamente para completar este ejercicio.
Seleccionar y configurar el logotipo
Dentro de Header Builder, selecciona el elemento Logo.
Busca el control para elegir la imagen principal.
Selecciona el logotipo desde la biblioteca de medios o carga un archivo apropiado.
Comprueba que aparezca correctamente en la vista previa.
Revisa las opciones para mostrar el nombre y la descripción del sitio si corresponden a tu diseño.
Ajustar el tamaño del logotipo
Dentro de la configuración del elemento Logo, busca Logo Height.
Ajusta su altura tomando como referencia el diseño de Figma.
Evita valores que aumenten excesivamente la altura del header.
Comprueba que el logotipo se mantenga visible y que no interfiera con los demás elementos.
Si están disponibles controles responsivos, revisa también su tamaño en las vistas de dispositivos.
Documentación oficial
Sección titulada «Documentación oficial»7. Crear el menú de navegación en WordPress
Sección titulada «7. Crear el menú de navegación en WordPress»Antes de configurar el elemento de menú de Blocksy, debemos contar con un menú de navegación en WordPress.
El menú representa la organización de enlaces que permitirá a los visitantes desplazarse entre las páginas del portafolio.
Propuesta de estructura
Sección titulada «Propuesta de estructura»Para nuestro caso académico utilizaremos:
- Inicio.
- Sobre mí.
- Proyectos.
- Contacto.
Si tu arquitectura de información contempla otras páginas, puedes adaptar estos elementos.
Consideración importante
Sección titulada «Consideración importante»Las páginas deben existir para poder seleccionarlas directamente desde la lista de páginas del administrador.
Si una página todavía no existe, puedes crearla primero como parte del desarrollo del portafolio.
Crear el menú principal
Desde el escritorio de WordPress, abre Apariencia → Menús.
Si ya existe un menú principal, revisa su contenido antes de crear otro.
Si necesitas crear uno, selecciona la opción para generar un nuevo menú.
Asigna un nombre identificable, como Menú principal.
Incorpora las páginas correspondientes a Inicio, Sobre mí, Proyectos y Contacto.
Organiza los elementos en el orden definido en Figma.
Guarda el menú.
¿Por qué crear el menú desde WordPress?
Sección titulada «¿Por qué crear el menú desde WordPress?»Porque el menú es una estructura de navegación que posteriormente podemos seleccionar desde los elementos correspondientes de Blocksy.
La organización de enlaces y su presentación visual son aspectos relacionados, pero diferentes.
Documentación oficial
Sección titulada «Documentación oficial»Administración de menús de WordPress
8. Configurar el menú de escritorio
Sección titulada «8. Configurar el menú de escritorio»En Header Builder, el elemento de menú de escritorio permite mostrar un menú de WordPress dentro del encabezado.
Este elemento ofrece opciones de presentación, colores, tipografía y distribución.
Asignar el menú de escritorio
Regresa a Apariencia → Personalizar → Header.
Activa la vista de escritorio.
Selecciona el elemento Menu – Desktop situado en la fila principal.
Localiza el selector de menú.
Elige el menú creado anteriormente, o utiliza la ubicación predeterminada si ya está correctamente asignada.
Comprueba que aparezcan los enlaces esperados.
Personalizar la apariencia del menú
Selecciona el elemento de menú de escritorio.
Revisa sus opciones de configuración y diseño.
Identifica los controles relacionados con:
- Tipografía.
- Color de los enlaces.
- Color del elemento activo.
- Estados de interacción.
- Espaciado entre elementos.
Ajusta solamente los valores necesarios según tu prototipo.
Comprueba la legibilidad y el contraste de los enlaces.
Enlace activo y estado hover
Sección titulada «Enlace activo y estado hover»Estado activo: indica la página o sección en la que se encuentra el usuario.
Estado hover: es la apariencia de un elemento cuando el puntero se sitúa sobre él.
Ambos estados pueden facilitar la orientación visual.
Sin embargo, no debemos depender exclusivamente del color para indicar información importante.
Documentación oficial
Sección titulada «Documentación oficial»9. Incorporar un botón de contacto
Sección titulada «9. Incorporar un botón de contacto»En algunos portafolios es útil destacar una acción principal, como contactar al profesional.
Blocksy incluye un elemento Button que permite añadir una llamada a la acción al encabezado.
Esta sección es opcional: si el prototipo no incorpora un botón, no es necesario agregarlo.
Agregar un botón de contacto cuando corresponda
Revisa si el diseño de Figma incluye un botón destacado.
Si corresponde, abre Header Builder → Elements.
Arrastra el elemento Button hacia una posición disponible de la fila principal.
Selecciónalo para configurar sus opciones.
Escribe una etiqueta clara, por ejemplo Contáctame.
Establece como destino la página de contacto de tu WordPress.
Ajusta su apariencia según la identidad visual definida anteriormente.
Comprueba que el botón funcione al abrir el sitio.
Documentación oficial
Sección titulada «Documentación oficial»10. Comprender el encabezado móvil
Sección titulada «10. Comprender el encabezado móvil»En una pantalla pequeña no siempre es conveniente mantener todos los enlaces visibles horizontalmente.
El espacio es limitado y una navegación extensa puede generar problemas como:
- Elementos comprimidos.
- Textos difíciles de leer.
- Superposición del logotipo y el menú.
- Desbordamiento horizontal.
- Controles difíciles de seleccionar.
Para resolverlo, Blocksy permite construir un encabezado móvil independiente en su organización.
Elementos principales
Sección titulada «Elementos principales»Logo: identifica el sitio.
Trigger: elemento que permite abrir el panel de navegación.
Off Canvas Area: área donde se presenta el contenido desplegable.
Menu – Mobile: menú diseñado para la navegación en pantallas pequeñas.
¿Cómo trabajan juntos?
Sección titulada «¿Cómo trabajan juntos?»El visitante ve el logotipo y el botón de menú.
Cuando selecciona el Trigger, se abre el panel Off Canvas.
Dentro de ese panel se encuentran los enlaces de navegación.
Este procedimiento se puede implementar con las opciones móviles de Blocksy, sin necesitar Blocksy Pro para un menú móvil básico.
11. Configurar la estructura móvil
Sección titulada «11. Configurar la estructura móvil»Cambiar a la vista móvil
Abre el personalizador de Blocksy.
Ingresa a la sección Header.
Utiliza los controles de dispositivo para cambiar a la vista móvil.
Observa cómo cambia el área de configuración del encabezado.
Identifica los elementos que ya están presentes.
Organizar el logotipo y el Trigger
Dentro del constructor móvil, localiza la fila principal.
Comprueba si están presentes Logo y Trigger.
Si es necesario, arrastra los elementos hacia la fila.
Como propuesta inicial:
- Ubica el logotipo a la izquierda.
- Ubica el Trigger a la derecha.
Observa el resultado en la vista previa.
Comprueba que ambos elementos tengan espacio suficiente.
Documentación oficial
Sección titulada «Documentación oficial»Mobile Header Builder — Blocksy
12. Configurar el menú móvil
Sección titulada «12. Configurar el menú móvil»El elemento Menu – Mobile presenta la navegación de una forma adaptada a pantallas pequeñas.
Puede contener enlaces y submenús, dependiendo de la estructura que hayas creado en WordPress.
Diferencia importante
Sección titulada «Diferencia importante»El elemento Trigger no contiene directamente los enlaces.
Su función es abrir el área de navegación.
El elemento de menú es el que presenta los enlaces correspondientes.
Configurar Menu – Mobile dentro de Off Canvas
Activa la vista móvil del Header Builder.
Localiza Off Canvas Area.
Comprueba si contiene el elemento Menu – Mobile.
Si no está presente, arrástralo desde la biblioteca de elementos hacia el área Off Canvas.
Selecciona el elemento para revisar su configuración.
Asigna el menú principal que creaste anteriormente.
Comprueba que los enlaces aparezcan correctamente en el panel.
Personalizar el panel Off Canvas
En la vista móvil del constructor, selecciona Off Canvas Area.
Revisa las opciones disponibles para su presentación.
Según la configuración del tema, podrás encontrar alternativas como:
- Panel lateral.
- Presentación tipo modal.
- Colores de fondo.
- Alineación.
- Ancho del panel.
- Botón de cierre.
Selecciona la presentación que mejor se adapte a tu prototipo.
Comprueba que el texto tenga suficiente contraste con el fondo.
Verifica que el panel pueda abrirse y cerrarse.
Documentación oficial
Sección titulada «Documentación oficial»13. Ajustar la apariencia del Trigger
Sección titulada «13. Ajustar la apariencia del Trigger»El Trigger es el control que permite abrir el área Off Canvas.
Su diseño debe comunicar claramente que existe una navegación disponible.
Aspectos que debemos revisar
Sección titulada «Aspectos que debemos revisar»- Tamaño del icono.
- Color.
- Contraste con el fondo.
- Posición dentro del header.
- Espaciado respecto del logotipo.
- Funcionamiento al utilizar el teclado.
Personalizar y comprobar el Trigger
Dentro del constructor móvil, selecciona Trigger.
Revisa el estilo y tamaño del icono.
Ajusta sus colores para mantener la coherencia con el portafolio.
Comprueba que exista separación suficiente respecto del logotipo.
Abre la vista previa del sitio.
Selecciona el Trigger y comprueba que se abra el panel móvil.
Cierra el panel y vuelve a abrirlo.
Si el control permite mostrar una etiqueta descriptiva, evalúa su utilidad para la navegación.
14. Revisar los colores y espaciados del encabezado
Sección titulada «14. Revisar los colores y espaciados del encabezado»En el Tutorial 05 configuramos la identidad visual global del portafolio.
Ahora debemos aplicar esos criterios al encabezado.
Elementos que pueden necesitar ajustes
Sección titulada «Elementos que pueden necesitar ajustes»Fondo: debe relacionarse con el diseño del sitio.
Logotipo: debe mantener buena visibilidad.
Menú: debe presentar textos legibles.
Botón: debe destacar cuando tiene una función importante.
Separaciones: deben evitar superposiciones y exceso de espacio.
¿Dónde se realizan las modificaciones?
Sección titulada «¿Dónde se realizan las modificaciones?»Algunos ajustes se realizan seleccionando una fila del Header Builder.
Otros se realizan seleccionando un elemento específico.
Por ejemplo:
| Necesidad | Dónde revisar |
|---|---|
| Fondo de una fila | Configuración de esa fila |
| Altura del encabezado | Ajustes de fila |
| Tamaño del logotipo | Elemento Logo |
| Colores del menú | Elemento Menu – Desktop |
| Icono móvil | Elemento Trigger |
| Fondo del menú móvil | Off Canvas Area |
Precaución
Sección titulada «Precaución»No debemos modificar una configuración global cuando el problema afecta solamente a un elemento del encabezado.
Primero identifica el origen del problema y después selecciona el control correspondiente.
15. Comprobar el diseño responsivo del header
Sección titulada «15. Comprobar el diseño responsivo del header»Un encabezado no está terminado solamente porque se vea correctamente en el personalizador.
Debemos verificar su funcionamiento real en distintas pantallas.
Utilizaremos Chrome DevTools, tal como aprendimos en el Tutorial 04.
Comprobar el encabezado en diferentes anchos
Abre el portafolio en Google Chrome.
Activa DevTools y utiliza la barra de dispositivos.
Realiza pruebas con los siguientes anchos de referencia:
- 360 píxeles.
- 768 píxeles.
- 1280 píxeles.
Observa en cada uno:
- Si el logotipo se mantiene visible.
- Si los enlaces están correctamente organizados.
- Si el menú móvil puede abrirse y cerrarse.
- Si los elementos se superponen.
- Si existe algún desbordamiento horizontal.
También modifica progresivamente el ancho para detectar problemas entre las dimensiones propuestas.
Importante
Sección titulada «Importante»Los valores de prueba no representan necesariamente los breakpoints internos del tema.
Son dimensiones utilizadas para revisar el comportamiento del proyecto.
La emulación de dispositivos de DevTools no reemplaza las pruebas en teléfonos reales.
16. Comprobar navegación y accesibilidad
Sección titulada «16. Comprobar navegación y accesibilidad»El encabezado debe funcionar tanto con un mouse como con un teclado.
También debemos evitar que el usuario dependa exclusivamente de elementos visuales para orientarse.
Pruebas recomendadas
Sección titulada «Pruebas recomendadas»Navegación: comprobar que todos los enlaces tengan destinos correctos.
Teclado: utilizar Tab para recorrer los controles interactivos.
Foco visible: identificar qué elemento está seleccionado.
Menú móvil: comprobar su apertura y cierre.
Contraste: asegurar que los enlaces sean legibles.
Orden lógico: mantener una secuencia comprensible entre las opciones.
Probar el encabezado con el teclado
Abre el sitio publicado en tu entorno de prueba o su vista previa.
Utiliza la tecla Tab para recorrer los enlaces y botones del encabezado.
Observa si el foco es visible.
En la vista móvil, intenta seleccionar el Trigger mediante teclado.
Presiona Enter para abrir el menú.
Revisa si puedes navegar entre sus enlaces.
Comprueba que puedes cerrar el panel mediante su control de cierre y volver al contenido principal.
Si encuentras dificultades, regístralas como observaciones de accesibilidad.
Documentación complementaria
Sección titulada «Documentación complementaria»Introducción a la accesibilidad web — W3C WAI
17. Errores frecuentes
Sección titulada «17. Errores frecuentes»El menú no muestra las páginas correctas
Sección titulada «El menú no muestra las páginas correctas»Posible causa: el elemento utiliza un menú distinto del creado en WordPress.
Qué revisar: la selección del menú dentro del elemento correspondiente.
El logotipo es demasiado grande
Sección titulada «El logotipo es demasiado grande»Posible causa: el valor Logo Height o la imagen utilizada no se adapta a la composición.
Qué revisar: el tamaño del logotipo y los espacios disponibles.
El menú móvil no se abre
Sección titulada «El menú móvil no se abre»Posible causa: falta configurar Trigger, Off Canvas Area o sus elementos de navegación.
Qué revisar: que el Trigger esté presente y que el panel contenga el menú.
El encabezado se desborda
Sección titulada «El encabezado se desborda»Posible causa: demasiados elementos, anchos excesivos o espacios insuficientes.
Qué revisar: distribución, tamaños, márgenes y comportamiento responsivo.
Los enlaces tienen poco contraste
Sección titulada «Los enlaces tienen poco contraste»Posible causa: colores de texto demasiado similares al fondo.
Qué revisar: configuración de colores del menú, del panel o de la fila.
El menú funciona en escritorio, pero no en móvil
Sección titulada «El menú funciona en escritorio, pero no en móvil»Posible causa: la navegación móvil no está configurada o utiliza un menú diferente.
Qué revisar: los elementos Menu – Mobile, Trigger y Off Canvas Area.
El diseño se ve distinto al prototipo de Figma
Sección titulada «El diseño se ve distinto al prototipo de Figma»Posible causa: diferencias en tipografías, espaciados, tamaños o alineaciones.
Qué revisar: decisiones visuales registradas y configuraciones específicas del Header Builder.
18. Actividad práctica
Sección titulada «18. Actividad práctica»Construcción del encabezado responsivo del portafolio UX/UI
Sección titulada «Construcción del encabezado responsivo del portafolio UX/UI»En esta actividad implementarás el encabezado de tu sitio utilizando las herramientas de Blocksy.
Parte A. Revisar el prototipo
Sección titulada «Parte A. Revisar el prototipo»Abre el archivo de Figma.
Identifica:
- Distribución de escritorio.
- Distribución móvil.
- Tamaño y ubicación del logotipo.
- Opciones de navegación.
- Colores y tipografías.
- Espaciados.
- Estados de interacción.
Parte B. Implementar el encabezado de escritorio
Sección titulada «Parte B. Implementar el encabezado de escritorio»Utiliza Header Builder para:
- Organizar Main Row.
- Configurar el logotipo.
- Crear o asignar el menú principal.
- Configurar la apariencia de la navegación.
- Incorporar un botón de contacto, si corresponde al prototipo.
Parte C. Implementar el encabezado móvil
Sección titulada «Parte C. Implementar el encabezado móvil»Configura:
- Logotipo.
- Trigger.
- Off Canvas Area.
- Menu – Mobile.
- Colores y presentación del panel.
Parte D. Verificar
Sección titulada «Parte D. Verificar»Prueba el encabezado en:
- 360 px.
- 768 px.
- 1280 px.
Revisa la navegación y el comportamiento del menú.
Parte E. Documentar
Sección titulada «Parte E. Documentar»Completa una tabla como esta:
| Elemento | Diseño en Figma | Configuración en Blocksy | Resultado |
|---|---|---|---|
| Logotipo | Completar | Completar | Completar |
| Menú escritorio | Completar | Completar | Completar |
| Menú móvil | Completar | Completar | Completar |
| Colores | Completar | Completar | Completar |
| Espaciados | Completar | Completar | Completar |
Evidencia de aprendizaje
Sección titulada «Evidencia de aprendizaje»Registra las siguientes evidencias:
- Encabezado implementado en escritorio.
- Encabezado implementado en móvil.
- Menú móvil abierto.
- Pruebas de navegación.
- Comparación con el prototipo de Figma.
- Observaciones y ajustes realizados.
Esta actividad forma parte del aprendizaje práctico de la Unidad III y no reemplaza la pauta oficial de evaluación.
19. Lista de verificación
Sección titulada «19. Lista de verificación»Lista de verificación
Marca las actividades que hayas completado.
20. Documentación oficial
Sección titulada «20. Documentación oficial»Para profundizar en las herramientas revisadas, consulta:
Constructor de encabezados
Sección titulada «Constructor de encabezados»Desktop Header Builder — Blocksy
Elementos disponibles
Sección titulada «Elementos disponibles»Header Builder Elements — Blocksy
Logotipo
Sección titulada «Logotipo»Menú de escritorio
Sección titulada «Menú de escritorio»Menú móvil
Sección titulada «Menú móvil»Botón de apertura del menú
Sección titulada «Botón de apertura del menú»Configuración móvil
Sección titulada «Configuración móvil»Mobile Header Builder — Blocksy
Botón de contacto
Sección titulada «Botón de contacto»Creación de menús
Sección titulada «Creación de menús»Appearance Menus Screen — WordPress
Próximo tutorial
Sección titulada «Próximo tutorial»En la siguiente lección aprenderemos a configurar el Footer Builder de Blocksy.
Trabajaremos la organización del pie de página, columnas, información de contacto, enlaces, redes sociales y comportamiento responsivo.
Continuaremos utilizando como referencia el prototipo profesional UX/UI desarrollado durante el semestre.