O bloco de Título Animado permite exibir títulos animados cativantes em suas páginas SeedProd. Este bloco ajuda você a criar textos chamativos que mudam, destacam ou giram para capturar a atenção dos visitantes e enfatizar mensagens importantes.
Títulos animados são perfeitos para seções de herói, landing pages, banners promocionais ou qualquer lugar onde você queira exibir múltiplas propostas de valor ou mensagens-chave de forma dinâmica e envolvente. Com uma variedade de estilos de animação e efeitos visuais, você pode criar títulos que se destacam e mantêm os visitantes engajados.
Adicionando o Bloco de Título Animado às Suas Páginas
Siga estas etapas para adicionar um bloco de Título Animado à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Título Animado na seção desejada da sua página.
O bloco Título Animado aparece no painel de Blocos 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 Título Animado para abrir suas configurações. Na aba Conteúdo, você pode personalizar o estilo da animação, o conteúdo do texto e o tempo.
Título:
- Estilo: Escolha entre dois estilos de animação – Destaque (enfatiza o texto com formas visuais ou sublinhados) ou Rotativo (alterna entre várias variações de texto)
- Forma: Ao usar o estilo Destaque, selecione a forma que aparece ao redor do seu texto. As opções incluem Círculo, Cacheado, Sublinhado, Duplo, Sublinhado Duplo, Zigzag Sublinhado, Diagonal, Tachado e X. Cada um cria uma ênfase visual única.
- Texto Antes do Título: Insira o texto estático que aparece antes da sua parte animada. Este texto permanece constante e prepara a parte animada (por exemplo, “Nós somos”)
- Texto Após o Título: Insira o texto que será animado ou destacado. Para o estilo Rotativo, você pode adicionar várias palavras ou frases separadas por vírgulas que serão alternadas (por exemplo, “especialistas, profissionais, inovadores”)
- Loop Infinito: Ative ou desative a animação contínua. Quando ativado, a animação se repete indefinidamente. Quando desativado, ela é reproduzida uma vez e para.
- Duração (ms): Defina quanto tempo cada palavra ou efeito de animação é exibido, medido em milissegundos. Valores mais altos diminuem a velocidade da animação, enquanto valores mais baixos a aceleram (por exemplo, 2000ms = 2 segundos)
- Atraso (ms): Controle a pausa entre os ciclos de animação, medida em milissegundos. Isso cria um respiro entre as mudanças de texto.
- Alinhamento: Defina o alinhamento horizontal para todo o seu título (esquerda, centro ou direita).
- Tamanho da Fonte: Ajuste o tamanho do texto do seu título para garantir que ele seja proeminente e legível.
- Nível: Escolha a tag de título HTML para o seu título animado (h1, h2, h3 ou h4). Isso afeta tanto o SEO quanto a hierarquia visual da sua página.
A aba Conteúdo oferece opções para escolher estilos de animação, personalizar texto e controlar o tempo e o comportamento da animação.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Título Animado:
Estilos:
- Tipografia: Controle a família da fonte, peso, estilo e outras propriedades de texto para o seu título
- Cor do Traço: Defina a cor para a forma animada ou destaque que aparece ao redor ou atrás do seu texto (ao usar o estilo Destaque)
- Cor: Escolha a cor do texto para o seu título para garantir bom contraste e legibilidade
- Sombra do Texto: Adicione efeitos de sombra ao texto do seu título para profundidade e ênfase. Escolha entre Nenhuma, Fio de Cabelo, Pequena, Média, Grande, Extra Grande, 2X Grande ou Personalizada
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de título (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o título e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de título (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o texto e as bordas do bloco
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de título. 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 título. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-animacao|titulo)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de título em telas de desktop
- Ocultar no Tablet: Oculte o bloco de título em dispositivos tablet
- Ocultar no Celular: Oculte o bloco de título 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 título entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitos outros. Isso cria um efeito de animação em camadas onde a animação de entrada do bloco é reproduzida primeiro, seguida pela animação de texto do próprio título
A aba Avançado oferece opções de estilo, incluindo tipografia, cores, sombras de texto, espaçamento e animações de entrada.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Título Animado e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Título Animado à sua página! Este bloco dinâmico ajuda você a criar títulos que chamam a atenção, exibindo várias mensagens ou enfatizando pontos-chave com animações envolventes. Experimente diferentes estilos de animação, formas e tempos para criar títulos que cativem seu público e comuniquem sua mensagem de forma eficaz.