Principal Construtor de Sites/Builder Como funciona o elemento Carrossel na Rockty

Como funciona o elemento Carrossel na Rockty

Última atualização em Nov 28, 2024

Introdução

O elemento Carrossel na Rockty é uma ótima ferramenta para adicionar várias imagens que podem se movimentar automaticamente ou de forma manual ao clicar nas setas do carrossel. Ele permite uma navegação visual atrativa e dinâmica, sendo ideal para exibir portfólios, depoimentos e outros conteúdos visuais.

1. Como adicionar o Carrossel

Para adicionar o Carrossel à sua página na Rockty, siga estes passos:

  1. Adicione um novo elemento em sua página.

  2. Selecione o elemento 'Carrossel' na lista de opções disponíveis no menu lateral esquerdo.

💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.

2. Como acessar as configurações do elemento

Para acessar as configurações de um elemento, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial.
​

3. Configurações do Carrossel

Visibilidade

Você pode definir a visibilidade do carrossel em diferentes dispositivos (Desktop, Tablet, Mobile). Para isso, clique no ícone correspondente ao dispositivo desejado para ocultar ou mostrar o elemento. Para reexibir o carrossel, clique novamente no ícone.
​

Imagens

Para adicionar imagens ao carrossel:

  • Selecione uma imagem do carrossel e clique em "Alterar Imagem" para acessar a Biblioteca de Imagens da Rockty ou fazer o upload de uma nova imagem.

  • Para duplicar uma imagem, clique no ícone de duplicar. Para remover, clique no ícone 'x'.

  • Para adicionar uma nova imagem ao carrossel, clique em "+ Adicionar Item".

  • É possível definir um preenchimento para a imagem em "Preenchimento do Objeto" e configurar ações de clique em "Configurar Ação".
    ​

Número de carrosséis

Defina quantos carrosséis deseja inserir no mesmo elemento (de 1 a 5). Essa configuração pode variar para cada versão da página (Desktop, Tablet, Mobile).
​

Passar slides automaticamente

Ative essa opção para que os slides passem automaticamente e configure o intervalo de tempo (3, 5, 7, 10 ou 15 segundos).
​

Setas dentro do carrossel

Escolha se deseja que as setas para navegação manual (<>), estejam dentro ou fora do carrossel.
​

Expandir imagem ao clicar

Permite que ao clicar em uma imagem, ela seja expandida, criando um efeito de zoom na página publicada.
​

Posição

Configure a posição do carrossel ajustando:

  • Tamanho: Largura e altura.

  • Margens: Topo.

  • Espaçamento interno: Topo, baixo, esquerda e direita.

Atenção: Evite usar margens negativas para não causar conflitos com outros elementos da página. Se necessário, use com moderação.
​

Estilo

Borda

Ative as bordas para o carrossel, definindo cor (via paleta ou código HEX), espessura, e estilo (Sólido, Pontilhado, Tracejado, Dupla).

Radial

Para adicionar cantos arredondados, ative o ajuste de Radial e defina os valores manualmente ou através de barras de ajuste.

Ícones

Altere as cores das setas e bolinhas do carrossel através da paleta de cores ou código HEX.
​

4. Configurações Avançadas

Efeitos de movimento – Animação

Adicione efeitos de animação ao carrossel selecionando um dos efeitos disponíveis. Ajuste o comportamento (uma vez ou infinito), a ativação (na entrada da página ou ao passar o mouse), duração (normal, devagar, rápido) e o atraso de exibição.

CSS Classes

Adicione CSS ao carrossel para personalizações avançadas através do elemento Script. Insira o nome da classe e aplique os códigos CSS desejados.

Conclusão

O elemento Carrossel na Rockty oferece diversas possibilidades para tornar suas páginas mais dinâmicas e atrativas visualmente. Experimente as configurações de visibilidade, ações de clique e estilos para criar a melhor experiência para os visitantes do seu site.

Dicas Adicionais

  • Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens.

  • Limite o número de imagens para garantir uma melhor performance e tempo de carregamento, tente não incluir muitas imagens no carrossel. Entre 5 a 7 imagens é o ideal para não sobrecarregar a página.

  • Mantenha a consistência visual, utilizando imagens com a mesma proporção (tamanho e formato) para evitar distorções e garantir que o carrossel tenha uma aparência consistente e profissional.

  • Use imagens otimizadas para garantir melhor performance nas suas páginas. Recomendamos o formato WebP, que oferece uma boa relação entre qualidade e tamanho do arquivo.

  • Para otimizar e converter suas imagens para WebP, você pode utilizar ferramentas como TinyPNG ou Squoosh, que são gratuitas e fáceis de usar.

  • Quer melhorar a performance da sua página? Confira nosso tutorial sobre Como Otimizar Imagens no Construtor de Páginas da Rockty! Aprenda a usar formatos recomendados, técnicas de compressão e ajustes para responsividade, garantindo imagens otimizadas para todas as versões da sua página.

Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!
​