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:
Adicione um novo elemento em sua página.
Selecione o elemento 'Carrossel' na lista de opções disponíveis no menu lateral esquerdo.
Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.
💡 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.
6. 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.
Para mais detalhes, consulte o tutorial sobre Configuração de CSS Classes na Rockty.
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.
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!