Como adicionar um slider de antes e depois no Wix

Ajudar potenciais compradores a visualizar instantaneamente os benefícios do seu produto é uma grande vantagem, especialmente ao vender online. Aqui, não há vendedor — então sua marca, mensagem e elementos visuais precisam fazer todo o trabalho pesado. Esse é o poder do slider de antes e depois.

Embora o Wix tenha uma enorme biblioteca de elementos de design, o editor padrão não inclui um slider personalizável de comparação de fotos antes e depois. Mas isso não significa que você está sem opções. Você pode instalar um aplicativo de terceiros pelo Wix App Market, incorporar um widget externo gratuito ou criar um do zero com o Velo by Wix. Veja como cada opção funciona e por que o widget gratuito é a escolha ideal para a maioria das pessoas.

Opção 1: Instalar uma extensão do Wix App Market

O caminho mais óbvio é o Wix App Market. Pesquise “before and after slider”, clique uma vez e você terá um slider de comparação de imagens funcionando na página. Sem códigos de incorporação, sem modo de desenvolvedor.

É após a instalação que o problema aparece. A maioria desses aplicativos funciona no modelo freemium, e você terá que fazer concessões no plano gratuito. O PURPLE Before & After Slider, uma das opções mais bem avaliadas com 4,7 estrelas, exibe uma marca d’água no plano gratuito. Removê-la, além de desbloquear estilos de seta personalizados e formatos de layout, custa US$ 2,50 por mês. Não parece muito no início, mas vai se acumulando com cada assinatura de aplicativo no seu site.

O risco maior é a manutenção. São pequenos desenvolvedores terceirizados, e quando um deles para de lançar atualizações, seu slider quebra. Seu portfólio ou página de produto é o último lugar onde você quer um elemento com defeito.

Se mesmo assim você quiser experimentar um aplicativo de terceiros, veja como instalar:

1. Abra seu site no Editor do Wix e clique em Apps na barra lateral esquerda, depois clique em App Market. Pesquise por “before and after slider”.

2. Clique no aplicativo desejado e depois em Add to Site. Confirme com Allow and Add.
3. O slider aparecerá na sua página. Clique nele, abra as Settings, adicione suas imagens de antes e depois, ajuste o controle deslizante e os rótulos e clique em Publish.

O Wix documenta o fluxo completo de instalação em seu guia da Central de Ajuda sobre como adicionar um aplicativo ao seu site.

Opção 2: Usar um widget de slider gratuito e sem código (recomendado)

Se você quer controle total sobre o slider sem uma assinatura mensal, pule o App Market e incorpore um widget externo gratuito. Você obtém o mesmo efeito de arrastar para revelar, mais personalização do que os planos pagos dos aplicativos oferecem e nenhuma renovação.

O Widget de Slider Antes e Depois do Jotform foi criado exatamente para isso. Você o configura em um editor visual, copia um pequeno código de incorporação e cola no Wix. Os Widgets para Sites do Jotform são gratuitos, sem limite de uso e sem exigência de plano, então nenhum aviso de upgrade aparece depois que seu slider estiver no ar.

Ele também faz mais do que as opções do App Market. Você pode revelar na horizontal ou na vertical, o que importa se estiver mostrando um cômodo inteiro ou uma comparação de fotos antes e depois de uma pessoa. Você pode definir a posição inicial do divisor para que os visitantes vejam o enquadramento que você deseja. Também é possível adicionar até três pares de comparação com navegação integrada, transformando um único elemento em uma galeria compacta de estudos de caso em vez de uma única comparação estática. Para um dentista mostrando três resultados de pacientes ou um designer de interiores apresentando uma reforma em fases, essa é a diferença entre uma incorporação e três.

Siga estas etapas para adicionar o widget do Jotform ao seu site Wix:

1. Abra o Widget de Slider Antes e Depois do Jotform e adicione seu par de imagens fazendo upload dos arquivos ou colando as URLs das imagens. Adicione rótulos de antes e depois, além de uma legenda para cada comparação.

2. Defina a direção de revelação, a posição inicial do divisor e o estilo de interação (arrastar, clicar ou passar o mouse). Ajuste largura, proporção da imagem, raio dos cantos, tamanho do divisor e cores para combinar com seu site. Ative a tela cheia se os visitantes precisarem inspecionar detalhes.

3. Copie o código de incorporação.

4. No Editor do Wix, clique em + Add e selecione Embed Code. Cole seu snippet, redimensione o elemento e clique em Publish.

O guia do Wix sobre como incorporar um site ou widget aborda as limitações do elemento, incluindo a exigência de que seu código de incorporação use HTTPS.

Opção 3: Criar um slider personalizado usando o Velo by Wix

Se você prefere não depender de um aplicativo de terceiros ou de uma incorporação externa, pode programar o slider por conta própria com o Velo by Wix. A abordagem consiste em empilhar suas duas imagens no editor, adicionar uma linha ou elemento de caixa como controle de arraste, ativar o Dev Mode e escrever JavaScript que revela mais ou menos da imagem superior conforme o visitante arrasta.

Mas há um porém. O código de página do Velo não consegue rastrear um ponteiro enquanto ele se move sobre um elemento. Os manipuladores de eventos disponíveis nos elementos padrão do Wix cobrem cliques, foco, entrada e saída de um elemento e visibilidade na viewport. Não há manipulador de movimento do mouse nem suporte a eventos de toque. Um slider de arraste precisa de ambos.

O caminho ideal é escrever JavaScript DOM comum dentro de um elemento HTML iFrame e usar o Velo apenas para passar dados. Nesse ponto, você está usando o mesmo mecanismo de incorporação da Opção 2, exceto que você é responsável pelo código, pelo comportamento responsivo e por cada bug.

Se quiser tentar, siga estas etapas:

1. No Editor do Wix, clique em Dev Mode na barra superior e ative o modo de desenvolvedor. No Wix Studio, clique em Start Coding na barra lateral esquerda.

2. Adicione um elemento Embed HTML onde você quer o slider, dimensionado de acordo com suas imagens.

3. Escreva a marcação, o estilo e o tratamento de eventos de ponteiro do seu slider de comparação dentro desse elemento, testando tanto o arraste com mouse quanto o deslize por toque em todos os breakpoints.

Aprimore seu site Wix com widgets inteligentes e sem código

O Widget de Slider Antes e Depois do Jotform é a maneira mais rápida de mostrar suas transformações sem aumentar sua conta mensal de software ou depurar eventos de toque no Velo. Configure uma vez, cole o código e siga em frente.

Ele também é um dos mais de 150 widgets gratuitos para sites que o Jotform oferece. Alguns outros que combinam bem com um portfólio ou site de serviços incluem

• Google Reviews: Coloque as avaliações dos clientes ao lado do trabalho em si, para que a prova e o elogio fiquem na mesma página.
• FAQ: Responda às perguntas “quanto tempo demora” e “quanto custa” antes que o visitante saia para enviar um e-mail.
• Popup: Capture o e-mail de alguém que percorreu toda a sua galeria, mas ainda não estava pronto para agendar.
• Voltar ao Topo: Vale a pena adicionar quando sua página de portfólio fica longa o suficiente para que rolar de volta ao topo se torne cansativo.

Cada um é instalado pelo mesmo elemento Embed HTML que você usou para o slider, então adicionar um segundo ou terceiro leva apenas alguns minutos.

Se você ainda está construindo seu site, nosso guia para criar um site no Wix cobre a plataforma de ponta a ponta, e a página de integração Jotform-Wix explica como adicionar formulários de contato e agendamento. Explore o diretório completo de widgets e veja o que está faltando no seu site.