Crie deslizadores de comparação de imagens em minutos

Quer comparar duas fotos lado a lado? Com o Genially, é fácil criar deslizadores de imagem de antes e depois atraentes que o seu público possa explorar e interagir. Rápido, gratuito e sem precisar de conhecimentos de programação!

As principais equipes do mundo criam conteúdo interativo no Genially

Justapor duas imagens

Aumente suas habilidades de narrativa visual com deslizadores atraentes e dinâmicos.

Você não precisa saber nada sobre CSS ou HTML. Basta escolher as imagens que você deseja comparar e voilà! O Genially gera a barra deslizante para você.

Funciona em qualquer dispositivo: clique ou toque para mover a barra arrastável.

Forneça informações extras com textos explicativos interativos, legendas e créditos de fotos.

Compartilhe ou incorpore em qualquer lugar: torne as publicações de rede social, recursos de aprendizagem, sites ou catálogos online atraentes e fáceis de usar.

Mostrar antes e depois das alterações

Ajude as pessoas a visualizar e entender como as coisas mudaram ao longo do tempo. Use fotos reais para criar comparações impressionantes como, o antes e o agora, descubra a diferença ou histórico versus o moderno.

Você trabalha em educação ou formação? Por serem visuais e cinestésicos, os deslizadores podem fortalecer a compreensão, reforçar a aprendizagem e incentivar os alunos a se concentrarem nos detalhes.

Compare dois quadros: fotos, ilustrações, gráficos ou GIFs.

Vertical ou horizontal: você escolhe a orientação.

Envie fotos do seu dispositivo, vincule a uma foto online, navegue na biblioteca do Genially ou crie imagens com IA.

Faça comparações interativas de produtos

Dê a seus clientes uma prévia visual do que eles podem esperar se escolherem seu produto ou serviço.

Destaque os principais recursos, mostre produtos semelhantes ou revele transformações com um toque de humor, aumentando o engajamento e o tempo na página.

Use tooltips interativas, etiquetas e CTAs para fornecer especificações de produtos e capturar leads.

Crie confiança e credibilidade com comparações lado a lado que mostram projetos reais de clientes ou a evolução do seu produto.

Destaque-se e seja lembrado: aumente o tempo de permanência, os compartilhamentos e a taxa de cliques.

Grátis

É grátis criar deslizadores de comparação de imagens no Genially. Faça upgrade para ter acesso a funcionalidades mais avançadas, como métricas de engajamento e ferramentas de branding.

Fácil de compartilhar

Mostre em qualquer lugar. Compartilhe o link, incorpore à sua página da web ou loja online, adicione a um curso de eLearning ou integre ao seu LMS.

Acessível

Todo o conteúdo publicado no Genially atende aos padrões WCAG. Adicione texto ALT para garantir que os usuários de ferramentas de assistência possam entender o que está nas imagens.

Personalização

Ajuste as dimensões, adicione legendas e adapte cada elemento na tela. Adicione seu logotipo e marca ou incorpore a barra deslizante em um design maior.

Mais do que barras deslizantes

O Genially oferece um kit de ferramentas completo para construir todos os tipos de conteúdo interativo e gamificado para marketing, comunicação e aprendizagem online.

Vários dispositivos

O Genially funciona bem em qualquer dispositivo, incluindo celular, tablet e notebook. Os usuários podem clicar e arrastar a barra deslizante com um movimento do cursor ou clicar e deslizar.

PASSO A PASSO

Como fazer um deslizador de comparação de imagens

Como fazer um controle deslizante de comparação de imagens

Escolha suas imagens

Adicione o widget comparador à tela e substitua as imagens de exemplo. Você pode fazer upload de arquivos do seu dispositivo ou do Google Drive, colar uma URL, pesquisar na biblioteca de recursos do Genially ou gerar imagens com IA.

Personalizar o comparador

Escolha o formato, as dimensões e se deseja legendas. Não se esqueça de adicionar texto ALT para tornar as imagens acessíveis e usar o botão Pré-visualizar para ver como tudo aparecerá para o seu público.

Gostou do design? Clique em Compartilhar para obter o link. Seu barra deslizante está pronto para ser incorporada ou compartilhada onde quiser. Tudo está na nuvem, então, se você atualizar o design, as alterações vão aparecer automaticamente.

Compartilhe, incorpore ou integre em qualquer lugar! O Genially é compatível com todos os construtores de sites, CMS e LMS.

Exemplos de integração de sistemas de gestão de aprendizagem (LMS, na sigla em inglês)

MODELOS

Layouts pré-construídos

Crie uma barra deslizante personalizada do zero ou use um modelo para criar rapidamente uma página inteira. Adicione suas imagens e texto e estará pronto para ser publicado.

Comparação antes e depois

Comparação Visual

Comparador de Imagens

“Uma ótima maneira de criar interações inteligentes sem muito esforço. Todo designer é, com a ajuda do Genially, um construtor de aplicações web interativas.”

Danny Fandrich

CEO da UpReach

Perguntas frequentes

Qual tamanho e formato as imagens precisam ter?

O widget de comparação do Genially é compatível com qualquer imagem no formato JPG, JPEG, PNG, SVG ou GIF, com um tamanho de até 10 MB. Você pode ajustar o tamanho da barra deslizante e selecionar um layout de retrato (vertical) ou paisagem (horizontal).

Como faço para adicionar um comparador deslizante de antes e depois no meu site?

Crie seu design gratuito no Genially e clique em Compartilhar para publicar. Copie e cole o link compatível com o seu sistema de gestão de conteúdo. O Genially pode ser publicado online, compartilhado ou incorporado em vários formatos, incluindo URL, HTML e iframe.

Como posso usar o comparador deslizante de imagens?

Em qualquer lugar que você queira mostrar uma transformação (antes e depois, antes e agora) ou apresentar uma escolha entre duas opções (isso ou aquilo).

Como o comparador deslizantes têm um forte impacto visual, eles são um recurso jornalístico e educacional popular para exibir mudanças em uma paisagem ou destacar desenvolvimentos ecológicos, históricos e geográficos. 

Para negócios e marketing, eles são uma ótima ferramenta de portfólio para mostrar resultados ou estudos de caso de clientes, como projetos de renovação e reforma. 

No mundo do desenvolvimento de software e produtos, as comparações lado a lado podem ser usadas para documentar visualmente as alterações em uma interface ou processo. 

Para aprendizagem e desenvolvimento, você pode usar um comparador deslizante interativo para apresentar as melhores práticas no local de trabalho, no que é permitido e proibido na empresa ou nas opções de certo ou errado para realizar uma tarefa. 

Muitos usuários do Genially criaram recursos inovadores de eLearning e ensino, incluindo jogos de encontrar as diferenças, aulas de gramática e traduções visuais. Teste já e use a sua criatividade!

A maneira mais fácil de criar eLearning interativo

Crie sua conta gratuita e comece a explorar