O bloco Antes e Depois permite criar comparações interativas de imagens nas suas páginas SeedProd. Este bloco exibe duas imagens lado a lado com um controle deslizante personalizável que os visitantes podem arrastar para revelar os estados antes e depois, criando uma experiência visual envolvente de comparação.
As comparações antes e depois são perfeitas para mostrar transformações, melhorias em produtos, mudanças de design, resultados de perda de peso, reformas em casas, efeitos de edição de fotos ou qualquer cenário em que você queira demonstrar visualmente o impacto da mudança. O controle deslizante interativo facilita aos visitantes explorar as diferenças em seu próprio ritmo.
Adicionando o bloco Alternar antes e depois às suas páginas
Siga estas etapas para adicionar um bloco Antes/Depois à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Alternar Antes/Depois na seção desejada da sua página.
O bloco Antes e Depois está localizado em Design > Avançado e pode ser arrastado para qualquer seção da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Antes/Depois para abrir suas configurações. Na guia Conteúdo, você pode carregar suas imagens de comparação e configurar o comportamento do controle deslizante.
Imagem:
- Imagem anterior: Clique em Escolher nova imagem para carregar ou selecionar a imagem “anterior” que aparece no lado esquerdo (ou superior) da comparação.
- Use sua própria imagem ou use uma imagem de banco de imagens: escolha entre enviar sua própria imagem do computador ou selecionar uma imagem de bibliotecas de imagens de banco de imagens.
- Fonte da imagem: exibe a URL de origem da imagem selecionada anteriormente.
- Rótulo “Antes”: insira um texto personalizado que aparecerá sobre a imagem “antes” (por exemplo, “Antes”, “Original”, “2023”). Isso ajuda os visitantes a entender o que estão vendo.
- Imagem posterior: Clique em Escolher nova imagem para carregar ou selecionar a imagem “posterior” que aparece no lado direito (ou inferior) da comparação.
- Use sua própria imagem ou use uma imagem de banco de imagens: escolha se deseja enviar sua própria imagem ou selecionar uma imagem de bancos de imagens para a imagem posterior.
- Fonte da imagem: exibe a URL de origem da imagem selecionada.
- Rótulo pós-processamento: insira um texto personalizado que aparecerá sobre a imagem pós-processamento (por exemplo, “Pós-processamento”, “Aprimorado”, “2024”).
Orientação:
- Orientação do controle deslizante: escolha entre Vertical (o controle deslizante se move para cima e para baixo) ou Horizontal (o controle deslizante se move para a esquerda e para a direita). A orientação horizontal é mais comum para comparações lado a lado.
- Alinhar: Defina o alinhamento de todo o bloco de comparação dentro do seu contêiner.
- Mover ao passar o mouse: ative para permitir o movimento automático do controle deslizante quando os visitantes passarem o mouse sobre a comparação. Quando ativado, o controle deslizante segue o cursor sem a necessidade de cliques ou arrastar.
- Cor de sobreposição: adicione uma sobreposição de cor semitransparente às suas imagens para obter um efeito visual exclusivo ou para ajudar os rótulos a se destacarem.
Carregue suas imagens antes e depois, adicione rótulos e configure a orientação e o comportamento do controle deslizante.
Alça de comparação:
- Desvio inicial do controle deslizante: defina onde o controle deslizante começa quando a página é carregada, como uma porcentagem (por exemplo, 50 começa no meio, 25 mostra mais da imagem anterior)
- Cor da alça: escolha a cor da alça do controle deslizante e da linha divisória entre as imagens
- Espessura da alça: ajuste a largura da linha divisória que separa as duas imagens.
- Largura do círculo: controle o tamanho da alça circular que os visitantes arrastam para mover o controle deslizante.
- Raio do círculo: Ajuste a curvatura do círculo do cabo. Valores mais altos criam um cabo mais circular.
- Tamanho do triângulo: defina o tamanho das setas direcionais que aparecem na alça, indicando para que lado arrastar.
Personalize a aparência da alça de comparação, incluindo sua cor, tamanho e posição inicial.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Alternar antes e depois:
Estilos de etiqueta antes/depois:
- Tipografia da etiqueta: controle as propriedades da fonte para as etiquetas antes e depois, incluindo família, tamanho, espessura e estilo da fonte.
- Cor da etiqueta: defina a cor do texto das etiquetas “antes” e “depois” para garantir que elas fiquem visíveis nas suas imagens.
- Cor de fundo: adicione uma cor de fundo atrás das etiquetas para melhorar a legibilidade, especialmente se suas imagens tiverem brilho variável.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco Antes/Depois (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre a comparação e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno no bloco Antes/Depois (superior, direito, inferior, esquerdo). Isso cria um espaço entre as imagens e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Antes/Depois. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação JavaScript.
- Classe personalizada: adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos personalizados: adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, comparação-de-dados|antes-depois)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculte o bloco Alternar antes/depois nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Alternar antes e depois em dispositivos tablet.
- Ocultar no celular: Oculte o bloco Alternar antes e depois em dispositivos móveis
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o bloco de comparação é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muitas outras. Isso chama a atenção para sua comparação interativa.
A guia Avançado oferece opções para estilizar rótulos, ajustar espaçamento e configurar a visibilidade e as animações do dispositivo.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Alternar antes e depois e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Antes/Depois à sua página! Esse bloco interativo cria comparações visuais envolventes que permitem aos visitantes explorar as diferenças entre duas imagens no seu próprio ritmo. Experimente diferentes cores de alças, orientações de controles deslizantes e efeitos de foco para criar uma experiência de comparação que cative seu público e demonstre de forma eficaz as transformações ou melhorias.