O bloco Alerta permite adicionar caixas de alerta coloridas e chamativas às suas páginas SeedProd. Este bloco ajuda você a comunicar mensagens importantes, anúncios, avisos ou notificações de sucesso aos seus visitantes de uma forma visualmente proeminente.
As caixas de alerta são perfeitas para destacar informações críticas que precisam de atenção imediata, como promoções especiais, atualizações importantes, notificações do sistema ou anúncios urgentes. Com estilos e cores personalizáveis, você pode garantir que suas mensagens se destaquem e chamem a atenção dos visitantes.
Adicionando o Bloco de Alerta às suas páginas
Siga estas etapas para adicionar um bloco de alerta à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Alerta na seção desejada da sua página.
O bloco Alerta está localizado em Design > Avançado e pode ser arrastado para qualquer seção da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicioná-lo, clique no bloco Alerta para abrir suas configurações. Na guia Conteúdo, você pode personalizar sua mensagem de alerta e aparência.
Alerta:
- Tipo: Escolha entre estilos de alerta predefinidos – Informação (azul, para informações gerais), Sucesso (verde, para confirmações positivas), Aviso (amarelo/laranja, para advertências) ou Perigo (vermelho, para alertas críticos). Cada tipo vem com cores apropriadas para transmitir o tom certo da mensagem.
- Botão Fechar: alterne para mostrar ou ocultar um botão Fechar que permite aos visitantes fechar o alerta. Habilite essa opção para mensagens não críticas que os usuários possam querer ocultar.
- Título: Insira o título principal da sua mensagem de alerta. Ele deve ser conciso e chamativo.
- Descrição: Adicione um texto detalhado para explicar sua mensagem de alerta. Isso fornece contexto e informações adicionais além do título.
- Alinhamento do título: defina o alinhamento horizontal do título do alerta (esquerda, centro ou direita).
- Descrição Alinhar: defina o alinhamento horizontal do texto da descrição do alerta
- Tamanho da fonte do título: ajuste o tamanho do texto do título para garantir que ele seja destacado e legível.
- Tamanho da fonte da descrição: controle o tamanho do texto da descrição para uma legibilidade ideal.
- Tag de título: escolha a tag de título HTML para o seu título (h1, h2, h3, h4, h5 ou h6). Isso afeta tanto o SEO quanto a hierarquia visual.
- Mostrar ícone: alterne para exibir ou ocultar um ícone ao lado da sua mensagem de alerta. Os ícones fornecem dicas visuais rápidas sobre o tipo de alerta.
- Ícone: selecione um ícone personalizado para exibir com seu alerta. Escolha um ícone que corresponda ao objetivo da sua mensagem.
A guia Conteúdo permite configurar o tipo de alerta, o conteúdo da mensagem, o alinhamento e as configurações do ícone.
Etapa 2a: Escolha um estilo de modelo
Na guia Modelos, você pode selecionar estilos de alerta pré-concebidos para alterar rapidamente a aparência geral da sua caixa de alerta.
- Escolha entre quatro modelos diferentes, cada um com layouts e tratamentos visuais exclusivos. Visualize cada estilo para encontrar o que melhor se adapta ao design da sua página.
A guia Modelos oferece quatro estilos pré-concebidos para personalizar rapidamente a aparência do seu alerta.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco de alerta:
Estilos:
- Tipografia: controle as propriedades da fonte do título do alerta, incluindo família, espessura e estilo da fonte.
- Tipografia do texto: personalize as propriedades da fonte para o texto da descrição do alerta
- Cor: defina a cor do texto do título do alerta
- Descrição Cor: Escolha a cor para o texto da descrição do alerta
- Cor do botão Fechar: defina a cor do botão Fechar (ícone X) que fecha o alerta
- Fundo do título: adicione uma cor de fundo específica para a área do título do seu alerta.
- Cor de fundo: defina a cor de fundo geral para toda a caixa de alerta.
- Sombra do texto: adicione efeitos de sombra ao texto do alerta para dar profundidade e legibilidade. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande, 2X Grande ou Personalizada.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de alerta (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o alerta e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno da sua caixa de alerta (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo e as bordas do alerta.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de alerta. Esse ID é 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 alerta. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, role|alert)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculta o bloco de alertas nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco de alertas em dispositivos tablet.
- Ocultar no celular: Oculte o bloco de alertas em dispositivos móveis
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o alerta aparece na tela. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais. Isso chama a atenção imediatamente para suas mensagens importantes.
A guia Avançado oferece opções abrangentes de estilo, incluindo tipografia, cores, espaçamento e efeitos de animação.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Alerta e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de alerta à sua página! Esse bloco poderoso ajuda você a transmitir informações importantes de maneira eficaz e a capturar a atenção dos visitantes com mensagens atraentes e codificadas por cores. Experimente diferentes tipos de alertas, estilos de modelo e cores personalizadas para criar alertas que combinem com a sua marca e comuniquem sua mensagem com clareza.