O elemento Galeria de Imagens do RockFunnels é um recurso muito interessante que permite adicionar diversas imagens em sequência nas suas páginas.

Em caso de dúvidas sobre como adicionar a Galeria de Imagens em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
​
​https://help.rockfunnels.com/pt-BR/articles/6004116-como-funcionam-as-configuracoes-gerais-de-elementos-no-rockfunnels

As configurações da Galeria de Imagens são divididas entre a linha vermelha e a verde.

Primeiro vamos ver as configurações da linha vermelha que representa as imagens presentes na galeria:

1. Clique no ícone de lixeira da linha vermelha caso queira deletar uma imagem da galeria.

2. Clique no ícone de engrenagem da linha vermelha para ter acesso as seguintes configurações:

Ajustes > É possível configurar o preenchimento da imagem na galeria conforme desejado. Basta clicar nos ícones que representam cada tipo de preenchimento.

Estilo > Ao clicar em ‘Alterar Imagem’ terá acesso à biblioteca de imagens do RockFunnels ou poderá subir uma imagem do seu dispositivo.

3. Para adicionar uma nova imagem a lista de imagens na galeria, clique no ícone vermelho em formato de +. Uma nova imagem será adicionada ao lado.

Atenção: As imagens devem ser alteradas ou excluídas de forma individual, ou seja, cada imagem tem seu ícone de engrenagem e lixeira de forma individual na linha vermelha. Uma barra de rolagem horizontal (cinza claro) será habilitada abaixo das imagens no caso de diversas imagens serem adicionadas à galeria. Por meio dela você poderá navegar pelas imagens.

Agora veremos as configurações da engrenagem da linha verde que representa o elemento da Galeria de Imagens:
​
​

· Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade da galeria. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

Nas configurações de posição é possível configurar a margem (topo e espaço) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

· Borda | Radial | Tamanho | Opacidade

Nas configurações de estilo é possível configurar borda na galeria. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor clique no ícone de lixeira na frente da cor selecionada.

Para ajustar o tamanho da borda, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Ajuste o tamanho da galeria (dimensões e tamanho) e opacidade inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

· Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
​
​Comportamento:

- Uma vez > o efeito de animação será apresentado apenas uma vez.

- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).

Ativação:

- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
​- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.