Cómo hacer que su título destaque con la configuración de animación de Divi


El título suele ser lo primero que leen las personas cuando visitan su sitio web. Además de tener un título realmente bueno, también es importante hacer que la gente se dé cuenta y lea lo que sea que les esté mostrando. Por lo general, los titulares no pasan desapercibidos debido a su tamaño y posición central en la sección de héroes, pero si quieres dar un paso más y hacer que el titular destaque, este tutorial es para ti.

Vamos a combinar la configuración de animación de Divi para crear un título que se destaque y capte la atención de sus visitantes. Dividiremos el título en 5 partes y crearemos un efecto flash que hará que sus visitantes quieran seguir el movimiento y leer lo que se comparte.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

título pop

Móvil

pop de título

¡Empecemos a recrear!

Agregar nueva sección

Color de fondo

¡Empecemos a crear! 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: #ededed

título pop

Espaciado

Luego, vaya a la configuración de espaciado de la sección y agregue un relleno inferior personalizado.

  • Acolchado inferior: 10vw

pop de título

Agregar fila n. ° 1

Estructura de columna

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

pop de título

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: # c9c9c9

pop de título

Dimensionamiento

Vaya a la configuración de tamaño a continuación y permita que la fila ocupe todo el ancho de la pantalla.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

pop de título

Espaciado

Elimine también el relleno superior e inferior predeterminado de la fila.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

pop de título

Agregar módulo de texto n. ° 1

Agregar contenido

¡Es hora de comenzar a agregar 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 de contenido usando el estilo de texto de párrafo.

pop de título

Color de fondo

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

  • Color de fondo: # c9c9c9

pop de título

Configuración de texto

Cambie también la configuración de texto en la pestaña de diseño.

  • Fuente de texto: 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

pop de título

Espaciado

Y crea la forma que quieras usando un relleno superior e inferior personalizado.

  • Acolchado superior: 10vw
  • Acolchado inferior: 3vw

pop de título

Animación

Por último, pero no menos importante, agregaremos una 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: Fundido
  • Repetición de animación: una vez
  • Duración de la animación: 0ms
  • Retraso de animación: 1000 ms

pop de título

Módulo de clonación de texto x4

Una vez que haya terminado de modificar el primer módulo de texto, puede continuar y clonar el módulo tantas veces como desee, dependiendo de la longitud de su título. Para cada parte del título que desee que aparezca con un efecto flash, necesitará un módulo de texto independiente. Para este ejemplo, necesitaremos 4 módulos adicionales.

pop de título

Cambiar el duplicado n. ° 1

Contenido

Cambie la copia del primer duplicado.

pop de título

Color de fondo

Junto con el color de fondo.

  • Color de fondo: # 5900ff

pop de título

Color de texto

Cambia el color del texto a blanco.

  • Color del texto: #ffffff

pop de título

Animación

Y aumente el retraso de la animación en la configuración de la animación. Esto permitirá que sus visitantes tengan tiempo suficiente para leer el módulo de texto anterior antes de que aparezca este.

  • Retraso de animación: 1500 ms

pop de título

Cambiar duplicado n. ° 2

Contenido

Cambie el contenido del segundo duplicado a continuación.

pop de título

Color de fondo

Junto con el color de fondo.

  • Color de fondo: # ffb200

pop de título

Color de texto

Y el color del texto también.

  • Color del texto: #ffffff

pop de título

Animación

Nuevamente, nos aseguraremos de que el retraso de la animación sea mayor que el retraso de la animación que se usó para los dos módulos anteriores. Dejamos 500 ms entre cada uno de ellos para que las personas tengan tiempo suficiente para leer.

  • Retraso de animación: 2000 ms

título pop

Cambiar duplicado n. ° 3

Contenido

Continúe cambiando el contenido del tercer duplicado.

pop de título

Animación

Junto con el retraso de la animación.

  • Retraso de animación: 2500 ms

pop de título

Cambiar duplicado n. ° 4

Contenido

Continúe con el siguiente y último duplicado. Cambia el contenido.

pop de título

Color de fondo

Junto con el color de fondo.

  • Color de fondo: # 000000

