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