Saiba como fazer uma apresentação elegante de uma foto com seu antes e depois de forma profissional. Muitas das vezes, as pessoas colocam duas imagens lado a lado para fazer este comparativo, mas se isto fosse interativo e totalmente auto suficiente, sem a necessidade de fazer montagens em Photoshop ou qualquer outro software? Esta dica vem trazer um plugin do WordPress e sua utilização para aplicar este incrível efeito.
Primeiro, precisar instalar o plugin TwentyTwenty.
Depois, faça upload das imagens para seu site, pode ser por pelo gerenciamento de Mídia ou pela inserção de imagens nos posts. Com as duas imagens no servidor, é necessária pegar o link de cada uma, copie e cole em um arquivo a parte para ficar mais fácil.
Agora, basta editar ou inserir um post, no campo de edição, vamos utilizar o shortcode [TwentyTwenty][/ TwentyTwenty].
Certifique-se que ambas as fotos tenham as mesmas dimensões.
Com tudo pronto, vamos inserir o pequeno código para gerar o efeito.
[twentytwenty]<img src="/wp-content/uploads/2014/12/batons-vermelhos-antes.jpg" alt="Antes" width="100%" height="350"/><img src="/wp-content/uploads/2014/12/batons-vermelhos-depois.jpg" alt="Depois" width="100%" height="350"/>[/twentytwenty]
Explicação do código:
[twentytwenty] e [/twentytwenty] são a abertura e fechamento das tags que formaram os efeitos.
As imagens são, a 1ª o antes e a 2ª o depois.
1ª – /wp-content/uploads/2014/12/batons-vermelhos-antes.jpg
2ª – /wp-content/uploads/2014/12/batons-vermelhos-depois.jpg
Agora que já sabe como utilizar, vamos criar o efeito.
[twentytwenty]
[/twentytwenty]
Conforme você deslizar o seletor, verá que a imagem é sobreposta de acordo com sua necessidade, tornando visível e fácil de comparar, o “Before” e “After” somem de acordo que é feito o deslizamento.
Isso é tudo. Esperamos que este artigo tenha ajudado a você aprender a mostrar o antes e depois de uma foto em seu site WordPress. Se você gostou deste artigo, também visite no link no Facebook e Google+, há diversas publicações interessantes.