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 que la gente se dé cuenta y lea lo que sea que les esté mostrando. Los titulares no suelen pasar 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

Móvil

¡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

Espaciado

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

• Acolchado inferior: 10vw

Agregar fila n. ° 1

Estructura de la columna

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

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

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 de la canaleta: 1

Espaciado

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

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

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.

Color de fondo

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

• Color de fondo: # c9c9c9

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

Espaciado

Y cree la forma que desee con un relleno superior e inferior personalizado.

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

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: Fade
• Repetición de animación: una vez
• Duración de la animación: 0 ms
• Retraso de animación: 1000 ms

Módulo de texto de clonación 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 mostrar con un efecto flash, necesitará un módulo de texto por separado. Para este ejemplo, necesitaremos 4 módulos adicionales.

Cambiar el duplicado n. ° 1

Contenido

Cambie la copia del primer duplicado.

Color de fondo

Junto con el color de fondo.

• Color de fondo: # 5900ff

Color de texto

Cambia el color del texto a blanco.

• Color del texto: #ffffff

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

Cambiar el duplicado n. ° 2

Contenido

Cambie el contenido del segundo duplicado a continuación.

Color de fondo

Junto con el color de fondo.

• Color de fondo: # ffb200

Color de texto

Y el color del texto también.

• Color del texto: #ffffff

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 la gente tenga tiempo suficiente para leer.

• Retraso de animación: 2000 ms

Cambiar el duplicado n. ° 3

Contenido

Continúe cambiando el contenido del tercer duplicado.

Animación

Junto con el retraso de la animación.

• Retraso de animación: 2500 ms

Cambiar el duplicado n. ° 4

Contenido

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

Color de fondo

Junto con el color de fondo.

• Color de fondo: # 000000

Color de texto

Modifica también el color del texto.

• Color del texto: # 3a3a3a

Animación

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

• Retraso de animación: 3000 ms

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

Transformar fila

Transformar Traducir

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

• Abajo: -35vw

Transformar Girar

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

• Izquierda: 320 grados

Agregar fila n. ° 2

Estructura de la 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:

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 de la canaleta: 1

Espaciado

Elimine el relleno superior predeterminado de la siguiente fila.

• Relleno superior: 0px

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 un poco de contenido H1 de su elección.

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)

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)

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í

Color

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

• Color: # 000000

Dimensionamiento

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

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

Espaciado

Junto con la configuración de espaciado.

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

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.

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

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)

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

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

Avance

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

Escritorio

Móvil

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!