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

Saiba como inserir e editar imagens nas suas páginas.

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

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:

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

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

Respondeu à sua pergunta?