O Bloco de Alerta permite adicionar caixas de alerta coloridas e chamativas às suas páginas do SeedProd. Este bloco ajuda você a comunicar mensagens importantes, anúncios, avisos ou notificações de sucesso aos seus visitantes de forma visualmente proeminente.
As caixas de alerta são perfeitas para destacar informações críticas que exigem atenção imediata, como promoções especiais, atualizações importantes, notificações do sistema ou anúncios com prazo determinado. Com estilos e cores personalizáveis, você pode garantir que suas mensagens se destaquem e capturem a atenção dos seus visitantes.
Adicionando o Bloco de Alerta às Suas Páginas
Siga estas etapas para adicionar um bloco de Alerta à sua página do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Alerta na seção desejada da sua página.
O bloco de 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
Após adicionar, clique no bloco de Alerta para abrir suas configurações. Na aba Conteúdo, você pode personalizar sua mensagem de alerta e aparência.
Alerta:
- Tipo: Escolha entre estilos de alerta predefinidos – Info (azul, para informações gerais), Sucesso (verde, para confirmações positivas), Aviso (amarelo/laranja, para cautelas) ou Perigo (vermelho, para alertas críticos). Cada tipo vem com cores apropriadas para transmitir o tom de mensagem correto.
- Botão de Fechar: Ative para mostrar ou ocultar um botão de fechar que permite aos visitantes dispensar o alerta. Ative isso para mensagens não críticas que os usuários podem querer ocultar.
- Título: Insira o título principal para sua mensagem de alerta. Deve ser conciso e chamar a atenção.
- Descrição: Adicione 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 seu alerta (esquerda, centro ou direita).
- Alinhamento da Descrição: Defina o alinhamento horizontal do texto da descrição do seu alerta.
- Tamanho da Fonte do Título: Ajuste o tamanho do texto do título para garantir que ele seja proeminente e legível.
- Tamanho da Fonte da Descrição: Controle o tamanho do texto da descrição para uma legibilidade ideal.
- Tag do 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: Ative para exibir ou ocultar um ícone ao lado da sua mensagem de alerta. Ícones fornecem pistas visuais rápidas sobre o tipo de alerta.
- Ícone: Selecione um ícone personalizado para exibir com seu alerta. Escolha um ícone que corresponda ao propósito da sua mensagem.
A aba Conteúdo permite configurar o tipo de alerta, o conteúdo da mensagem, o alinhamento e as configurações de ícone.
Passo 2a: Escolha um Estilo de Modelo
Na aba Modelos, você pode selecionar entre estilos de alerta pré-desenhados para alterar rapidamente a aparência geral da sua caixa de alerta.
- Escolha entre quatro designs de modelo 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 aba Modelos oferece quatro estilos pré-desenhados para personalizar rapidamente a aparência do seu alerta.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Alerta:
Estilos:
- Tipografia: Controle as propriedades da fonte para o título do seu alerta, incluindo família da fonte, peso e estilo.
- Tipografia do Texto: Personalize as propriedades da fonte para o texto de descrição do seu alerta.
- Cor: Defina a cor do texto do título do seu alerta.
- Cor da Descrição: Escolha a cor para o texto da descrição do seu alerta.
- Cor de Fechamento: Defina a cor do botão de fechar (ícone X) que fecha o alerta.
- Fundo do Título: Adicione uma cor de fundo especificamente 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 seu alerta para profundidade e legibilidade. Escolha entre Nenhum, Fio de Cabelo, Pequeno, Médio, Grande, Extra Grande, 2X Grande ou Personalizado.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de alerta (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o alerta e os elementos circundantes.
- Preenchimento: Ajuste o espaçamento interno dentro da sua caixa de alerta (Superior, Direita, Inferior, Esquerda). Isso cria espaço para o conteúdo e as bordas do alerta.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de alerta. Este ID é 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 alerta. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, role|alert).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de alerta em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de alerta em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de alerta 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 entra em foco. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muito mais. Isso chama a atenção imediata para suas mensagens importantes.
A aba Avançado oferece opções extensas 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 de Alerta e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Alerta à sua página! Este bloco poderoso ajuda você a entregar informações importantes de forma eficaz e a capturar a atenção do visitante com mensagens atraentes e codificadas por cores. Experimente diferentes tipos de alerta, estilos de modelo e cores personalizadas para criar alertas que correspondam à sua marca e comuniquem sua mensagem com clareza.