07. Footer responsivo con Blocksy
¿Qué aprenderás?
Sección titulada «¿Qué aprenderás?»En este tutorial aprenderemos a configurar el footer, también llamado pie de página, de nuestro portafolio profesional UX/UI.
Utilizaremos Footer Builder de Blocksy para organizar filas, columnas y componentes.
También trabajaremos con áreas de widgets de WordPress, utilizando bloques de Gutenberg para incorporar contenido sin necesidad de contratar Blocksy Pro.
Finalmente, comprobaremos el comportamiento del footer en computadores, tabletas y teléfonos móviles.
Objetivos de aprendizaje
Al finalizar esta lección podrás:
- Comprender la función del footer dentro de la experiencia de usuario.
- Identificar las principales herramientas de Footer Builder.
- Diferenciar las filas, columnas y elementos del pie de página.
- Configurar una estructura de columnas basada en Figma.
- Utilizar áreas de widgets para incorporar bloques de Gutenberg.
- Incorporar información profesional y enlaces de navegación.
- Configurar enlaces a redes sociales y el elemento Copyright.
- Aplicar colores, tipografías y espaciados coherentes.
- Adaptar las columnas y elementos para dispositivos móviles.
- Comprobar la navegación, accesibilidad y consistencia del footer.
- Nivel: Inicial e intermedio.
- Herramientas: WordPress, Blocksy, Gutenberg, Figma y Google Chrome.
- Requisito previo: Haber configurado la identidad visual global y el header del portafolio.
- Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.
- Modalidad: Trabajo práctico en una instalación de desarrollo.
- Licencia necesaria: Blocksy gratuito.
1. ¿Qué es el footer de un sitio web?
Sección titulada «1. ¿Qué es el footer de un sitio web?»El footer es una sección que normalmente se encuentra al final de las páginas de un sitio web.
Su función es ofrecer información complementaria, reforzar la identidad visual y facilitar el acceso a recursos importantes.
Entre sus contenidos habituales encontramos:
- Identidad o nombre de la marca.
- Información de contacto.
- Enlaces de navegación.
- Redes sociales.
- Información legal o derechos de autor.
- Enlaces a políticas y documentos, cuando correspondan.
Importancia en UX/UI
Sección titulada «Importancia en UX/UI»Aunque el footer se encuentra al final de la página, forma parte de la experiencia de navegación.
Un visitante puede utilizarlo para encontrar información que no localizó en el menú principal.
También ayuda a reconocer la identidad del sitio y encontrar vías de contacto.
Características de un buen footer
Sección titulada «Características de un buen footer»Claridad: permite reconocer fácilmente su contenido.
Jerarquía: organiza la información por grupos relacionados.
Consistencia: mantiene la identidad visual del sitio.
Legibilidad: utiliza tamaños de texto y contrastes apropiados.
Responsividad: adapta la distribución a pantallas pequeñas.
Accesibilidad: permite navegar y comprender sus enlaces utilizando diferentes dispositivos.
Ejemplo aplicado al portafolio
Sección titulada «Ejemplo aplicado al portafolio»| Área | Contenido propuesto |
|---|---|
| Identidad profesional | Nombre y breve descripción |
| Navegación | Inicio, Sobre mí, Proyectos y Contacto |
| Contacto | Correo profesional |
| Redes sociales | Perfiles profesionales disponibles |
| Copyright | Nombre del proyecto y año |
Esta distribución es una propuesta académica y puede adaptarse a la arquitectura de información de cada portafolio.
2. ¿Qué es Footer Builder de Blocksy?
Sección titulada «2. ¿Qué es Footer Builder de Blocksy?»Footer Builder es el constructor visual de pies de página de Blocksy.
Permite organizar elementos y ajustar su distribución desde el personalizador de WordPress.
No es necesario programar HTML o CSS para construir un footer básico.
Filas del footer
Sección titulada «Filas del footer»El constructor permite utilizar diferentes filas para separar contenidos.
Una estructura habitual considera:
- Una fila superior, cuando existe contenido adicional.
- Una fila principal para la información del sitio.
- Una fila inferior para copyright y otros elementos secundarios.
Los nombres concretos pueden variar según la versión o el idioma de la interfaz.
No es obligatorio utilizar todas las filas.
Columnas
Sección titulada «Columnas»Cada fila puede dividirse en varias columnas.
Las columnas permiten organizar información en distintas áreas horizontales.
Por ejemplo:
| Columna | Contenido |
|---|---|
| Primera | Descripción del profesional |
| Segunda | Enlaces del portafolio |
| Tercera | Contacto y redes |
En Blocksy, las opciones de fila permiten distribuir el contenido hasta en seis columnas.
Para nuestro proyecto utilizaremos tres, salvo que el diseño de Figma requiera otra distribución.
Elementos del constructor
Sección titulada «Elementos del constructor»Entre los elementos documentados se encuentran:
- Copyright.
- Socials.
- Menu.
- Widget Area.
- Button.
- Contacts.
- Logo.
- HTML.
Importante: no todos requieren las mismas licencias.
Para esta actividad utilizaremos elementos disponibles en la configuración gratuita: Copyright, Socials, el menú base y áreas de widgets.
Los elementos especializados Button, Contacts, Logo y HTML del footer requieren Blocksy Pro.
Podemos incorporar contenido equivalente utilizando los bloques adecuados dentro de las áreas de widgets.
Documentación oficial
Sección titulada «Documentación oficial»Getting Started with the Footer Elements — Blocksy
Elementos no disponibles en el personalizador — Blocksy
3. Planificar el footer desde Figma
Sección titulada «3. Planificar el footer desde Figma»Antes de comenzar a configurar WordPress, necesitamos revisar las decisiones realizadas durante la etapa de diseño.
El objetivo es implementar el footer definido en el prototipo y no crear uno diferente sin justificación.
¿Qué debemos revisar?
Sección titulada «¿Qué debemos revisar?»Abre tu proyecto en Figma e identifica:
- Número de columnas.
- Información de cada columna.
- Jerarquía de títulos y textos.
- Colores de fondo.
- Colores de enlaces.
- Espaciados entre secciones.
- Alineación de los elementos.
- Distribución para teléfonos móviles.
Propuesta de estructura
Sección titulada «Propuesta de estructura»Para el portafolio de un diseñador UX/UI podemos utilizar:
Columna 1 — Identidad
Nombre del diseñador y una descripción profesional breve.
Columna 2 — Navegación
Enlaces a Inicio, Sobre mí, Proyectos y Contacto.
Columna 3 — Contacto
Correo profesional y enlaces a redes sociales.
Fila inferior
Información de derechos de autor.
Consideración importante
Sección titulada «Consideración importante»No es necesario incorporar una dirección física o un teléfono personal.
Publica solamente los datos de contacto que sean apropiados para un portafolio profesional.
Si el proyecto todavía utiliza datos ficticios, conserva su carácter de ejercicio académico.
4. Acceder al Footer Builder
Sección titulada «4. Acceder al Footer Builder»Abrir el constructor de footer
Ingresa al escritorio de WordPress.
En el menú lateral, selecciona Apariencia → Personalizar.
Busca la sección Footer, o su equivalente traducido.
Selecciónala.
Observa la vista previa de la parte inferior del sitio y las herramientas disponibles para organizar sus elementos.
Reconocer las filas y elementos
Dentro de Footer Builder, observa las filas disponibles.
Identifica los espacios donde puedes arrastrar elementos.
Revisa la biblioteca de componentes del constructor.
Localiza especialmente:
- Copyright.
- Socials.
- Menu.
- Widget Area.
Comprueba si la plantilla que importaste ya incluye algunos de estos elementos.
No elimines contenido sin verificar primero su función.
Documentación oficial
Sección titulada «Documentación oficial»Exploring the Footer Builder — Blocksy
5. Configurar las columnas del footer
Sección titulada «5. Configurar las columnas del footer»Las columnas permiten organizar visualmente diferentes grupos de información.
En una pantalla amplia, pueden presentarse una al lado de otra.
En pantallas pequeñas, normalmente se reorganizan para adaptarse al espacio disponible.
Antes de modificar
Sección titulada «Antes de modificar»Compara la cantidad de columnas existentes con tu diseño de Figma.
Una plantilla importada puede tener una estructura diferente de la que necesitas.
La actividad no exige utilizar exactamente tres columnas si el prototipo justifica otra distribución.
Configurar la cantidad de columnas
Dentro de Footer Builder, selecciona la fila que utilizarás como área principal de contenido.
Abre sus opciones de configuración.
Localiza el control Columns.
Como ejercicio inicial, configura tres columnas.
Observa cómo cambia la distribución en la vista previa.
Después, revisa Columns Layout para identificar las alternativas de proporciones disponibles.
Selecciona la opción que mejor se aproxime al diseño de Figma.
No todas las columnas necesitan el mismo ancho
Sección titulada «No todas las columnas necesitan el mismo ancho»Podemos utilizar diferentes proporciones dependiendo del contenido.
Por ejemplo, una columna con descripción profesional puede necesitar más espacio que una columna con enlaces breves.
El objetivo es equilibrar los contenidos y no simplemente dividir la pantalla en partes idénticas.
Documentación oficial
Sección titulada «Documentación oficial»6. Incorporar áreas de widgets
Sección titulada «6. Incorporar áreas de widgets»Las áreas de widgets permiten insertar bloques de WordPress dentro del footer.
Esto es especialmente útil para nuestro proyecto porque ya estamos trabajando con Gutenberg.
¿Qué podemos incorporar?
Sección titulada «¿Qué podemos incorporar?»Dependiendo de los bloques disponibles en WordPress, podemos incluir:
- Encabezados.
- Párrafos.
- Imágenes.
- Listas.
- Enlaces.
- Botones.
- Otros bloques compatibles.
Diferencia entre Footer Builder y Gutenberg
Sección titulada «Diferencia entre Footer Builder y Gutenberg»Footer Builder determina la estructura general y posición de las áreas del footer.
Gutenberg permite editar el contenido que colocamos dentro de una de esas áreas.
Esta separación nos ayudará a comprender mejor cómo interactúan las herramientas.
Ubicar Widget Area en las columnas
Dentro de Footer Builder, localiza el elemento Widget Area.
Arrastra una de las áreas disponibles hacia la primera columna.
Si ya existe un área de widgets, identifica su posición y revisa su contenido.
Repite el procedimiento en las otras columnas que utilizarás.
Procura utilizar áreas distintas para contenidos independientes.
Por ejemplo:
- Primera columna: Widget Area 1.
- Segunda columna: Widget Area 2.
- Tercera columna: Widget Area 3.
Los nombres o números pueden variar según la distribución de la plantilla.
Documentación oficial
Sección titulada «Documentación oficial»7. Editar los widgets utilizando Gutenberg
Sección titulada «7. Editar los widgets utilizando Gutenberg»Una vez ubicadas las áreas de widgets, podemos incorporar contenido.
WordPress permite administrar estas áreas mediante el editor de widgets basado en bloques.
Dos formas de acceder
Sección titulada «Dos formas de acceder»Puedes seleccionar el área correspondiente desde el personalizador, cuando esa opción esté disponible.
También puedes utilizar:
Apariencia → Widgets
Esta segunda alternativa nos permite reconocer las distintas áreas administradas por WordPress.
Abrir el editor de widgets
Regresa al escritorio de WordPress.
Ingresa a Apariencia → Widgets.
Identifica las áreas disponibles.
Busca el área que colocaste en la primera columna del Footer Builder.
Ábrela para editar su contenido.
Observa que su funcionamiento se parece al editor Gutenberg utilizado en páginas y entradas.
Documentación oficial
Sección titulada «Documentación oficial»Editor de widgets basado en bloques — WordPress
8. Crear la columna de identidad profesional
Sección titulada «8. Crear la columna de identidad profesional»En la primera columna colocaremos la información que identifica al diseñador UX/UI.
Propuesta de contenido
Sección titulada «Propuesta de contenido»Nombre profesional
Una breve presentación de la especialidad o del enfoque del portafolio.
Ejemplo ilustrativo
Sección titulada «Ejemplo ilustrativo»Diseño UX/UI
Diseño de interfaces y experiencias digitales centradas en las personas.
Este texto no reemplaza la información definida para el cliente ficticio. Debe adaptarse al contenido establecido en el proyecto académico.
Agregar identidad y descripción profesional
Dentro del editor de widgets, abre el área correspondiente a la primera columna.
Selecciona el botón + para agregar un bloque.
Busca el bloque Encabezado.
Introduce el nombre profesional definido para el proyecto.
Después, agrega un bloque Párrafo.
Escribe una descripción breve del trabajo del diseñador.
Ajusta la jerarquía tipográfica y los colores utilizando como referencia el prototipo de Figma.
Guarda los cambios.
Recomendación de UX/UI
Sección titulada «Recomendación de UX/UI»La descripción debe ser breve.
El footer no necesita repetir toda la información que ya aparece en la página Sobre mí.
Su función es comunicar la identidad profesional de manera rápida y clara.
9. Configurar la navegación del footer
Sección titulada «9. Configurar la navegación del footer»Los enlaces del footer permiten acceder a páginas importantes sin necesidad de regresar al encabezado.
Para nuestro portafolio utilizaremos como referencia:
- Inicio.
- Sobre mí.
- Proyectos.
- Contacto.
Alternativas disponibles
Sección titulada «Alternativas disponibles»Podemos utilizar el elemento Menu de Blocksy cuando esté disponible.
También podemos construir enlaces mediante bloques de Gutenberg dentro de un área de widgets.
Para mantener la actividad sencilla, comenzaremos utilizando el elemento de menú del Footer Builder.
Menú de footer y menú principal
Sección titulada «Menú de footer y menú principal»No necesariamente deben contener los mismos enlaces.
Por ejemplo, el footer puede mostrar enlaces complementarios que no aparecen en el header.
Sin embargo, en nuestro proyecto inicial podemos reutilizar el menú principal.
Crear o revisar el menú del footer
Desde el escritorio de WordPress, abre Apariencia → Menús.
Revisa los menús que ya existen.
Si el menú principal contiene los enlaces requeridos, puedes reutilizarlo.
Si tu prototipo necesita una navegación diferente, crea un menú específico para el footer.
Ordena los enlaces según la arquitectura de información definida en Figma.
Guarda los cambios.
Incorporar el menú al Footer Builder
Regresa a Apariencia → Personalizar → Footer.
Localiza el elemento Menu.
Ubícalo en la columna destinada a la navegación, si tu diseño utiliza ese elemento.
Selecciona el componente y busca Select Menu.
Asigna el menú preparado anteriormente.
Revisa las opciones de orientación y separación entre enlaces.
Comprueba que la navegación sea legible y mantenga el orden esperado.
Alternativa: si necesitas mantener los enlaces dentro de la segunda Widget Area, utiliza bloques de enlaces o navegación compatibles con el editor de widgets.
Documentación oficial
Sección titulada «Documentación oficial»10. Agregar información de contacto
Sección titulada «10. Agregar información de contacto»El footer es un lugar apropiado para facilitar el contacto con el profesional.
En nuestro caso podemos incorporar un correo profesional o un enlace hacia la página de contacto.
Datos recomendados
Sección titulada «Datos recomendados»- Correo profesional.
- Enlace a la página Contacto.
- Otros canales pertinentes al proyecto.
No es obligatorio mostrar dirección o teléfono personal.
¿Cómo hacerlo sin Blocksy Pro?
Sección titulada «¿Cómo hacerlo sin Blocksy Pro?»Blocksy Pro incluye un elemento especializado llamado Contacts.
En la versión gratuita podemos utilizar bloques de Gutenberg dentro de una Widget Area para presentar información equivalente.
Incorporar un correo y enlace de contacto
Abre Apariencia → Widgets.
Localiza el área correspondiente al contenido de contacto.
Agrega un bloque Encabezado con el texto Contacto.
Incorpora un bloque Párrafo.
Escribe el correo profesional correspondiente al proyecto.
Selecciona el texto del correo y conviértelo en un enlace.
Si deseas abrir el programa de correo del visitante, utiliza una URL con el esquema mailto: y la dirección configurada para el proyecto.
También puedes agregar un enlace a la página Contacto.
Guarda los cambios y comprueba el resultado.
Recomendación
Sección titulada «Recomendación»Comprueba que los datos de contacto sean correctos.
Un footer visualmente bien diseñado no resulta útil si sus enlaces conducen a direcciones inexistentes.
11. Configurar redes sociales
Sección titulada «11. Configurar redes sociales»Las redes sociales pueden servir como canales complementarios de presentación profesional.
Para un portafolio UX/UI conviene priorizar perfiles relacionados con el trabajo y la especialidad.
Por ejemplo, pueden incluirse perfiles de proyectos, comunidades de diseño o plataformas profesionales.
No es necesario incorporar redes sociales que no formen parte de la estrategia del proyecto.
¿Dónde se administran los enlaces?
Sección titulada «¿Dónde se administran los enlaces?»Blocksy permite configurar las cuentas sociales desde un apartado general del personalizador.
Posteriormente, esas cuentas pueden utilizarse dentro del elemento Socials del Footer Builder.
Registrar los perfiles de redes sociales
Ingresa a Apariencia → Personalizar.
Abre General Options → Social Network Accounts.
Identifica las redes sociales disponibles.
Incorpora las URL de los perfiles que correspondan al proyecto.
Utiliza direcciones reales y autorizadas, o perfiles de demostración que no se publiquen como contactos efectivos.
Comprueba que cada URL sea correcta.
Agregar y personalizar Socials
Regresa a Apariencia → Personalizar → Footer.
Localiza el elemento Socials.
Arrástralo hacia el espacio elegido en el diseño.
Selecciónalo para abrir sus opciones.
Revisa qué redes sociales se encuentran habilitadas.
Configura la presentación de sus iconos, incluyendo tamaño, separación y colores.
Mantén suficiente contraste con el fondo del footer.
Comprueba que los enlaces conduzcan a sus destinos correctos.
Documentación oficial
Sección titulada «Documentación oficial»Social Networks Accounts — Blocksy
12. Configurar los derechos de autor
Sección titulada «12. Configurar los derechos de autor»El copyright suele ubicarse en una zona secundaria del pie de página.
Puede incluir el nombre del sitio y el año correspondiente.
Blocksy incorpora un elemento específico llamado Copyright.
Ejemplo
Sección titulada «Ejemplo»Copyright © Año — Portafolio UX/UI.
Reemplaza el nombre ilustrativo por el que corresponda al proyecto.
Variables dinámicas
Sección titulada «Variables dinámicas»La documentación de Blocksy describe valores especiales para incorporar información automáticamente.
Entre ellos se encuentran:
{current_year}para mostrar el año actual.{site_title}para mostrar el título del sitio.
Estos identificadores se escriben en el campo de texto del elemento Copyright de Blocksy.
Configurar el elemento Copyright
Dentro de Footer Builder, localiza el elemento Copyright.
Comprueba si ya se encuentra situado en una fila inferior.
Si no está presente, arrástralo hacia el área correspondiente.
Selecciónalo para abrir sus opciones.
En el campo de texto, incorpora el nombre del proyecto y el año.
Puedes utilizar las variables dinámicas admitidas por Blocksy.
Ajusta la alineación y comprueba el resultado en la vista previa.
Documentación oficial
Sección titulada «Documentación oficial»13. Personalizar colores y espaciados
Sección titulada «13. Personalizar colores y espaciados»Una vez incorporado el contenido, debemos configurar la presentación del footer.
Utilizaremos las decisiones visuales definidas en el Tutorial 05 y en el prototipo de Figma.
Opciones importantes
Sección titulada «Opciones importantes»| Ajuste | Función |
|---|---|
| Background Color | Color o configuración del fondo |
| Columns Spacing | Separación entre columnas |
| Widgets Spacing | Separación entre widgets |
| Row Vertical Spacing | Espacio interior superior e inferior |
| Container Width | Ancho del contenido de la fila |
| Vertical Alignment | Alineación vertical de las columnas |
Los controles exactos pueden encontrarse en diferentes pestañas o secciones de configuración.
¿Por qué debemos revisar estos valores?
Sección titulada «¿Por qué debemos revisar estos valores?»Una distribución visual equilibrada permite reconocer los grupos de información.
También facilita la lectura y reduce la sensación de elementos amontonados.
Configurar colores y espacios del footer
Desde Footer Builder, selecciona la fila principal.
Abre sus opciones de diseño.
Revisa el color de fondo y compáralo con el definido en Figma.
Después identifica los controles:
- Columns Spacing.
- Widgets Spacing.
- Row Vertical Spacing.
- Container Width.
Ajusta los valores de manera gradual.
Comprueba el resultado en la vista previa.
Si el texto o los enlaces pierden legibilidad, revisa también los estilos de los elementos correspondientes.
Documentación oficial
Sección titulada «Documentación oficial»14. Adaptar el footer a dispositivos móviles
Sección titulada «14. Adaptar el footer a dispositivos móviles»En las pantallas pequeñas, las columnas horizontales pueden ocupar demasiado espacio.
Por este motivo, Blocksy permite reorganizar la distribución del footer según el dispositivo.
En muchos casos, las columnas pasan a presentarse de manera vertical.
También existen opciones para configurar distribuciones más compactas.
Ejemplo conceptual
Sección titulada «Ejemplo conceptual»Escritorio
Identidad | Navegación | Contacto
Móvil
Identidad
Navegación
Contacto
La disposición debe favorecer la lectura y el acceso a los enlaces.
¿Es obligatorio utilizar una columna?
Sección titulada «¿Es obligatorio utilizar una columna?»No necesariamente.
Sin embargo, para nuestro portafolio inicial, una estructura vertical suele facilitar la lectura en teléfonos móviles.
La elección final dependerá del contenido y del espacio disponible.
Configurar las columnas en móvil
Dentro del personalizador de Blocksy, abre la sección Footer.
Cambia a la vista móvil utilizando los controles de dispositivo.
Selecciona la fila principal.
Revisa el control Columns Layout y sus alternativas para móvil.
Comprueba si el contenido aparece distribuido verticalmente.
Si tu diseño lo requiere, ajusta la distribución disponible.
Observa especialmente:
- Orden de los bloques.
- Separación vertical.
- Ancho del contenido.
- Alineación de textos.
- Posición de los enlaces.
Visibilidad responsiva
Sección titulada «Visibilidad responsiva»Blocksy también puede permitir controlar la visibilidad de determinadas filas y elementos según el dispositivo.
Esta función resulta útil cuando existe contenido secundario que no es necesario presentar en todas las pantallas.
Sin embargo, no debemos ocultar información importante únicamente porque el espacio sea reducido.
Documentación oficial
Sección titulada «Documentación oficial»Understanding the Mobile Footer — Blocksy
15. Verificar el comportamiento responsivo
Sección titulada «15. Verificar el comportamiento responsivo»Como aprendimos en el Tutorial 04, Chrome DevTools permite analizar el comportamiento del sitio en diferentes tamaños de pantalla.
Utilizaremos esta herramienta para revisar el footer.
Anchos de referencia
Sección titulada «Anchos de referencia»| Vista | Ancho de prueba |
|---|---|
| Móvil pequeño | 360 px |
| Tableta | 768 px |
| Escritorio | 1280 px |
Estos valores son dimensiones de prueba y no necesariamente corresponden a los breakpoints internos de Blocksy.
Comprobar el footer en distintos dispositivos
Abre el portafolio en Google Chrome.
Activa Chrome DevTools.
Selecciona el modo de dispositivos.
Comienza con un ancho aproximado de 360 px.
Desplázate hasta el final de la página.
Comprueba:
- Que todas las columnas sean legibles.
- Que los enlaces estén visibles.
- Que las redes sociales tengan espacio suficiente.
- Que los textos no se superpongan.
- Que no aparezca desplazamiento horizontal innecesario.
Repite la revisión con anchos de 768 px y 1280 px.
Modifica también el ancho de forma progresiva para detectar problemas intermedios.
16. Revisar accesibilidad y navegación
Sección titulada «16. Revisar accesibilidad y navegación»Un footer debe poder utilizarse correctamente con diferentes métodos de interacción.
Aspectos que debemos verificar
Sección titulada «Aspectos que debemos verificar»Contraste: los textos y enlaces deben diferenciarse de su fondo.
Foco visible: las personas que navegan mediante teclado necesitan reconocer qué elemento está activo.
Enlaces comprensibles: las etiquetas deben indicar el destino.
Orden lógico: los elementos deben seguir una secuencia de navegación razonable.
Información útil: evitar enlaces repetidos o contenidos innecesarios.
¿Qué ocurre con los enlaces externos?
Sección titulada «¿Qué ocurre con los enlaces externos?»Los enlaces hacia perfiles profesionales deben dirigir a las cuentas correspondientes.
Si se abren en otra pestaña, conviene que el comportamiento sea comprensible para el visitante.
Contraste mínimo
Sección titulada «Contraste mínimo»Como referencia de WCAG 2.2, el contraste mínimo general para texto de tamaño normal en el nivel AA es de 4,5:1.
Comprobar enlaces y navegación por teclado
Abre el sitio en el navegador.
Recorre sus elementos interactivos utilizando la tecla Tab.
Desplázate hasta el footer.
Comprueba que el foco sea visible al seleccionar los enlaces.
Utiliza Enter para activar enlaces y verificar que funcionen.
Revisa los accesos a:
- Páginas del portafolio.
- Correo profesional.
- Redes sociales.
Confirma que no existan enlaces vacíos o que conduzcan a destinos incorrectos.
Registra los problemas detectados y sus posibles soluciones.
Documentación oficial
Sección titulada «Documentación oficial»Introducción a la accesibilidad web — W3C
17. Errores frecuentes
Sección titulada «17. Errores frecuentes»Las columnas no aparecen como esperaba
Sección titulada «Las columnas no aparecen como esperaba»Posible causa: la fila tiene una distribución diferente de la definida en Figma.
Qué revisar: Columns y Columns Layout dentro de las opciones de fila.
El contenido de una columna está vacío
Sección titulada «El contenido de una columna está vacío»Posible causa: la Widget Area está presente, pero todavía no contiene bloques.
Qué revisar: Apariencia → Widgets y el área asignada a esa columna.
El menú no muestra los enlaces correctos
Sección titulada «El menú no muestra los enlaces correctos»Posible causa: el elemento utiliza otro menú de WordPress.
Qué revisar: Select Menu dentro del elemento de navegación.
Las redes sociales no aparecen
Sección titulada «Las redes sociales no aparecen»Posible causa: no se han configurado cuentas o no están habilitadas dentro del elemento Socials.
Qué revisar: Social Network Accounts y configuración de Socials.
Los colores son difíciles de leer
Sección titulada «Los colores son difíciles de leer»Posible causa: el contraste entre texto y fondo es insuficiente.
Qué revisar: colores de la fila y de los elementos particulares.
El footer se ve desordenado en móvil
Sección titulada «El footer se ve desordenado en móvil»Posible causa: la distribución o el espaciado no es adecuado para una pantalla pequeña.
Qué revisar: Columns Layout, separación entre columnas y alineaciones en vista móvil.
No encuentro un elemento mencionado en otra guía
Sección titulada «No encuentro un elemento mencionado en otra guía»Posible causa: esa funcionalidad requiere Blocksy Pro o una extensión que no está activa.
Qué revisar: la documentación oficial y la lista de elementos disponibles en tu instalación.
El footer no coincide con Figma
Sección titulada «El footer no coincide con Figma»Posible causa: diferencias de proporciones, espaciados, tipografías o contenido.
Qué revisar: el prototipo original y las opciones de fila, widgets y elementos.
18. Actividad práctica
Sección titulada «18. Actividad práctica»Implementación del footer del portafolio profesional UX/UI
Sección titulada «Implementación del footer del portafolio profesional UX/UI»El objetivo de esta actividad es construir el pie de página del portafolio utilizando Blocksy y Gutenberg.
Parte A. Analizar el prototipo
Sección titulada «Parte A. Analizar el prototipo»Abre Figma e identifica:
- Distribución del footer en escritorio.
- Distribución en móvil.
- Cantidad de columnas.
- Contenido de cada sección.
- Colores y tipografías.
- Espaciados y alineaciones.
Parte B. Construir la estructura
Sección titulada «Parte B. Construir la estructura»Dentro de Footer Builder:
- Selecciona la fila principal.
- Configura las columnas.
- Incorpora las áreas de widgets necesarias.
- Organiza el contenido respetando la estructura definida en Figma.
Parte C. Incorporar los contenidos
Sección titulada «Parte C. Incorporar los contenidos»Agrega:
- Identidad y descripción profesional.
- Enlaces de navegación.
- Información de contacto.
- Redes sociales pertinentes.
- Copyright.
Parte D. Personalizar
Sección titulada «Parte D. Personalizar»Configura:
- Color de fondo.
- Colores de textos y enlaces.
- Separación entre columnas.
- Espaciado vertical.
- Ancho del contenido.
- Alineaciones.
Parte E. Verificar
Sección titulada «Parte E. Verificar»Comprueba el resultado en:
- 360 px.
- 768 px.
- 1280 px.
Verifica también el funcionamiento de los enlaces y la navegación por teclado.
Parte F. Documentar
Sección titulada «Parte F. Documentar»Completa una tabla como esta:
| Elemento | Diseño en Figma | Configuración en WordPress | Resultado |
|---|---|---|---|
| Columnas | Completar | Completar | Completar |
| Identidad | Completar | Completar | Completar |
| Enlaces | Completar | Completar | Completar |
| Contacto | Completar | Completar | Completar |
| Redes sociales | Completar | Completar | Completar |
| Copyright | Completar | Completar | Completar |
| Distribución móvil | Completar | Completar | Completar |
Evidencias de aprendizaje
Sección titulada «Evidencias de aprendizaje»Registra:
- Footer implementado en escritorio.
- Footer implementado en móvil.
- Áreas de widgets utilizadas.
- Enlaces de navegación y contacto.
- Configuración de redes sociales.
- Comparación con el prototipo de Figma.
- Problemas detectados y ajustes realizados.
Esta actividad complementa los contenidos prácticos de la Unidad III. Los criterios formales de evaluación se encuentran en la pauta oficial de la asignatura.
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 utilizadas, consulta las siguientes referencias.
Constructor de footer
Sección titulada «Constructor de footer»Exploring the Footer Builder — Blocksy
Elementos disponibles
Sección titulada «Elementos disponibles»Getting Started with the Footer Elements — Blocksy
Configuración de filas y columnas
Sección titulada «Configuración de filas y columnas»Áreas de widgets
Sección titulada «Áreas de widgets»Menú del footer
Sección titulada «Menú del footer»Cuentas sociales
Sección titulada «Cuentas sociales»Social Networks Accounts — Blocksy
Redes sociales del footer
Sección titulada «Redes sociales del footer»Derechos de autor
Sección titulada «Derechos de autor»Diseño móvil
Sección titulada «Diseño móvil»Understanding the Mobile Footer — Blocksy
Bloques y widgets
Sección titulada «Bloques y widgets»Block-based Widgets Editor — WordPress
Funciones gratuitas y Pro
Sección titulada «Funciones gratuitas y Pro»Unavailable Elements in the Customiser — Blocksy
Próximo tutorial
Sección titulada «Próximo tutorial»En la siguiente lección trabajaremos con Gutenberg y el diseño responsivo del contenido.
Aprenderemos a utilizar bloques, grupos, columnas, imágenes y botones para construir páginas adaptables.
También revisaremos cómo corregir problemas frecuentes de visualización y cómo mantener la coherencia entre las configuraciones globales de Blocksy y el contenido creado con Gutenberg.
Todo se aplicará al portafolio profesional UX/UI desarrollado durante el semestre.