Banner Grande

Este componente permite-te apresentar uma secção para destacar e evidenciar algo importante sobre a tua loja. Alguns exemplos de utilização podem ser:

• Mostrar uma funcionalidade.
• Destacar uma categoria relevante.
• Destacar um produto que queiras que os clientes vejam ou que tenha um grande desconto.

Configurações do componente

Ao clicar no nome do componente, encontrarás opções gerais para o personalizar, as quais determinarão o aspeto e o comportamento da secção. As opções disponíveis para este componente são as seguintes:

Largura

Permite definir a largura máxima que o componente ocupará na janela do navegador.

Podes ler mais sobre como esta opção afeta o componente nesta página.

Nota: o tamanho das imagens que podes carregar variará consoante a opção escolhida aqui. Estas são explicadas em detalhe nesta secção da página.

Tipo de media

Permite definir que tipo de elemento de media será utilizado como fundo do componente:

• Imagem: apresenta duas opções de imagem para carregamento. Ao carregares a primeira, ficará disponível uma segunda para telemóveis. Caso contrário, a imagem anterior será usada em todos os dispositivos.
• Vídeo: apresenta uma opção de Fonte de vídeo para adicionar e utilizar um vídeo a partir de um URL externo ou do YouTube. Ao fazê-lo, surgirá uma segunda opção para carregar um vídeo diferente para telemóveis.

Ao escolher Imagem, as seguintes opções ficarão disponíveis para definir aspetos das imagens:

• Opções de computador: permitem definir a posição horizontal e vertical da imagem em computadores.
• Opções de telemóvel: permitem definir a posição horizontal e vertical da imagem em telemóveis.

Nota 1: O posicionamento vertical e horizontal é mais visível quando as imagens são maiores do que a área da secção — por exemplo, se esta tiver uma dimensão vertical e a imagem carregada for retangular.

Nota 2: Computador considera dispositivos com largura igual ou superior a 576px. Já o telemóvel aplica-se a dispositivos com largura igual ou inferior a 575px.

Ao escolher Vídeo, este será centrado horizontal e verticalmente e cobrirá toda a área do componente.

Opções de link

De seguida, encontrarás várias opções para adicionar um link ao banner:

• Link: permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, etc.
• Mostrar imagem do link: permite exibir a imagem do link selecionado (para produtos, categorias e páginas), caso tenha sido adicionada através do painel de administração.
• Texto do link: texto que será exibido dentro do link.
• Link externo: se ativado, o link será aberto numa nova aba do navegador.

Se tiveres ativado a opção Mostrar conteúdo do Banner, apresentada abaixo, ficarão disponíveis as seguintes opções:

• Link como botão: se ativado, será exibido um botão juntamente com o conteúdo do banner.
• Estilo contorno: permite que o botão tenha uma borda em redor e um fundo transparente.
• Seta no botão: exibe um ícone de seta à direita do texto do botão.

Mostrar conteúdo do Banner

Ao ativar esta opção:

• O banner exibirá elementos de conteúdo (por exemplo: título, descrição, etc.).
• Várias opções ficarão disponíveis nas definições do componente, permitindo personalizar cada um desses elementos.
• As imagens serão utilizadas como fundos e adaptar-se-ão de acordo com a largura e altura definidas.

As opções exibidas serão as seguintes:

• Altura: permite definir uma altura mínima para todo o banner, com base nas seguintes opções:
  • Ajustar ao conteúdo: a altura da secção será determinada pelo conteúdo adicionado no componente, como Título, Descrição, etc.
  • Pequena: a altura mínima da secção será de 420px.
  • Média: a altura mínima da secção será de 560px.
  • Grande: a altura mínima da secção será de 720px.
  • Navegador: a altura mínima da secção será igual à altura da janela do navegador onde a loja é visualizada, podendo variar consoante o dispositivo.
