Marquee

Um Marquee é uma faixa de conteúdo que se desloca horizontalmente de forma contínua pelo ecrã, frequentemente utilizada para destacar mensagens curtas, anúncios ou pontos de venda chave. Provavelmente já o viu como uma linha de texto que se repete, como “Envio gratuito para todo o mundo” ou “Novidades semanais”, deslizando suavemente de um lado para o outro.

Este tipo de componente é especialmente útil para lojas online porque capta a atenção sem interromper a experiência de navegação. Ao contrário de popups ou banners, um Marquee é subtil mas dinâmico: mantém informação importante visível enquanto adiciona uma sensação de movimento e energia à sua loja.

As lojas utilizam frequentemente o Marquee para promover ofertas em curso, destacar benefícios (como devoluções gratuitas ou pagamentos seguros), ou reforçar a mensagem da sua marca. Como o conteúdo se repete continuamente, garante que os visitantes acabarão por ver a mensagem, independentemente do momento em que chegam à página.

Quando utilizado de forma cuidada, um Marquee pode melhorar a comunicação, orientar as decisões dos clientes e tornar a sua loja mais animada e atrativa, tudo sem ocupar demasiado espaço.

Funciona através da utilização e adição de vários subcomponentes dentro dele, chamados Items, com conteúdo no interior e diversas opções para os personalizar.

---

Configurações do componente

Ao clicar no nome do componente encontrará opções gerais para o personalizar, que determinarão como a secção se apresentará e se comportará. As opções disponíveis para este componente são as seguintes:

Largura

Permite definir a largura máxima que o componente se estenderá até à janela do browser.

Pode ler mais sobre como esta opção irá afetar o componente em esta página.

Alinhamento

Encontrará duas opções para escolher o alinhamento tanto em dispositivos desktop como móveis dos subcomponentes desta secção.

Como pode adicionar imagens e texto dentro de cada item, o alinhamento irá organizá-los da seguinte forma:

• Esquerda: imagem à esquerda, texto à direita.
• Centro: imagem no topo, seguida do texto.
• Direita: imagem à direita, texto à esquerda.

Comportamento

Este grupo de opções permite-lhe controlar e personalizar certas definições relacionadas com o comportamento do componente.

Direção

Define a direção horizontal na qual o componente se anima.

Velocidade

Define a velocidade da animação.

Quantidade de clones

Uma vez que os itens do componente têm de se repetir para criar a transição fluida que faz parecer que está a deslocar-se infinitamente, estarão contidos dentro de um grupo.

Ao definir o número nesta opção, poderá estabelecer quantos grupos repetidos (clonados) o componente terá.

Por exemplo, se vir espaços vazios no lado esquerdo ou direito (dependendo da opção Direção), poderá precisar de aumentar a “quantidade de grupos” para que o componente consiga preencher esses “espaços”.

Pode ler e encontrar exemplos e cenários de uso mais abaixo em esta secção da página.

Igualar largura dos itens

Permite que todos os itens tenham exatamente a mesma largura, independentemente da extensão ou quantidade de conteúdo dentro deles.

Parar ao passar o cursor

Permite parar a animação do componente quando um utilizador coloca o cursor sobre ele.

Isto pode ser útil se os itens forem clicáveis e/ou tiverem ligações, e pretender que os clientes consigam clicar neles sem qualquer problema.

Opções de imagem (Geral)

Este grupo de opções fornece certas definições para controlar como as imagens que pode adicionar e apresentar em cada item se comportarão.

Apresentação

Define como as imagens se adaptarão ao espaço disponível relacionado com o Proporção (dimensão) selecionado abaixo.

• Redimensionar: As imagens adaptar-se-ão o máximo possível à dimensão do espaço disponível.
• Cortar: Preencherá todo o espaço disponível com a maior parte da imagem.

Tamanho

Define o tamanho da imagem com base em opções predefinidas para dispositivos desktop e móveis, da seguinte forma:

• Pequeno:
  • Desktop: 50px
  • Móvel: 40px
• Médio:
  • Desktop: 75px
  • Móvel: 65px
