Tener un título que se destaque significa asegurarse de tener la oportunidad de captar la atención de su visitantes. Los títulos no suelen pasar desapercibidos debido a su tamaño y posición central, pero si quieres ir un paso más allá y hacer que el título destaque, has venido al lugar correcto.
En este tutorial, combinaremos la configuración de animación de Divi para crear un titular que se destaque y capte la atención de su visitantes.
Resultado final
Primera parte: diseño
Configuración de la sección
Color de fondo
¡Empecemos a diseñar! Crea una nueva página y agrégale una sección regular. Abra la configuración de la sección y cambie el color de fondo.
- Color de fondo: #EEE
espaciamiento
Luego, vaya a la configuración de espaciado de sección y agregue márgenes de relleno personalizados.
- Relleno inferior: 10vw
Agregar fila 1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo de la fila.
- Color de fondo: #DDD
apresto
Luego vaya a la configuración de tamaño y deje que la fila llene todo el ancho de la pantalla.
- Hacer esta línea de ancho completo: si
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
espaciamiento
Además, elimine el relleno interno superior e inferior predeterminado para la línea.
- Relleno en la parte superior: 0px
- Parte inferior de relleno: 0px
Añadir un módulo de texto.
¡Es hora de empezar a añadir módulos! El primer módulo que necesitamos es un módulo de texto. Ingrese la primera parte de su título en el cuadro. contenido usando el estilo de texto de párrafo.
Color de fondo
Luego vaya a la configuración de fondo del módulo y agregue un color de fondo.
- Color de fondo: #ccc
Configuraciones de texto
También cambie la configuración de texto en la pestaña Diseño.
- Texto de la fuente: Didact Gothic
- Peso de la fuente del texto: negrita
- Color del texto: #000000
- Tamaño del texto: 10vw
- Altura de la línea de texto: 0.9em
- Orientación del texto: Centro
espaciamiento
A continuación, cree la forma que desee con un relleno personalizado en la parte superior e inferior.
- Relleno en la parte superior: 10vw
- Relleno inferior: 3vw
Animación
Por último, pero no menos importante, vamos a agregar algo de animación. Es importante asegurarse de que la duración de la animación y la opacidad inicial sean cero. Esto permitirá que el módulo de texto se muestre con un efecto flash.
- Estilo de animación: Fade
- Repita la animación: una vez
- Duración de la animación: 0ms
- Retraso de animación: 1000 ms
Clona el módulo de texto x4
Una vez que haya terminado de editar el primer módulo de texto, puede continuar y clonarlo tantas veces como desee, dependiendo de la longitud de su título. Para cada parte del título que desee mostrar con un efecto flash, necesitará un módulo de texto independiente. Para este ejemplo, necesitaremos módulos 4 adicionales.
Color de fondo
Con el color de fondo.
- Copia 1 = Color de fondo: # 5900ff, color del texto: #FFF
- Copia 2 = dejar como está, modificar la duración de la animación (Retraso de animación): 1500ms
- Copia 3 = Color de fondo: # ffb200, color del texto: #FFF, modificar la duración de la animación: 2000ms
- Copia 4 = Color de fondo: # 000, color del texto #FFF, modificar la duración de la animación: 2500 ms
Agregue un margen negativo a cada módulo de texto excepto el primero
Una vez que haya terminado de personalizar todos los módulos de texto, puede continuar y crear una superposición. Para crear esta superposición, agregaremos un margen superior negativo a cada uno de los módulos de texto duplicados. En otras palabras, nos aseguramos de que todos los módulos que siguen al primer módulo aparezcan encima del primer módulo de texto.
- Margen superior: -31.98vw
Linea de transformacion
Transformar traducir
Continúe transformando toda la línea, comenzando con los parámetros de transformación.
- Parte inferior: -35vw
Rotación de transformación
También cambie los valores de rotación de la transformación.
- Izquierda: 320deg
Añade la línea 2
Estructura de la columna
En segundo lugar! Ahora que el efecto del título está en su lugar, podemos comenzar a agregar los módulos restantes. Agregue una nueva fila utilizando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de la fila y deje que la fila ocupe todo el ancho de la pantalla en la configuración de tamaño:
- Hacer esta línea de ancho completo: si
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
espaciamiento
Elimina el relleno superior predeterminado de la siguiente línea.
- Relleno superior: 0px
Agregue un módulo de descripción de texto a la columna 2
Añadir contenido H1
Es hora de agregar módulos. El primer módulo será un módulo de texto. Puedes agregar el contenido que deseas
Configuraciones de texto H1
Luego vaya a la pestaña de diseño y cambie la configuración de H1.
- Fuente del título: Didáctica gótica.
- Peso del título: Negrita
- Tamaño de fuente: 1.8vw (computadora), 3.8vw (tableta), 4vw (teléfono)
espaciamiento
Agregue márgenes personalizados en la sección de espaciado.
- Margen superior: -4vw
- Margen inferior: 2vw
- Margen izquierdo: 30vw
- Margen derecho: 30vw (computadora), 15vw (tabletas y teléfono)
Agregue un módulo separador a la columna 2
visibilidad
El siguiente módulo es el módulo separador. Asegúrese de que la opción "Mostrar divisor" esté habilitada.
- Mostrar separador: sí
Color
Luego vaya a la pestaña "Diseño" y cambie el color del separador.
- Color: #000000
Dimentionnement
Cambie también las opciones de espaciado.
- Peso de espaciado: 8px
- Ancho: 7%
espaciamiento
Siempre con opciones de tamaño.
- Margen bajo: 1vw
- Margen izquierdo: 30vw
Agregue un módulo de texto a la columna 2
Añadir contenido
El siguiente módulo será otro módulo de texto. Debes proporcionar el contenido De tu elección
Ajuste de texto
Luego, debe cambiar la configuración del texto en la pestaña "Diseño".
- Tamaño del texto: 0.8vw (computadora), 1.3vw (tableta), 1.6vw (teléfono)
- Altura de la línea: 2.2em
espaciamiento
Agrega también algunos márgenes en la sección de espaciado.
- Margen bajo: 3vw
- Margen Izquierdo: 30vw
- Margen derecho: 30vw (computadora), 15vw (tabletas y teléfonos)
Agregue un módulo de botones a la columna 2
Configuración del módulo de botones
Para el último módulo, que será un módulo de botones. Agregará el contenido de su elección y cambiará la configuración de la siguiente manera:
- Usar estilo personalizado: sí
- Tamaño de fuente: 1vw (computadora), 1.5vw (tableta), 2vw (teléfono)
- Ancho del borde del botón: 0px
- Fuente de botón: Poppins
- Peso del texto: Negrita
- Estilo de fuente: Mayúsculas
espaciamiento
Vaya a la configuración de espaciado y agregue un margen exterior personalizado, así como un margen interior y eso es todo.
- Margen externo izquierdo: 30vw
- Margen alto interno: 1vw
- Margen interior bajo: 1vw
- Margen interior izquierdo: 3vw
- margen interno derecho: 3vw
Para finalizar
En este tutorial, vimos cómo diseñar un título con texto animado, usando solo las opciones internas de Divi. Esta es una excelente técnica que te permitirá captar la atención de tu visitantes de una manera muy original.
Buenos dias. Genial tu tutorial, gracias. Lo hice, pero tengo un pequeño problema. La animación solo se realiza una vez y luego no se repite.