Como Mostrar Fotos de Antes e Depois no WordPress (Com Efeito de Deslizamento)

Tentar mostrar uma transformação dramática com imagens estáticas lado a lado pode parecer um pouco sem graça. Você fez um trabalho incrível, mas o fator uau se perde quando os visitantes não podem interagir com a mudança por si mesmos.

Descobrimos que uma das melhores maneiras de destacar o impacto de um produto ou serviço é com um controle deslizante interativo de antes e depois. É uma ferramenta poderosa que usamos em nossos próprios projetos para deixar os resultados falarem por si.

Neste artigo, compartilharemos nossos dois métodos testados e comprovados para adicionar um controle deslizante de fotos de antes e depois ao seu site WordPress. Temos uma opção fácil para iniciantes e uma mais personalizável para aqueles que desejam mais controle.

Quando usar um controle deslizante de fotos de antes e depois no WordPress

Uma imagem de antes e depois é uma imagem interativa que geralmente mostra algum tipo de mudança.

Os visitantes podem usar um controle deslizante para alternar entre as diferentes 'versões' da imagem de uma maneira envolvente e interativa.

Se você administra uma loja online usando um plugin como o WooCommerce, uma foto de antes e depois pode mostrar o efeito de seus produtos ou serviços.

Você simplesmente precisa mostrar uma foto de 'antes' com a qual o cliente possa se identificar e uma foto de 'depois' desejável. Isso fará com que os compradores queiram comprar o item que os leva do estado 'antes' para o estado 'depois'.

Se você é um afiliado, mostrar fotos persuasivas de antes e depois em seu site é uma ótima maneira de promover seus links de afiliado e obter mais vendas.

Arrastar um controle deslizante para revelar a foto 'depois' também é uma maneira fácil de obter mais engajamento, o que pode manter os visitantes em seu site por mais tempo. Isso também pode ajudar a aumentar suas pageviews e reduzir a taxa de rejeição no WordPress.

Dito isso, vamos ver como você pode criar uma foto de antes e depois no WordPress usando um efeito de deslize. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1: Mostrar uma Foto de Antes e Depois Usando um Plugin Gratuito (Fácil)
• Método 2: Mostrar uma Foto de Antes e Depois Usando SeedProd (Mais Personalizável)
• Frequently Asked Questions About Before and After Sliders

Método 1: Mostrar uma Foto de Antes e Depois Usando um Plugin Gratuito (Fácil)

A maneira mais fácil de criar fotos de antes e depois é usando o plugin Ultimate Before After Image Slider & Gallery – BEAF.

O plugin BEAF permite que você crie controles deslizantes horizontais e verticais e personalize a imagem com diferentes rótulos e cores.

Dica Importante: Para que o efeito de controle deslizante funcione perfeitamente, suas imagens de 'antes' e 'depois' devem ter exatamente o mesmo tamanho (mesma largura e altura em pixels). Isso garante que elas se alinhem corretamente. Você pode usar qualquer ferramenta de edição de fotos para cortar ou redimensionar suas imagens antes de carregá-las.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Ultimate Before After Image Slider & Gallery (BEAF). Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Before and After Slider » Add New no seu painel.

Para começar, digite um nome para o slider de imagens. Isso é apenas para sua referência, então você pode usar qualquer coisa que ajude a identificá-lo.

Com isso feito, você pode adicionar a imagem de ‘antes’ rolando até a seção ‘Before Image’.

Aqui, clique em ‘Upload’ e, em seguida, escolha uma imagem da biblioteca de mídia do WordPress ou faça o upload de uma nova imagem do seu computador.

Para ajudar os motores de busca a entender esta imagem e mostrá-la às pessoas certas, é uma boa ideia adicionar algum texto alternativo da imagem. Para fazer isso, basta digitar no campo 'Texto Alternativo da Imagem'.

Para mais informações sobre texto alternativo, consulte nosso guia para iniciantes sobre SEO de imagens.

Com isso feito, role até a seção 'Após a Imagem'.

