Hasta la mejor imagen puede verse como un desastre en las dimensiones incorrectas. Te facilitamos aquí las dimensiones sugeridas para las imágenes y los distintos componentes de tu sitio.
Recuerda que las imágenes deben pesar menos de 1 MB por imagen para que la velocidad de tu web sea óptima.
Componentes con imágenes
Estos componentes en su mayor parte son gráficas o imágenes con distintas opciones y atributos.
▪️ Hero
Es una imagen con un alto definido.
Utiliza una imagen lo más amplia posible. (Ej: 1920x1080 px)
▪️ Zona de despacho
La imagen de este componente es el pequeño marcador que aparece sobre el mapa.
Te recomendamos ocupar una imagen cuadrada de 1000x1000 px.
Puede ser un pin (📍) o una versión cuadrada y limpia de tu logo sin mucho texto. Ya que la imagen se ve pequeña y el texto no se notará.
▪️ Categorías
Este componente tiene enlazadas todas las categorías de tu local, solo debes seleccionar las que quieras mostrar y subir una foto representativa de esta.
Te recomendamos una imagen lo más amplia posible para que no se estire, el componente adaptará la imagen.
Puedes editar las columnas para desktop y mobile. También puedes elegir que el nombre de la categoría se vea dentro o afuera de la imagen.
▪️ Muestra de productos destacados
Podrás colocar una galería de tus productos. La imagen a mostrar es exactamente la misma que está cargada en la información de tus productos.
Las imágenes de productos son cuadradas de 1000x1000 px.
▪️ Empezar a ordenar
Perfecto para indicar los tipos de entrega disponibles. También acomoda la imagen automáticamente y mostrará el centro de esta. Por lo mismo, intenta ocupar una imagen equilibrada al centro.
Utiliza una imagen lo más amplia posible, puede ser de 1920x1080 px, el componente adaptará la imagen.
Recuerda que su apariencia puede variar al ajustarse a cada tipo de pantallas y dispositivos.
▪️ Slider
Lo conocemos también como carrusel de imágenes. No hay una medida exacta ya que puede variar según lo que se requiera. Siempre deben ser todas las imágenes del mismo tamaño, solo varía si es para desktop o mobile. Te dejamos 3 alternativas:
| GRANDE | MEDIANO | PEQUEÑO |
🖥️ Desktop | 1600x750 px | 1600x550 px | 1600x300 px |
📱 Mobile | 800x800 px | 800x600 px | 800x400px |
▪️ Imagen con mensaje
Es una imagen que puedes acompañar de un título y un párrafo.
La imagen puede ser cuadrada de 1000x1000 px o rectangular de 1000 px por hasta 1400 px (vertical u horizontal).
▪️ Solo una imagen
Tal como dicta el nombre es una imagen, nada más ni nada menos.
Puedes cargar la imagen para desktop de 1600px de ancho y hasta 2000px de alto. Y la de mobile de 800px de ancho y hasta 1600px de alto.
✌️ Un consejo Justo: utiliza este componente para crear un banner / cinta / huincha. Utiliza las medidas sugeridas del Slider para la imagen. |
▪️ Imagen con mensaje completa
Es lo mismo que la imagen con mensaje, pero además puedes añadir un botón. Automáticamente deja la imagen centrada y cuadrada.
Lo ideal es que la imagen sea cuadrada de al menos de 800x800 px.
Si añades un párrafo grande de texto, la imagen se acomodará a este y cambiará su alto.
▪️ Locales
Añade una ficha de cada local junto a su dirección, número de teléfono, nombre e información adicional como horarios, correo electrónico, etc.
Cada ficha viene acompañada de una foto. Esta debe ser de 830x500 px.
Los locales se muestran en 4 columnas en desktop y 1 en mobile.
▪️ Formulario de contacto
Ingresa un formulario para que los clientes puedan contactarse contigo. Añade el mail al que llegarán los formularios, un título y un párrafo de texto.
Opcionalmente puedes añadir una imagen de 840x100 px.
Los campos a rellenar son nombre, mail y mensaje, no se pueden añadir o quitar campos de momento.
▪️ Múltiples textos con mensaje
Este componente te permite subir más de una imagen junto a un título y párrafo.
Puedes usar una imagen cuadrada de 800x800 px o rectangular de 1000 px por hasta 1400 px (vertical u horizontal).
Estás imágenes se irán intercalando de posición.
▪️ Galería
Para añadir todas las imágenes que quieras.
Deben ser cuadradas de 1000x1000 px.
Puedes añadirles un título y un párrafo de texto a cada una y editar el número de columnas para desktop y mobile.
▪️ Popup
Usa esta ventana emergente para dar mensajes cortos o dirigir a los visitantes a un link, puedes añadirle texto y una imagen opcional.
La imagen puede ser cuadrada de 1000x1000 px o rectangular de 1000 px por hasta 1400px (vertical u horizontal).
Otras imágenes
▪️ Banner
Añade tus gráficas al componente Slider o Solo una imagen!
Puedes utilizar cualquier medida ya que la plataforma adaptará la imagen.
Te dejamos las siguientes medidas en caso de que necesites:
Para desktop/web: 1600x500 px
Para mobile: 800x600 px
▪️ Imagen de ingreso
Cuando ingresas al sitio, tanto tus clientes como tus colaboradores deberán ingresar su correo electrónico. Aquí el sitio también es acompañado con una imagen.
Las dimensión ideal para esta imagen es no menos de 1200 x 760 px
▪️ Imágenes de los productos
Estas imágenes son de las más importantes en tu sitio web. La primera impresión de tu producto determina si se concreta la compra o no.
Estas imágenes deben ser de un mínimo de 800 x 800 px y un máximo de 1080 x 1080 px. Por ende, deben ser cuadradas. No rectangulares.
Otras consideraciones
Intenta que tus imágenes no pesen más de 1 MB. Principalmente porque hacen que tu sitio sea más "pesado" y difícil de cargar.
Utiliza nombres claros para los archivos de tus imágenes.
Ten una amplia selección de fotografías: de tus productos individualmente, de tus productos en grupo, de tu local, etc.
✌️ Un consejo Justo
Puedes hacer click en el botón Previsualizar antes de guardar tu nuevo componente. De esta forma podrás revisar su aspecto final y hacer correcciones antes de que se publiquen.