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