Revisar el comportamiento del diseño responsivo

Usa esta lista de comprobación después de configurar la cabecera, la subcabecera, el diseño de la plantilla, las barras laterales, el pie de página y los controles flotantes. El objetivo es verificar el marco completo con longitudes de contenido reales, no únicamente una página de demostración vacía.

Preparar URLs representativas

Incluye:

• Una página estándar con varias filas de Page Builder
• Una entrada individual larga
• Un archivo de blog o de tipo de contenido personalizado
• Un resultado de búsqueda
• Una página con una barra lateral
• Un archivo y un producto de WooCommerce cuando corresponda
• Una página que contenga las etiquetas de navegación y el contenido del pie de página más largos

Prueba con la sesión cerrada y con la sesión iniciada cuando la cabecera tenga contenido específico para el inicio de sesión.

Revisión en escritorio

• El logotipo, la navegación principal, el área de inicio de sesión y las barras opcionales no chocan entre sí.
• Los bordes interiores de la cabecera, la subcabecera, el contenido, la barra lateral y el pie de página se alinean de forma intencionada.
• La navegación transparente sigue siendo legible sobre la primera área de contenido.
• Las transiciones fija y de ocultación automática funcionan en ambas direcciones de desplazamiento.
• Los menús desplegables permanecen dentro del área de visualización.
• Las barras laterales usan el lado seleccionado y el contenido fijo no impide el acceso a los widgets inferiores.
• Los anchos de las filas del pie de página forman la cuadrícula prevista.

Revisión en tableta

• El contenido de la cabecera no se ajusta a un estado intermedio no previsto.
• El activador de navegación móvil aparece cuando se espera.
• Los títulos de la subcabecera y las rutas de navegación se ajustan sin recortarse.
• Las filas del constructor y las barras laterales de la plantilla no generan desplazamiento horizontal.
• Las columnas del pie de página siguen siendo legibles antes de apilarse.
• Los controles flotantes permanecen separados entre sí.

Revisión en móvil

• El panel móvil se abre desde el lado configurado y puede cerrarse.
• Mobile y Mobile 2 muestran los menús y títulos correctos.
• La imagen de subcabecera móvil dedicada tiene un recorte útil.
• Las rutas de navegación siguen siendo legibles y no dominan la pantalla.
• Los widgets de la barra lateral siguen al contenido principal en un orden sensato.
• Las columnas del pie de página usan el ancho móvil configurado.
• El muelle de contacto, la flecha de volver arriba y el icono secundario no cubren enlaces, formularios ni controles de consentimiento.

Revisión de interacción y accesibilidad

Completa el recorrido principal con un teclado. Confirma el foco visible, los subniveles de menú operables, los estados actuales legibles, las etiquetas descriptivas para acciones solo con icono y un contraste suficiente en los estados normal, al pasar el cursor y transparente.

También prueba:

1. El zoom del navegador al 200%.
2. Etiquetas traducidas largas donde el sitio es multilingüe.
3. Una sesión autenticada con la barra de administración visible.
4. Una imagen de fondo que carga lentamente para que el texto siga siendo comprensible.

Registrar el resultado

Para cada área de visualización, anota la URL, el ancho del navegador, el estado de la cuenta y cualquier excepción intencionada. Un diseño está listo solo cuando la excepción se explica por el ámbito correcto (marco global, plantilla de contenido o composición de Page Builder) y no por una solución local accidental.