Voltar para o suporte Conteúdo e mídia Blocos Bloco de comparação de imagens

Bloco de comparação de imagens

Use o bloco de comparação de imagens para colocar duas imagens lado a lado (ou acima e abaixo) e use um controle deslizante para revelar as diferenças entre elas. Veja um exemplo:

Bloco de comparação de imagens

Para adicionar um bloco de comparação de imagens, clique no ícone de inserção de bloco para abrir a biblioteca de blocos e selecione o bloco de comparação de imagens.

Você encontra instruções detalhadas sobre como adicionar blocos neste link.

GIF mostrando o processo de adição de um bloco de comparação de imagens
Adicionar o bloco de comparação de imagens

O bloco funciona melhor com duas imagens da mesma largura e altura.

Você pode arrastar e soltar imagens no bloco para as posições de antes e depois. Também é possível clicar no botão de upload ou escolher entre as imagens já enviadas à sua biblioteca de mídia.

Bloco de comparação de imagens - upload de imagem
Adicionar imagens ao bloco de comparação de imagens

Você poderá adicionar uma legenda ao bloco após fazer upload das suas imagens.

Se fizer upload das imagens erradas ou desejar alterar a ordem, será necessário excluir o bloco e começar novamente.


Configurações do bloco

Todos os blocos têm opções específicas na barra lateral do editor, além das opções encontradas na barra de ferramentas do bloco. Caso não esteja visualizando a barra lateral, basta clicar no ícone de engrenagem, ao lado do botão Publicar.

As configurações do bloco estão na barra lateral.
Configurações do bloco

Configurações de orientação

Com as configurações de orientação, você pode alterar a orientação de lado a lado para acima e abaixo:

Configurações do bloco de comparação de imagens
Configurações do bloco de comparação de imagens

Avançado

Na guia Avançado, você adiciona uma classe CSS ao seu bloco, permitindo a gravação de CSS personalizado e a estilização do bloco. Saiba mais.

A seção Avançado permite adicionar uma classe CSS ao bloco.
A seção Avançado permite adicionar uma classe CSS ao bloco.
Copied to clipboard!