Resumo: Como Adicionar um Slider de Antes e Depois no WordPress (Sem Código)
Um slider de antes e depois permite que os visitantes arrastem uma alça para revelar uma transformação, e você pode adicionar um ao WordPress sem tocar em nenhum código usando o bloco Before After Toggle do SeedProd.
- Instale o SeedProd: Baixe o plugin, copie sua chave de licença e ative-a no WordPress.
- Crie seu layout: Abra o Theme Builder ou o Landing Page Builder e escolha um modelo para editar.
- Adicione o bloco: Encontre o bloco Before After Toggle no painel de blocos do SeedProd e arraste-o para o seu design.
- Ative suas alterações: Salve e publique, depois ative o alternador de tema do SeedProd para tornar seu layout ativo.
Você fez o trabalho, tem as fotos e quer que os visitantes sintam a transformação. Mas duas imagens lado a lado simplesmente não causam o impacto esperado, e as pessoas rolam sem parar.
Um slider de antes e depois no WordPress muda isso. Os visitantes arrastam uma alça em uma única imagem para revelar a transformação por si mesmos, e esse momento de interação faz com que o resultado pareça real de uma forma que fotos estáticas nunca conseguem.
Vou mostrar exatamente como adicionar um ao WordPress sem tocar em uma linha de código, usando o bloco Before After Toggle integrado do SeedProd.
Como Funciona o Efeito de Foto Antes e Depois?
Um slider de fotos de antes e depois empilha duas imagens e adiciona uma alça arrastável. Os visitantes deslizam para controlar quanta parte de cada versão eles veem, o que faz com que a transformação pareça participativa em vez de passiva.
Um dentista mostrando resultados de clareamento, um salão mostrando a transformação de um corte de cabelo ou um empreiteiro mostrando uma reforma — o slider permite que os visitantes arrastem para ver a mudança por si mesmos, em vez de confiar em uma foto estática.
É uma maneira direta de mostrar mudanças diretamente em seu site. Em seguida, mostrarei como adicionar esse efeito no WordPress.
Como Adicionar Sliders de Fotos Antes e Depois no WordPress
A maioria dos sites WordPress precisa de um plugin para adicionar esse efeito. O tutorial abaixo mostra como fazer isso com o SeedProd.
SeedProd é um construtor de sites de arrastar e soltar que permite criar páginas, temas e landing pages do WordPress sem código. Ele inclui um bloco nativo Before After Toggle, o que significa que você não precisa de um plugin de slider separado. O SeedProd cuida de tudo em um só lugar.
Você também pode usar o SeedProd para criar uma página de "em breve" e colocar o WordPress em modo de manutenção. Tudo o que você cria é 100% responsivo para dispositivos móveis, garantindo que seu site seja fácil de usar em dispositivos móveis.
Clique no botão abaixo para baixar o plugin SeedProd, em seguida, siga os passos para incorporar um slider de fotos antes e depois em seu site.
Passo 1. Instale e Ative o SeedProd
Após baixar o plugin, encontre a aba Downloads em sua conta SeedProd e copie sua chave de licença.
Agora, vá em frente e carregue o plugin em seu site WordPress. Se precisar de ajuda, você pode seguir este guia passo a passo sobre como instalar um plugin do WordPress.
Depois que o SeedProd for instalado, navegue até SeedProd » Configurações no seu painel do WordPress e cole a chave de licença que você copiou anteriormente.
Clique no botão Verificar Chave para ativar sua licença e, em seguida, passe para a etapa 2.
Passo 2. Crie seu Layout do WordPress
O SeedProd oferece duas opções de onde colocar seu slider: o Theme Builder, que substitui todo o seu tema WordPress por um design personalizado, ou o Landing Page Builder, que cria páginas independentes ao lado do seu tema existente.
Este guia usa o Theme Builder para criar um tema WordPress personalizado e editar o modelo da página inicial, mas as etapas para adicionar o bloco slider são as mesmas em ambos os casos.
Depois de criar um novo layout, passe para a etapa 3 e adicione o slider ao seu design.
Passo 3. Adicione o Bloco Antes e Depois do WordPress
Após criar seu layout, abra a página que deseja editar com o construtor de páginas do SeedProd.
Como estamos editando a página inicial do nosso tema WordPress, iremos para SeedProd » Theme Builder e clicaremos em Editar Design sob o template da Página Inicial.
Na tela seguinte, você verá um layout semelhante ao abaixo:
À direita está uma prévia ao vivo do template que você escolheu na etapa 2, e à esquerda estão os blocos e seções que você pode arrastar e soltar no seu design.
Por exemplo, você pode editar títulos clicando neles e digitando seu novo conteúdo diretamente na prévia ao vivo.
Ou, você pode editar o texto no painel de configurações no lado esquerdo, que inclui inúmeras opções de personalização.
Personalize seu modelo até que ele comece a ficar do jeito que você quer.
Agora vamos ver como adicionar recursos que seu modelo pode não incluir automaticamente. Por exemplo, o Website Kit que escolhemos não tem um slider de fotos antes e depois, então precisaremos adicioná-lo nós mesmos.
Para fazer isso, role pelos blocos do WordPress à esquerda até encontrar o Before After Toggle. Em seguida, arraste-o para a posição na sua prévia ao vivo.
Ao clicar no bloco, você abrirá suas opções de personalização no painel de configurações à esquerda. É aqui que você pode adicionar suas imagens de antes e depois, alterar a estilização e muito mais.
Vamos começar adicionando a primeira imagem, que normalmente será sua foto de “antes”. Você pode fazer isso clicando na opção Usar sua própria imagem e enviando uma nova foto ou escolhendo uma da sua biblioteca de mídia do WordPress.
Agora repita esta etapa para a imagem de “depois”. Você pode editar os rótulos de cada imagem substituindo os nomes nos campos de texto.
Com suas imagens no lugar, vamos ver mais algumas configurações.
Em Orientação, você pode tornar o slider de antes e depois vertical em vez de horizontal.
Você também pode fazer o slider se mover quando você passar o mouse sobre a imagem com o cursor e aplicar uma sobreposição de cor às fotos.
Ao abrir Alça do Slider, você verá configurações para alterar a cor do slider, largura, tamanho em pixels do raio e mais.
Você pode encontrar ainda mais configurações clicando na aba Avançado. Por exemplo, você pode alterar a tipografia e a cor do rótulo, ajustar o espaçamento e os atributos do bloco, e ocultar certos elementos em telas mobile.
Quando estiver satisfeito com a aparência do slider de fotos antes e depois, clique no botão Salvar no canto superior direito da sua tela e clique em Publicar.
Se você estiver criando uma página de destino, agora pode visualizar sua página e ver seu slider de imagens antes e depois em ação. Mas se você estiver criando um tema personalizado do WordPress, precisará completar a etapa 4.
Etapa 4. Habilite Suas Alterações
Mesmo que suas alterações sejam salvas e publicadas, você ainda precisa ativar seu tema do WordPress. Não se preocupe, esta etapa é rápida.
Vá para SeedProd » Construtor de Temas no seu painel do WordPress e mude a opção Habilitar Tema SeedProd para a posição “Sim”. É isso!
Agora você pode acessar a parte frontal do seu site e testar seu novo slider antes e depois do WordPress.
Perguntas Frequentes sobre Slider de Fotos Antes e Depois
Posso adicionar vários sliders antes e depois em uma página no WordPress?
Sim. O bloco Antes e Depois da SeedProd pode ser adicionado em qualquer lugar do seu layout, então você pode colocar vários sliders em uma única página. Cada bloco é independente e contém suas próprias imagens e configurações.
Não há limite para quantos você pode usar, embora mais sliders em uma página possam diminuir o tempo de carregamento se as imagens não estiverem otimizadas.
O slider antes e depois funciona em dispositivos móveis?
Sim. O bloco Antes e Depois da SeedProd é totalmente responsivo, então o slider funciona em telas sensíveis ao toque, bem como em desktops. Os visitantes deslizam em vez de arrastar no celular, e a experiência se traduz naturalmente.
Para melhores resultados, use imagens com pelo menos 800px de largura e mantenha o slider em um layout de coluna única no celular. Você pode usar a aba Avançado da SeedProd para ajustar a visibilidade e o espaçamento para diferentes tamanhos de tela.
Como alterno o slider de horizontal para vertical no WordPress?
Nas configurações do bloco Antes e Depois da SeedProd, encontre a opção Orientação. Clicar nela alterna a direção do arrasto de esquerda para direita (horizontal) para cima e para baixo (vertical).
A orientação vertical funciona bem para comparações onde a mudança é mais perceptível ao longo de um eixo vertical, como cortes de cabelo ou reformas baseadas em altura.
Qual tamanho de imagem devo usar para um slider antes e depois?
Ambas as imagens devem ter as mesmas dimensões. Se elas tiverem tamanhos diferentes, o slider pode ser exibido de forma inconsistente. Uma largura de 800-1200px funciona bem para a maioria dos layouts.
Mantenha os tamanhos dos arquivos abaixo de 150KB cada, salvando JPEGs com 70-80% de qualidade. Dimensões de imagem incompatíveis são a causa mais comum de um slider torto ou instável.
Posso adicionar um slider antes e depois ao WordPress sem um plugin?
Tecnicamente sim, mas requer JavaScript e CSS personalizados que a maioria dos proprietários de sites WordPress não consegue escrever. Você também precisaria manter esse código em todas as atualizações do WordPress.
Um plugin como o SeedProd cuida do lado técnico para você, e a interface de arrastar e soltar significa que não há código em nenhum momento do processo.
Você adicionou um slider antes e depois do WordPress que mostra seu trabalho da maneira mais convincente possível. Os visitantes descobrem a transformação por si mesmos em vez de apenas olhar imagens estáticas, que é exatamente o ponto.
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
