Aprende › Diseño de Menú › Vitrina: categorías y tarjetas

Imagen, nombre, descripción y precio

Lección 26 de 51 · 2 min

El video de esta lección llega pronto.

Mientras tanto, sigue los pasos escritos.

Al terminar sabrás

  • Mostrar u ocultar imagen, descripción y precio
  • Ajustar la altura de la imagen
  • Dar tipografía propia al nombre, la descripción y el precio

En el panelTu Menú › Diseño del menú › Vitrina › Contenido › Categoría › Diseño personalizado › Imagen / Nombre / Descripción / Precio

Cada pieza de la tarjeta tiene su propio grupo con su interruptor: Imagen, Nombre del producto, Descripción y Precio. Enciende solo los que quieras cambiar: el resto sigue el estilo global.

Imagen › Mostrar la imagenUn interruptor para mostrar u ocultar la foto del producto.
Imagen › Altura de la imagenEn píxeles (0 a 320). 0 la deja cuadrada: la imagen rellena el espacio sin deformarse.Una altura menor que el ancho da tarjetas más compactas y apaisadas.
Nombre del producto › Tipografía del nombreEl editor de tipografía completo.
Nombre del producto › Si no entra, saltar de línea (en vez de cortar)Un interruptor. Encendido, el nombre se muestra completo en varias líneas; apagado, se corta con puntos suspensivos.Enciéndelo si tus platos tienen nombres largos.
Descripción › Mostrar la descripciónUn interruptor, más su Tipografía de la descripción.Apágala en la vista Mini o si tus descripciones son muy largas.
Precio › Mostrar precioUn interruptor para mostrar u ocultar el precio.
Precio › Tipografía del precioEl editor de tipografía, con alineación (Izquierda, Centro o Derecha).
Texto de disponibilidad (productos con horario limitado)La tipografía del aviso de los productos que solo se piden en ciertos días u horas. Se aplica a todo el menú: también al aviso del detalle del producto y a «No sale por Delivery».

Una tarjeta con jerarquía clara

  1. Enciende el grupo Nombre del producto y pon Grosor en Negrita y un Tamaño un poco mayor.
  2. Enciende Descripción y baja su Tamaño y su opacidad de color (un gris suave).
  3. Enciende Precio y dale tu color de acento con Grosor Seminegrita.
  4. Mira el lienzo y ajusta hasta que el orden de lectura sea nombre, precio, descripción.
OpcionalPon a prueba lo que aprendiste2 ejercicios

Ejercicios opcionales: 0 de 2 acertados

Los ejercicios son opcionales: si los haces y aciertas todos, la lección se completa sola. Si no, márcala tú.

¿Algo no coincide con lo que ves en tu panel? Cuéntanos.