O bloco Animated Headline permite exibir títulos animados cativantes nas suas páginas SeedProd. Este bloco ajuda a criar textos atraentes que mudam, destacam ou giram para chamar a atenção dos visitantes e enfatizar mensagens importantes.
Os títulos animados são perfeitos para seções de destaque, páginas de destino, banners promocionais ou qualquer lugar onde você queira apresentar várias propostas de valor ou mensagens importantes de maneira 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 envolvidos.
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:
Passo 1: Adicione 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 Blocos 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 Título animado para abrir suas configurações. Na guia 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 – Destacado (enfatiza o texto com formas visuais ou sublinhados) ou Rotativo (alterna entre várias variações de texto)
- Forma: Ao usar o estilo Destacado, selecione a forma que aparece ao redor do texto. As opções incluem Círculo, Ondulado, Sublinhado, Duplo, Sublinhado duplo, Sublinhado em zigue-zague, Diagonal, Tachado e X. Cada uma delas cria uma ênfase visual única.
- Texto antes do título: insira o texto estático que aparece antes da parte animada. Esse texto permanece constante e configura a parte animada (por exemplo, “Nós somos”).
- Após o título: insira o texto que será animado ou destacado. Para o estilo Rotacionar, você pode adicionar várias palavras ou frases separadas por vírgulas que serão exibidas em ciclo (por exemplo, “especialistas, profissionais, inovadores”).
- Loop infinito: alterne para ativar ou desativar a animação contínua. Quando ativada, a animação se repete indefinidamente. Quando desativada, ela é reproduzida uma vez e para.
- Duração (ms): defina por quanto tempo cada palavra ou efeito de animação será exibido, medido em milissegundos. Valores mais altos diminuem a velocidade da animação, enquanto valores mais baixos a aceleram (por exemplo, 2000 ms = 2 segundos).
- Atraso (ms): controla a pausa entre os ciclos de animação, medida em milissegundos. Isso cria um intervalo entre as alterações de texto.
- Alinhar: defina o alinhamento horizontal para todo o título (esquerda, centro ou direita).
- Tamanho da fonte: ajuste o tamanho do texto do título para garantir que ele seja destacado 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 guia 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 guia Avançado, você pode personalizar a aparência visual do seu bloco Título animado:
Estilos:
- Tipografia: controle a família de fontes, a espessura, o estilo e outras propriedades do texto do seu título.
- Cor do traço: defina a cor da forma animada ou do destaque que aparece ao redor ou atrás do texto (ao usar o estilo Destacado).
- Cor: Escolha a cor do texto do título para garantir um bom contraste e legibilidade.
- Sombra do texto: adicione efeitos de sombra ao texto do título para dar profundidade e ênfase. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande, 2X Grande ou Personalizada.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco do título (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o título e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno do seu bloco de título (superior, direito, inferior, esquerdo). Isso cria um espaço entre o texto e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco de título. Este 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 título. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-animation|headline)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculte o bloco de títulos nas telas da área de trabalho
- Ocultar no tablet: Oculte o bloco do título em dispositivos tablet.
- Ocultar no celular: Oculte o bloco do 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 aparece na tela. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais. Isso cria um efeito de animação em camadas, no qual a animação de entrada do bloco é reproduzida primeiro, seguida pela animação do texto do título.
A guia 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 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! Esse bloco dinâmico ajuda a criar títulos atraentes que mostram várias mensagens ou enfatizam 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.