Slider de comparação de imagens do elementor: como criar uma vitrine antes e depois

Imagens estáticas lado a lado não fazem justiça ao seu trabalho Uma edição de foto, uma reforma de casa, uma transformação de produto, todas merecem melhor do que duas fotos sentadas uma ao lado da outra Uma controle deslizante de comparação de imagens Elementor corrige isso Os visitantes arrastam uma alça pela imagem para revelar as versões antes e depois por si mesmos, e esse pouco de interação os mantém em sua página por mais tempo.

Eu tenho usado o widget Comparação de Imagens Master Addons nas landing pages dos clientes, e ele consistentemente obtém mais engajamento do que capturas de tela estáticas Este tutorial cobre configuração, personalização e algumas coisas que vale a pena saber antes de publicar O widget é gratuito, fica dentro do painel do Elementor como qualquer outro widget, e você pode tê-lo rodando em cerca de dois minutos.

O que este guia cobre:

• O que é um controle deslizante de comparação de imagens
• Quem precisa de um controle deslizante antes/depois
• O que você ganha com o widget gratuito
• Como criar um (passo a passo)
• Dicas para uma melhor comparação
• Solução de problemas comuns
• Complementos Mestres vs. alternativas
• Por que Master Addons
• Começar
• Perguntas frequentes

O que é um controle deslizante de comparação de imagens?

Um controle deslizante de comparação de imagens coloca duas imagens uma sobre a outra com um divisor arrastável entre elas Os usuários deslizam para a esquerda e para a direita (ou para cima e para baixo) para revelar uma imagem sobre a outra Você define uma imagem “antes do” e uma imagem “depois do” no editor, e o widget lida com o resto.

Você provavelmente já viu isso em portfólios de fotografia, sites odontológicos ou páginas imobiliárias mostrando projetos de renovação Em vez de olhar passivamente para duas fotos separadas, os visitantes interagem fisicamente com a comparação Essa interação aumenta o tempo na página, o que ajuda a sua SEO e reduz as taxas de rejeição.

Quem precisa de um controle deslizante antes e depois no elementor?

Quem quiser mostrar uma transformação São os casos de uso que encontro com mais frequência:

Web Designers e Agências

Redesigns de sites parecem ótimos em um controle deslizante de comparação Deixando um potencial cliente arrastar entre o design antigo e o novo cria mais confiança do que uma captura de tela plana jamais criará Você pode emparelhar isso com o Widget de efeitos de passagem de imagem se você deseja variedade visual extra nas páginas do portfólio.

Fotógrafos e Editores de Fotos

Provavelmente o ajuste mais natural Se você fizer retoques, classificação de cores ou trabalhos de restauração, um controle deslizante de comparação de imagens permite que clientes em potencial vejam exatamente o que você pode fazer Arquivo bruto à esquerda, versão editada à direita Diz mais do que qualquer legenda poderia.

Lojas E-Commerce

Venda de produtos para a pele, produtos de limpeza ou qualquer coisa com resultados visíveis? A antes após a comparação de imagens na página do seu produto é mais convincente do que um parágrafo de cópia Eu vi este trabalho particularmente bem para produtos cosméticos e de melhoria da casa, onde a diferença visual é dramática.

Imobiliário e Arquitetura

Projetos de renovação são uma combinação natural Tire uma foto antes do início do trabalho, pegue outra quando estiver feito, coloque ambas no widget de comparação Seu portfólio fica mais interativo e os visitantes tendem a gastar mais tempo navegando em seus projetos.

Comerciantes Digitais

Analytics dashboards, desempenho de anúncios, gráficos de tráfego do site Mostrar o “antes de trabalhar conosco” e “depois de trabalhar conosco” resultados com um controle deslizante arrastar para comparar Funciona melhor do que colar duas capturas de tela em um estudo de caso.

Widget de comparação de imagens de complementos mestres: o que você obtém

Existem várias maneiras de adicionar um antes depois do controle deslizante no Elementor. Alguns exigem plugins autônomos, alguns precisam de código personalizado e alguns estão bloqueados por trás de assinaturas de complementos premium. Master Addons inclui o Widget de comparação de imagens na versão gratuita. vale a pena notar porque a maioria dos addons concorrentes (Ultimate Addons, PowerPack, The Plus Addons) colocam esse recurso atrás de um paywall.

O widget inclui:

• Integração de Elementor Nativo: Arraste e solte do painel Elementor. Sem códigos de acesso, sem página de configurações separada. Instale a partir do Repo de plugins WordPress e aparece na sua lista de widgets imediatamente.
• Livre para usar: O widget de comparação de imagens faz parte da versão gratuita Nenhuma licença Pro necessária.
• Vários estilos de controle: Alça deslizante (arrastar), movimento do mouse (hover) ou clique. As orientações de comparação horizontal e vertical são suportadas.
• Etiquetas personalizadas: Altere o texto “Before” e “After” para qualquer coisa que você quiser, em qualquer idioma As cores, tipografia e posicionamento do rótulo são todas ajustáveis.
• Responsivo: Funciona em desktop, tablet e celular Os gestos de toque e deslizamento funcionam em dispositivos móveis.

