Comparação Imagem
Uma imagem vale mais que mil palavras, mas uma comparação não tem preço O elemento Comparação de Imagens permite mostrar mudanças, upgrades ou diferenças com um controle deslizante interativo Coloque duas imagens lado a lado e deixe os visitantes arrastarem uma alça para revelar o “after” sobre o “before.” Perfeito para reformas, resultados de condicionamento físico, reformas de produtos ou qualquer história visual de progresso Com controle total sobre a alça, etiquetas e sobreposição, você pode criar uma comparação atraente e profissional que envolve e convence em segundos.
Slider interativo de arrastar e revelar
A magia está na interação Carregue suas imagens ‘Before” e “After”, depois defina a Relação Visível inicial igual a “ começando em 50% mostre ambas igualmente Os usuários podem clicar e arrastar a Alça para deslizar entre as duas imagens, dando-lhes controle direto sobre a revelação Escolha a Orientação (horizontal ou vertical) e defina a interação para Arrastar o Rato ou deslizar por toque É uma maneira imersiva de demonstrar mudança.
- Controle intuitivo: os usuários arrastam uma alça para comparar interativamente as duas imagens.
- Orientação flexível: crie controles deslizantes de comparação horizontais (esquerda/direita) ou verticais (para cima/para baixo).
- Ponto de Partida Ajustável: Defina a divisão inicial (por exemplo, 30% antes, 70% depois) para destacar o resultado.
Sobreposição personalizável e etiquetas transparentes
Certifique-se de que os espectadores entendam o que estão vendo Ative a sobreposição para exibir os rótulos “Before” e “After” diretamente nas imagens Personalize totalmente esses rótulos: altere o texto, a tipografia, as cores e o plano de fundo Você pode até usar um gradiente para os estados de estilo normal e pairar separadamente e controlar o preenchimento, as margens e as bordas da sobreposição para uma aparência polida e integrada.
- Texto da etiqueta personalizada: Altere “Antes/Depois de” para qualquer coisa como “Antigo/Novo,” Original/Aprimorado,” etc.
- Fundo elegante da sobreposição: Use cores sólidas, gradientes, ou mesmo imagens para os fundos do rótulo.
- Contexto Visual Claro: Certifique-se de que os espectadores nunca se perguntem qual imagem é qual.
Estilo profissional de alça e contêiner
O controle deslizante deve parecer parte do seu design, não uma ferramenta genérica Personalize totalmente o identificador: altere a cor e o tamanho da barra, estilize a caixa de arrasto com ícones, cores e fundos e adicione sombras da caixa e raios de borda Em seguida, estilize o contêiner principal (estilo de layout) com bordas, preenchimento, sombras. Cada elemento, desde o identificador até as etiquetas do contêiner, pode ser adaptado à sua marca.
- Design de alça de arrasto: Estile a barra deslizante e a caixa arrastável com ícones, cores e efeitos de hover.
- Polonês de contêiner: adicione bordas, sombras e espaçamento ao widget para que ele se encaixe perfeitamente no seu layout.
- Toque responsivo: A alça foi projetada para ser fácil de agarrar e arrastar em dispositivos de desktop e touchscreen.
Perguntas frequentes para comparação de imagens
Posso usar isso para comparar mais de duas imagens?
Não, este elemento foi projetado especificamente para uma comparação direta, lado a lado, de duas imagens É perfeito para cenários antes/depois Para mostrar várias imagens ou estados, considere usar um controle deslizante de galeria ou um carrossel de imagens.
Como isso funciona em telefones celulares?
Perfeitamente! o controle deslizante é totalmente amigável ao toque Os usuários podem deslizar para a esquerda/direita (ou para cima/para baixo) para mover a alça O elemento é responsivo, e você pode ajustar configurações como tamanho da etiqueta e tamanho da alça para celular no modo de edição responsiva do Elementor.
Posso alterar o texto nos rótulos?
Absolutamente. Você pode alterar o texto padrão “Before” e “After” para qualquer coisa que desejar diretamente nas configurações de Conteúdo. Isso permite personalizar os rótulos para qualquer cenário, como “Day/Night,”SemSem/Com,” ou “Produto A/Produto B.”
Qual o melhor uso para a orientação vertical?
Os controles deslizantes verticais são ótimos para comparar imagens altas, como retratos de corpo inteiro, fachadas de edifícios ou qualquer transformação “top vs. bottom” É também uma escolha visual única que pode fazer sua comparação se destacar em uma página de conteúdo horizontal.
O uso de duas imagens de alta resolução irá desacelerar minha página?
Pode, se as imagens forem muito grandes Utilize a configuração Resolução de Imagem sabiamente (por exemplo, “Large” em vez de 'Full') e otimize sempre as suas imagens para a web antes de carregar O elemento em si é leve, mas o tamanho do ficheiro de imagem é o principal fator para o desempenho.
Posso iniciar o controle deslizante com a imagem "Depois" quase sempre oculta?
Sim, use a configuração Razão Visível Se você configurá-lo para 90%, a imagem “Before” ocupará 90% do espaço, escondendo a maior parte da imagem “After” até que o usuário arraste a alça Isso é ótimo para criar uma revelação surpresa.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
