Slider de comparação
O que você vai aprender
- Pra que serve este block
- Como funciona a interação de arrastar
Pra que serve
Mostra duas imagens sobrepostas com uma linha divisória arrastável no meio, revelando uma imagem conforme a pessoa arrasta (efeito "antes e depois"). Bom pra produtos com resultado visual: skincare, reforma, texturas, transformações.
Como configurar
| Configuração | Pra que serve |
|---|---|
| Imagem 1 / Imagem 2 | As duas imagens comparadas (a divisória começa exatamente no meio). |
| Direção | Horizontal (arrasta pros lados) ou Vertical (arrasta pra cima/baixo). |
| Texto nas imagens | Ativa campos de legenda sobre cada imagem (ex: "Antes" / "Depois"). |
Texto (quando ativado)
| Configuração | Pra que serve |
|---|---|
| Imagem 1 / Imagem 2 (texto) | Legenda exibida sobre cada lado. |
| Predefinição | Estilo de tipografia da legenda, seguindo as predefinições do tema. |
| Posição | Onde a legenda fica (topo/base no modo horizontal, esquerda/direita no vertical). |
| Plano de fundo | Adiciona uma cor sólida atrás do texto, pra melhorar a legibilidade sobre a imagem. |
Tamanho e aparência
| Configuração | Pra que serve |
|---|---|
| Proporção | Formato do slider (Automático usa a proporção da primeira imagem enviada). |
| Largura / Altura | Ajustar, Preencher, ou Personalizado. |
| Herdar esquema de cores | Usa a cor da section onde está. |
Boas práticas
- Envie as duas imagens (Imagem 1 e Imagem 2) na mesma dimensão e proporção, senão uma delas fica cortada de forma diferente da outra. Veja Dimensão de imagem pra tamanhos sugeridos.