Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderElementos
Como funciona o elemento Galeria de Imagens na Rockty
Como funciona o elemento Galeria de Imagens na Rockty

Saiba como configurar e personalizar uma Galeria de Imagens nas suas páginas Rockty para criar layouts visuais atraentes e funcionais.

Sylas avatar
Escrito por Sylas
Atualizado há mais de 2 meses

Introdução

O elemento Galeria de Imagens da Rockty permite que você adicione várias imagens em sequência às suas páginas. Neste tutorial, vamos guiá-lo através das configurações e personalizações disponíveis para este elemento, garantindo que você possa utilizá-lo de maneira eficaz.


1. Como Adicionar uma Galeria de Imagens

  1. Adicione um Novo Elemento:

  2. Acessando as Configurações do Elemento:

    • Clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre ele para abrir o menu de opções. Isso permitirá acessar todas as configurações detalhadas neste tutorial.


2. Configurações da Galeria de Imagens

1. Configurações das Imagens (Linha Vermelha)

  • Excluir Imagem: Clique no ícone de lixeira para deletar uma imagem específica.

  • Configurações da Imagem: Clique no ícone de engrenagem para acessar:

    • Ajustes: Configure o preenchimento da imagem na galeria usando os ícones disponíveis.

    • Estilo: Clique em ‘Alterar Imagem’ para escolher uma imagem da biblioteca Rockty ou fazer o upload do seu dispositivo.

  • Adicionar Nova Imagem: Clique no ícone vermelho em formato de + para adicionar uma nova imagem à galeria.

🚨 Importante: Imagens devem ser alteradas ou excluídas individualmente. Uma barra de rolagem horizontal será habilitada se houver muitas imagens.

2. Configurações da Galeria (Linha Verde)

  • Ajustes:

    • Visibilidade: Configure a visibilidade da galeria em dispositivos Desktop, Tablet e Mobile clicando nos ícones correspondentes. Para reexibir um elemento oculto, clique novamente no ícone do dispositivo.

  • Posição:

    • Ajuste a margem (topo e espaço) inserindo um valor manualmente ou ajustando a barra. Evite usar margens negativas excessivas para evitar conflitos com outros elementos.

  • Estilo:

    • Borda: Ative a borda e ajuste sua cor, tamanho e radial. Use a paleta de cores ou insira o código HEX desejado.

    • Tamanho e Opacidade: Configure o tamanho da galeria e a opacidade usando valores manuais ou a barra.

  • Avançado:

    • Efeitos de Movimento – Animação: Selecione e configure animações para o elemento, definindo comportamento, ativação, duração e atraso. Para excluir uma animação, clique no ícone de lixeira ao lado do nome da animação.



Conclusão

Agora que você conhece as principais configurações e opções de personalização da Galeria de Imagens na Rockty, você pode adicionar e ajustar imagens de forma eficaz para melhorar o design de suas páginas. Explore as configurações para adaptar a galeria às suas necessidades específicas.


Dicas Adicionais

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

  • Certifique-se de que a galeria seja responsiva. Verifique se o layout da galeria se ajusta bem a diferentes dispositivos (desktop, tablet e mobile), garantindo uma boa experiência de usuário em qualquer tela.

  • Evite excesso de imagens, não sobrecarregue a galeria com muitas imagens. Escolha as mais relevantes e evite criar uma experiência visual confusa ou cansativa.

  • 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!

Respondeu à sua pergunta?