O bloco Ícone permite adicionar um único ícone escalável a qualquer página do SeedProd. Com acesso a milhares de ícones Font Awesome, você pode colocar rapidamente símbolos visuais que complementam seu conteúdo — seja um ícone de mídia social, uma seta direcional, um indicador de recurso ou um detalhe decorativo.
Cada ícone pode ser dimensionado, colorido, alinhado e, opcionalmente, 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 ícones às suas páginas
Siga estas etapas para adicionar um bloco de ícones à sua página SeedProd:
Passo 1: Adicione 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
Depois de adicionado, clique no bloco Ícone para abrir suas configurações. Na guia 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 entre 10 e 150 px 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 do link para revelar opções adicionais de link.
- Abrir em nova janela: marque esta opção para abrir o URL vinculado em uma nova guia do navegador.
- Não seguir: Marque esta opção para adicionar um
rel="nofollow"atribuir ao link, informando aos mecanismos de pesquisa para não transferir a equidade do link para o destino.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar o estilo da sombra e o espaçamento do seu bloco Ícone.
Estilos:
- Sombra do texto: adicione um efeito de sombra ao ícone. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extra grande ou 2X Grande para dar profundidade e destaque visual ao ícone.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de ícones (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: ajuste o espaçamento interno do seu bloco de ícones (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de ícones, criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: Oculte o bloco de ícones nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco de ícones em dispositivos tablet.
- Ocultar no celular: Oculte o bloco Ícone em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha um efeito de animação que seja reproduzido quando o bloco Ícone aparecer na tela, como Saltar, Aparecer gradualmente, Ampliar, Girar e muitos outros.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Ícone e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Ícone à sua página! Os í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 tornam as páginas mais elegantes. Experimente diferentes ícones, tamanhos e cores para encontrar a combinação que melhor se adapta ao seu design.