Agora você pode adicionar a imagem 'depois' seguindo o mesmo processo descrito acima. Não se esqueça de adicionar algum texto alternativo a esta imagem também, pois é importante para o SEO do WordPress.

Você também pode exibir algum texto abaixo da imagem adicionando um título e uma descrição (como uma legenda).

Por exemplo, você pode incentivar os visitantes a interagir com o slider. Esta é uma ótima maneira de orientar visitantes que podem não estar familiarizados com o funcionamento de sliders interativos.

Esta também é uma maneira fácil de adicionar algum contexto à imagem.

Para adicionar algum texto, basta digitar nos campos 'Título do Slider' ou 'Descrição do Slider'.

Você também pode adicionar um URL 'Leia Mais', que pode vincular a qualquer postagem ou página em seu site WordPress ou até mesmo a um site externo. Por exemplo, você pode enviar os visitantes para uma página onde eles podem comprar o produto apresentado na imagem do slider.

Este link aparecerá abaixo da imagem antes/depois e também abaixo de qualquer título ou descrição do slider que você estiver usando.

Se você estiver vinculando a outro site, recomendamos escolher ‘Nova aba’ para não enviar visitantes para fora do seu blog WordPress.

Com isso feito, você pode escolher se deseja criar um slider vertical ou horizontal clicando em uma das miniaturas na seção ‘Estilo de Orientação’.

Depois disso, role até o topo da tela e clique em ‘Opções’.

Aqui, você verá que o ‘Deslocamento Padrão’ está definido como 0.5. Isso significa que o visitante vê metade da imagem ‘antes’ quando a página é carregada pela primeira vez.

Se você quiser mostrar mais da imagem anterior, digite um número maior, como 0.6, 0.7 ou superior.

Se você quiser mostrar a imagem anterior inteira, digite 1.

Isso colocará o slider na parte superior ou direita da imagem anterior, como você pode ver na imagem a seguir.

Por padrão, o plugin exibe os rótulos ‘Antes’ e ‘Depois’ quando o visitante passa o mouse sobre a imagem.

Você pode querer substituir esses rótulos por algo mais descritivo.

Para fazer isso, basta digitar nos campos ‘Rótulo Antes’ e ‘Rótulo Depois’.

Por padrão, os visitantes moverão o slider arrastando e soltando. Algumas pessoas podem achar isso difícil, especialmente se tiverem problemas de mobilidade ou estiverem usando dispositivos menores, como smartphones ou tablets.

Dito isso, você pode querer alterar a forma como os visitantes movem o slider.

Se você ativar o botão ‘Ativado’ ao lado de ‘Mover Slider ao Passar o Mouse?’, os visitantes poderão mover o slider simplesmente passando o mouse sobre a imagem.

Se você ativar o botão ‘Clicar para Mover’, os visitantes poderão clicar em qualquer lugar da imagem para mover o slider para aquele ponto.

Embora essas opções possam melhorar a acessibilidade, elas alteram o comportamento padrão do slider. Sugerimos testá-las para ver o que parece mais intuitivo para os visitantes do seu site.

Em seguida, clique na aba ‘Estilo’.

Here, you can change the colors used for the different labels, backgrounds, headings, descriptions, and the read more button. This can help the before/after image blend in with your WordPress theme or even stand out from the rest of your website’s design.

You can also change the font size and text alignment.

When you are happy with how the slider is set up, click on the ‘Publish’ button.

This creates a shortcode that allows you to add the before/after image and slider to any page, post, or widget-ready area.

Para mais informações sobre como inserir o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Após adicionar o shortcode ao seu site, basta clicar no botão ‘Publicar’ ou ‘Atualizar’ para que a imagem de antes/depois e o efeito de slider fiquem ativos.

Método 2: Mostrar uma Foto de Antes e Depois Usando SeedProd (Mais Personalizável)

