efeito comparativo de foto – Turbosite – Blog https://www.turbosite.com.br/blog Mon, 15 Dec 2014 12:01:44 +0000 pt-BR hourly 1 https://wordpress.org/?v=7.1.2 https://www.turbosite.com.br/blog/wp-content/uploads/2026/09/cropped-logo_turbo_vermelha-32x32.png efeito comparativo de foto – Turbosite – Blog https://www.turbosite.com.br/blog 32 32 Como mostrar antes e depois de uma foto com WordPress https://www.turbosite.com.br/blog/como-mostrar-antes-e-depois-de-uma-foto-com-wordpress/ Mon, 15 Dec 2014 12:01:44 +0000 http://blog.turbosite.com.br/?p=3945 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]
Antes
Depois
[/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.

]]>