Slider

Este componente é um dos tipos de secções mais utilizados e aplicados em sites. Permite adicionar e mostrar vários subcomponentes dentro dele, chamados Slide, com múltiplos conteúdos e diversas opções para os personalizar.

Definições do componente

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

Largura

Permite definir a largura máxima à qual o componente se ajustará 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 Slide variará conforme a opção que escolheres aqui. Estas são explicadas em detalhe nesta secção.

Opções do Slider

As seguintes opções permitem-te personalizar o seu comportamento:

• Autoplay: permite que o Carrossel se mova automaticamente de um elemento para o outro.
  • Velocidade de Autoplay: permite definir o tempo que levará a executar a opção anterior.
• Setas: permite mostrar setas por baixo do Carrossel para que os utilizadores o possam controlar.
  • Setas ao passar o cursor: permite mostrar as setas apenas quando o utilizador coloca o cursor sobre o componente.
• Pontos: permite mostrar pontos por baixo do Carrossel para que os utilizadores o possam controlar.
• Cor de navegação personalizada: permite definir manualmente a cor dos elementos de navegação.

Mostrar conteúdo dos Slides

Ao ativar esta opção:

• Os Slides mostrarão elementos de conteúdo (por exemplo, título, descrição, etc.).
• Serão exibidas várias opções dentro das definições do componente para personalizares cada um desses elementos.
• Serão exibidas várias opções em cada Slide, para personalizares manualmente os seus aspetos.
• As imagens dos slides serão usadas como fundos; por isso, adaptar-se-ão conforme a largura e altura que definires.

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

• Altura: permite definir uma altura mínima para todo o Slider, com base nas seguintes opções:
  • Ajustar ao conteúdo: a altura da secção será determinada pelo conteúdo que adicionares dentro do 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 da secção tomará, como mínimo, a altura da janela do navegador onde a loja estiver a ser visualizada, podendo variar entre dispositivos.
• Ativar zoom da imagem ao passar o cursor: as imagens aumentarão o tamanho quando o utilizador passar o cursor sobre elas.
• Opções de elementos: dentro deste grupo encontrarás opções para personalizar elementos como título, subtítulo e descrição/texto, detalhados nesta página.
• Opções de ícone: dentro deste grupo podes ativar um ícone para todos os slides e, ao fazê-lo, serão exibidas várias opções para personalizares a sua aparência.

Nota 1: Referimo-nos a uma altura mínima porque variará conforme a quantidade e/ou extensão do conteúdo que adicionares em cada slide.

Nota 2: O tamanho das imagens que podes carregar dentro de cada Slide variará conforme a combinação de largura e altura que definires. Estas são explicadas em detalhe nesta secção.

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 a Paleta 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.

---

---

Definições do subcomponente

Como referido anteriormente, o subcomponente de um Slider chama-se Slide, e podes adicionar quantos quiseres. As opções disponíveis para este subcomponente são as seguintes:

Opções de fundo

Este grupo contém várias opções para personalizar como cada slide será exibido:

Tipo de media

Permite definir que tipo de elemento de media será usado como fundo do slide:

• Imagem: mostra duas opções de imagem para as carregares. Ao carregar a primeira, aparecerá outra para telemóveis. Caso contrário, será usada a mesma imagem em todos os dispositivos.
• Vídeo: mostra uma opção de Origem do vídeo para adicionares e usares um vídeo a partir de uma URL externa ou um vídeo do YouTube. Ao fazê-lo, aparecerá uma segunda opção para carregares outro vídeo diferente para telemóveis.

Ao escolheres Imagem, serão exibidas as seguintes opções para definir os seus aspetos:

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

Nota 1: A posição vertical e horizontal é mais perceptível quando as imagens são maiores que a área do slide; por exemplo, se tiver uma dimensão vertical e a imagem carregada for retangular.

Nota 2: Computador considerará dispositivos com uma largura igual ou superior a 576px. Telemóvel será para dispositivos com uma largura igual ou inferior a 575px.

Ao escolheres Vídeo, será centrado horizontal e verticalmente, cobrindo toda a área do slide.

Sobreposição

Permite definir a opacidade (ou transparência) deste elemento. Podes ler mais sobre isto nesta página.

Opções de link

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

• Link: permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, etc.
• Mostrar imagem do link: permite mostrar a imagem do link selecionado (para produtos, categorias e páginas), se esta tiver sido adicionada no painel de administração.
• Texto do link: texto que será exibido dentro do botão.
• Ativar como link externo: se ativado, o link será aberto numa nova aba do navegador.
• Link como botão: se ativado, será exibido um botão juntamente com o conteúdo do slide.
  • Estilo de contorno: permite que o botão tenha uma borda em volta e um fundo transparente.
  • Seta no botão: mostra um ícone de seta no lado direito do texto do botão.

Opções de conteúdo

