O Bloco de Ícone permite adicionar um único ícone escalável a qualquer página do SeedProd. Com acesso a milhares de ícones do Font Awesome, você pode rapidamente colocar símbolos visuais que suportam seu conteúdo — seja um ícone de mídia social, uma seta direcional, um indicador de recurso ou um detalhe decorativo.
Cada ícone pode ter seu tamanho, cor, alinhamento e, opcionalmente, ser vinculado a qualquer URL, tornando-o um bloco de construção versátil para botões, listas de recursos, chamadas para ação e muito mais.
Adicionando o Bloco de Ícone às suas Páginas
Siga estas etapas para adicionar um bloco de Ícone à sua página do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Ícone na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco Ícone para abrir suas configurações. Na aba Conteúdo, configure a aparência e o link do ícone.
Ícone:
- Ícone: Clique no seletor de ícones para navegar e selecionar entre milhares de ícones Font Awesome disponíveis. Pesquise por palavra-chave para encontrar rapidamente o ícone que você precisa.
- Alinhamento: Defina o alinhamento horizontal do ícone dentro de sua seção — Esquerda, Centro ou Direita. Suporta valores por dispositivo para desktop, tablet e celular.
- Cor: Defina a cor do ícone usando o seletor de cores.
- Tamanho: Defina o tamanho do ícone de 10 a 150px usando o controle deslizante.
- Link: Opcionalmente, insira uma URL para tornar o ícone um link clicável. Clique no ícone de configurações ao lado do campo de link para revelar opções de link adicionais.
- Abrir em Nova Janela: Marque esta opção para abrir o URL vinculado em uma nova aba do navegador.
- No Follow: Marque esta opção para adicionar um atributo
rel="nofollow"ao link, informando aos mecanismos de busca para não repassar a autoridade do link para o destino.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a estilização da sombra e o espaçamento do seu bloco de Ícone.
Estilos:
- Sombra de Texto: Adicione um efeito de sombra ao ícone. Escolha entre Nenhum, Fio de Cabelo, Pequeno, Médio, Grande, X Grande ou 2X Grande para dar profundidade e ênfase visual ao ícone.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Ícone (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Ícone (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Ícone, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Ícone em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Ícone em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de Ícone em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha um efeito de animação que é reproduzido quando o bloco de Ícone entra na tela, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o Bloco de Ícone e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Ícone à sua página! Ícones são uma maneira simples, mas poderosa, de adicionar clareza visual ao seu conteúdo — eles guiam o olhar, reforçam o significado e fazem as páginas parecerem mais polidas. Experimente diferentes ícones, tamanhos e cores para encontrar a combinação que melhor se adapta ao seu design.