Se você deseja apenas adicionar um slider simples a uma postagem existente, o plugin gratuito do método 1 é uma ótima opção. No entanto, se você está procurando criar uma página de destino de alta conversão, uma página de vendas ou até mesmo um tema personalizado que apresente uma comparação de antes e depois, recomendamos o uso do SeedProd. É um poderoso construtor de sites que lhe dá controle total sobre o design.

Aqui na WPBeginner, usamos o SeedProd extensivamente para projetar sites personalizados para muitas de nossas marcas parceiras dentro da família Awesome Motive. Sua interface de arrastar e soltar nos dá a flexibilidade de criar páginas de alta conversão rapidamente.

O SeedProd é o melhor construtor de páginas WordPress com arrastar e soltar. Ele vem com mais de 300 modelos prontos que você pode usar para criar páginas de destino de alta conversão, designs de vendas, temas WordPress personalizados e muito mais.

Ele também possui um bloco pronto de ‘Alternância Antes e Depois’ que você pode usar para criar belas imagens de antes e depois com as quais seus usuários podem interagir.

Simplesmente arraste o bloco do menu do lado esquerdo e solte-o em qualquer design de página em que você esteja trabalhando, incluindo páginas de vendas.

Se você estiver usando o WooCommerce para vender seus produtos, o SeedProd se integra ao WooCommerce e até vem com blocos especiais para eCommerce. Isso é perfeito se você planeja usar imagens de antes e depois para promover seus produtos do WooCommerce.

Para obter informações sobre como usar o SeedProd, consulte nosso guia sobre como criar uma página personalizada no WordPress.

Após criar uma página, é fácil adicionar uma imagem de antes e depois ao seu design. No editor de páginas do SeedProd, basta encontrar o bloco 'Before After Toggle'.

Você pode então arrastar e soltar este bloco em qualquer lugar do seu design para adicioná-lo ao layout da página.

Com isso feito, basta clicar para selecionar o bloco 'Before After Toggle'. O menu do lado esquerdo será atualizado para mostrar todas as configurações que você pode usar para criar sua imagem de antes e depois.

Para começar, você precisará adicionar a imagem que deseja usar como imagem de antes. Em ‘Imagem de Antes’, clique em ‘Usar Sua Própria Imagem’ ou ‘Usar uma Imagem de Banco de Imagens‘ e escolha a imagem que deseja usar.

Por padrão, o SeedProd exibe o rótulo ‘Antes’ acima desta imagem. No entanto, você pode alterá-lo para algo mais descritivo digitando-o no campo ‘Rótulo de Antes’.

Com isso feito, role até a seção 'Após a Imagem'.

Agora você pode adicionar uma imagem e personalizar o rótulo padrão ‘Depois’ seguindo o mesmo processo descrito acima.

O SeedProd pode adicionar um efeito de deslize vertical ou horizontal.

Para alternar entre esses dois estilos, role até a seção ‘Orientação do Slider’ e clique em ‘Vertical’ ou ‘Horizontal’.

Por padrão, os visitantes se moverão entre as imagens de antes e depois arrastando o controle deslizante.

No entanto, alguns usuários podem achar mais fácil mover o controle deslizante passando o mouse sobre a imagem. Isso é particularmente verdadeiro para imagens maiores onde o visitante precisaria arrastar o controle deslizante por uma distância maior.

Para experimentar esta configuração, ative 'Mover ao Passar o Mouse' no menu esquerdo.

Em seguida, você pode querer adicionar uma sobreposição colorida às imagens antes e depois. Isso pode ajudar a imagem a se misturar com o restante do esquema de cores ou se destacar do fundo.

Você pode até tornar a sobreposição colorida semitransparente para criar um efeito mais sutil.

Para experimentar cores diferentes, clique na seção 'Cor da Sobreposição' e, em seguida, faça suas alterações no pop-up que aparece.

Com isso feito, você pode personalizar o controle deslizante clicando para expandir a seção 'Controle de Comparação'.

