O Elemento carrossel do RockFunnels é um recurso muito interessante que permite adicionar diversas imagens que podem ser configuradas para se movimentar automaticamente ou de forma manual ao clicar nos ícones de setas na página publicada.
Em caso de dúvidas sobre como adicionar um carrossel em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
As configurações do carrossel são divididas entre a linha vermelha e a verde.
Primeiro vamos ver as configurações da linha vermelha que representa as imagens presentes no carrossel:
1. Clique no ícone de lixeira da linha vermelha caso queira deletar uma imagem do carrossel.
2. Clique na engrenagem da linha vermelha para ter acesso as seguintes configurações:
Ajustes > É possível configurar o preenchimento da imagem no carrossel 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 do carrossel, clique no ícone vermelho em formato de +.
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. Para navegar entre as imagens utilize as setas < >. A posição da imagem é representada pelas bolinhas abaixo da imagem onde na posição atual a bolinha estará preenchida. Ao adicionar uma nova imagem, uma nova bolinha irá ficar disponível.
É possível também navegar pelas imagens ao clicar nas bolinhas.
Agora veremos as configurações da engrenagem da linha verde que representa o elemento Carrossel:
Ajustes
· Visibilidade
Nas configurações de ajustes é possível configurar a visibilidade do carrossel. 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.
· Número de carrosséis
Essa configuração permite definir quantos carrosséis deseja inserir no mesmo elemento, podendo selecionar entre 1 e 5 carrosséis.
· Passar slides automaticamente | Segundos para se movimentar
Ao ativar a chave “Passar slides automaticamente” será disponibilizado a possibilidade de configurar quantos segundos deseja que o carrossel permaneça em cada imagem. As opções disponíveis são: 3, 5, 7, 10 e 15 segundos.
· Setas dentro do carrossel
Essa opção permite definir se deseja manter as setas <> (para alterar as imagens de forma manual) dentro ou fora do carrossel.
· Expandir imagem ao clicar
Essa opção permite que ao clicar na imagem, ela seja expandida. O efeito é visível apenas na página publicada.
Posição
Nas configurações de posição é possível configurar a margem (topo) 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.
Estilo
· Borda | Radial | Tamanho | Cores dos Ícones
Nas configurações de estilo é possível configurar borda no carrossel. 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 do carrossel (dimensões e tamanho) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Para alterar as cores dos ícones (setas <> e bolinhas) insira a cor desejada 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.
Avançado
· 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.
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 < >.
