O Bloco de Caixa de Ícone permite combinar um ícone do Font Awesome com um título e texto descritivo em um único layout unificado. Este bloco é ideal para destacar recursos, benefícios, serviços ou qualquer conteúdo que se beneficie de um símbolo visual acompanhado de uma breve explicação.
Com controle total sobre o tamanho do ícone, cor, alinhamento, espaçamento e tipografia, o Bloco de Caixa de Ícone é um dos blocos mais versáteis para construir seções de recursos e layouts de proposta de valor.
Adicionando o Bloco de Caixa de Ícone às Suas Páginas
Siga estas etapas para adicionar um bloco de Caixa de Ícone à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Caixa de Ícone na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco Caixa de Ícone para abrir suas configurações. A aba Conteúdo é organizada em duas seções: Ícone/Imagem e Texto.
Ícone:
- Ícone: Clique no seletor de ícones para navegar e selecionar entre milhares de ícones Font Awesome disponíveis.
- 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.
- Espaçamento do Ícone: Defina o espaçamento entre o ícone e o conteúdo de texto de 10 a 150px.
- Alinhamento: Defina o alinhamento horizontal de toda a Caixa de Ícone dentro de sua seção — Esquerda, Centro ou Direita. Suporta valores por dispositivo para desktop, tablet e celular.
- Alinhamento Vertical: Defina como o ícone se alinha verticalmente em relação ao título e ao texto — Superior, Meio ou Inferior.
Texto:
- Texto do Título: Insira o título da sua Caixa de Ícone usando o editor de rich text. Suporta negrito, itálico, sublinhado, tachado e links inline.
- Nível: Escolha a tag de título HTML para o cabeçalho — H1, H2, H3 ou H4 — para manter a estrutura correta do documento.
- Texto: Insira o texto descritivo do corpo da sua Caixa de Ícone. Suporta formatação básica de rich text, incluindo negrito, itálico, sublinhado, tachado e links.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a tipografia, cores e espaçamento do seu bloco de Caixa de Ícone.
Estilos:
- Tipografia do Título: Ajuste a família da fonte, peso da fonte, altura da linha, espaçamento entre letras e transformação de texto do título. Suporta valores por dispositivo para desktop, tablet e celular.
- Cor do Título: Defina a cor do texto do título usando o seletor de cores.
- Tipografia: Ajuste a família da fonte, peso da fonte, altura da linha, espaçamento entre letras e transformação de texto do corpo do texto. Suporta valores por dispositivo para desktop, tablet e celular.
- Cor: Defina a cor do texto da descrição do corpo usando o seletor de cores.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Caixa de Ícone (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
- Espaçamento: Ajuste o espaçamento interno do seu bloco de Caixa de Ícone (Superior, Direito, Inferior, Esquerdo). Suporta valores por dispositivo para desktop, tablet e mobile.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Caixa de Ícone, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de 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 Caixa de Ícone em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Caixa de Ícone em dispositivos tablet.
- Ocultar no Mobile: Oculte o bloco de Caixa 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 Caixa de Ícone entra na visualização, 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 Caixa de Ícone e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Caixa de Ícone à sua página! As caixas de ícone são uma das maneiras mais eficazes de apresentar recursos, benefícios e serviços em um formato escaneável e visualmente envolvente. Experimente com as escolhas de ícones, níveis de título e configurações de tipografia para criar caixas de ícone que se alinham à sua marca e comunicam seu valor com clareza.