Como mostrar imagens antes e depois com efeito deslizante no WordPress

Vamos supor que você seja um blogueiro de fitness e queira inspirar seu público, compartilhando as imagens antes e depois da transformação do seu corpo. Em vez de apenas colocar as imagens lado a lado, seria bem legal se você pudesse usar um controle deslizante da imagem antes e depois para mostrar a diferença.

Esperar! O que é um controle deslizante de imagem antes e depois?

É um controle deslizante de imagem que empilha uma imagem sobre a outra e usa um controle deslizante interativo para revelar as imagens. Se o controle deslizante se mover horizontalmente, a primeira imagem será revelada quando o controle deslizante se mover para a extrema direita e a segunda será visível quando se mover para a esquerda.

Esses controles deslizantes são úteis para comparar duas imagens semelhantes. E, portanto, pode ser útil para vários profissionais, como fotógrafos, esteticistas, designers, médicos e dentistas.

Se você é um usuário do WordPress e está se perguntando como pode usá-lo em seu site, você está no lugar certo. Neste artigo, irei compartilhar como você pode adicionar imagens antes e depois com o efeito de controle deslizante em seu site.

Então, sem mais delongas, vamos começar.

Inscreva-se no nosso canal no Youtube

Como adicionar o controle deslizante da imagem antes e depois

Existem muitos plug-ins gratuitos e premium com os quais você pode adicionar o controle deslizante da imagem antes e depois em uma página da web.

No entanto, usaremos o plug-in Twenty20 Image Before After neste artigo. Posteriormente, também mencionarei algumas alternativas populares gratuitas e premium.

Instale Twenty20 Image Antes Depois do Plugin

Twenty20 é um plugin gratuito e está disponível no repositório de plugins do WordPress. Ele permite que você adicione controles deslizantes de imagem antes e depois em seus posts, páginas e barra lateral. Ele também suporta construtores de páginas populares como Elementor e WPBakery.

Para instalar este plugin, vá para Plugins -> Adicionar Novo e pesquise Twenty20 Image Before-After. Depois de encontrar o plug-in, basta instalá-lo e ativá-lo:

Adicionar imagem antes-depois em sua postagem ou página

O plugin Twenty20 não vem com nenhuma página de configurações. Assim, você pode começar a fazer o trabalho sujo após instalar o plugin.

Agora, após a atualização do WordPress 5.0, você pode usar o editor Classic ou Gutenberg. Deixe-me mostrar como esse plugin funciona em ambos os editores.

Gutenberg Editor

O plugin Twenty20 não tem um bloco até agora, mas você pode usar sua funcionalidade de shortcode e adicionar o código no bloco de shortcode.

Vamos dar uma olhada em um exemplo de shortcode:

[20th20 img1 = ”3442 ″ img2 =” 3442 ″ direction = ”horizontal” offset = ”0.4 ″ align =” none ”width =” 100% ”before =” Before ”after =” After ”hover =” false ”]

Deixe-me explicar cada um dos parâmetros:

• img1 - Aqui você deve adicionar o ID da imagem (não o URL da imagem) da primeira imagem.
• img2 - Adicione o ID (e não o URL da imagem) da segunda imagem.
• direção - permite que você decida se deseja que o controle deslizante fique na direção horizontal ou vertical. Portanto, o valor será horizontal ou vertical.
• offset - o valor do offset deve estar entre 0,1 e 1.
• alinhar - determina o alinhamento da imagem antes-depois. O valor pode ser nenhum, esquerdo ou direito.
• largura - a largura da imagem pode ser em porcentagem ou pixels.
• antes - Você pode adicionar a legenda da imagem anterior aqui.
• depois - Adicione a legenda da pós-imagem.
• pairar - Este parâmetro decide se você deseja mover o controle deslizante no movimento do mouse. Ele aceita um valor verdadeiro ou falso.

Não sabe como encontrar o ID de uma imagem? Vá para Mídia -> Biblioteca na barra lateral esquerda do painel do WordPress e clique na imagem. Agora verifique a barra de endereço do seu navegador:

No exemplo acima, você pode ver item = 50 na URL. Portanto, 50 é o ID dessa imagem específica.

OK! Agora que você sabe como usar o shortcode Twenty20, crie (ou edite) um post ou página onde deseja adicionar o controle deslizante da imagem antes-depois. Em seguida, adicione um novo bloco e pesquise o widget de shortcode:

Copie o código que usei no exemplo acima, cole-o na caixa do shortcode e ajuste-o de acordo com seus requisitos:

É isso. Agora você pode visualizar a postagem (ou página) e verificar se está funcionando corretamente ou não.

Editor Clássico

Se você estiver usando o Editor Clássico, verá um novo botão Adicionar 20 20 após instalar o plugin. Clique nesse botão e uma janela pop-up será aberta solicitando que você selecione duas imagens:

Depois de selecionar duas imagens e clicar em Inserir, uma nova janela se abrirá solicitando alguns detalhes para gerar o shortcode:

Assim que terminar as configurações, você pode clicar no botão Inserir Shortcode.

Você também pode fazer alterações neste código de acesso mais tarde - basta seguir o exemplo na seção do Editor de Gutenberg.

Adicionar imagem antes-depois em sua barra lateral

O plugin Twenty20 também permite adicionar imagens antes e depois na barra lateral do seu site. Ele vem com um widget que faz o trabalho legal para você.

Vá para Aparência -> Widgets. Agora encontre o widget Twenty20 e arraste-o para a área da barra lateral. As configurações deste widget são semelhantes às da seção anterior - apenas você tem dois botões extras para selecionar (ou enviar) as imagens antes e depois.

Quando terminar, salve as configurações do widget e verifique seu site. Simples, não é?

Alguns Plugins Alternativos

Embora eu goste do plugin Twenty20 porque é simples e gratuito, você pode preferir outra coisa. Portanto, decidi compartilhar algumas alternativas gratuitas e premium para este plug-in:

1. Imagens Antes + Depois para Divi

Se você for um usuário Divi, o plugin Antes + Depois de Imagens para Divi é o melhor para suas necessidades. É leve, ágil e suporta carregamento lento. Ele cria um novo módulo que ajuda você a adicionar imagens antes e depois ao seu site. Este plug-in gratuito funcionará com o plug-in Divi Builder, o tema Divi e outros temas da Elegant Themes.

Preço - Grátis | Mais Informações

2. Multiuso antes depois do controle deslizante

Multipurpose Before After Slider é um plugin premium habilitado para toque e deslize. Ele vem com um painel de administração fácil de usar que ajuda você a ajustar cada controle deslizante de imagem de acordo com suas necessidades e não requer o uso de códigos de acesso. Você pode criar imagens antes e depois ilimitadas e usá-las em postagens, páginas e barra lateral.

Preço - $ 18 | Mais Informações

3. Smart antes depois do visualizador

Smart Before After Viewer é um plugin premium totalmente responsivo e de toque amigável. Ele permite que você adicione textos de rótulos personalizados nas imagens anteriores e posteriores. E você pode alterar a posição e a cor das etiquetas sem problemas. Este plugin também permite que você adicione várias imagens em uma única página.

Preço - $ 18 | Mais Informações

Nota final

Um controle deslizante de imagem antes-depois é uma ótima maneira de mostrar as diferenças entre duas imagens idênticas. E você pode usar esses controles deslizantes em seu site WordPress seguindo este tutorial.

Então, você já usou algum dos plug-ins mencionados neste artigo? Ou gostaria de sugerir um plugin específico que seja adequado para conseguir o mesmo? Deixe-nos saber na seção de comentários.

Imagem em destaque via __ / shutterstock.com