Dicas de HTML5: Criando Um Site Dinâmico com Galerias Animadas
Atualizado: 15 de jan. de 2019
Recentemente nos deparamos com um incrível site criado com o Wix, chamado Le Tigre Tent (A Tenda do Tigre). Uma coisa que realmente nos impressionou nesse site foi a forma como eles utilizaram as Galerias Grid Animadas na página inicial, o que fez todo o site parecer mais “vivo”, divertido e animado.
Como este é um recurso novo do Editor Wix HTML5, muitos usuários ainda não o conhecem, mas ele é muito fácil de usar e traz resultados fantásticos. Você pode adicionar esta galeria em qualquer página do seu site, mas na página inicial ela irá criar um efeito muito poderoso, encantando os visitantes do site assim que eles entram no site. Vamos ver como adicioná-las ao seu site Wix:
Selecione a área na sua página inicial onde você deseja colocar a galeria e remova quaisquer outros elementos dela.
Adicione uma caixa para dar a sua galeria de um quadro e mais profundidade. Clique em Adicionar > Formas e Linhas > Caixa.
Estenda a caixa de forma a cobrir toda a área destinada à galeria.
Clique na caixa e, em seguida, em “Trocar Estilo” para personalizá-la – mude as cores, adicione sombras, etc
Agora vamos adicionar a galeria. Clique em Adicionar> Galeria e escolha “Grid Animada”.
Estique a galeria para cobrir a área da caixa.
Para personalizar a galeria, clique sobre ela e escolha “Configurações”.
Altere o número de linhas e colunas para atender às suas necessidades.
Selecione uma margem de tamanho 10 para obter um visual mais espaçoso.
Em “Transições”, escolha “Vertical”.
Alterar a duração de acordo com suas necessidades (5 é o mais lento).
Recomendamos não usar as opções “Mostrar botão de Autoplay” e “Mostrar Botões de Navegação”.
Em “Quando clicar numa imagem”, escolher o comportamento que você quer (preferimos a opção “Ir para o modo de expansão).
Clique em “Alterar Estilo” para personalizar o design da galeria: fundo, textos, cores, etc
Agora volte para a galeria, clique nela e escolha “Organizar Imagens”.
Clique em “Adicionar Imagens” e escolha entre as suas imagens, as Imagens Grátis do Wix ou faça o upload de novas imagens.
Dê às suas fotos um título e uma descrição, e use as setas à esquerda para alterar a ordem das imagens.
O número de fotos que você precisa para adicionar, a fim de tirar o máximo proveito desta galeria animado depende do número de colunas e linhas que você tem. Uma boa regra é seguir a fórmula
“N° de colunas x N° de linhas x 3“.
Ou seja, se você tem três linhas e três colunas, você precisa de pelo menos 27 imagens para fazer uma galeria interessante.
Agora, com todas as imagens prontas, clique em “Salvar” e “Pré-Visualizar” para verificar se está tudo do jeito que você quer. Você pode mudar a velocidade de movimento, expandir as margens ou brincar com a ordem das imagens. Quando o visual estiver perfeito, clique em “Publicar” em pronto!
Confira aqui o nosso resultado final:
