Como Adicionar um Slider a uma Página
Use o elemento Slider para exibir vários painéis de conteúdo em um carrossel. Cada slide pode conter imagens, depoimentos, cards de oferta ou outros elementos aninhados. Os visitantes navegam entre os slides usando setas ou pontos de paginação.
Este guia explica como adicionar um slider e configurar as principais opções que controlam slides e navegação.
Antes de Começar
Certifique-se de ter:
- Uma página aberta no Page Builder.
- Conteúdo pronto para cada slide (imagens, títulos, botões ou depoimentos).
- Uma seção larga o suficiente para o carrossel (sliders funcionam melhor em containers de largura total ou quase total).
Evite aninhar um slider dentro de outro slider. Isso geralmente quebra a navegação e confunde visitantes no mobile.
Passo 1: Adicionar o Elemento Slider
- Abra Pages e clique em Edit na sua página.
- No painel de elementos, encontre Slider.
- Arraste Slider para a seção ou container desejado.
- Clique no slider no canvas para abrir as configurações.
Sliders são comumente usados para depoimentos, destaques de produtos, galerias antes/depois e cards de recursos.
Passo 2: Criar e Gerenciar Slides
Os slides são chamados de blocks nas configurações do Slider.
| Ação | O que faz |
|---|---|
| Add block | Cria um novo slide. |
| Remove block | Exclui um slide do carrossel. |
| Reorder blocks | Altera a ordem dos slides da esquerda para a direita. |
| Edit slide content | Abre os elementos aninhados dentro daquele slide. |
Adicionar conteúdo dentro de um slide
- Selecione um block de slide.
- Adicione elementos aninhados dentro dele—por exemplo Image, Text, Button ou Icon.
- Estilize o conteúdo aninhado por slide conforme necessário.
Mantenha cada slide focado. Uma imagem principal mais um título curto geralmente performa melhor do que parágrafos densos em todos os slides.
Passo 3: Configurar o Layout do Slide
| Configuração | O que faz |
|---|---|
| Slide width | Quão largo cada slide aparece na viewport do carrossel. |
| Slide height | Espaço vertical para a área do slide quando a altura é controlada. |
| Padding | Espaçamento interno dentro de cada block de slide. |
| Slide alignment | Como o conteúdo do slide se alinha dentro do carrossel. |
| Slide gap | Espaço entre slides adjacentes quando vários slides aparecem parcialmente na tela. |
No mobile, teste se um slide por visualização é o mais claro. Slides parciais em "peek" podem funcionar para galerias, mas podem parecer apertados para conteúdo com muito texto.
Passo 4: Configurar as Setas de Navegação
| Configuração | O que faz |
|---|---|
| Show arrows | Habilita os controles de seta anterior/próximo. |
| Arrow position | Onde as setas ficam em relação ao slider. |
| Arrow size | Tamanho do alvo de clique/toque—importante no mobile. |
As setas devem permanecer visíveis contra o fundo do slide. Se os slides forem imagens ocupadas, habilite fundos nas setas ou escolha um estilo de alto contraste.
Passo 5: Configurar os Pontos de Paginação
| Configuração | O que faz |
|---|---|
| Show pagination | Exibe indicadores de pontos para a posição do slide. |
| Dot spacing | Distância entre os pontos. |
| Active dot state | Como o ponto do slide atual é destacado. |
Os pontos ajudam os visitantes a entender quantos slides existem e qual está ativo. Teste os alvos de toque dos pontos no mobile—devem ser fáceis de pressionar.
Passo 6: Visualização Responsiva
Use os device toggles do builder (desktop, tablet, mobile) para verificar:
- A largura do slide não corta texto importante.
- Setas e pontos são tocáveis em telas touch.
- Imagens aninhadas escalam corretamente dentro de cada slide.
- Espaçamento e padding ainda parecem equilibrados em larguras menores.
Consulte Preview responsivo para o fluxo completo de preview.
Passo 7: Salvar, Publicar e Testar
- Clique em Save no builder.
- Publique a página. Consulte Publicar uma página.
- Abra a URL ao vivo.
- Clique nas setas e pontos para percorrer cada slide.
- Teste em um celular se o tráfego mobile for importante.
Checklist de testes
- Cada slide é acessível via setas e pontos.
- Nenhum slide exibe imagens quebradas ou blocks vazios.
- A navegação não é bloqueada por elementos sobrepostos.
- Autoplay está desligado, a menos que você tenha configurado intencionalmente em outro lugar.
Slider vs Galeria de Imagens
O elemento Slider é um carrossel com vários slides e controles de navegação. Se você precisa apenas de uma imagem estática, use o elemento Imagem. Se precisa de uma grade de imagens sem navegação de carrossel, considere um layout de container com várias colunas.
Solução de Problemas
| Problema | O que verificar |
|---|---|
| Setas não movem os slides | Setas habilitadas; nenhum elemento sobreposto bloqueando cliques. |
| Pontos ausentes | Paginação habilitada nas configurações do slider. |
| Conteúdo do slide cortado | Largura, altura e padding do slide no breakpoint mobile. |
| Slider parece vazio | Cada block tem conteúdo aninhado; imagens terminaram de fazer upload. |
| Layout quebra no mobile | Reduza texto por slide; aumente padding; teste um slide por visualização. |
Resultado
Sua página agora inclui um carrossel funcional. Os visitantes podem navegar por vários painéis sem rolar por uma seção vertical longa—útil para depoimentos, ofertas e prova visual.
Documentação Relacionada
FAQ
Posso colocar botões e texto dentro dos slides do slider?
Sim. Cada block de slide suporta elementos aninhados como imagens, texto, botões e ícones. Mantenha layouts simples para que a navegação permaneça clara.
Devo usar setas, pontos ou ambos?
Muitas páginas usam ambos para clareza. No mínimo, habilite um método de navegação que os visitantes possam descobrir no mobile.
Quantos slides devo adicionar?
Três a sete slides fortes geralmente funcionam bem. Slides demais reduzem a chance de os visitantes verem cada painel.
Posso usar um slider para depoimentos?
Sim. Depoimentos são um caso de uso comum—uma citação ou captura de tela por slide com setas ou pontos para navegar.
Por que devo evitar sliders aninhados?
Um slider dentro de outro slider cria navegação confusa e má usabilidade no mobile. Use um carrossel por seção.