Mestre Addons tem mais de 80 widgets e extensões total. o widget de comparação de imagens é aquele que aparece muito em projetos de landing page e portfólio.

Como criar um controle deslizante antes e depois no elementor (passo a passo)

Antes de começar, você precisa de ambos Elementor e os Master Addons instalados e ativados Ambos são gratuitos Ir para Plugins > Adicionar novo, procure cada nome de plugin, instale e ative.

Passo 1: Activar o Widget de Comparação de Imagens

O widget Comparação de imagens está habilitado por padrão Se você desligou alguns widgets para manter seu painel enxuto, verifique se ele ainda está ligado Ir para Complementos mestres > Complementos e extensões no seu painel WordPress e confirmar Comparação de imagens é alternado em. o Documentação de Comparação de Imagens tem os detalhes completos da configuração Enquanto você está nesse painel, você pode notar outros widgets que valem a pena ligar, como Manchete animado ou Galeria Slider.

Passo 2: Abra uma página no Elementor

Crie uma nova página ou abra uma existente com o Elementor Eu criei uma nova landing page para este tutorial, mas o controle deslizante de comparação cai em qualquer página existente da mesma maneira.

Passo 3: Adicionar o Widget de Comparação de Imagens

No painel Elementor à esquerda, procure por “Image Comparison” (você verá o ícone Master Addons ao lado dele).Arraste o widget para sua página onde quiser que o controle deslizante apareça.

Passo 4: Carregue suas imagens antes e depois

Clique no widget e você verá dois campos de upload de imagens: um para a imagem anterior, outro para a imagem posterior Carregue ambos e a visualização atualiza imediatamente com a alça do divisor no centro.

Atenção rápida: ambas as imagens devem ter as mesmas dimensões. Se um é 1200×800 e o outro é 900×600, o layout irá olhar para fora Corte-los para o mesmo tamanho antes de fazer upload Isso faz as pessoas subir mais do que qualquer outra coisa.

Passo 5: Personalize o Texto do Rótulo

Os rótulos padrão dizem “Before” e “After,” mas você pode mudar estes para qualquer coisa Vendendo um produto? Use “Without” e “With.” Mostrando uma renovação? Tente “Day 1” e “Finished.” Os campos do rótulo aceitam qualquer texto, incluindo caracteres não ingleses, então a localização não é um problema.

Passo 6: Configurar as Configurações do Slider

Na guia Conteúdo, há mais algumas configurações que valem a pena ajustar:

• Orientação: Alterne entre a comparação horizontal (esquerda/direita) e vertical (superior/inferior) Horizontal é o padrão e funciona para a maioria dos casos.
• Razão de visibilidade: Controla onde o divisor começa Defina-o para 50% para uma divisão centrada, ou mude-o para mostrar mais de uma imagem inicialmente.
• Sobreposição: Activar ou desactivar uma sobreposição de cores nas imagens.
• Tipo de alça: Escolha entre arrastar do mouse ou passar o mouse para comparação O arrasto requer que o visitante clique e arraste O pairar revela sobre o movimento do mouse, que parece mais fluido, mas pode ser desorientador em alguns layouts.

Passo 7: Estilo o controle deslizante

Mude para a guia Estilo para personalização visual Você pode alterar a cor do divisor, adicionar uma borda ao redor do contêiner de comparação, ajustar a tipografia da etiqueta (família de fontes, tamanho, peso), adicionar sombras de caixa e controlar o espaçamento Passe alguns minutos aqui para combinar com o design do site Há controle suficiente para que você não acabe com um controle deslizante de aparência genérica.

Hit Publicar e seu antes depois do controle deslizante está ao vivo. Cerca de dois minutos do início ao fim, supondo que suas imagens estejam prontas.

Dicas para uma melhor comparação de imagens

O widget lida com o lado técnico, mas a comparação em si é tão boa quanto sua configuração Algumas coisas que EU peguei construindo isso em sites de clientes:

Combine as dimensões da sua imagem

Eu mencionei isso já, mas é o erro que vejo com mais frequência Se sua imagem anterior for 1920×1080 e sua imagem posterior for 800×600, o controle deslizante irá forçá-los a se alinhar e o resultado parecer distorcido Cortar ambas as imagens para exatamente as mesmas dimensões de pixel antes de fazer o upload Todas as vezes.

Mantenha a composição semelhante

Tire as duas fotos do mesmo ângulo, mesma distância, mesmo enquadramento Se a sua foto antes é um tiro largo e o depois é um close-up, o contraste não pousa da maneira que você quer O controle deslizante fica melhor quando a única diferença entre as duas imagens é a mudança real.

