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

Ejemplo de resultado final divi

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

Ajuste de la sección Divi

espaciamiento

Luego, vaya a la configuración de espaciado de sección y agregue márgenes de relleno personalizados.

  • Relleno inferior: 10vw

Acolchado interno

Agregar fila 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columna:

Agregar una fila a una columna divi

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

Fondo de texto divi

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

Fondo de texto Divi 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

Configuratio de acolchado interno

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.

Tu contenido viene aquí

Color de fondo

Luego vaya a la configuración de fondo del módulo y agregue un color de fondo.

  • Color de fondo: #ccc

Módulo de texto divi color

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

Modificar el módulo de estilo de texto

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

Cambiar el espaciado del título

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

Configurar el texto del módulo divi de animación

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.

Actualizar el módulo

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

Personalizar el margen del módulo de texto divi

Linea de transformacion

Transformar traducir

Continúe transformando toda la línea, comenzando con los parámetros de transformación.

  • Parte inferior: -35vw

Divi traducir transformación

Rotación de transformación

También cambie los valores de rotación de la transformación.

  • Izquierda: 320deg

Módulos de texto divi de rotación de transformación

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:

Configurar el diseño divi

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

Modificar módulo divi

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

Agregar una sección divi especialConfiguraciones 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)

Modificar la configuración del módulo de texto divi de estiramientoespaciamiento

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)

Configuración de texto divi de espaciado de márgenesAgregue 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í

Configuración del divisor diviColor

Luego vaya a la pestaña "Diseño" y cambie el color del separador.

  • Color: #000000

Color del separadorDimentionnement

Cambie también las opciones de espaciado.

  • Peso de espaciado: 8px
  • Ancho: 7%

Configuración de tamaño del módulo separadorespaciamiento

Siempre con opciones de tamaño.

  • Margen bajo: 1vw
  • Margen izquierdo: 30vw

Configurar el espaciado divi

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

Módulo de texto DiviAjuste 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

Módulo de texto divi de tamaño de textoespaciamiento

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)

Espaciado DiviAgregue 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

Configuración de los botones del módulo Diviespaciamiento

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

Configuración del módulo de botonesPara 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.