Um slider de antes e depois é uma das formas mais rápidas de mostrar os resultados do seu trabalho. Tudo o que a pessoa precisa fazer é arrastar o divisor para revelar o efeito do seu redesign, reforma ou retoque. Ela não precisa ficar analisando uma imagem lado a lado nem brincar de jogo dos sete erros — os resultados estão ali, bem na frente dela.
Seja você dono de uma agência, freelancer, designer, fotógrafo, artista, empreiteiro ou qualquer outra pessoa que queira exibir seu trabalho, um slider de antes e depois é uma ótima maneira de fazer isso. Infelizmente, apesar de ser um dos criadores de sites mais avançados (e um dos favoritos entre designers), o Webflow não possui um slider nativo de comparação de imagem antes e depois. Se você quiser adicionar um, existem três opções: instalar um “cloneable” da comunidade, incorporar um widget gratuito hospedado ou criar um do zero usando o mecanismo nativo de interações do Webflow (IX2).
Exploramos cada uma dessas opções a seguir.
Pro Tip
Se tudo isso parece muito avançado, confira nosso guia introdutório sobre como criar um site antes de voltar aqui.
Opção 1: Usar um cloneable do Webflow
Seu primeiro instinto provavelmente é pesquisar no showcase Made in Webflow ou em um site como o Flowbase por “cloneables”. Embora isso possa funcionar, não é isento de complicações.
A grande desvantagem é que você fica preso à maneira como outra pessoa fez as coisas. É preciso seguir rigorosamente a arquitetura e as convenções de nomenclatura do cloneable. Isso pode incluir a dependência de atributos personalizados, regras CSS e posicionamento absoluto. Se errar qualquer detalhe, simplesmente não vai funcionar. Se adicionar ao final do seu design, talvez seja necessário repensar alguns dos outros elementos.
Mas se você está decidido a seguir esse caminho, veja como adicionar um cloneable:
- Encontre um cloneable de slider de antes e depois que esteja sendo mantido ativamente e tenha uma licença que permita o uso. Clone-o no seu próprio projeto.
- Substitua pelas suas próprias imagens. Não reorganize as divs aninhadas, mude o nome de nada nem tente arrumar as coisas — isso pode quebrar o slider.
- Publique seu site e teste. Certifique-se de que funciona tanto em desktop quanto em dispositivos móveis. Se você alterou algo por engano, o JavaScript pode não funcionar em determinadas circunstâncias.
No geral, esse método funciona, mas é muito trabalhoso para um componente visual simples — e é provável que você não tenha tanto controle quanto gostaria. Qualquer redesign que fizer precisa seguir a estrutura original, a menos que você queira reescrever o script que controla o slider.
Opção 2: Usar um widget gratuito de slider sem código (recomendado)
Se você quer evitar a dor de cabeça de lidar com blocos de div aninhados, configurar atributos personalizados e, caso algo dê errado, depurar JavaScript escrito por outra pessoa, a maneira mais fácil é usar um embed hospedado como o Widget de Slider Antes e Depois do Jotform. É super fácil de configurar e resolve muitos dos problemas dos cloneables.
Veja como adicionar um slider de antes e depois no Webflow com o Jotform:
- Acesse o Widget de Slider Antes e Depois do Jotform e faça login na sua conta Jotform. Se ainda não tiver uma, você pode se cadastrar durante o processo de configuração. É gratuito.
- Dê um título ao seu widget e adicione seus pares de comparação de imagens. Você pode fazer upload das imagens diretamente ou adicioná-las a partir de uma URL. Se quiser, também pode adicionar uma legenda a cada par de imagens e alterar seus rótulos. Em seguida, defina se o usuário precisa arrastar o controle deslizante para ver o antes e depois, ou se a transição é acionada ao passar o mouse. Quando terminar, clique em Continuar.
- Agora é hora de estilizar seu slider. Você pode definir cores, identidade visual, fonte e aparência. Quando estiver satisfeito, clique em Continuar novamente.
- Por fim, configure o layout. Selecione se deseja um slider horizontal ou vertical, onde será a posição inicial do divisor, qual largura deseja e se ele será exibido em dispositivos móveis, desktop ou ambos. Em seguida, clique em Experimente no seu site gratuitamente.
- Clique em Copiar Código para copiar o código de incorporação para a área de transferência e, em seguida, volte ao seu site no Webflow.
- Abra o menu Add e selecione Code Embed. Cole o código de incorporação e posicione o bloco no seu site. Clique em Publish e ele estará ativo no seu site. É simples assim.
Como você pode ver, a opção gratuita sem código é muito mais simples do que a opção de cloneable. É mais fácil de estilizar, não há necessidade de se preocupar com atributos personalizados, nomes de classe rígidos ou JavaScript, e simplesmente funciona. Se quiser alterar algo, volte ao Jotform e edite as configurações do seu slider de antes e depois.
Opção 3: Construir manualmente usando as Interações do Webflow
Para os puristas do Webflow que querem controle total e não desejam usar JavaScript escrito por outras pessoas nem um widget externo, é possível construir um slider usando o mecanismo nativo de interações do Webflow, o IX2. Construir um slider de código personalizado no Webflow é, de longe, o método mais avançado e complicado, mas permite controlar exatamente como ele se parece e se comporta.
Para construir seu próprio slider de comparação de imagens no Webflow usando o IX2, você precisa empilhar duas imagens em um contêiner com posicionamento relativo, com cada imagem dentro do seu próprio bloco de div. Para a imagem de cima, o bloco de div funciona como a máscara.
Em seguida, para a interação de antes e depois no Webflow, você precisa criar uma Interação de Movimento do Mouse. Defina o Trigger como Mouse X e o alvo como a div de máscara. Defina a propriedade animada como Width e configure-a para variar entre 0 e 100 por cento. Dessa forma, o movimento do mouse no eixo X controla a sobreposição entre as duas imagens.
É claro que, se você quiser um divisor entre as duas imagens, precisará criá-lo. E sincronizá-lo perfeitamente com o movimento do mouse exige habilidades avançadas de animação no Webflow.
Embora as ferramentas nativas do Webflow possam funcionar, acertar tudo exige muitos ajustes e um conhecimento profundo de como usar o Webflow. Você também precisa configurar uma animação diferente se quiser que funcione em dispositivos móveis. O que se ganha em controle, perde-se em praticidade.
Aprimore seu site Webflow com widgets inteligentes e sem código
A maneira mais rápida, fácil e prática de adicionar um slider de antes e depois no Webflow é com o Widget de Slider Antes e Depois do Jotform. Ele não tem nenhuma das desvantagens de usar um cloneable de comparação de imagens do Webflow e é muito mais simples do que criar o seu próprio com o IX2. Usar uma opção robusta e serverless economiza muitas horas de desenvolvimento e garante um design responsivo sólido sempre.
Além disso, o Jotform possui uma variedade de outros widgets gratuitos para sites capazes de levar o seu site para o próximo nível. Se você deseja adicionar avaliações do Google, controles de acessibilidade, um simples botão de voltar ao topo ou dezenas de outras funcionalidades úteis, explore o diretório. Você também pode usar a integração Jotform-Webflow para conectar as poderosas ferramentas de coleta de dados do Jotform diretamente ao seu site.
Este artigo é destinado a designers, agências e proprietários de sites do Webflow que desejam exibir transformações visuais (como reformas, redesigns de interface ou edição de fotos) sem precisar depurar interações ou scripts complexos.
Enviar Comentário: