Componente Slideshow
O Slideshow é um bloco para apresentar conteúdos em sequência por meio de slides. Pode ser usado para criar uma abertura visual forte, destacar mensagens principais, apresentar campanhas, mostrar coleções ou construir uma narrativa em vários momentos.
Informações gerais
O Slideshow é um bloco para apresentar conteúdos em sequência por meio de slides. Pode ser usado para criar uma abertura visual forte, destacar mensagens principais, apresentar campanhas, mostrar coleções ou construir uma narrativa em vários momentos.
Cada slideshow pode incluir:
- texto por slide
- imagem/video por slide
- links e botões
- navegação por setas e dots
- diferentes comportamentos visuais e de altura
Utilize este componente quando pretender gerar impacto visual e criar um ritmo dinâmico, sem que os utilizadores tenham de percorrer secções extensas.
Exemplos visuais do bloco
Variações de layout e composição
O bloco Slideshow pode adotar diferentes abordagens visuais, mantendo sempre a mesma lógica: apresentar conteúdos em sequência, com forte apoio visual e navegação entre slides. Os exemplos abaixo ajudam a perceber como este componente pode funcionar como hero principal, bloco de campanha ou sequência de storytelling.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para criar uma hero section com rotação de conteúdos
- Para apresentar campanhas, destaques ou coleções
- Para mostrar várias mensagens com o mesmo peso visual
- Para construir uma sequência de storytelling com imagem + texto
Quando evitar
- Quando tens apenas 1 conteúdo para mostrar
- Quando cada slide tem demasiado texto
- Quando a informação é muito importante para leitura contínua
Como usar na prática
Estrutura de trabalho recomendada
Criar a estrutura do slideshow
- Quantos slides vais ter
- Qual é a mensagem principal de cada slide
- Se cada slide terá imagem, texto, botão ou combinação destes elementos
Preencher os conteúdos principais
- Botão para a secção seguinte
- Alt text e título associados
- Estrutura dos items
- Depois, em cada Item, defines o conteúdo específico de cada slide
Ajustar a apresentação
- Altura do slideshow
- Fade ou transição
- Setas e dots
- Espaçamentos
- Comportamento em mobile
Validar no preview
- Legibilidade do texto por cima das imagens
- Cortes das imagens em desktop e mobile
- Coerência entre os vários slides
- Tempo e fluidez da navegação
Boas práticas de conteúdo
Coerência e legibilidade
Mensagem e densidade
- Cada slide deve comunicar uma ideia principal
- Títulos curtos funcionam melhor do que títulos longos
- Evita excesso de texto em cada slide
- Não uses todos os campos só porque existem
- Se um slide funciona só com imagem + título, não forces texto adicional
Consistência entre slides
- Mesmo tom
- Mesma lógica visual
- Mesma densidade de conteúdo
- Mesma qualidade visual
- Se usares CTA, tenta manter o mesmo papel ao longo do slideshow
Configurações avançadas do componente Slideshow
Imagem + resumo das opções
Estas opções controlam o comportamento geral do slideshow, a sua aparência e a navegação.
Configurações gerais do bloco
- Skin escolhe uma variante visual do slideshow
- Disabled block desativa o bloco sem apagar
- Fade Slideshow ativa o efeito de transição em fade entre os slides
- Height define a altura do slideshow em desktop
- Height Mobile define a altura do slideshow em mobile
- Block ID ID único do bloco para âncoras e navegação interna
- Extra Class classe extra para ajustes específicos
Styles + Arrows
- Margin espaço fora do bloco
- Padding espaço dentro do bloco
- Button Style define o estilo dos botões
- Arrows Active ativa ou desativa as setas
- Arrows Style define o estilo visual das setas
- Arrows Color define a cor das setas
Dots + Animation
- Dots Active ativa ou desativa os dots de navegação
- Dots Color define a cor dos dots
- Dots Align define o alinhamento dos dots
- Dots Position define a posição dos dots
- Animation on/off liga ou desliga a animação do bloco ao entrar na viewport
- Scroll animation type define o tipo de animação aplicado
Configuração do conteúdo geral do Slideshow
Estrutura principal antes dos items
Na configuração principal do slideshow, há campos gerais que ajudam a estruturar o bloco.
Campos gerais
- Button Next Section permite configurar um botão de navegação para a secção seguinte
- ALT texto alternativo para imagem/elemento associado
- TITLE título associado ao recurso, quando aplicável
Items
- Cada slideshow é composto por vários items, sendo cada item um slide individual
- Podes adicionar novos items, duplicar, reorganizar, apagar e expandir/colapsar
- Recomenda-se montar primeiro a ordem dos slides e só depois afinar o conteúdo de cada um
Configurações dos items dentro do Slideshow
Conteúdo e comportamento de cada slide
Cada item representa um slide do slideshow e pode ter conteúdos diferentes para desktop e para mobile.
Campos de texto do slide
- Title título principal do slide
- Title Mobile versão específica do título para mobile
- Text texto complementar do slide
- Text Mobile versão específica do texto para mobile
Conteúdo visual do slide
- Make Caption full width. ativa o conteúdo textual em largura total
- Remove line height left ajusta o espaçamento/altura de linha
- Align Text define o alinhamento do texto
Imagens do slide
- Image imagem principal do slide
- Image Mobile versão específica da imagem para mobile
- Video video principal do slide
- Video Mobile video mobile em versão
- Image Filter controla o filtro aplicado na imagem/video
Links e botões
- BT Label texto do botão/link do slide
- BT URL URL de destino do botão
- Link url link adicional do slide
- Target define como o link abre
- Align button define o alinhamento do botão no slide
Demo e downloads
Exemplos e configurações