Como mostrar imagens antes e depois com efeito deslizante


Um efeito muito legal para muitos tipos de sites é o típico imagem de antes e depois de o que você pode deslizar para desvendar, então, o antes e depois de um processo.

É útil para clínicas de estética, restauradores, estúdios de arquitetura, encanadores, quase o que você pode pensar.

A ideia é oferecer ao visitante uma imagem dupla que, ao deslizar para um lado e outro, vê o antes e ele depois de De algo. Sempre que você quiser mostrar a diferença entre duas imagens, será uma maneira muito legal de consegui-lo.

E no WordPress existe um plugin que o torna luxuoso.

Bem, na verdade existem vários, mas de todos aqueles que eu tentei, o que funciona melhor e, acima de tudo, o mais Fácil de usar para qualquer usuário é Twenty20.

Depois de instalá-lo, você verá no editor um novo botão chamado Adicionar Twenty20:

Pressionando-o irá abrir o carregador de imagem do editor, e você só tem que escolha 2 e pressione o botão "Inserir"

Nada mais para fazer isso mostrará a janela em que configurar como a comparação das duas imagens será exibida:

Embora na captura anterior eu coloquei textos que mostram que eu te explico o que você pode configurar:

  • Antes do texto: Texto a ser exibido como uma legenda da imagem do antes.
  • Depois do texto: Texto a ser exibido como uma legenda da imagem do depois de.
  • Largura: Largura, em porcentagem, que ocupará o controle deslizante de comparação de imagens. Por padrão, ocupa 100% da largura do conteúdo da sua entrada / página.
  • Offset: Aqui você pode escolher, de 0,1 a 1,0, onde deseja que o controle deslizante seja exibido. Se você colocar 0,1, você só verá o antes, ter que deslizar completamente para ver a imagem do depois de. Se você colocar em 0.5 o slider será metade das duas imagens, e se você colocar em 1.0 você verá a imagem do depois de. É uma questão de gosto ou o efeito que você quer alcançar, brincar com ele.
  • Direção: Se você quiser que a comparação das duas imagens seja horizontal ou vertical.
  • Alinhamento: O alinhamento, no que diz respeito ao conteúdo, do bloco das duas imagens. Você pode escolher entre não, esquerda o certo.
  • Mover o controle deslizante no cursor do mouse?: Por padrão, o controle deslizante funcionará quando você clicar na marca do cursor e arrastar para um lado ou outro, mas se você ativar esse recurso, ele também seguirá automaticamente o movimento do cursor, sem precisar clicar. É um efeito estético, teste.

No final, o que o plugin oferece é um shortcode, com os ajustes definidos acima, que determinará como será o controle deslizante de sua imagem antes e ele depois de. Algo assim…

[twenty20 img1="55" img2="54" offset="0.1" before="Antes" after="Después"]

E o efeito alcançado será algo semelhante a essa captura …

Você também pode ver todo o processo neste vídeo dos autores do plugin:

O usuário pode mova a marca de derrapagem para ver o antes e ele depois de de uma foto, um trabalho, um desenho, o que você quer comparar.

E não só isso, bem também tem um widget para escolher qual slider mostrar, e até um widget para criadores de layout tão popular quanto Compositor Visual, UX Builder o Elementor.



Um efeito realmente interessante para muitos tipos de sites e empresas, que você já sabe como fazer facilmente com o WordPress.

Como será exibido é apenas uma questão de testar os diferentes parâmetros do shortcode, até bater o efeito perfeito para a comparação de fotos de antes e ele depois de.

A entrada Como mostrar antes e depois das imagens com efeito deslizante foi publicada pela primeira vez por Fernando Tellado na Ajuda do WordPress. Não copie conteúdo, não diga nada de bom sobre você para seus leitores.

Publicações que podem interessar:

Novo código de prática para as empresas de estacionamento a serem introduzidas -, mas alguns poderão desviá-lo

20 idéias bem sucedidas de negócios em casa na Índia

Papel de branco livre de CRM do Salesforce CRM

Sobre | Por Mundo virtual

Eu estou Girando 30! Eu Tenho um Favor a Pedir…

A maioria das pessoas não negocia seu salário – É por isso que é um problema

https://testmygeekstuff.com/6-razoes-nem-sempre-para-prestar-atencao-as-estatisticas-e-numeros-2/

Influencer Marketing: compreensão profunda e seu básico

Eletrônicos para Cozinha