Introdução#
As imagens são elementos visuais essenciais para a composição de páginas na web, ajudando a capturar a atenção dos visitantes e a comunicar mensagens de forma mais impactante. Na Rockty, o elemento Imagem permite que você adicione, configure e estilize imagens de maneira simples e flexível, personalizando sua aparência e comportamento de acordo com suas necessidades.
1. Como adicionar o elemento Imagem#
Para adicionar uma imagem à sua página na Rockty, siga estes passos:
-
Adicione um novo elemento em sua página.
-
Selecione o elemento 'Imagem' 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 uma imagem, 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 Elemento Imagem#
Ajustes
-
Visibilidade: Configure a visibilidade da imagem para diferentes dispositivos (Desktop, Tablet e Mobile). Para ocultar ou exibir a imagem em determinado dispositivo, clique no ícone correspondente. Clique novamente para reverter a ação.
-
Configurar Ação: Escolha a ação que a imagem executará conforme necessário.
-
Preenchimento do Objeto: Selecione como deseja que a imagem se ajuste ao espaço disponível (preencher completamente, manter proporções, etc.), evitando distorções.
Posição
Configure a posição da imagem (esquerda, centro, direita), dimensões (tamanho), e margens (topo e esquerda). Para ajustes finos, insira valores manualmente ou utilize as barras de ajuste.
💡 Dica: Evite usar margens negativas, pois isso pode causar conflitos com outros elementos da página. Use com moderação se necessário.
Estilo
-
Imagem: Para alterar a imagem, clique em "Alterar Imagem" e selecione uma da biblioteca de imagens da Rockty ou faça o upload de uma nova imagem do seu dispositivo. Para excluir uma imagem, clique no ícone de lixeira.
💡 Dica: Para obter mais detalhes sobre como usar a Biblioteca de Imagens da Rockty, acesse nosso tutorial completo aqui.
-
Borda, Radial e Opacidade: Ative essas opções para personalizar bordas, aplicar efeitos de arredondamento (radial), e ajustar a opacidade da imagem. Ajustes podem ser feitos manualmente ou com o auxílio de barras deslizantes.
Avançado
-
Alt SEO: Adicione texto alternativo à imagem para melhorar a acessibilidade e otimização de SEO, especialmente para visitantes que utilizam leitores de tela.
-
Efeitos de Movimento e Animação: Configure animações para as imagens. Escolha um efeito, ajuste o comportamento (uma vez ou infinito), defina a ativação (ao entrar na página ou ao passar o mouse), e personalize a duração e atraso da animação.
-
CSS Classes: Insira classes CSS para aplicar estilos personalizados às imagens através de códigos no elemento Script. Para mais detalhes, consulte nosso tutorial sobre CSS Classes.
-
Pixel do Facebook / Google: Configure o rastreamento de conversões do Pixel do Facebook ou Google em cliques de imagem, utilizando nossos tutoriais para orientações detalhadas:
Conclusão#
O elemento Imagem da Rockty oferece uma ampla gama de personalizações que ajudam a aprimorar a aparência e funcionalidade das suas páginas. Explore as configurações para tirar o máximo proveito desse recurso, desde simples ajustes visuais até integrações avançadas com SEO e ferramentas de marketing.
Dicas Adicionais#
-
Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens.
-
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!