O efeito de “Antes e depois” é muito útil quando existe a necessidade de dar um design mais limpo e automatizado para uma das páginas de seu site. Utilizar este efeito é muito simples, mas é necessário fazer uso de linguagem de programação HTML, então se você não domina a linguagem, preste muita atenção para que tudo dê certo.

Para aplicar o efeito no seu site é necessário primeiro entrar em contato com a equipe DC5 para que realizemos a instalação dos recursos necessários. Se você já tem o efeito no seu site e deseja apenas alterar as imagens, pode seguir o tutorial sem fazer contato.

 

1. Para realizar os seguintes procedimentos você precisa acessar o painel administrativo do seu site. Se você não sabe como acessá-lo, nós temos um tutorial que ensina como faze-lo, neste link.
2. Depois de efetuar o login, você se encontrará na página inicial de administração do seu site. Agora, no menu lateral esquerdo, você deve acessar a aba Produtos.

3. Procure o produto em que deseja alterar ou inserir o efeito. Você pode usar a barra de pesquisa para encontrar seu produto mais rápido.

4. Neste ponto, se você estiver inserindo o efeito, encontre a seguinte caixa de texto, logo no início da página. Se você estiver alterando as imagens, essa caixa terá alguns códigos.

5. Certifique-se de que você está na aba de Texto desta caixa clicando sobre este botão.

6. Acesse a biblioteca de mídia do seu site clicando em Mídia no menu lateral. Lembre-se de abrir em uma nova guia para não perder o progresso feito até aqui.

6.1. Clique em Adicionar nova.

6.2. Desça um pouco a página e clique em Selecionar Arquivos e escolha as duas imagens que farão parte do efeito. As duas imagens devem ter exatamente o mesmo tamanho para que o efeito fique como o esperado!

7. Depois disso, as imagens aparecerão em miniatura.

8. Agora clique no botão Add Twenty20.

9. Feito isso, selecione as duas imagens que serão utilizadas no efeito. Primeiro clique na primeira imagem, e depois na segunda. Agora aperte no botão “Insert”.

10. Depois de selecionar as imagens, aparecerá uma janela com algumas opções, que são:
Width – O tamanho da sua imagem, em pixels ou porcentagem. Esse campo será utilizado apenas quando as imagens forem muito grandes e existir necessidade de diminuí-las.
Offset – O quão longe da esquerda aparecerá a linha do efeito que permite a troca da imagens.
Direction – Esse campo define em que posição a linha do efeito aparecerá: horizontalmente ou verticalmente.
Alignment – Alinha o efeito em seu campo de texto.
Depois de alterar da maneira desejada, clique em “Insert Shortcode”.

11. Um código parecido com esse aparecerá no seu campo de texto. Clique em Atualizar.

12. Clique em Ver produto novamente abrindo em uma nova guia.

13. Pode ser que na sua página de produto, o efeito não esteja localizado no mesmo lugar do exemplo que daremos aqui, isso é normal e varia de site para site. Essa é a visualização do efeito:

14. Você pode visualizar as imagens clicando e arrastando a linha central que foi criada sobre elas.

 

Esperamos que com esse tutorial você tenha conseguido sanar todas as suas dúvidas e atingido os seus objetivos. Esse tutorial foi um pouco avançado pelo uso da linguagem HTML, então caso não tenha dado certo, entre em contato com a nossa equipe!

11 de maio de 2017
O efeito de “Antes e depois” é muito útil quando existe a necessidade de dar um design mais limpo e automatizado para uma das páginas de […]
11 de maio de 2017
Colocar widgets nas laterais de sua loja virtual pode ser muito útil para que o cliente tenha uma visualização melhor do site e se sinta mais […]
10 de maio de 2017
Adicionar alguns produtos de maneira automática no carrinho de compras do seu cliente é muito útil quando queremos oferecer algum serviço ou recomendar um produto de […]
13 de abril de 2017
A automatização de alguns campos de uma categoria de produtos é muito útil para evitar um trabalho manual repetitivo e desnecessário, mas o que é essa […]