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:
Adicione um novo elemento em sua página.
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!