El bloque se basa en un encabezado centrado seguido de seis tarjetas blancas de elementos destacados organizadas de tres en tres en dos filas. Esa estructura es la relación principal que se debe revisar en el mockup de un sitio web adaptable. En anchos más estrechos, es posible que las columnas de tarjetas deban apilarse o comprimirse, por lo que las preguntas visuales clave son si cada etiqueta sigue siendo prominente, si los párrafos complementarios se ajustan cómodamente y si los espacios continúan separando los elementos contiguos.
Las tarjetas contienen iconos circulares con marca de verificación y etiquetas para Afirmaciones, Infinitivo, Lecciones GRATIS, Vocabulario, El mejor equipo y Soporte 24/7. Dado que el icono y la etiqueta en mayúsculas establecen el inicio de cada elemento repetido, su alineación debe mantenerse uniforme a medida que cambia el ancho de las tarjetas. Los párrafos más pequeños en cursiva oscura también necesitan suficiente interlineado para ser legibles sobre las superficies blancas. El fondo azul cian brillante debe continuar enmarcando las tarjetas sin sobrecargar el texto.
El encabezado serif blanco y centrado merece una comprobación independiente de su salto de línea y equilibrio vertical. Si ocupa más líneas en una pantalla estrecha, la distancia entre la introducción y la primera fila puede cambiar. Por lo tanto, revisar el bloque en múltiples anchos implica evaluar la relación entre la altura del encabezado, el apilamiento de las tarjetas, la alineación de los iconos, la longitud de los párrafos y la altura total de la sección, en lugar de limitarse a comprobar si los seis elementos siguen presentes.
Al utilizar Creador de maquetas de sitios web, podrá ajustar los colores, las fuentes, el encabezado y el pie de página, el diseño, las columnas y otros elementos de diseño, así como el contenido y las imágenes.
Usa los Modos adaptables para ver cómo se ve el diseño web en pantallas grandes, ordenadores de escritorio, portátiles, tabletas y teléfonos. Cambia entre las vistas disponibles para comparar el mismo diseño en diferentes anchos de pantalla y revisa cómo la tipografía, las imágenes, el espaciado, la navegación y otros contenidos se adaptan a cada dispositivo.
Nicepage ofrece herramientas de diseño web adaptable para ajustar las vistas de cada dispositivo cuando el diseño inicial necesita ajustes. Puedes personalizar las vistas móviles por separado, cambiar el tamaño y la posición de los elementos, adaptar cuadrículas, listas y galerías, y ocultar elementos o bloques seleccionados en tamaños de pantalla específicos. Esto permite desarrollar una maqueta web adaptable en lugar de evaluar el diseño en un único tamaño de escritorio fijo.
Usa Vista previa de página en vivo para revisar el diseño sin la interfaz de edición. La vista previa instantánea puede ocultar el Navegador de páginas, el Panel de propiedades, las selecciones y los marcos, lo que facilita la evaluación de la presentación general, la jerarquía del contenido y el diseño adaptable tal como lo vería un visitante.
Este flujo de trabajo convierte la plantilla en una útil maqueta de sitio web adaptable para visualizar, comparar y perfeccionar cómo se verá el mismo diseño en diferentes tamaños de pantalla.