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

Saiba como inserir e configurar ícones em suas páginas na Rockty

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

Introdução

O elemento Ícone permite adicionar ícones gráficos às suas páginas, oferecendo uma maneira visualmente atraente de destacar informações importantes. Neste tutorial, você aprenderá como adicionar e configurar ícones em suas páginas na Rockty.


1. Como Adicionar um Ícone

Para adicionar um ícone à sua página na Rockty, siga estes passos:

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

  2. Selecione o elemento 'Ícone' 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 Ícone

Para acessar as configurações do elemento Ícone, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento. Isso permitirá que você ajuste as configurações disponíveis para o ícone.


3. Configurações do Elemento Ícone

Ajustes

  • Visibilidade: Configure a visibilidade do elemento clicando no ícone correspondente a cada versão (Desktop, Tablet, Mobile). Clique novamente para reexibir o elemento em dispositivos específicos.

  • Ícone: Selecione o ícone desejado na biblioteca da Rockty. Use o campo de busca no topo da biblioteca para encontrar ícones por palavras-chave. Clique no ícone para adicioná-lo à página.

  • Configurar Ação: Escolha a ação que o ícone executará conforme necessário.


Posição

  • Configurações: Ajuste a posição (esquerda, centro, direita), tamanho, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita). Use valores manuais ou ajuste a barra conforme necessário.

  • 💡 Dica: Evite margens negativas para evitar conflitos com outros elementos na página.


Estilo

  • Cor | Opacidade: Configure as cores dos ícones usando a paleta de cores ou inserindo o código HEX. Ajuste a opacidade manualmente ou com a barra de ajuste. Dependendo do ícone, você pode configurar cores diferentes para contornos e preenchimentos.



Avançado

  • Alt SEO: Adicione um texto alternativo para o ícone, útil para acessibilidade e caso a imagem não carregue.

  • Efeitos de movimento – Animação: Adicione e configure animações para o elemento, incluindo comportamento, ativação, duração e atraso.

  • CSS Classes: Configure classes CSS para aplicar estilos adicionais através do código. Para mais detalhes, consulte nosso tutorial sobre configuração CSS Classes.

  • Pixel do Facebook / Google: Configure conversões de cliques para Pixel do Facebook ou Google Tag Manager. Veja nossos tutoriais sobre configuração do Pixel do Facebook e Google Tag Manager.


Conclusão

O elemento Ícone é uma excelente ferramenta para adicionar elementos visuais em suas páginas, facilitando a comunicação visual com seus visitantes. Personalize as configurações conforme suas necessidades para criar um design atraente e funcional.


Dicas Adicionais

  • Escolha ícones que complementem seu conteúdo e ajudem na comunicação da mensagem.

  • Teste diferentes animações e efeitos para encontrar a melhor combinação para seu design.

  • Verifique a visibilidade em diferentes dispositivos para garantir uma apresentação adequada em todas as plataformas.


Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Respondeu à sua pergunta?