Como mostrar fotos antes e depois no WordPress

As imagens são uma parte importante do marketing de conteúdo, com o poder de atrair mais público para o seu site e aprimorar a experiência geral do usuário. Eles podem entreter, informar, inspirar e envolver os usuários ao mesmo tempo. É por isso que você deve se esforçar para fazer o seu melhor para incorporar imagens atraentes e relevantes ao conteúdo do seu site.

Agora, embora as imagens sejam poderosas o suficiente, às vezes simplesmente colocar recursos visuais em seu site não é suficiente para manter os visitantes interessados. É por isso que sugerimos que você vá um pouco mais além e considere adicionar imagens interativas ao seu site. Essa não é apenas uma maneira incrível de fazer com que seu público se envolva ainda mais com seu conteúdo, mas também pode ajude-os a aprender mais sobre sua marca ou empresa como um todo. Tire imagens de antes e depois, por exemplo. Esses tipos de imagens são usados ​​lado a lado para mostrar pequenas diferenças entre duas imagens e, como tal, são frequentemente usados ​​como imagens estáticas simples. No entanto, ao adicionar um belo efeito de controle deslizante a essas duas imagens, você permitirá instantaneamente mais interatividade e tornará as coisas mais interessantes para os usuários.

Se você estiver interessado em aprender como adicionar um efeito de controle deslizante antes e depois no WordPress, ficará feliz em saber que é bastante simples de fazer se usar a ajuda de um plugin adequado. Mostraremos a você todas as etapas necessárias para adicionar este recurso útil ao seu site WordPress usando o widget de controle deslizante de comparação Antes / Depois do plugin Qi Addons for Elementor, então certifique-se de continuar lendo.

O que é um controle deslizante de imagem antes e depois e por que ele é útil

Como já mencionamos no início, As imagens antes e depois geralmente consistem em duas imagens colocadas lado a lado para mostrar e enfatizar qualquer tipo de diferença ou progresso. Agora, ao adicionar um efeito de controle deslizante a essas duas imagens, você dá aos usuários a possibilidade de descobrir o tamanho total de ambas as imagens movendo a alça do controle deslizante e comparando-as de uma maneira divertida e envolvente. Por exemplo, se o controle deslizante for colocado horizontalmente, os usuários poderão revelar a primeira imagem movendo o controle deslizante com o mouse totalmente para a direita. Da mesma forma, a segunda imagem será mostrada assim que moverem o controle deslizante totalmente para a esquerda.

Este tipo de efeito de controle deslizante pode ser útil para quem deseja impressionar e inspirar seu público, ou simplesmente mostrar o valor e a eficácia de seus produtos ou serviços de forma interativa. Portanto, esse tipo de efeito pode ser usado por todos os tipos de negócios, sejam eles grandes ou pequenos, relacionados à fotografia, design, beleza, saúde ou algo totalmente diferente.

Digamos que você tenha um programa de condicionamento físico que deseja apresentar aos seus clientes em potencial. Você poderá potencialmente aumentar suas vendas exibindo antes e depois fotos de pessoas que conseguiram perder peso e / ou ganhar mais músculos depois de usar seu programa. Resumindo, você atrairá o interesse dos usuários, permitindo que eles vejam a evidência visual de suas reivindicações.

Adicionando um controle deslizante de imagem antes e depois com os complementos Qi para o plugin Elementor

Agora, embora existam muitos plug-ins diferentes na web que permitirão que você adicione esse tipo de controle deslizante de imagem ao seu site, decidimos demonstrar isso usando nosso plug-in Qi Addons para Elementor. Uma das muitas coisas que diferenciam este plugin é o fato de que ele vem com um conjunto de 60 widgets flexíveis que permitem projetar e personalizar todos os tipos de elementos e seções – de tipografia e elementos criativos a recursos de negócios e WooCommerce. Resumindo, você pode usar Complementos Qi para Elementor para praticamente qualquer tipo de site, completamente de graça.

Entre esses 60 widgets, o widget Antes / Depois do controle deslizante de comparação pode ser usado para crie controles deslizantes de comparação interativos e adicione imagens com total facilidade. Ele permite que você escolha entre dois tipos de orientação – horizontal e vertical, adicione suas imagens antes e depois para que os usuários possam arrastar a alça do controle deslizante e descobrir cada imagem, personalizar o texto da alça, cor, tipografia e assim por diante.

Antes de começar, devemos lembrar que Qi Addons for Elementor é o plugin criado para o Elementor construtor de páginas. Portanto, você deve ter o Elementor instalado em seu site antes de continuar a instalar e usar o plugin Qi Addons para Elementor.

Além disso, caso você prefira assistir a vídeos, criamos um vídeo tutorial sobre o mesmo assunto, então fique à vontade para conferir:

Em primeiro lugar, vá para o backend em seu editor de página / postagem e, na barra lateral Elementor, procure o widget Antes / Depois do controle deslizante de comparação. Em seguida, basta arrastá-lo para o lado direito da tela.

Como você pode ver, o widget padrão tem um alinhamento horizontal e espaço suficiente reservado para duas imagens.

No Contente , você poderá clicar no pequeno ícone de lixeira e remover as imagens padrão das imagens Antes e Depois.