• Largura máxima do conteúdo no computador: permite definir o espaço máximo que o conteúdo ocupará dentro do banner.
• Borda interna: permite exibir uma borda em redor de todos os lados do banner.
• Sobreposição (Overlay): permite definir a opacidade (ou transparência) deste elemento. Podes ler mais sobre isto nesta página.
• Posição da imagem: este grupo de opções permite definir como as imagens carregadas se comportarão em computadores e telemóveis.
• Opções de elementos: dentro deste grupo encontrarás opções para personalizar elementos como título, subtítulo e descrição/texto, explicadas em detalhe nesta página.
• Opções de computador e telemóvel: encontrarás dois grupos de opções que permitem definir o alinhamento e a posição do conteúdo dentro do banner, tanto para computador como para telemóveis.

Nota 1: refere-se a uma altura mínima, pois esta variará conforme a quantidade ou extensão do conteúdo adicionado no componente.

Nota 2: o tamanho das imagens carregadas variará consoante a combinação de largura e altura definidas. Isto é explicado em detalhe nesta secção.

Aparência

Este grupo contém as seguintes opções para personalizar o componente:

• Cores do conteúdo: permite escolher o Pacote de Cores para o conteúdo do componente, quando a opção Mostrar conteúdo do Banner estiver ativada.
• Margem superior: permite controlar a margem superior da secção.
• Margem inferior: permite controlar a margem inferior da secção.
• Cor de fundo do componente: permite escolher o Pacote de Cores para o componente, que afetará apenas a cor de fundo.

Animações

A opção Personalizar opções permite ajustar as animações para este componente específico. Podes consultar quais estão disponíveis nesta página.

---

---

Tamanhos de imagens

As dimensões mínimas sugeridas nas tabelas abaixo variam consoante a combinação das opções Largura e Altura dentro das definições do componente.

As dimensões para dispositivos computador consideram aqueles com largura igual ou superior a 576px, enquanto para telemóveis aplicam-se aos dispositivos com largura igual ou inferior a 575px:

Largura: Grelha

Altura	Computador	Telemóvel
Ajustar ao conteúdo	1320 x 300 px	575 x 320 px
Pequena	1320 x 420 px	575 x 420 px
Média	1320 x 560 px	575 x 560 px
Grande	1320 x 720 px	575 x 720 px
Navegador	1320 x 850 px	575 x 820 px

Largura: Média

Altura	Computador	Telemóvel
Ajustar ao conteúdo	1620 x 300 px	575 x 320 px
Pequena	1620 x 420 px	575 x 420 px
Média	1620 x 560 px	575 x 560 px
Grande	1620 x 720 px	575 x 720 px
Navegador	1620 x 850 px	575 x 820 px

Largura: Grande

Altura	Computador	Telemóvel
Ajustar ao conteúdo	1920 x 300 px	575 x 320 px
Pequena	1920 x 420 px	575 x 420 px
Média	1920 x 560 px	575 x 560 px
Grande	1920 x 720 px	575 x 720 px
Navegador	1920 x 850 px	575 x 820 px

Largura: Extra Grande

Altura	Computador	Telemóvel
Ajustar ao conteúdo	2220 x 300 px	575 x 320 px
Pequena	2220 x 420 px	575 x 420 px
Média	2220 x 560 px	575 x 560 px
Grande	2220 x 720 px	575 x 720 px
Navegador	2220 x 850 px	575 x 820 px

Largura: Navegador

Altura	Computador	Telemóvel
Ajustar ao conteúdo	2800 x 300 px	575 x 320 px
Pequena	2800 x 420 px	575 x 420 px
Média	2800 x 560 px	575 x 560 px
Grande	2800 x 720 px	575 x 720 px
Navegador	2800 x 850 px	575 x 820 px

Nota: ao definir Navegador dentro das opções de Largura e Altura, é recomendável testar como as imagens são exibidas em diferentes dispositivos, para garantir que não fiquem pixelizadas.