Banners

O propósito deste componente é permitir-te destacar funcionalidades ou informações sobre a tua loja, com conteúdo que pode incluir promoções, categorias em destaque, produtos, entre outros que queiras apresentar.

Configurações do componente

Ao clicar no nome do componente, encontrarás opções gerais para o personalizar, que determinarão o aspeto e o comportamento da secção, bem como dos seus subcomponentes (Banners). 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 dentro de cada Banner variará consoante a opção escolhida aqui. Estas estão explicadas em detalhe nesta secção da página.

Número de colunas no computador

Permite definir o número de banners que serão exibidos numa única linha horizontal para computadores com largura igual ou superior a 768px.

Nota: Ao escolher 4 colunas, o número de banners em ecrãs de computador mais pequenos será automaticamente ajustado para 2 colunas, de forma a manter uma boa visibilidade do conteúdo.

Número de colunas no telemóvel

Permite definir o número de Banners que serão exibidos numa única linha horizontal para telemóveis com largura igual ou inferior a 767px.

Espaço entre

Esta opção permite definir se existirá ou não espaço entre os banners.

Nota: esta opção só estará visível e disponível se o valor definido em Espaçamento dentro de Definições do tema > Design > Estilos do tema for diferente de Nenhum.

Exibição

Permite definir se o conteúdo do componente será exibido dentro de uma secção do tipo Carrossel ou Grelha.

Podes saber mais sobre as diferenças entre estes dois tipos nesta página.

Opções do Carrossel

Este grupo de opções ficará visível quando escolheres Carrossel e permitirá personalizar o seu comportamento.

Podes encontrar a lista completa de opções nesta página.

Conteúdo dos Banners

Ao ativar esta opção:

• Os Banners exibirão elementos de conteúdo (por exemplo: título, descrição, etc.).
• Várias opções ficarão visíveis nas definições do componente, permitindo personalizar cada um desses elementos.
• Várias opções ficarão visíveis em cada Banner para personalizar aspetos individuais.
• As imagens dos banners serão utilizadas como fundos e adaptar-se-ão de acordo com a opção de Proporção da imagem definida.

As opções que serão exibidas no painel principal do componente são as seguintes:

• Posição: permite definir a posição em que o conteúdo dos banners será exibido:
  • Sobre a imagem: o conteúdo será exibido por cima das imagens, fazendo com que a imagem defina a altura de cada banner.
  • Após a imagem: o conteúdo será exibido depois da imagem.
• Proporção da imagem: permite definir as dimensões dos banners. As imagens adaptar-se-ão ao espaço disponível, tanto vertical como horizontalmente.
• 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.
  • Nota: as opções para personalizar descrições só aparecerão se a opção Posição for igual a Após a imagem.

Opções de cabeçalho

Ao ativar esta opção, será exibida uma secção de Cabeçalho antes do conteúdo do componente. Podes consultar a lista de opções nesta página.

Aparência

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

• Margem superior: permite controlar a margem superior da secção.
• Margem inferior: permite controlar a margem inferior da secção.
• Cores do conteúdo: permite escolher o Pacote de Cores para o componente.

Animações

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

---

---

Configurações do subcomponente

O subcomponente de um Banners chama-se Banner, e podes adicionar quantos quiseres. As opções para este subcomponente são as seguintes:

Opções de imagem

As seguintes opções permitem definir as imagens para cada banner e determinar como serão exibidas e comportar-se-ão:

• Imagem: apresenta duas opções de imagem para carregamento. Ao carregar a primeira, será disponibilizada uma segunda para telemóveis. Caso não o faças, a imagem anterior será usada em todos os dispositivos.
• Sobreposição: permite definir a opacidade (ou transparência) deste elemento. Podes ler mais sobre isto nesta página.
• 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 percetível quando as imagens são maiores do que a área do slide — por exemplo, se a área 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.

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.
• Texto do link: texto que será exibido dentro do botão.
• Link externo: se ativado, o link será aberto numa nova aba do navegador.
• Link visível: se ativado, será exibido um botão juntamente com o conteúdo do banner, e as seguintes opções ficarão disponíveis:
  • Link como texto: permite alterar o estilo do botão para ser apenas texto.
  • Estilo contorno: se o estilo for um botão, exibirá uma borda e um fundo transparente; se for texto, exibirá uma linha na parte inferior.
  • Seta no link: exibe um ícone de seta à direita do texto do link.

Opções de conteúdo

Neste grupo encontrarás várias opções para adicionar conteúdo a um banner, que só serão exibidas na loja se tiveres ativado a opção Conteúdo dos Banners dentro das definições principais do componente:

• Largura máxima no computador: permite definir o espaço máximo que o conteúdo ocupará dentro do slide.
• Os seguintes elementos de conteúdo estarão disponíveis:
  • Subtítulo
  • Título
  • Descrição: apenas se a opção Posição nas definições principais do componente for igual a Após a imagem.
• Cores do conteúdo: permite definir o Pacote de Cores a ser usado no banner, o que afetará todas as cores dos elementos dentro dele.
• Computador: permite definir o alinhamento e a posição do conteúdo em computadores.
• Telemóvel: permite definir o alinhamento e a posição do conteúdo em telemóveis.

Nota: Para as opções de alinhamento e posicionamento, Computador considera dispositivos com largura igual ou superior a 576px, e Telemóvel considera dispositivos com largura igual ou inferior a 575px.

---

---

Tamanhos de imagens

As dimensões sugeridas nas tabelas abaixo variam consoante a combinação e variações de várias opções das definições principais do componente.

Quando optares por ativar as opções Mostrar conteúdo dos Banners, Número de colunas no computador e Número de colunas no telemóvel nas definições do componente:

Conteúdo dos Banners: ativado

Ao ativar esta opção, as dimensões das imagens dependerão das escolhas feitas nas seguintes opções:

• Colunas no computador
• Colunas no telemóvel
• Proporção da imagem

Nota: considera que as dimensões seguintes são sugestões baseadas em medidas mínimas.

Computador

Proporção / Número de colunas	4 colunas	3 colunas	2 colunas	1 coluna
Horizontal	306 x 172 px	416 x 234 px	636 x 358 px	1296 x 729 px
Vertical	306 x 408 px	416 x 555 px	636 x 848 px	1296 x 1728 px
Retangular	306 x 230 px	416 x 312 px	636 x 477 px	1296 x 972 px
Quadrada	306 x 306 px	416 x 416 px	636 x 636 px	1296 x 1296 px

Telemóvel

Proporção / Número de colunas	2 colunas	1 coluna
Horizontal	366 x 206 px	527 x 297 px
Vertical	366 x 488 px	527 x 703 px
Retangular	366 x 275 px	527 x 396 px
Quadrada	366 x 366 px	527 x 527 px

Conteúdo dos Banners: desativado

Ao desativar esta opção, apenas será especificada a Largura mínima sugerida, uma vez que a Altura de cada Banner dependerá dos píxeis de cada imagem carregada, em combinação com as definições de Número de colunas tanto para computador como para telemóvel.

Computador

4 colunas	3 colunas	2 colunas	1 coluna
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px

Telemóvel

2 colunas	1 coluna
366 px	527 px
366 px	527 px
366 px	527 px
366 px	527 px