pop de título

Color de texto

Modifica también el color del texto.

  • Color del texto: # 3a3a3a

título pop

Animación

Y aumente el retraso de la animación en la configuración de la animación.

  • Retraso de animación: 3000 ms

pop de título

Agregue un margen negativo a cada módulo de texto excepto al 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 vienen después del primer módulo aparezcan en la parte superior de ese primer módulo de texto.

  • Margen superior: -21.98vw

pop de título

Transformar fila

Transformar Traducir

Continúe transformando toda la fila, comenzando con la configuración de conversión de transformación.

  • Abajo: -35vw

pop de título

Transformar Girar

Modifique también los valores de rotación de transformación.

  • Izquierda: 320 grados

título pop

Agregar fila n. ° 2

Estructura de columna

¡A la segunda fila! Ahora que tenemos el efecto de título en su lugar, podemos comenzar a agregar los módulos restantes. Agregue una nueva fila usando la siguiente estructura de columnas:

pop de título

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla en la configuración de tamaño:

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

pop de título

Espaciado

Elimine el relleno superior predeterminado de la siguiente fila.

  • Relleno superior: 0px

pop de título

Agregar módulo de texto de título a la columna 2

Agregar contenido H1

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de texto de título. Agregue algo de contenido H1 de su elección.

pop de título

Configuración de texto H1

Luego, vaya a la pestaña de diseño y cambie la configuración de texto H1.

  • Fuente de encabezado: Didact Gothic
  • Peso de la fuente del encabezado: negrita
  • Tamaño del texto del encabezado: 1.8vw (escritorio), 3.8vw (tableta), 4vw (teléfono)

pop de título

Espaciado

Agregue algunos valores de margen personalizados a la configuración de espaciado.

  • Margen superior: -4vw
  • Margen inferior: 2vw
  • Margen izquierdo: 30vw
  • Margen derecho: 30vw (escritorio), 15vw (tableta y teléfono)

pop de título

Agregar módulo divisor a la columna 2

Visibilidad

El siguiente módulo que necesitamos es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: Sí

pop de título

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

  • Color: # 000000

pop de título

Dimensionamiento

Modifique también la configuración de tamaño.

  • Peso del divisor: 8px
  • Ancho: 7%

pop de título

Espaciado

Junto con la configuración de espaciado.

  • Margen inferior: 1vw
  • Margen izquierdo: 30vw

pop de título

Agregar módulo de texto descriptivo a la columna 2

Agregar contenido

El siguiente módulo que necesitamos es otro módulo de texto. Ingrese algún contenido de su elección.

título pop

Configuración de texto

Luego, modifique la configuración del texto en la pestaña de diseño.

  • Tamaño del texto: 0.8vw (escritorio), 1.3vw (tableta), 1.6vw (teléfono)
  • Altura de la línea de texto: 2.2em

pop de título

Espaciado

Agregue también algunos valores de margen personalizados en la configuración de espaciado.

  • Margen inferior: 3vw
  • Margen izquierdo: 30vw
  • Margen derecho: 30vw (escritorio), 15vw (tableta y teléfono)

pop de título

Agregar módulo de botones a la columna 2

Configuración de botones

Pasemos al siguiente y último módulo, que es un módulo de botones. Agregue una copia de su elección y cambie la configuración del botón en consecuencia:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1vw (escritorio), 1.5vw (tableta), 2vw (teléfono)
  • Ancho del borde del botón: 0px
  • Fuente del botón: Poppins
  • Peso de fuente: negrita
  • Estilo de fuente: mayúsculas

pop de título pop de título

Espaciado

Vaya a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados, ¡y listo!

  • Margen izquierdo: 30vw
  • Acolchado superior: 1vw
  • Acolchado inferior: 1vw
  • Acolchado izquierdo: 3vw
  • Acolchado derecho: 3vw

pop de título

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

título pop

Móvil

pop de título

Pensamientos finales

En esta publicación, le mostramos cómo hacer que su título destaque usando solo las opciones integradas de Divi. Esta es una gran técnica para captar la atención de sus visitantes y comunicar su mensaje de una manera original. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!