É interessante como o Wix consegue fazer com que alguns recursos que, se fossem criados manualmente, pela programação, dariam um certo trabalho e levariam mais tempo até ficarem do jeito que o desenvolvedor quer.
Um exemplo é o recurso botão de imagem, que permite que uma imagem seja usada como um botão.
Existem vários tipos de aplicações para essa funcionalidade do botão de imagem, mas vamos nos ater aqui à função mouseover, que é aquele efeito que ocorre quando o mouse passa por cima do botão.
Com essa característica do mouseover, podemos criar facilmente efeitos que seriam complexos se criados de outras maneiras. Um exemplo disso, é fazer com que uma imagem fique colorida toda vez que passamos o mouse por cima, que aliás é uma técnica muito usada em design de grandes sites.
Confira uma aplicação neste exemplo (seção ‘Apoio’).
Como fazer
Viu o exemplo e achou legal? Então veja como é fácil fazer:
1. Vá em ‘Adicionar>>Botões e Menus>>Botão de Imagem‘:
2. Entre nas configurações:
3. Em ‘Visualização Padrão‘, selecione uma imagem:
4. Escolha uma imagem e clique sobre ela.
Antes de adicioná-la, clique no ícone ferramenta:
5. Agora selecione a opção “Editar imagem“:
6. Dentro do editor de imagens, escolha a ferramenta ‘Efeitos‘:
7. Escolha o efeito ‘Metropolis‘, o qual deixará a imagem sem cor:
8. Depois clique seguidamente em “Aplicar” e “Salvar“.
9. Veja que a nova imagem editada foi adicionado à sua biblioteca.
Clique sobre ela e depois no botão “Trocar Imagem“:
10. Em ‘Visualização Mouseover‘, clique em ‘Trocar Imagem‘:
11. Selecione a mesma imagem, mas agora a original, ou seja, a colorida:
12. Adicione a mesma imagem colorida para a ‘Visualização após Clique‘:
13. Recomendo clicar no link ‘Redefinir para o tamanho original‘, para que a imagem fique com melhor qualidade:
14. Se desejar, adicione um link e um texto que aparece quando o usuário passa o mouse por cima da imagem (Alt text):
O resultado fica igual do exemplo deixado no início desse post. Mas esse recurso pode ser usado em várias situações.
É isso!
Qualquer dúvida, comente.