Elemento de imagem de comparação

Sobre o elemento Comparação de imagens

O processo de Comparação de Imagens O elemento permite destacar as vantagens do seu produto ou serviço comparando imagens de antes e depois em um único quadro. Este elemento funciona de forma semelhante ao elemento Imagem de Antes e Depois, encontrado em versões anteriores.

Casos de uso de exemplo:

Use a comparação de imagens para destacar o impacto dos seus produtos e gerar confiança com os clientes:

• Demonstrações de produtos: Mostrar melhorias antes/depois (por exemplo, cuidados com a pele, efeitos de limpeza).
• Visuais de estilo de vida: Compare o uso na vida real com a ausência de uso.
• Vitrines de design: Exibir redesenhos, atualizações ou transformações.

Como adicionar um elemento de comparação de imagens à sua página? 

A Comparação de Imagens é um elemento flexível e pode ser usado em qualquer lugar da sua página seguindo os passos abaixo:

Passo 1: Acessar o Painel GemPages  > PÁGINAS, então clique na página de destino para localizar o editor.

Passo 2: Na barra lateral esquerda, pesquise “comparação", Em seguida arraste e solte na seção desejada.

Passo 3: Clique no elemento para abrir o painel Configurações e começar a personalizar.

Configurar a guia Configurações

Sob o Guia Configurações, você pode ajustar as seguintes opções:

traçado

Escolha como as duas imagens serão exibidas no quadro de comparação:

• Horizontal: As imagens são comparadas da esquerda para a direita.

• Vertical: As imagens são comparadas de cima para baixo.

Imagem

Carregue e ajuste as imagens que deseja comparar.

1ª imagem: Carregue ou selecione a primeira imagem.

2ª imagem: Em seguida, escolha a 2ª imagem para comparação.

Escala:

• Preencher imagem: Estende a imagem para caber no contêiner. A proporção da imagem pode ficar distorcida.
• Ajustar imagem: Ajusta a imagem para caber dentro do contêiner, mantendo sua proporção.
  

Slider

Decida como seus visitantes interagem com o controle deslizante de comparação.

comportamento:

• Arraste para mover: Os visitantes arrastam o controle deslizante manualmente.

• Passe o mouse para mover: O controle deslizante se move automaticamente quando você passa o mouse sobre ele.

Proporção padrão: Defina a taxa de divisão inicial (em %).

Crachá

permitir que o Crachá recurso para ajudar os visitantes a identificar claramente as duas imagens comparadas.

Depois, você pode personalizar o selo de texto do seu jeito, incluindo:

1º e 2º textos: Adicione um rótulo para a 1ª e a 2ª imagens. Por exemplo, "Antigo" vs. "Novo" ou "Antes" vs. "Depois".

Estilo do texto: Ajuste a tipografia para combinar com o design da sua loja. Você pode:

• Escolha entre os estilos de texto disponíveis (Título, Parágrafo, etc.).
• Selecione uma família de fontes.
• Altere o tamanho da fonte.
• Aplique negrito, itálico e sublinhado.
• Escolha uma cor de fonte.
• Controle a altura da linha e o espaçamento das letras.
• Aplicar transformação de texto (maiúsculas, minúsculas, capitalizar).

padding: Defina o espaçamento dentro do emblema para controlar quanto espaço o texto terá ao redor dele.

Fundo: Defina a cor de fundo do emblema para visibilidade (por exemplo, um fundo de cor escura para o texto branco).

Fronteira: Personalize a espessura, o estilo e a cor da borda.

Canto: Decida se os cantos do emblema são afiados, arredondados ou em formato de pílula. Insira um raio para controle total.

Sombra: Adicione profundidade com efeitos de sombra. Ajuste o tamanho, o desfoque, a cor e a distância da sombra.

Posição: Escolha onde o emblema deve aparecer (por exemplo, canto superior esquerdo, canto superior direito, canto inferior esquerdo, canto inferior direito).

Dimensões:

Ajuste a moldura e a largura do seu elemento.

Quadro: Selecione a proporção do quadro no menu suspenso (por exemplo, 16:9, 4:3).

Largura: Por padrão, a largura é definida como 100% (Completa). Se preferir, altere a largura inserindo um número específico na caixa.

Shape

Personalize a aparência geral do quadro de comparação.

• Fronteira: Você pode alterar a cor, a espessura e o traço da borda.
• Corner: O canto da seção pode ser quadrado, redondo ou em formato de pílula. Além disso, você pode inserir um raio exato para personalizar o canto do elemento à sua maneira.
• Shadow: Você pode adicionar uma sombra e ajustar sua exibição (tamanho, cor, desfoque e distância).

Otimize o LCP

Esta configuração ajuda a melhorar a aparência da sua página Pintura com maior conteúdo (LCP) pontuação, que é uma métrica essencial do Core Web Vitals para desempenho e SEO.

Pré-carregamento: Habilite esta opção se a imagem aparecer acima da dobra e for um dos principais elementos visuais da página.

• Se Pré-carregamento = Sim: A imagem é pré-carregada para melhorar a velocidade.
• Se Pré-carga = Não: A imagem carrega normalmente.

Qualidade: Escolha o nível de compressão de imagem correto para equilibrar clareza e velocidade de carregamento:

• Melhor: Qualidade superior, tamanho de arquivo maior.
• Alto (padrão): Qualidade e desempenho equilibrados.
• Meio: Carregamento mais rápido, qualidade ligeiramente reduzida para páginas com muitas imagens.
• Personalizadas: Defina suas configurações de compactação para controle avançado.

SEO

Ajude a melhorar a classificação da sua página fornecendo informações sobre imagens. Adicionar Texto alternativo (alt text) e Imagem de título para cada imagem.

Alinhar

Ajuste o alinhamento do seu elemento dentro do contêiner: alinhado à esquerda, centralizado ou alinhado à direita.

Observação: O alinhamento não é suportado se a largura estiver definida como 100% ou mais.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até o Guia Avançado e siga as instruções em Este artigo.

Perguntas

1. Posso adicionar mais de duas imagens no elemento Comparação de imagens?

Não. O elemento Comparação de imagens foi projetado para comparar apenas duas imagens por vez (antes vs. depois). Se quiser mostrar mais comparações, você pode duplicar o elemento na sua página.

2. O elemento Comparação de imagens funciona em dispositivos móveis?

Sim. O controle deslizante é totalmente responsivo e funciona tanto em desktops quanto em dispositivos móveis. Os visitantes podem arrastar a alça com o dedo em dispositivos móveis.

3. Posso ajustar o estilo do controle deslizante?

Sim. Você pode personalizar a cor, a forma e a sombra da alça no Slider seção.

4. Como posso garantir que as imagens não pareçam esticadas?

Use o Ajustar a imagem opção abaixo Escala para preservar a proporção original das suas imagens.

5. Posso adicionar rótulos de texto como “Antes” e “Depois”?

Sim. Ative o Crachá opção para adicionar rótulos personalizáveis a cada imagem.