Su título suele ser lo primero que las personas leen 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 realmente lea lo que sea que les muestres. Los titulares generalmente no pasan desapercibidos debido a su tamaño y posición central en la sección principal, pero si desea ir un paso más allá y literalmente hacer que el titular destaque, este tutorial es para usted.
Vamos a combinar Divi y su configuración de animación para crear un titular 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 tus visitantes quieran seguir el movimiento y leer lo que se comparte.
¡Hagámoslo!
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
¡Comencemos a crear! Cree una nueva página y agréguele una sección normal. 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
Añadir Fila #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 del canalón: 1
Espaciado
Elimine también el relleno superior e inferior predeterminado de la fila.
- Relleno superior: 0px
- Relleno inferior: 0px
Añadir Módulo de Texto #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 utilizando 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 del texto: didáctica gótica
- Peso de fuente de texto: Negrita
- Color del texto: #000000
- Tamaño del texto: 10vw
- Altura de línea de texto: 0,9 em
- Orientación del texto: Centro
Espaciado
Y cree la forma que desee utilizando relleno superior e inferior personalizado.
- Acolchado superior: 10vw
- Acolchado inferior: 3vw
Animación
Por último, pero no menos importante, vamos a agregar 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 de flash.
- Estilo de animación: Fundido
- Repetición de animación: una vez
- Duración de la animación: 0ms
- Retardo de animación: 1000ms
Clonar módulo 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, según la longitud de su título. Para cada parte del título que desee mostrar con un efecto de flash, necesitará un módulo de texto independiente. Para este ejemplo, necesitaremos 4 módulos adicionales.
Cambiar duplicado #1
Contenido
Cambia la copia del primer duplicado.
Color de fondo
Junto con el color de fondo.
- Color de fondo: #5900ff
Color de texto
Cambie 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 animación. Esto permitirá que sus visitantes tengan tiempo suficiente para leer el módulo de texto anterior antes de que aparezca este.
- Retardo de animación: 1500ms
Cambiar Duplicado #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. Estamos dejando 500 ms entre cada uno de ellos para que la gente tenga suficiente tiempo para leer.
- Retardo de animación: 2000ms
Cambiar Duplicado #3
Contenido
Continúe cambiando el contenido del tercer duplicado.
Animación
Junto con el retraso de la animación.
- Retardo de animación: 2500ms
Cambiar Duplicado #4
Contenido
En el próximo y último duplicado. Cambia el contenido.
Color de fondo
Junto con el color de fondo.
- Color de fondo: #000000
Color de texto
Modifique el color del texto también.
- Color del texto: #3a3a3a
Animación
Y aumente el retraso de la animación en la configuración de animación.
- Retardo de animación: 3000ms
Agregar 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 estamos asegurando de que todos los módulos que vienen después del primer módulo aparezcan encima 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 transformación y traducción.
- Abajo: -35vw
Transformar Rotar
Modifique también los valores de rotación de transformación.
- Izquierda: 320 grados
Añadir Fila #2
Estructura de la columna
¡A por 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 columna:
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ón: 1
Espaciado
Quite el relleno superior predeterminado de la fila siguiente.
- 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 algo 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 del título: 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)
Agregue el 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, ve a la pestaña de diseño y cambia 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
Agregue el módulo de texto de descripción a la columna 2
Agregar contenido
El siguiente módulo que necesitamos es otro módulo de texto. Introduzca 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 línea de texto: 2,2 em
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)
Configuración de botones
Pasamos al siguiente y último módulo, que es un módulo de botones. Agregue alguna 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 márgenes personalizados y valores de relleno, ¡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 se destaque usando solo las opciones integradas de Divi. Esta es una gran técnica para captar la atención de tus visitantes y comunicar tu mensaje de forma original. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!