Guia de imagens

Este guia traz orientações essenciais sobre como criar imagens adequadas para os componentes do LUCA SUPER TEMA no seu projeto. Seguir esses padrões garante uma melhor adaptação das imagens, proporcionando um design mais harmonioso e otimizado para diferentes dispositivos.

Tamanhos padrões​

Para a maioria dos componentes, utilizamos três proporções universais de imagens:

• Quadrado (1:1)

  • 📏 Tamanho recomendado: 600px de largura x 600px de altura

• Vertical (3:4)

  • 📏 Tamanho recomendado: 600px de largura x 1075px de altura

• Horizontal (4:3)

  • 📏 Tamanho recomendado: 600px de largura x 335px de altura

Componentes que utilizam esses tamanhos

• Quadrado (1:1)

  • Lista de Categorias

  • Galeria Vertical

• Vertical (3:4)

  • Carrossel de Produto com Capa

• Horizontal (4:3)

  • 1x Vertical

  • 4x Horizontal

  • 4x Quadrado (somente no mobile)

---

Banner Curto​

Os banners possuem duas áreas importantes:

📌 Área Total: O tamanho máximo que a imagem pode ocupar na tela.

📌 Área de Segurança: A zona onde devem estar as informações essenciais, garantindo que elas sejam sempre visíveis em diferentes telas e resoluções.

Dimensões para Desktop

📏 Área total: 1920px de largura x 384px de altura (pode variar conforme a largura da loja).

📌 Área de segurança: 1280px de largura x 384px de altura.

Dimensões para Mobile

📏 Área total: 744px de largura x 384px de altura (pode variar conforme a largura da loja).

📌 Área de segurança: 320px de largura x 384px de altura.

Componentes que utilizam esses tamanhos​

• Cabeçalho Curto

---

Banner Médio​

Segue a mesma lógica do Banner Curto, mas com uma altura maior.

Dimensões para Desktop

📏 Área total: 1920px de largura x 568px de altura (pode variar conforme a largura da loja).

📌 Área de segurança: 1280px de largura x 568px de altura.

Dimensões para Mobile

📏 Área total: 744px de largura x 568px de altura (pode variar conforme a largura da loja).

📌 Área de segurança: 320px de largura x 568px de altura.

Componentes que utilizam esses tamanhos​

• Banner Principal

---

Banner Heróico​

O Banner Heróico se adapta automaticamente à altura do navegador do usuário, proporcionando uma experiência imersiva.

Dimensões para Desktop

📏 Área total: 1920px de largura x 1080px de altura (pode variar conforme a largura da loja).

📌 Área de segurança: 1280px de largura x 1080px de altura.

Dimensões para Mobile

📏 Área total: 744px de largura x 1133px de altura (pode variar conforme a largura da loja).

📌 Área de segurança: 320px de largura x 1133px de altura.

Componentes que utilizam esses tamanhos​

• Galeria Heróica Interativa

• Banner Heróico

• Cabeçalho Heróico

• Galeria Moderna Heróica

Dicas para uma Melhor Adaptação das Imagens

✅ Sempre priorize a área de segurança para garantir que textos e elementos importantes não fiquem cortados.

✅ Utilize imagens de alta qualidade e otimizadas para web, evitando arquivos muito pesados que possam comprometer o carregamento da loja.

✅ Evite margens excessivas na imagem, pois o corte pode variar dependendo do layout e dispositivo.

✅ Considere o alinhamento do conteúdo dentro das imagens para garantir um visual harmônico em diferentes telas.

Se tiver dúvidas ou sugestões, estamos à disposição no Discord ou por e-mail. Estamos aqui para ajudar!