O editor está em inglês por enquanto. Sem cartão de crédito.
Teste o editor, sem cadastro
Escolha um modelo, personalize e veja tudo se atualizar ao vivo, sem cadastro. O editor está em inglês por enquanto.
Sem cartão de crédito · Plano grátis para sempre
Sem cartão de crédito · Plano grátis para sempre
O comparador antes e depois do Common Ninja é um widget gratuito e sem código que compara imagens e revela transformações visuais com um divisor arrastável.
Envie as fotos de antes e depois, escolha a orientação horizontal ou vertical, personalize os rótulos, as cores e a alça do divisor e cole uma linha de código de incorporação em mais de 200 plataformas, como Canva, Wix, Tilda, Squarespace e Google Sites.
A configuração leva menos de 4 minutos.
Reformas de casas, tratamentos odontológicos, retoque de fotos, jornadas de emagrecimento e reformulações de design têm uma coisa em comum: a transformação é o que importa. Um comparador arrastável deixa os visitantes sentirem a diferença em vez de ler sobre ela.
Empresas de serviços dependem de provas. Profissionais de limpeza, pintores, paisagistas, restauradores, fotógrafos e cabeleireiros fecham mais agendamentos quando o cliente em potencial pode arrastar o divisor e ver o resultado real do trabalho, e não uma foto de banco de imagens.
Skincare, cosméticos, ferramentas, tintas, kits de restauração. Tudo cujo valor está em uma mudança visível pode ser apresentado com um comparador. Incorpore em páginas de produto, estudos de caso e landing pages para aumentar a conversão com provas na própria página.
Designers, fotógrafos, retocadores e jornalistas usam comparadores para mostrar o processo junto com o resultado. Coloque lado a lado uma renderização final e um wireframe, uma foto crua e a edição finalizada, ou uma imagem de arquivo de antes e agora para uma reportagem.
Adicione duas fotos do mesmo assunto em momentos diferentes. Escolha um divisor horizontal ou vertical, defina qual imagem é o estado inicial e escreva os dois rótulos que os visitantes vão ver ao passar o mouse.
Ajuste com arrastar e soltar o estilo da alça, as cores dos rótulos, a proporção da imagem, a velocidade da animação e a posição inicial do divisor, com pré-visualização ao vivo. Deixe o comparador com a cara da sua marca sem escrever uma única linha de CSS.
Copie o código de incorporação e coloque em qualquer lugar do seu site. As alterações que você fizer depois nas imagens ou nos rótulos são aplicadas automaticamente, sem precisar incorporar o código de novo.
Os visitantes arrastam o divisor com o cursor no computador e com o dedo em telas de toque. A alça continua responsiva em todos os tamanhos de tela, e você pode trocar o ícone da alça para combinar com o estilo da sua marca.
Gire o divisor 90 graus com um clique. Comparadores horizontais funcionam para transformações em formato largo (reformas, paisagens, layouts de design). Comparadores verticais funcionam para fotos em retrato (rostos, moda, odontologia, retoque).
Mude o estilo da alça, as cores dos rótulos, a proporção da imagem ou a posição inicial do divisor e veja o comparador se atualizar em tempo real dentro do editor. Nada de publicar e torcer para dar certo.
Quando o editor visual não for suficiente, adicione CSS personalizado a qualquer elemento. Crie efeitos de hover exclusivos, tempos de animação próprios ou espaçamentos perfeitos ao pixel sem mexer no resto do seu site.
O widget antes e depois permite criar comparadores horizontais ou verticais, para você liberar toda a sua criatividade. Com a opção de criar comparadores horizontais ou verticais, você tem flexibilidade para adaptar cada comparador às necessidades do seu projeto. Seja você designer, fotógrafo ou dono de empresa, o widget antes e depois é a ferramenta perfeita para mostrar seu trabalho de um jeito único e envolvente.
Com o widget antes e depois, você pode criar quantos comparadores quiser e contar uma história visual completa, sob medida para as suas necessidades, seja para mostrar o andamento de uma obra, a transformação de uma reforma em casa ou a mudança na aparência de uma pessoa ou de um animal ao longo do tempo.
O widget antes e depois vem com opções completas de personalização, para você editar o design com facilidade e combinar com o visual do seu site. Você pode mudar as cores do comparador, dos botões e dos rótulos para combinar com a sua marca. Também pode escolher entre diferentes fontes e ajustar o tamanho, o estilo e a cor da fonte para criar um visual coeso e profissional. Além dessas opções de design, você também pode personalizar o espaçamento do widget para que ele se encaixe perfeitamente no layout do seu site.
O widget antes e depois é uma ferramenta valiosa para qualquer site. Além de ser totalmente responsivo, ou seja, de se ajustar perfeitamente ao tamanho da tela de qualquer dispositivo, ele tem um design elegante e moderno que melhora o visual geral do seu site. Em um mundo em que cada vez mais pessoas acessam a internet pelo celular e pelo tablet, é essencial ter um site otimizado para telas móveis. O widget antes e depois permite fazer exatamente isso e coloca você à frente da concorrência.
Nosso editor avançado é uma ferramenta poderosa que dá a você controle total sobre a aparência do widget antes e depois. Com esse recurso, você personaliza com facilidade cada aspecto do visual do widget, das cores e fontes ao layout e ao posicionamento. E, se estiver se sentindo especialmente criativo, você pode levar a personalização a outro nível editando o CSS diretamente. Assim, você consegue fazer mudanças ainda mais avançadas no widget e deixá-lo com a sua cara. Seja para fazer alguns ajustes simples ou para caprichar em personalizações avançadas, nosso editor avançado dá conta.
Para incorporar o widget antes e depois no seu site, basta copiar o código fornecido e colar no HTML da sua página. Além disso, o widget foi feito para se atualizar sozinho: qualquer alteração que você fizer no editor do antes e depois aparece automaticamente no seu site, sem precisar de nenhuma atualização manual.
O widget antes e depois é fácil de usar e não exige conhecimento de programação. Nosso painel intuitivo, com o recurso de arrastar e soltar, permite personalizar o widget do jeito que você quiser com apenas alguns cliques.
Você pode ajustar a posição dos rótulos no widget antes e depois. Assim, você coloca os rótulos no lugar que melhor combina com o design e o layout do seu site ou aplicativo.
Seja a sua imagem em formato paisagem, retrato ou quadrado, você pode definir a proporção da imagem para que ela apareça da melhor forma.
Pronto para colocar sua transformação na página?
Abrir o editorSem cartão de crédito · Configuração em menos de 4 minutos
O Common Ninja tem widgets sem código incríveis, que deixariam mais bonito um site feito em qualquer criador de sites. É muito fácil de usar e de personalizar. Tem widgets para quase todo mundo que quer deixar o site impressionante.
Traduzido do inglês
Serviço excepcional. Uso os widgets deles para me ajudar no meu negócio de web design e, sempre que preciso de ajuda, eles ajudam muito rápido.
Traduzido do inglês
Empresa excelente com um serviço excelente!!! Usamos para criar uma pesquisa e foi muito fácil de usar. O atendimento foi perfeito. O Amit nos ajudou com cada problema e cada dúvida que tivemos, muito obrigado!!!
Traduzido do inglês
O Common Ninja salvou o dia quando estávamos criando nosso site, e o atendimento ao cliente que o Daniel, cofundador e CEO, nos deu foi incrível.
Traduzido do inglês
Sim. O plano gratuito inclui um widget de comparador antes e depois, sem limite de tempo, sem cartão de crédito e sem período de teste acabando. Faça upgrade só quando precisar de mais widgets, estilos premium ou limites maiores de visualizações por mês.
Não. Crie e personalize todo o comparador em um editor de arrastar e soltar e depois cole uma linha de código de incorporação no seu site. A maioria dos usuários termina a configuração em menos de 4 minutos.
Os visitantes arrastam um divisor vertical ou horizontal sobre duas imagens sobrepostas para revelar a diferença. A interação funciona com o mouse no computador e com toque no celular. No editor, você define as duas imagens, os rótulos ("Before" / "After" por padrão) e a posição inicial do divisor.
Sim. O comparador antes e depois do Common Ninja aceita as duas orientações. Use um divisor horizontal para transformações em formato largo (reformas, paisagens) e um divisor vertical para fotos em retrato (rostos, moda, retoque).
Sim. O divisor foi pensado primeiro para o toque, com o arrastar do mouse como alternativa no computador. O tamanho das imagens, a posição dos rótulos e a alça se ajustam automaticamente em celulares, tablets e notebooks. Não é preciso criar uma versão separada para celular.
Sim. Os dois rótulos são totalmente personalizáveis. Renomeie, mude as cores, escolha o canto em que aparecem ou oculte os dois. É útil para sites que não estão em inglês, campanhas de marca ou pares de antes e depois em que rótulos neutros funcionam melhor que os padrões.
JPG, PNG e WebP funcionam. Para o melhor resultado, envie as duas imagens com as mesmas dimensões e a mesma proporção, para que o divisor fique bem alinhado. O widget aceita imagens grandes, do tamanho de uma imagem de destaque (hero), então não é preciso reduzir antes de enviar.
Com mais de 200 plataformas, como Canva, Wix, Tilda, Squarespace, Google Sites, WordPress, Shopify, Webflow, Bootstrap Studio, HighLevel, Hostinger, Readymag e qualquer página HTML personalizada que aceite um código de incorporação.
Escolha sua plataforma. Cada uma leva menos de 4 minutos.
Mostre imagens que alternam ou deslizam
Adicione áreas interativas nas imagens que revelam informações extras ao clicar ou passar o mouse.
Mostra dados ou recursos lado a lado para comparar as informações com facilidade.
Mostra vários logos em um carrossel que rola ou gira.
Mostre depoimentos de clientes em um slider que gira.
Mostre no seu site as avaliações do Google da sua empresa
Sim, você pode deixar o divisor inclinado.
Sim, você muda a direção do comparador com facilidade na aba “Content”.
Usar o widget antes e depois é muito fácil. Basta se cadastrar e começar a usar a versão gratuita. Não precisa se preocupar com configuração ou instalação complicada, porque o widget antes e depois foi pensado para ser simples e direto. Depois de se cadastrar, você tem acesso a todos os recursos e funções básicas do widget, que pode usar para melhorar seu site e sua presença online. A partir daí, você pode fazer upgrade para a versão paga se quiser recursos e possibilidades mais avançados. Seja qual for a versão escolhida, você vai ver que o widget é uma ferramenta poderosa e fácil de usar, que pode ajudar a levar sua presença online a outro nível.
O widget antes e depois do Common Ninja é uma ferramenta gratuita, cheia de recursos e opções. Embora o uso seja gratuito, ele tem um limite de visualizações. Isso significa que, depois de um certo número de visualizações, o widget pode deixar de aparecer ou de funcionar no seu site. Vale lembrar que esse limite de visualizações pode variar de acordo com o plano que você usa. Mesmo com essa limitação, o antes e depois do Common Ninja continua sendo uma ferramenta valiosa para empresas que querem aumentar o engajamento dos clientes e melhorar a experiência geral de quem visita o site.
O widget antes e depois do Common Ninja é uma ferramenta versátil para qualquer criador de sites. Ou seja, você pode adicionar este widget ao seu site ou loja com facilidade, não importa a plataforma que você usa para criar seu site. O widget antes e depois funciona perfeitamente com a sua plataforma, seja um criador de sites popular ou algo mais especializado. Assim, você aproveita todos os benefícios desta ferramenta poderosa sem se preocupar com problemas de compatibilidade.
Incorporar o widget antes e depois do Common Ninja no seu site é muito fácil, e o processo tem duas etapas:
Sim. O widget antes e depois pode ser usado em conformidade com a GDPR. A coleta de informações dos visitantes é sempre opcional: ela fica desativada até você ativá-la nas configurações do widget, e você decide o que é coletado. Como dono do site, você continua responsável pela forma como usa os dados dos seus visitantes.
Não é preciso saber programar. Nosso widget antes e depois foi feito para ser fácil de usar, mesmo para quem tem pouca experiência técnica. O widget tem uma interface simples, que permite personalizá-lo com facilidade sem conhecimento de programação. Você pode personalizar o antes e depois por completo para combinar com a sua marca. Quando terminar, basta copiar o código fornecido e colar no seu site. Simples assim!
Incorporar o widget antes e depois no seu site é um processo simples. Basta copiar o código fornecido e colar no lugar desejado do seu site. O widget se integra perfeitamente ao seu site, e você já pode aproveitar seus recursos e funções. Não é preciso conhecimento técnico nem de programação, é só copiar e colar o código para começar. Esse processo simples permite adicionar o widget ao seu site e melhorar a funcionalidade dele sem nenhuma complicação.
Sim. Queremos muito ouvir a sua sugestão. Acesse esta página (em inglês).
Há vários motivos para usar um widget de comparador antes e depois no seu site.
Primeiro, um comparador antes e depois pode ser uma forma útil de mostrar os resultados do seu trabalho ou dos seus produtos. Ao exibir uma imagem de antes e depois em formato de comparador, você demonstra com clareza as melhorias ou mudanças que fez e oferece uma prova concreta do valor que seu trabalho ou seus produtos podem entregar.
Segundo, usar um comparador antes e depois pode ajudar a melhorar a experiência de quem visita o seu site, deixando-o mais interativo e envolvente. Ao permitir que os visitantes comparem as imagens de antes e depois no comparador, você oferece uma experiência mais imersiva e interativa, que pode manter os visitantes por mais tempo no seu site e incentivá-los a explorar mais.
Terceiro, usar um comparador antes e depois pode ajudar a melhorar a otimização do seu site para mecanismos de busca (SEO). Ao incluir palavras-chave e frases relevantes no texto e nos links que você adiciona ao comparador antes e depois, você aumenta as chances de o seu site aparecer nos resultados de busca para esses termos. Isso pode atrair mais tráfego para o site e aumentar a sua visibilidade online.
Em resumo, usar um widget de comparador antes e depois no seu site pode ser uma forma útil de mostrar os resultados do seu trabalho ou dos seus produtos, melhorar a experiência do usuário e impulsionar o SEO do seu site.
Funciona em mais de 200 plataformas. Escolhido por mais de 500 mil empresas.
Crie seu antes e depoisSem cartão de crédito · Configuração em menos de 4 minutos
