Algumas coisas são mais fáceis de mostrar do que dizer: uma foto retocada, um quarto depois de uma remodelação, um design antes e depois de uma limpeza O livre Widget de comparação de imagens em Complementos Mestres para Elementor empilha duas imagens e deixa cair uma alça arrastável entre elas, para que os visitantes deslizem para revelar a diferença por si mesmos.
Você carrega uma imagem anterior e uma imagem posterior, adiciona rótulos, escolhe uma divisão vertical ou horizontal e, em seguida, estiliza o identificador e os rótulos para combinar com seu site Este guia cobre todas as configurações do widget.
O que o widget Comparação de Imagens faz #
O widget mostra duas imagens no mesmo quadro, uma em cima da outra, com uma alça deslizante no meio Arraste a alça e ela passa entre a imagem antes e depois Você pode rotular cada lado, virar a divisão da esquerda para a direita para a parte superior inferior e decidir se a alça segue um arrasto (livre) ou, com Master Addons Pro, um clique ou movimento do mouse.
Existem duas guias para trabalhar. Conteúdo contém as duas imagens, os rótulos e o comportamento do controle deslizante. Estilo controla o layout, as etiquetas de sobreposição e a alça As opções usuais do Elementor Advanced ficam ao lado delas.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Duas imagens que se alinham, do mesmo tamanho e enquadramento, para que o slide seja lido como uma cena.
Como adicionar o widget Comparação de Imagens #
No editor Elementor, abra o Elementos painel e pesquisa Comparação Imagem, ou vá até a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para sua página e ele carrega com duas imagens de amostra e um controle deslizante que você pode começar a editar imediatamente.
Carregue as duas imagens #
Abrir o Conteúdo guia. O Imagens seção tem a Antes e um Depois guia, e cada um define sua própria imagem, rótulo e resolução.
- Antes/ Depois das guias: alterne entre os dois lados para definir cada imagem.
- Escolha uma Imagem: escolha a imagem desse lado na biblioteca de mídia.
- Etiqueta: uma pequena legenda para o lado, como Antes do Trabalho ou Resultados Finais.
- Resolução de imagem: o tamanho servido, como Full ou Large.
Escolha cada imagem da biblioteca #
Clique Escolha uma Imagem e a biblioteca de mídia do WordPress abre Defina a imagem anterior na guia Antes, depois mude para a guia Depois e escolha a segunda. Coisa fácil de esquecer: a guia em que você está decide de que lado você está mudando, então verifique antes de clicar em selecionar.
Defina os rótulos #
Tipo a Etiqueta em cada guia e o widget imprime-o como uma sobreposição nesse lado da imagem O rótulo anterior fica de um lado, o rótulo posterior do outro, para que os visitantes saibam qual é qual sem você soletrar.
Ajuste as configurações do controle deslizante #
Abrir o Configurações seção de como o controle deslizante se comporta É aqui que você define a posição inicial, a direção da divisão e o que move a alça.
- Proporção visível (%): onde a alça começa, para que você possa abrir no lado antes ou depois.
- Sobreposição: mostre ou oculte os rótulos antes e depois.
- Mover alça: Arrastar/deslizar o Rato é grátis Mova do Rato e Clique do Rato precisa de Master Addons Pro.
Mudar a orientação #
O Orientação alternar interruptores entre Horizontal e Vertical Horizontal, o padrão, dá um wipe esquerda-direita A vertical empilha a imagem anterior na parte superior e a posterior abaixo, com uma alça para cima e para baixo, que geralmente lê melhor para fotos altas.
Estile o layout, alça e etiquetas #
Abrir o Estilo guia. Existem seções para Estilo Layout, Sobreposição, Manusear, e Etiqueta, então o controle deslizante corresponde ao seu design em vez da aparência padrão.
- Estilo de layout: borda, preenchimento e margem ao redor de todo o controle deslizante Border Radius e Box Shadow são opções Pro.
- Alça: a cor, tamanho e estilo do controle de arrasto.
- Etiqueta: cor por lado, tipografia, fundo, borda e espaçamento para as legendas.
Casos de uso comum #
- Edição fotográfica mostrando uma foto bruta ao lado da versão retocada.
- Casa e renovação antes e depois de uma remodelação ou limpeza.
- Design e desenvolvimento layout antigo versus redesenho.
- Saúde e fitness progrida os arremessos lado a lado.
- Produtos um item simples ao lado do resultado finalizado ou estilizado.
Dicas para trabalhar com o widget Comparação de Imagens #
- Combine as duas imagens. Mesmo tamanho, ângulo e corte para que o slide seja lido como uma cena, e não duas fotos presas.
- Defina a relação inicial. Abra parcialmente com a proporção visível para que os visitantes possam dizer que há algo para arrastar.
- Mantenha os rótulos curtos. Antes e Depois, ou duas palavras, ficam mais limpas sobre a imagem do que uma frase completa.
- Escolha o gatilho certo. Drag funciona em telas de desktop e touch A opção Pro Mouse Move parece rápida, mas não faz nada em telefones, que não têm hover.
- Use Vertical para tiros altos. Uma divisão superior-inferior funciona melhor para imagens de retrato do que um lenço estreito esquerdo-direito.
Assista ao tutorial em vídeo #
Prefere acompanhar na tela? o tutorial em vídeo abaixo percorre o elemento Comparação de Imagens do início ao fim, mostrando como as imagens, rótulos, configurações do controle deslizante e estilo funcionam no editor Elementor.
Perguntas frequentes #
O que é o widget Comparação de Imagens em Master Addons?
É um widget Elementor que empilha uma imagem antes e uma depois com uma alça arrastável entre eles Os visitantes deslizam a alça para limpar de uma imagem para a outra, com etiquetas opcionais de cada lado, todas definidas a partir do painel Elementor sem código.
Como adiciono rótulos antes e depois?
Abra a seção Imagens e digite um Rótulo na guia Antes e na guia Depois Cada rótulo imprime como uma sobreposição em seu lado da imagem Você pode mostrá-los ou ocultá-los com a alternância Sobreposição nas Configurações e estilizá-los na seção Rótulo da guia Estilo.
Posso fazer o controle deslizante vertical ou horizontal?
Sim. A seção Configurações tem um alternador de Orientação O padrão é Horizontal, uma divisão esquerda-direita; mude para Vertical e as imagens empilham a parte superior e inferior com uma alça para cima e para baixo A vertical funciona bem para imagens de retrato ou capturas de tela altas.
Como os visitantes movem o controle deslizante de comparação?
O dropdown Move Handle em Configurações define o gatilho O Arrasto/Swipe do Mouse é gratuito e funciona em telas de desktop e touch. Mouse Move e Mouse Click são opções Master Addons Pro.
Preciso de imagens do mesmo tamanho?
Para o melhor resultado, sim. As duas imagens ficam no mesmo quadro, portanto, combinar tamanho, ângulo e corte faz com que o slide seja lido como uma cena. Se as imagens diferirem, defina uma resolução de imagem fixa para que ambas sejam atendidas nas mesmas dimensões.
Embrulhando #
O widget Comparação de imagens transforma duas imagens em um interativo antes e depois: carregue as duas imagens, adicione rótulos, defina a orientação e o identificador e, em seguida, estilize o controle deslizante para combinar Para widgets relacionados, consulte o Widget de ponto de acesso de imagem e o Widget de efeitos de passagem de imagem, navegue por completo Widgets e extensões Master Addons, e veja o Página do widget de comparação de imagens ou o guia deslizante antes e depois por exemplos.
