A secção Antes e depois coloca duas imagens uma sobre a outra com um divisor. Os clientes arrastam o divisor para ver mais de uma imagem ou da outra. Use-a para resultados (antes e depois), duas cores ou dois acabamentos de um produto.
Adicionar a secção
- Abra o construtor e vá à página que quer. Funciona na página inicial e nas páginas de produto, de destino, de coleção e de coleções, até 3 por página.
- No separador Secções, clique em Adicionar nova secção e escolha Antes e depois no grupo Conteúdo.
- Clique no bloco Antes e depois dentro dela, escolha as suas duas imagens e clique em Publicar.
O bloco Antes e depois
Este bloco contém as duas imagens. Está sempre na secção e não pode ser removido.
- Imagem de antes e Imagem de depois: as duas fotos. Use fotos tiradas do mesmo ângulo, para ficarem alinhadas.
- Etiqueta de antes e Etiqueta de depois: uma pequena etiqueta no canto de cada imagem, como "Antes" e "Depois", ou "Preto" e "Branco". Deixe vazio para ocultar a etiqueta.
- Direção: Horizontal usa um divisor que os clientes arrastam para a esquerda e para a direita. Vertical usa um divisor que os clientes arrastam para cima e para baixo.
- Proporção: a forma da moldura. Automático segue a imagem de antes, ou escolha Retrato, Quadrado ou Paisagem. As duas imagens são cortadas para a mesma moldura.
- Posição do divisor: onde o divisor começa, de 5% a 95%. A 50%, os clientes veem metade de cada imagem.
- Mostrar uma dica quando aparecer no ecrã: o divisor mexe-se um pouco sozinho, para os clientes perceberem que o podem arrastar.
- Seguir o rato no computador: nos computadores, o divisor segue o rato sem ser preciso clicar. Nos telemóveis, os clientes arrastam sempre.
- Utilizar esquema de cores do elemento pai: o divisor, a pega e as etiquetas usam as cores da secção. Desative para escolher outro Esquema de cores.
Configurações da secção e título
Adicione até 2 blocos de Texto, 1 Separador e 1 Grupo para um título e um texto curto.
- Direção: Vertical coloca o título acima das imagens, Horizontal coloca-o ao lado.
- Empilhar verticalmente no telemóvel: ativo por defeito, para as imagens manterem toda a largura do telemóvel.
- Posição e Alinhamento, Largura da secção, Esquema de cores, Preenchimento e um separador CSS personalizado.
Na página de produto
O mesmo bloco Antes e depois também pode ir dentro das secções Informações do produto e Informações da página de destino, e dentro dos separadores recolhíveis, para a comparação ficar junto ao botão de compra. Veja Como adiciono separadores recolhíveis, datas de entrega, um guia de tamanhos, selos ou imagens antes e depois à página de produto?
Bom saber
- Na loja ao vivo, a comparação só aparece depois de escolher as duas imagens. Até lá, o construtor mostra imagens de exemplo.
- Os clientes também podem mover o divisor com o teclado.
- Os clientes que ativaram a redução de movimento no dispositivo não veem o movimento da dica.
- As imagens parecem cortadas? Escolha a Proporção mais próxima das suas fotos, ou use fotos com a mesma forma.
- Use apenas fotos reais de resultados reais.