• Grande:
  • Desktop: 100px
  • Móvel: 90px
• Extra grande:
  • Desktop: 125px
  • Móvel: 115px

Com estes tamanhos em mente, pode conhecer a medida máxima para a largura e altura de cada imagem. Isto significa que idealmente não deverá carregar nem utilizar imagens maiores do que a que selecionou.

Proporção

Permite definir a dimensão para apresentar as imagens.

Forma

Permite definir a forma em que todas as imagens serão apresentadas.

Opções de título

Ao ativar a opção Mostrar títulos dentro deste grupo, as seguintes ficarão disponíveis para utilizar:

Tipo de letra

Define qual tipo de letra utilizar, com base nos selecionados em Definições do tema > Tipos de letra.

Outros estilos

As seguintes opções permitem aplicar estilos a todos os títulos dos itens:

• Peso
• Espaçamento entre letras
• Maiúsculas

Aparência

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

• Mostrar máscara: apresenta um degradado de cor difundida nos lados esquerdo e direito do componente para que os itens se misturem com a cor de fundo do componente.
• Espaço esquerdo e direito: mostra ou remove o espaço esquerdo e direito entre o componente e a janela do browser.
• Cores do conteúdo: permite escolher o Pacote de cores para o componente.
• Margem superior: permite controlar a margem superior da secção.
• Margem inferior: permite controlar a margem inferior da secção.

---

---

Configurações do subcomponente

Como foi mencionado anteriormente, o subcomponente de um componente Marquee chama-se Item, e pode adicionar tantos quantos desejar. As opções para este subcomponente são as seguintes:

Título

Este campo permite apresentar um texto dentro do item.

Se ficar vazio, terá necessariamente de adicionar uma imagem para que algo seja apresentado nele.

Ligação

Esta opção permite-lhe fazer com que todo o item seja uma ligação. Ao escolher uma, as seguintes opções ficarão disponíveis:

• Imagem da ligação: se estiver ativado e a ligação que escolher for uma categoria, produto ou página, a sua imagem será apresentada desde que tenha uma.
• Texto da ligação: não visível para os comerciantes, mas útil para que os browsers apresentem um texto quando os utilizadores passam o cursor sobre o item.
• Ligação externa: a ligação será aberta num novo separador do browser.

Opções de imagem

Dentro deste grupo de opções poderá carregar uma imagem personalizada para cada item.

Se tiver adicionado uma Ligação e também ativado Imagem da ligação, quando carregar uma imagem aqui ela substituirá a que provém daqui.

Assim que carregar a primeira imagem, ficará disponível uma segunda opção para adicionar outra especificamente para dispositivos móveis. Se não carregar nenhuma, a anterior será utilizada para todos os dispositivos.

Nota: os tamanhos para as imagens que precisará de carregar podem ser encontrados em esta secção da página.

---

---

Resolução de problemas

Como foi mencionado anteriormente, o componente Marquee pode apresentar alguns espaços vazios no lado direito e/ou no final da sequência de itens.

Se isso acontecer, há algumas coisas que pode fazer dentro das configurações do componente para que funcione corretamente. Os cenários mais comuns podem dever-se a:

Poucos itens

Se o componente não tiver demasiados itens (ex. dois ou três no máximo), o que é perfeitamente aceitável, pode aumentar o valor da opção Quantidade de clones até ao ponto em que deixe de ver o espaço e, portanto, o componente consiga cobri-lo e funcionar corretamente.

Poucos clones

Pelo contrário, mesmo que tenha muitos itens adicionados no componente e ainda assim não consiga cobrir a sequência e os espaços vazios continuem visíveis, pode tentar continuar a aumentar o valor da opção Quantidade de clones para obter o mesmo efeito mencionado anteriormente.

Igualar larguras

Se nada do que foi referido acima funcionar e continuar a ver espaços vazios na sequência, pode tentar desativar a opção Igualar largura dos itens para que a largura de todos os seus itens respeite a quantidade de conteúdo que têm e cubra todo o espaço disponível do componente.