O bloco de Alternância Antes e Depois permite criar comparações interativas de imagens em suas páginas SeedProd. Este bloco exibe duas imagens lado a lado com uma alça deslizante personalizável que os visitantes podem arrastar para revelar os estados antes e depois, criando uma experiência de comparação visual envolvente.
Comparações de Antes e Depois são perfeitas para exibir transformações, melhorias de produtos, mudanças de design, resultados de perda de peso, reformas de 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 para os visitantes explorarem as diferenças em seu próprio ritmo.
Adicionando o Bloco de Alternância Antes e Depois às Suas Páginas
Siga estas etapas para adicionar um bloco de Alternância Antes e Depois à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Alternância Antes e Depois na seção desejada da sua página.
O bloco de Alternância 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
Uma vez adicionado, clique no bloco de Alternância Antes e Depois para abrir suas configurações. Na aba 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 Estoque: Escolha se deseja carregar sua própria imagem do seu computador ou selecionar em bibliotecas de imagens de estoque
- Src da Imagem: Exibe o URL de origem da sua imagem anterior selecionada
- Rótulo Anterior: Insira um texto personalizado que aparece sobre a imagem anterior (por exemplo, “Antes”, “Original”, “2023”). Isso ajuda os visitantes a entenderem 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 Estoque: Escolha se deseja carregar sua própria imagem ou selecionar em bibliotecas de estoque para a imagem posterior
- Src da Imagem: Exibe o URL de origem da sua imagem posterior selecionada
- Rótulo Posterior: Insira um texto personalizado que aparece sobre a imagem posterior (por exemplo, “Depois”, “Melhorada”, “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). Horizontal é o mais comum para comparações lado a lado
- Alinhar: Defina o alinhamento de todo o bloco de comparação dentro de seu contêiner
- Mover ao Passar o Mouse: Ative para habilitar 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 exigir cliques ou arrastar
- Cor de Sobreposição: Adicione uma cor semitransparente às suas imagens para um efeito visual único ou para ajudar os rótulos a se destacarem
Carregue suas imagens de antes e depois, adicione rótulos e configure a orientação e o comportamento do controle deslizante.
Controle de Comparação:
- Deslocamento Inicial do Controle: Defina onde o controle deslizante começa quando a página carrega, em porcentagem (por exemplo, 50 começa no meio, 25 mostra mais da imagem anterior)
- Cor do Controle: Escolha a cor para o controle deslizante e a linha divisória entre as imagens
- Espessura do Controle: Ajuste a largura da linha divisória que separa as duas imagens
- Largura do Círculo: Controle o tamanho do controle circular que os visitantes arrastam para mover o controle deslizante
- Raio do Círculo: Ajuste a circularidade do círculo do controle. Valores mais altos criam um controle mais circular
- Tamanho do Triângulo: Defina o tamanho das setas direcionais que aparecem no controle, indicando para onde arrastar
Personalize a aparência do controle de comparação, incluindo sua cor, tamanho e posição inicial.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Alternância Antes e Depois:
Estilos de Rótulo Antes / Depois:
- Tipografia do Rótulo: Controle as propriedades da fonte para os rótulos de antes e depois, incluindo família da fonte, tamanho, peso e estilo
- Cor do Rótulo: Defina a cor do texto para os rótulos de antes e depois para garantir que sejam visíveis em suas imagens
- Cor de Fundo: Adicione uma cor de fundo atrás dos rótulos 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 de Alternância Antes e Depois (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre a comparação e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Alternância Antes e Depois (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre as imagens e as bordas do bloco
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Alternância Antes e Depois. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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, data-comparacao|antes-depois)
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculte o bloco de Alternância Antes e Depois em telas de desktop
- Ocultar em Tablet: Oculte o bloco de Alternância Antes e Depois em dispositivos tablet
- Ocultar em Celular: Oculte o bloco de Alternância 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 entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras. Isso chama a atenção para sua comparação interativa
A aba Avançado oferece opções para estilizar rótulos, ajustar espaçamentos e configurar visibilidade do dispositivo e animações.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de alternância antes e depois e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de alternância antes e depois à sua página! Este bloco interativo cria comparações visuais envolventes que permitem aos visitantes explorar as diferenças entre duas imagens em seu próprio ritmo. Experimente diferentes cores de alça, orientações de controle deslizante e efeitos de passagem do mouse para criar uma experiência de comparação que cativa seu público e demonstra efetivamente transformações ou melhorias.