Depois disso, você pode adicionar o seu clicando em qualquer lugar nos campos da imagem.

Acerte o Inserir mídia depois de selecionar sua imagem Antes. Em seguida, repita o mesmo processo para a pós-imagem.

Já que você não pode arrastar o divisor no back-end, você deve ir para o front end de sua página para ver como ele se parece. Você pode simplesmente abri-lo em outra guia para mais conveniência.

Certifique-se de atualizar sua página para que o novo elemento seja exibido. Arraste seu divisor da direita para a esquerda (ou vice-versa) para ver a aparência do controle deslizante de sua imagem (como fizemos abaixo):

Logo abaixo da opção que permite selecionar suas imagens, está o Manipular Texto opção. Este é realmente o texto que aparecerá em sua divisória. O nosso está definido para Arrastar por padrão, mas você pode alterar o seu para o que quiser.

A seguir, o Orientação opção pode ser usada para mudar o controle deslizante de Horizontal para Vertical.

E aí está – nosso controle deslizante agora tem uma orientação vertical.

Uma vez que você Atualizar No controle deslizante, você poderá ver a aparência do efeito de arrastar com as configurações personalizadas recentemente.

Agora que mostramos como pode ser a orientação vertical, vamos mudar esta opção de volta para Horizontal e acertar Atualizar. Claro, você deve escolher aquele que melhor funciona para você.

O Offset padrão opção permite que você ajuste a posição inicial da divisória entre suas imagens. Ele é definido como 50 por cento por padrão, o que significa que está posicionado bem no meio.

Definir um valor diferente aqui moverá a posição do divisor para a esquerda ou para a direita. Ao defini-lo para algo um pouco menor, como 45 por cento (como fizemos), você pode ver instantaneamente que sua posição agora é movida para a esquerda. Mantivemos essa configuração para a posição do nosso divisor, mas como com qualquer outra opção, você pode escolher qualquer outro valor que desejar.

Seguindo para a guia Estilo – existem algumas opções aqui relacionadas ao estilo de seu controle deslizante. O primeiro é o Lidar com deslocamento superior. Ou seja, permite que você altere a posição da alça divisória. Você pode usar o controle deslizante para ajustá-lo ou digitar um novo valor. Trocamos o valor para porcentagens para o nosso e o definimos para 16 por cento.

Logo abaixo, há a opção de ajustar a alça Tamanho do Círculo. As mesmas regras se aplicam a esta opção também – você pode mover o controle deslizante para a esquerda ou direita para ajustar o tamanho ou simplesmente inserir o valor desejado.

O Tamanho da borda opção permite que você ajuste a largura da linha divisória. Deixamos o nosso padrão, mas se quiser, você pode ajustar essa opção da mesma forma que as duas anteriores.

Agora o Cor do texto opção muda a cor do texto do identificador. Você pode facilmente alterá-lo para qualquer cor de sua preferência usando o Seletor de Cores (usando o controle deslizante de cor ou inserindo um código hexadecimal).

Clicando no Handle Typography opção abre um novo conjunto de opções relacionadas à tipografia. Aqui você poderá alterar a aparência do texto dentro da divisória.

Você poderá escolher uma família de fontes (percorrendo a lista de fontes ou inserir a sua própria), alterar o tamanho da fonte (usando o controle deslizante ou inserir um valor personalizado), definir a fonte Peso, use o texto Transformar opção, Estilo, Decoração, e mais.

finalmente, o Cor do punho A opção permitirá que você altere a cor da divisória e do círculo da alça. Isso é útil porque permite que você combine esses elementos com a paleta de cores que você tem em suas imagens ou com o resto do design de seu site.

O último, Avançado A guia tem algumas opções úteis relacionadas ao posicionamento, capacidade de resposta, animações de entrada e assim por diante. Ainda assim, como está presente em todos os outros widgets do Elementor, não os cobriremos neste tutorial.

Depois de acertar o Atualizar , atualize a página com o controle deslizante para ver como fica ao vivo.

Resumindo

Exibir imagens antes e depois em seu site WordPress é uma maneira divertida e interativa de seus visitantes compararem duas imagens diferentes e permitir que vejam os benefícios visuais de seus produtos e serviços. Ao permitir que eles usem o efeito deslizante para revelar as diferenças entre suas imagens, você aumentar o potencial de envolver ainda mais o seu público com a sua marca, o que só pode levar a mais vendas a longo prazo. Portanto, não importa se você deseja mostrar os resultados do uso de seus produtos de limpeza, produtos para a pele, resultados de perda de peso de seu programa de preparação física ou alimentar ou qualquer outra coisa, um controle deslizante de imagem antes e depois é o melhor.

Adicionar um efeito de controle deslizante às suas imagens antes e depois é tão fácil quanto você pode obter se você usar a ajuda de um widget Comparação Antes / Depois do plugin Qi Addons para Elementor. É super intuitivo e contém muitas opções de personalização que permitem criar um controle deslizante de aparência única que melhor se adapta ao design geral de sua página. Siga em frente e siga nossas instruções e você poderá exibir suas lindas fotos de antes e depois em seu site WordPress em nenhum momento.