Por padrão, o SeedProd mostra metade da imagem 'antes' e metade da imagem 'depois'. Para alterar isso, basta arrastar o controle deslizante 'Deslocamento Inicial do Controle'.

Para exibir menos da imagem anterior, arraste o controle deslizante para a esquerda para que ele mostre um número menor. Para mostrar mais da imagem anterior, arraste o controle deslizante para a direita, o que aumenta o número.

Em seguida, você pode alterar a cor do controle deslizante usando as configurações de 'Cor do Controle'.

Você também pode tornar o controle mais grosso ou mais fino usando o controle deslizante 'Espessura do Controle'.

Dessa forma, você pode fazer o controle se destacar ou criar um efeito mais sutil.

Quando estiver satisfeito com o controle, você pode querer alterar o círculo. Você pode tornar o círculo maior ou menor usando as configurações de 'Largura do Círculo' e alterar o 'Raio do Círculo' para criar cantos retos ou curvos.

À medida que você faz alterações, a pré-visualização ao vivo será atualizada automaticamente, para que você possa experimentar diferentes configurações para ver o que fica melhor.

Quando você estiver satisfeito com o círculo, talvez queira alterar o tamanho dos triângulos dentro desse círculo. Por exemplo, se você aumentou o círculo, talvez queira aumentar o tamanho dos triângulos também.

Para fazer essa alteração, arraste o controle deslizante 'Tamanho do Triângulo' até ficar satisfeito com a aparência.

Com isso feito, você pode continuar adicionando novos blocos e personalizando o conteúdo da sua página SeedProd.

Quando você estiver satisfeito com a aparência da página, basta clicar na seta ao lado do botão 'Salvar' e, em seguida, selecionar 'Publicar'.

Agora, se você visitar seu site, verá o design da sua página com as imagens de antes e depois ao vivo.

Perguntas Frequentes Sobre Sliders de Antes e Depois

Respondemos a algumas das perguntas mais comuns que nossos leitores têm sobre a criação de sliders de fotos de antes e depois no WordPress.

Os plugins para fotos de antes e depois são gratuitos?

O plugin Ultimate Before After Image Slider & Gallery apresentado no Método 1 é totalmente gratuito. SeedProd também tem uma versão gratuita disponível, mas você precisará de um de seus planos premium para acessar o bloco 'Alternância Antes e Depois'.

Qual método é melhor para criar um slider de antes e depois?

O melhor método depende das suas necessidades. Para adicionar rapidamente um slider simples a uma postagem de blog, o plugin gratuito é uma excelente opção. Se você deseja mais controle de design ou está criando uma página de destino personalizada, recomendamos o SeedProd por sua flexibilidade.

Posso criar um slider com mais de duas imagens?

As ferramentas neste guia são projetadas especificamente para comparar duas imagens. Se você precisar exibir várias imagens em sequência, você vai querer usar um plugin de slider WordPress dedicado como Soliloquy.

Um slider de antes e depois vai deixar meu site lento?

Assim como qualquer imagem, arquivos grandes podem impactar a velocidade de carregamento do seu site. Para evitar isso, sempre recomendamos otimizar suas imagens para a web antes de carregá-las no WordPress.

Saiba Mais Dicas e Truques de Imagem para WordPress

Quer mais dicas e truques para personalizar suas imagens no WordPress? Confira estes guias:

• Como Adicionar Filtros de Foto Estilo Instagram no WordPress (Passo a Passo)
• Como Criar Overlays e Hovers Flipbox no WordPress
• Como Adicionar Marca d'água Automaticamente a Imagens no WordPress
• Como Usar IA para Gerar Imagens no WordPress
• Como Adicionar GIFs Animados no WordPress (Do Jeito CERTO)
• Como Criar Facilmente um Slider Responsivo no WordPress

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma foto de antes e depois ao seu site WordPress com um efeito de slider. Você também pode conferir nosso guia sobre como adicionar categorias e tags à biblioteca de mídia do WordPress e nossas escolhas especializadas dos melhores plugins de imagens destacadas do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.