El bloque Título Animado te permite mostrar titulares animados cautivadores en tus páginas de SeedProd. Este bloque te ayuda a crear texto llamativo que cambia, resalta o rota para captar la atención de los visitantes y enfatizar mensajes clave.
Los titulares animados son perfectos para secciones principales, páginas de destino, banners promocionales o cualquier lugar donde quieras mostrar múltiples propuestas de valor o mensajes clave de una manera dinámica y atractiva. Con una variedad de estilos de animación y efectos visuales, puedes crear titulares que destaquen y mantengan a los visitantes interesados.
Añadir el Bloque de Título Animado a tus Páginas
Sigue estos pasos para añadir un bloque de Título Animado a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Título Animado en la sección deseada de tu página.
El bloque Título Animado aparece en el panel de Bloques y se puede arrastrar a cualquier sección de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Título Animado para abrir su configuración. En la pestaña Contenido, puedes personalizar el estilo de animación, el contenido del texto y la temporización.
Encabezado:
- Estilo: Elige entre dos estilos de animación: Resaltado (enfatiza el texto con formas visuales o subrayados) o Rotatorio (ciclado a través de múltiples variaciones de texto).
- Forma: Al usar el estilo Resaltado, selecciona la forma que aparece alrededor de tu texto. Las opciones incluyen Círculo, Rizado, Subrayado, Doble, Doble Subrayado, Subrayado en Zigzag, Diagonal, Tachado y X. Cada una crea un énfasis visual único.
- Texto antes del Título: Introduce el texto estático que aparece antes de tu parte animada. Este texto permanece constante y prepara la parte animada (por ejemplo, "Somos")
- Después del Título: Introduce el texto que se animará o resaltará. Para el estilo Rotatorio, puedes añadir múltiples palabras o frases separadas por comas que ciclarán (por ejemplo, "expertos, profesionales, innovadores")
- Bucle Infinito: Activa o desactiva la animación continua. Cuando está activada, la animación se repite indefinidamente. Cuando está desactivada, se reproduce una vez y se detiene.
- Duración (ms): Establece cuánto tiempo se muestra cada palabra o efecto de animación, medido en milisegundos. Valores más altos ralentizan la animación, mientras que valores más bajos la aceleran (por ejemplo, 2000 ms = 2 segundos).
- Retraso (ms): Controla la pausa entre ciclos de animación, medida en milisegundos. Esto crea un respiro entre los cambios de texto.
- Alineación: Establece la alineación horizontal de todo tu titular (izquierda, centro o derecha).
- Tamaño de Fuente: Ajusta el tamaño del texto de tu titular para asegurarte de que sea prominente y legible.
- Nivel: Elige la etiqueta de encabezado HTML para tu titular animado (h1, h2, h3 o h4). Esto afecta tanto al SEO como a la jerarquía visual de tu página.
La pestaña Contenido proporciona opciones para elegir estilos de animación, personalizar texto y controlar la temporización y el comportamiento de la animación.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de titular animado:
Estilos:
- Tipografía: Controla la familia de fuentes, el grosor, el estilo y otras propiedades del texto de tu titular
- Color del trazo: Establece el color de la forma animada o el resaltado que aparece alrededor o detrás de tu texto (cuando se usa el estilo Resaltado)
- Color: Elige el color del texto de tu titular para garantizar un buen contraste y legibilidad
- Sombra del texto: Añade efectos de sombra al texto de tu titular para darle profundidad y énfasis. Elige entre Ninguno, Delgado, Pequeño, Mediano, Grande, Muy Grande, Extra Grande o Personalizado
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de titular (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el titular y los elementos circundantes
- Relleno: Ajusta el espaciado interior dentro de tu bloque de titular (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el texto y los bordes del bloque
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de titular. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para la selección con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del titular. Introduce cada atributo en una línea nueva usando el formato: nombre-atributo|valor (por ejemplo, data-animation|headline)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de titular en pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de titular en dispositivos tableta
- Ocultar en móvil: Oculta el bloque de titular en dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el titular entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchas más. Esto crea un efecto de animación en capas donde la animación de entrada del bloque se reproduce primero, seguida de la animación del texto del propio titular
La pestaña Avanzado ofrece opciones de estilo que incluyen tipografía, colores, sombras de texto, espaciado y animaciones de entrada.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Titular Animado y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Titular Animado a tu página! Este bloque dinámico te ayuda a crear titulares que llaman la atención y que muestran múltiples mensajes o enfatizan puntos clave con animaciones atractivas. Experimenta con diferentes estilos de animación, formas y tiempos para crear titulares que cautiven a tu audiencia y comuniquen tu mensaje de manera efectiva.