Menú de hamburguesas Maqueta de sitio web

El menú de hamburguesas es una sección estática de tres productos cuya presentación adaptable depende del equilibrio de tarjetas horizontales repetidas. Un encabezado centrado en mayúsculas y una descripción de apoyo se sitúan sobre la hamburguesa con beicon, la hamburguesa clásica y la hamburguesa doble. En cada tarjeta, los detalles del producto, los precios y las acciones «Añadir al carrito» comparten espacio con imágenes de hamburguesas, utilizando superficies oscuras y texto claro para lograr contraste. Las tarjetas permanecen apiladas verticalmente con un espaciado uniforme, mientras que los controles amarillos deben mantenerse visibles frente al tratamiento de fondo con imagen. La nota de atribución añade contenido, pero no debe competir con las filas de productos durante la revisión visual.

Revisar el equilibrio de las tarjetas y la escala de las imágenes en anchos más estrechos

La revisión de la maqueta de este bloque debe centrarse en la relación entre los dos lados de cada tarjeta. Los nombres de los productos, los precios y las acciones «Añadir al carrito» se agrupan a la izquierda, mientras que las imágenes de las hamburguesas ocupan la derecha, creando el equilibrio visual que define las tres filas horizontales. En anchos de pantalla más estrechos, compruebe si los detalles del producto siguen siendo legibles, si las imágenes conservan suficiente presencia y si las tarjetas mantienen una separación clara entre el contenido y la fotografía.

El apilamiento vertical también merece atención, ya que tres tarjetas repetidas pueden alargar considerablemente la página cuando cambian sus proporciones internas. Compruebe el espaciado entre la hamburguesa con beicon, la hamburguesa clásica y la hamburguesa doble, así como el ajuste de línea del encabezado centrado y la descripción de apoyo situados arriba. Los precios y botones amarillos deben mantenerse visualmente diferenciados sobre el acabado oscuro de la tarjeta sin amontonarse junto al texto del producto. La presentación de una maqueta web puede utilizar estas relaciones para evaluar la sección como parte de una página más amplia, pero las preguntas clave se limitan a este bloque: cómo se adaptan las tarjetas divididas, cómo se escala la imagen y cómo se visualizan las opciones repetidas en distintos tamaños de pantalla. El bloque es estático, por lo que la revisión se centra en la adaptación del diseño más que en el cambio de estados de interacción.

Personalizar con Nicepage

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.

Descargar

Editar plantilla sin conexión

1. Descargue e instale la aplicación Nicepage para Windows y Mac. O los complementos de WordPress y Joomla desde página de descarga
2. Cree una página nueva o seleccione una existente
3. Haga clic en Agregar nuevo bloque, busque la identificación 5805552 y haga clic en Intro.

Editar plantilla en línea

Inicie Constructor en línea esta plantilla en nuestro alojamiento

Crea sitios web impresionantes

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Generador gratuito de Nicepage

Más de 15.000 plantillas

Fácil de arrastrar y soltar

Sin codificación

Compatible con dispositivos móviles

Palabras clave

Previsualiza y perfecciona esta maqueta web

Revisa el diseño en diferentes dispositivos

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.

Adapta la maqueta a diferentes pantallas

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.

Previsualiza el sitio web sin editar los controles

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.