Centro a Transformação

Coloque a mudança mais visível perto do centro da imagem É aí que o divisor começa, então é a primeira coisa que as pessoas percebem quando interagem com o controle deslizante Se a mudança estiver desligada para um lado, ajuste a relação de visibilidade para chamar a atenção para ela.

Não exagere

Uma comparação forte por seção de página é suficiente Já vi páginas com cinco ou seis controles deslizantes empilhados uns sobre os outros, e isso dilui o impacto Escolha seu melhor par de antes e depois e apresente esse Se você tiver várias comparações, organize-as em um Galeria de imagens filtráveis ou Carrossel de Imagem em vez disso.

Adicionar um CTA Perto

Se a comparação se senta em uma página de vendas ou portfólio, solte um botão de call-to-action logo abaixo dele Alguém que acabou de arrastar através de uma transformação impressionante já está engajado Um botão “Get a Free Quote” ou “Shop Now” bem ali tende a converter bem.

Solução de problemas: quando o controle deslizante não está se comportando

A maioria das configurações apenas funciona, mas algumas coisas tropeçam as pessoas Veja como consertar as que me perguntam.

• O controle deslizante não está aparecendo. Nove em cada dez vezes o widget ficou desativado. Ir para Complementos Mestres, depois Complementos e Extensões, e confirmar Comparação de Imagens é alternado Se estiver ligado e ainda faltando, limpe seu cache (LiteSpeed, WP Rocket ou Cloudflare) para que uma cópia antiga da página pare de servir.
• A pega não vai arrastar. Este é quase sempre um conflito JavaScript ou um plugin de cache que combinou ou adiou o script do widget Excluir scripts Master Addons do JS combinar e adiar, limpar o cache e testar novamente.
• As duas imagens parecem esticadas ou desalinhadas. São dimensões diferentes. Cortar tanto para dimensões de pixel idênticas quanto para recarregar, esta é a causa mais comum.
• Funciona em desktop, mas não em dispositivos móveis. Verifique se nenhum contêiner pai tem um estilo oculto de estouro cortando a área de toque e se nada está sobre o controle deslizante que está travando o toque funciona fora da caixa, portanto, uma falha de deslizamento é quase sempre um problema de layout ou índice z.
• Os rótulos antes e depois são cortados. Encurte o texto do rótulo ou reduza o tamanho da fonte do rótulo sob a guia Estilo; rótulos muito longos podem ser derramados fora da imagem em telas pequenas.

Se nenhum deles corrigir, poste os detalhes no Fórum de suporte Master Addons com seu tema e plugins ativos, geralmente é um conflito rápido de definir.

Widget de comparação de imagens versus alternativas

Uma rápida olhada em como Master Addons se compara a outros controle deslizante de comparação de imagens WordPress opções para Elementor:

A grande diferença é a disponibilidade gratuita Se você não quer pagar por um addon Pro apenas para obter um controle deslizante antes e depois, Master Addons e ElementsKit são suas opções Master Addons também inclui técnicas de sobreposição de texto e efeitos de hover de imagem no nível gratuito, você obtém um conjunto mais amplo de ferramentas de imagem sem atualizar.

Por que Master Addons para sua comparação de imagens?

O widget de comparação de imagens é um dos mais de 80 elementos e extensões Complementos Mestres para Elementor. Muitos usuários instalam para um widget e acabam usando vários outros no mesmo projeto Foi assim que comecei com ele também.

Além dos widgets individuais, você obtém um Construtor Tema para cabeçalhos, rodapés e páginas de arquivo personalizados Há um Construtor Popup com intenção de saída e gatilhos de rolagem. E a Biblioteca de modelos com seções pré-construídas você pode importar com um clique.

V3.0.0 é visivelmente mais rápido do que as versões mais antigas, o plugin é mantido ativamente e está sendo executado em mais de 40.000 sites WordPress. Master Addons Pro adiciona o Widget Builder, o modo White Label e o suporte premium se precisar deles no futuro.

Começar

Configurando um antes do controle deslizante de comparação de imagens no Elementor leva um par de minutos com Master Addons Nenhum código, nenhuma compra de addon premium, nenhum plugin de comparação separado para instalar O widget é gratuito, funciona com qualquer configuração Elementor, ea personalização abrange tudo, desde o texto do rótulo para a cor divisor.

Baixe complementos mestres gratuitamente e tente o widget Comparação de Imagens no seu próximo projeto Se precisar de mais em todas as suas compilações do Elementor, confira os planos Pro.

Leitura relacionada: Elementor Imagem Carrossel Tutorial | Plug-ins de galeria filtrável Elementor | 25 Técnicas de Texto Elementor Sobre Imagem

Prefere assistir? aqui está um passo a passo rápido no Elementor:

Perguntas frequentes