Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear títulos animados utilizando las opciones de desplazamiento de Divi y el paquete de diseño de escuela de manejo . Este es un gran enfoque para poner diferentes partes de su copia en el centro de atención y activar la acción.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado.
Cargar la página de inicio de la escuela de manejo
Para crear este tutorial, utilizaremos la página de inicio del paquete de diseño de la escuela de conductores . Así que continúe y agregue una nueva página, habilite Visual Builder y elija la página de destino de sus diseños prefabricados.
Crear Título Animado #1
Cambiar el fondo degradado de la sección
¡Comencemos a construir el primer ejemplo! Estamos agregando este título animado a la sección de héroes de nuestra página. Pero antes de llegar allí, abra la configuración de su sección de héroe y cambie los colores de superposición de fondo degradado.
- Color 1: rgba (0,0,0,0,94)
- Color 2: rgba (12,12,12,0,63)
Eliminar dos últimas filas en la sección de héroe
Continúe eliminando las dos últimas filas de la sección.
Cambiar la alineación del divisor
Mantenemos la fila que sigue ahí. Lo único que necesitamos cambiar es la alineación del módulo del módulo divisor.
- Alineación del módulo: Centro
Agregar nueva fila
Estructura de la columna
Justo debajo de la fila anterior, continúe y agregue una nueva fila usando la siguiente estructura de columnas:
Espaciado
Elimine el relleno personalizado predeterminado de la fila siguiente.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de texto a la columna
Agregar contenido
El único módulo que necesitaremos es un módulo de texto. Estamos usando dos tipos de texto diferentes: un encabezado y un enlace de párrafo. Continúe y agregue su copia de elección y asegúrese de que la copia aparezca en dos líneas presionando shift + enter en medio de cada oración.
Color de fondo predeterminado
Luego, vaya a la configuración de fondo y agregue un color de fondo predeterminado al módulo de texto.
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Cambia el color de fondo al pasar el mouse.
- Color de fondo: #ffa53b
Configuración de texto predeterminada
A continuación, cambie la orientación del texto en la configuración general del texto.
- Orientación del texto: Centro
Configuración de texto de enlace predeterminado
Cambie a la pestaña del enlace y realice algunos cambios en la apariencia de la copia del enlace.
- Peso de la fuente del enlace: ultra negrita
- Estilo de fuente del enlace: cursiva, mayúsculas, subrayado
- Color de subrayado del enlace: rgba(255,255,255,0.3)
- Tamaño del texto del enlace: 0px
- Altura de línea de enlace: 0em
Configuración de enlace flotante
Realice algunos cambios al pasar el mouse a continuación.
- Tamaño del texto del enlace: 40px
- Altura de la línea de enlace: 1,8 em
Configuración de texto de encabezado predeterminado
Realice también algunos cambios en la configuración del texto del título.
- Peso de la fuente del encabezado: ultra negrita
- Estilo de fuente del título: Mayúsculas
- Color del texto del título: #ffffff
- Tamaño del texto del encabezado: 70 px (escritorio), 40 px (tableta), 30 px (teléfono)
- Altura de la línea de encabezado: 1,4 em
Configuración de texto de encabezado flotante
Con algunos pequeños ajustes al pasar el mouse.
- Color del texto del título: rgba(255,255,255,0)
- Tamaño del texto del encabezado: 0px
Espaciado predeterminado
Continúe yendo a la configuración de espaciado y agregando algunos valores de relleno personalizados.
- Relleno superior: 40px
- Relleno inferior: 0px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Espaciado de desplazamiento
Los valores de relleno personalizados difieren un poco al pasar el mouse.
- Relleno superior: 40px
- Relleno inferior: 40px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Borde
Estamos usando un borde también.
- Ancho del borde: 10px
- Color del borde: #ffa53b
Transiciones
Y agregue una transición rápida cambiando la duración de la transición en la pestaña avanzada.
- Duración de la transición: 0ms
Crear Título Animado #2
Agregar nueva sección
Color de fondo
¡Vamos al siguiente ejemplo! Agregue una nueva sección justo debajo de la sección principal y agregue un color de fondo.
- Color de fondo: #efefef
Espaciado
Luego, vaya a la configuración de espaciado y juegue con los diferentes valores de margen y relleno.
- Margen inferior: 100px
- Margen derecho: 200 px (escritorio), 100 px (tableta), 50 px (teléfono)
- Relleno superior: 54px
- Relleno inferior: 54px
Sombra de la caja
Para hacer coincidir esta sección con el paquete de diseño, también estamos agregando una sutil sombra de cuadro.
- Posición horizontal de la sombra del cuadro: 30px
- Posición vertical de la sombra del cuadro: 30px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: #ffa53b
Agregar nueva fila
Estructura de la columna
La fila que estamos agregando a esta sección necesita la siguiente estructura de columna:
Agregar módulo de texto
Agregar contenido
Agregue el contenido de su elección usando un enlace de encabezado y párrafo una vez más. También estamos utilizando una lista que ayudará a los visitantes a navegar fácilmente por diferentes partes del sitio web.
Configuración de texto de enlace predeterminado
Vaya a la configuración del texto del enlace y realice algunos cambios en la apariencia de la copia del enlace.
- Estilo de fuente del enlace: Subrayado
- Color del texto del enlace: #000000
- Tamaño del texto del enlace: 0 px (escritorio), 20 px (tableta), 13 px (teléfono)
- Altura de la línea de enlace: 0 px (escritorio), 1,8 em (tableta y teléfono)
Configuración de texto de enlace flotante
Haz algunos pequeños ajustes al pasar el mouse.
- Tamaño del texto del enlace: 30px
- Altura de la línea de enlace: 2,8 em
Configuración de texto de encabezado predeterminado
El encabezado que ha elegido también debe modificarse.
- Encabezado 2 Peso de fuente: Ultra negrita
- Título 2 Estilo de fuente: Mayúsculas
- Título 2 Tamaño del texto: 30 px (computadora de escritorio y tableta), 20 px (teléfono)
- Encabezado 2 Espaciado entre letras: 1px
Configuración de texto de encabezado flotante
Cambia el tamaño del texto al pasar el mouse.
- Encabezado 2 Tamaño del texto: 0px
Espaciado predeterminado
Continúe yendo a la configuración de espaciado y agregando algunos márgenes personalizados y valores de relleno.
- Margen izquierdo: 0px (Escritorio, tableta y teléfono)
- Relleno superior: 40px
- Relleno izquierdo: 50px
Espaciado de desplazamiento
Cambie el margen izquierdo al pasar el mouse.
- Margen izquierdo: 200px
Borde predeterminado
A continuación, agregue un borde izquierdo al módulo de texto.
- Ancho del borde izquierdo: 5px
- Color del borde izquierdo: #ffa53b
Borde flotante
Elimine todo el ancho del borde al pasar el mouse.
- Ancho del borde izquierdo: 0px
Transiciones
Por último, pero no menos importante, cree una transición suave usando una duración de transición ligeramente más alta.
- Duración de la transición: 500ms
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final.
Pensamientos finales
En esta publicación de caso de uso, le mostramos cómo crear títulos animados al pasar el mouse usando Divi y sus opciones integradas únicamente. Esta es una excelente manera de poner partes específicas de su copia en el centro de atención y provocar la acción de los visitantes de una manera creativa. Si tiene alguna pregunta, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!