¿Busca una forma creativa de agregar descripciones a las imágenes? Con Divi y sus opciones integradas de desplazamiento, ahora es más fácil que nunca. Puede usar este enfoque para varios propósitos en su sitio web, desde testimonios hasta descripciones de los miembros del equipo y más. En este tutorial, repasaremos 4 ejemplos diferentes que lo ayudarán a lograr un diseño web sorprendente. Estamos creando los cuatro ejemplos utilizando únicamente las opciones integradas de Divi.
¡Hagámoslo!
Antes de sumergirnos en el tutorial paso a paso, echemos un vistazo rápido al resultado final en diferentes tamaños de pantalla.
Escritorio
Móvil
Pasos generales
Agregar nueva sección
Para que este tutorial sea más fácil de seguir, comenzaremos con algunos pasos generales. Luego, manejaremos los pasos que son únicos para cada uno de los ejemplos. Comience agregando una nueva sección regular a una página nueva o existente.
Añadir fila
Estructura de la columna
Continúe y elija la siguiente estructura de columna (también puede hacer que esto funcione con otras estructuras de columna):
Imagen de fondo de la columna 1
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue una imagen de fondo a la primera columna.
- Columna 1 Imagen de fondo Repetir: No repetir
Dimensionamiento
Continúe cambiando la configuración de tamaño de la fila.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Y agregue algunos valores de relleno personalizados a continuación.
- Relleno superior: 150px
- Relleno inferior: 150px
Agregar módulo de texto a la columna 1
Agregar contenido
Para mostrar la descripción al pasar el mouse, usaremos un módulo de texto para cada uno de los cuatro ejemplos. Continúe y agregue este módulo de texto a la misma columna a la que agregó una imagen de fondo.
Configuración de texto predeterminada
Luego, vaya a la configuración de texto y realice algunos cambios.
- Color del texto: rgba(255,255,255,0)
- Tamaño del texto: 0.7vw (escritorio), 12px (tableta y teléfono)
- Orientación del texto: Justificar
Configuración de texto flotante
Cambia el color del texto al pasar el mouse.
- Color del texto: #000000
Configuración de texto de encabezado predeterminado
Cambie también la configuración de texto H3.
- Encabezado 3 Peso de fuente: Ultra negrita
- Título 3 Estilo de fuente: Mayúsculas
- Título 3 Color del texto: rgba(255,255,255,0)
- Título 3 Tamaño del texto: 2.5vw (Escritorio), 40px (Tableta), 30px (Teléfono)
- Encabezado 3 Altura de línea: 2.2em
Configuración de texto de encabezado flotante
Y aplique un color de texto H3 diferente al pasar el mouse.
- Título 3 Color del texto: #000000
Clonar fila 3 veces
Ahora que hemos seguido todos los pasos generales, podemos continuar y clonar la fila que hemos creado tres veces, lo que nos permitirá tener una fila para cada uno de los cuatro ejemplos. Asegúrese de pasar a la siguiente fila al comienzo de cada ejemplo.
Ejemplo 1
Cambiar módulo de texto
Color de fondo predeterminado
¡Empecemos con el primer ejemplo! Abra el Módulo de texto en la primera columna y agregue un color de fondo.
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Cambie este color de fondo al pasar el mouse.
- Color de fondo: rgba(255,255,255,0.73)
Espaciado predeterminado
Agregue un margen personalizado y relleno a continuación.
- Margen superior: -500px
- Margen inferior: 500px
- Relleno superior: 250px
- Relleno inferior: 250px
- Relleno izquierdo: 70px
- Relleno derecho: 70px
Espaciado de desplazamiento
Cambie los valores al pasar el mouse.
- Margen superior: 0px
- Margen inferior: 0px
- Relleno superior: 100px
- Relleno inferior: 100px
Transiciones
Por último, cree una transición suave aumentando la duración de la transición en la pestaña avanzada.
- Duración de la transición: 1000ms
Ejemplo #2
Cambiar módulo de texto
Color de fondo predeterminado
¡Vamos al siguiente ejemplo! Abra el Módulo de texto en la primera columna y agregue un color de fondo.
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Cambia el color de fondo al pasar el mouse.
- Color de fondo: rgba(226,246,255,0.85)
Espaciado predeterminado
Agregue algunos márgenes personalizados y valores de relleno a continuación.
- Margen superior: 100px
- Margen inferior: 100px
- Relleno superior: 150px
- Relleno inferior: 150px
- Relleno izquierdo: 70px
- Relleno derecho: 70px
Espaciado de desplazamiento
Cambie estos valores al pasar el mouse.
- Margen superior: 200px
- Margen inferior: -200px
- Margen izquierdo: 50px
- Relleno superior: 100px
- Relleno inferior: 100px
Borde predeterminado
Continúe agregando un borde al módulo de texto.
- Ancho del borde izquierdo: 0px
- Color del borde izquierdo: #ffffff
Borde flotante
Y cambie el ancho del borde al pasar el mouse.
- Ancho del borde izquierdo: 8px
Transiciones
Por último, pero no menos importante, aumente la duración de la transición para una transición suave.
- Duración de la transición: 500ms
Ejemplo #3
Módulo de texto clonado
¡Vamos al tercer ejemplo! Para este ejemplo, necesitaremos crear una versión separada para tamaños de pantalla más pequeños. Clona el módulo de texto en la primera columna.
Agregar fondo degradado de la columna 1
Luego, abra la configuración de la fila y agregue un fondo degradado a la primera columna usando la siguiente configuración:
- Color 1: rgba(43.135.218,0)
- Color 2: #ffffff
- Columna 1 Tipo de gradiente: Radial
- Columna 1 Dirección radial: Centro
- Columna 1 Posición inicial: 59%
- Columna 1 Posición final: 59%
- Columna 1 Coloque el degradado sobre la imagen de fondo: Sí
Cambiar Módulo de Texto #1
Fondo degradado
Abra el primer módulo de texto en la columna 1. Esta será la descripción que aparece en el escritorio. Agrega un fondo degradado.
- Color 1: rgba (239.239.239, 0,65)
- Color 2: rgba (255.255.255,0)
- Tipo de gradiente: Radial
- Dirección radial: Centro
- Posición inicial: 70%
- Posición final: 71%
Espaciado predeterminado
Luego, agregue algunos márgenes personalizados y valores de relleno.
- Margen superior: 6vw
- Margen inferior: 6vw
- Acolchado superior: 9vw
- Acolchado inferior: 9vw
- Acolchado izquierdo: 2vw
- Acolchado derecho: 2vw
Espaciado de desplazamiento
Cambie los valores de margen al pasar el mouse.
- Margen izquierdo: 15vw
- Margen derecho: -15vw
Visibilidad
Y deshabilite el módulo en la tableta y el teléfono.
Transiciones
Aumente también la duración de la transición.
- Duración de la transición: 500ms
Cambiar Módulo de Texto #2
Fondo degradado
El segundo módulo en la columna 1 es la descripción que aparecerá en pantallas más pequeñas. Comience agregando un fondo degradado.
- Color 1: rgba (239.239.239, 0,65)
- Color 2: rgba (255.255.255,0)
- Tipo de gradiente: Radial
- Dirección radial: Centro
- Posición inicial: 70%
- Posición final: 71%
Espaciado predeterminado
Agregue algunos márgenes personalizados y valores de relleno a continuación.
- Margen superior: 95px
- Margen inferior: 95px
- Relleno superior: 170px
- Relleno inferior: 170px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Espaciado de desplazamiento
Cambie los valores de margen al pasar el mouse.
- Margen superior: 250px
- Margen inferior: -200px
Visibilidad
Y deshabilite el módulo en el escritorio.
Cambiar la orientación del texto de ambos módulos de texto
Por último, pero no menos importante, asegúrese de cambiar también la orientación del texto de ambos módulos para lograr el resultado deseado.
- Orientación del texto: Centro
Ejemplo #4
Cambiar módulo de texto
Color de fondo predeterminado
¡Vamos al cuarto y último ejemplo! Agregue el siguiente color de fondo al módulo de texto en la columna 1:
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Cambie este color de fondo al pasar el mouse.
- Color de fondo: rgba(255,255,255,0.72)
Espaciado predeterminado
Vaya a la configuración de espaciado a continuación y agregue algunos márgenes personalizados y valores de relleno allí.
- Margen izquierdo: -200px
- Margen derecho: 200px
- Relleno superior: 250px
- Relleno inferior: 250px
- Relleno izquierdo: 70px
- Relleno derecho: 70px
Espaciado de desplazamiento
Modifique estos valores al pasar el mouse.
- Margen izquierdo: 0px
- Margen derecho: 0px
- Relleno superior: 300px
- Relleno inferior: 300px
Transiciones
Por último, pero no menos importante, aumente la duración de la transición para una transición suave.
- Duración de la transición: 1200ms
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 puede usar creativamente las opciones de desplazamiento de Divi para mostrar las descripciones de las personas al pasar el mouse. Con estos cuatro ejemplos, está listo para transformar cualquier testimonio o descripción de un miembro del equipo en un elemento de diseño interactivo en su página. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!