Como adicionar o widget "Antes/Depois"

Use o widget Antes/Depois para mostrar resultados e evoluções. Esse widget é bastante útil para áreas como beleza, renovação, design ou outras indústrias de serviços, pois ajuda potenciais clientes a visualizar os verdadeiros resultados de sua experiência.

Neste artigo, explicaremos como adicionar e personalizar o widget Antes/Depois.

Conteúdo

No criador de sites, selecione a página à qual deseja adicionar o widget. Clique em Adicionar widget e selecione o widget Antes/Depois.

Adicione imagens

Nas configurações do widget, faça upload das imagens de antes e depois. Existem duas formas de adicionar imagens:

Gerenciador de arquivos

No gerenciador de arquivos, você pode selecionar uma imagem existente ou fazer upload de uma nova.

Banco de imagens

O banco de imagens abre uma janela modal onde você pode escolher uma das imagens gratuitas do Unsplash.

Pesquise pelo nome da imagem, selecione uma imagem da lista e clique em Selecionar na parte inferior para adicioná-la à sua página.

Também é possível personalizar e gerenciar as imagens enviadas. Veja o que é possível fazer:

Editar

Clique no ícone de imagem.

Saiba mais: Como editar imagens usando o criador de sites.

Fazer upload de novas imagens

Clique no ícone de Fazer upload.

Excluir

Clique no ícone da Lixeira.

Para que o widget combine com o estilo do seu site, você pode personalizar sua aparência.

Depois de adicionar suas imagens, as seguintes configurações estarão disponíveis:

Posição e cor da linha divisória	Escolha a posição da linha divisória para comparar as imagens: Vertical (esquerda/direita) ou Horizontal (superior/inferior) Também é possível escolher a cor dessa linha divisória.
Posição inicial	Defina quanto de cada imagem será exibido ao carregar a página. Por exemplo, 50% mostrará partes iguais das imagens de “Antes” e “Depois”. Para ajustar isso, use o controle deslizante ou insira uma porcentagem.
Largura	Defina uma largura de widget dentro do bloco (em pixels).
Alinhamento de conteúdo	Defina um alinhamento de widget: esquerda, centro ou direita.

Para salvar suas alterações, clique em Publicar.

Copie o ID do seu elemento

Cada imagem possui um ID que a identifica na página. Com esse ID, é possível aplicar estilos e scripts personalizados, exibir pop-ups e monitorar eventos relacionados a esse elemento.

Para copiar um ID, clique nele. Para editar um ID, clique no ícone de lápis.

Saiba mais: ID de bloco e widget.