Neste grupo encontrarás várias opções para adicionar conteúdo a um slide, que apenas serão visíveis na loja se tiveres ativado a opção Mostrar conteúdo dos Slides nas definições principais do componente:

• Cores do conteúdo: permite definir a Paleta a usar no slide, o que afetará as cores de todos os elementos dentro dele.
• Largura máxima no computador: permite definir o espaço máximo até onde o conteúdo se estenderá dentro do slide.
• Os seguintes elementos de conteúdo estarão disponíveis:
  • Subtítulo
  • Título
  • Descrição
• 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, a medida de Computador considerará dispositivos com uma largura igual ou superior a 768px; Telemóvel será para dispositivos com uma largura igual ou inferior a 767px.

Opções de imagem do conteúdo

Este grupo contém opções para exibir uma imagem junto ao conteúdo do slide:

• Imagem: será usada para computadores e também para telemóveis se não for carregada uma imagem específica para esses dispositivos.
• Tamanho no computador: permite definir a largura da imagem (em percentagem) conforme o espaço disponível: Pequeno (80%), Médio (90%), Grande (100%).
• Imagem (telemóvel): será exibida apenas em telemóveis.
• Posição da imagem: permite definir onde a imagem será posicionada, oposta ao conteúdo do slide:
  • Esquerda: em telemóveis, será exibida antes do conteúdo do slide.
  • Direita: em telemóveis, será exibida depois do conteúdo do slide.
• Respeitar ordem no telemóvel: será exibida se Posição da imagem for igual a Esquerda, e permite forçar o tema a posicionar a imagem antes do conteúdo do slide em telemóveis. Se desativada, a imagem será exibida depois.

---

---

Tamanhos de imagens

As dimensões sugeridas abaixo variam conforme atives ou não a opção Mostrar conteúdo dos Slides nas definições principais do componente:

Show slides content: Enabled

Largura	Altura	Dimensão para Computador (em píxeis)	Dimensão para Telemóvel (em píxeis)
Pequena	Pequena	1320 × 420	551 × 420
Pequena	Média	1320 × 560	551 × 560
Pequena	Grande	1320 × 720	551 × 720
Pequena	Navegador	1320 × (variável)	551 × (variável)
Pequena	Ajustar ao conteúdo	1320 × (variável)	551 × (variável)
Média	Pequena	1620 × 420	575 × 420
Média	Média	1620 × 560	575 × 560
Média	Grande	1620 × 720	575 × 720
Média	Navegador	1620 × (variável)	575 × (variável)
Média	Ajustar ao conteúdo	1620 × (variável)	575 × (variável)
Grande	Pequena	1920 × 420	575 × 420
Grande	Média	1920 × 560	575 × 560
Grande	Grande	1920 × 720	575 × 720
Grande	Navegador	1920 × (variável)	575 × (variável)
Grande	Ajustar ao conteúdo	1920 × (variável)	575 × (variável)
Extra grande	Pequena	2220 × 420	575 × 420
Extra grande	Média	2220 × 560	575 × 560
Extra grande	Grande	2220 × 720	575 × 720
Extra grande	Navegador	2220 × (variável)	575 × (variável)
Extra grande	Ajustar ao conteúdo	2220 × (variável)	575 × (variável)
Largura do navegador	Pequena	Largura: mínimo sugerido 2400 px / Altura: 420 px	575 × 420
Largura do navegador	Média	Largura: mínimo sugerido 2400 px / Altura: 560 px	575 × 560
Largura do navegador	Grande	Largura: mínimo sugerido 2400 px / Altura: 720 px	575 × 720
Largura do navegador	Navegador	Largura: mínimo sugerido 2400 px / Altura: variável	575 × (variável)
Largura do navegador	Ajustar ao conteúdo	Largura: mínimo sugerido 2400 px / Altura: variável	575 × (variável)

Nota 1: Ao escolheres Navegador dentro da opção Altura, a largura do ecrã deverá ser de pelo menos 2400 px, considerando dispositivos de grandes dimensões, para garantir uma boa visualização.

Nota 2: Ao escolheres Ajustar ao conteúdo dentro da opção Altura, a altura dependerá do conteúdo do Slide, sendo considerada a altura do slide mais alto que tiveres adicionado.

Show slides content: Disabled

Aqui apenas fazemos referência à Largura da imagem; a sua Altura dependerá de quão altas forem as imagens que carregares:

Largura	Imagem computador (em píxeis)	Imagem telemóvel (em píxeis)
Grelha	Mínimo sugerido: 1320	Máximo sugerido: 551
Média	Mínimo sugerido: 1620	Máximo sugerido: 575
Grande	Mínimo sugerido: 1920	Máximo sugerido: 575
Extra grande	Mínimo sugerido: 2220	Máximo sugerido: 575
Largura total	Mínimo sugerido: 2400	Máximo sugerido: 575

---

---