Cómo crear superposiciones de desplazamiento únicas para testimonios con Divi

Los testimonios son muy importantes para muchos sitios web. Demuestran experiencia y los visitantes suelen ir a buscarlos si quieren descubrir qué tan creíble es una empresa o una persona. Por eso es importante pensar en la forma en que presenta visualmente los testimonios en su sitio web.

Con Divi, puede mostrar sus testimonios exactamente de la manera que desee. Para inspirarte, te mostraremos cómo crear una forma sorprendente y única de mostrar testimonios usando superposiciones de desplazamiento.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final.

Agregar nueva sección

¡Empecemos! Agregue una nueva página o abra una existente y agregue una nueva sección regular.

Agregar nueva fila 1

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie 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

Agregue también algunos valores de espaciado personalizados.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Columna 2 Relleno izquierdo: 2vw (escritorio), 3vw (tableta y teléfono)
• Columna 2 Relleno derecho: 11vw (escritorio), 3vw (tableta y teléfono)

Agregar módulo de imagen a la columna 1

Cargar imagen

¡Es hora de comenzar a agregar los distintos módulos! Comience con un módulo de imagen en la primera columna. Sube una imagen de retrato de tu elección.

Alineación de imagen

Abra la configuración de la imagen y cambie la alineación de la imagen.

• Alineación de imagen: izquierda

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Ancho: 78% (escritorio), 70% (tableta y teléfono)
• Alineación del módulo: izquierda

Agregar módulo de texto superpuesto de desplazamiento a la columna 1

Agregar contenido

Justo debajo del Módulo de imagen, agregue un Módulo de texto. Coloque los detalles de la persona en el cuadro de contenido.

Fondo predeterminado

Continúe agregando un color de fondo.

• Color de fondo: rgba (255,255,255,0)

Fondo de desplazamiento

Agrega otro color de fondo al pasar el mouse.

• Color de fondo: # 0f1bff

Configuración de texto predeterminada

Luego, cambie la configuración del texto.

• Color del texto: #ffffff
• Tamaño del texto: 0px
• Altura de la línea de texto: 0px

Configuración de texto flotante

Realice algunos ajustes para la configuración del texto al pasar el mouse.

• Tamaño del texto: 19px
• Altura de la línea de texto: 2em

Configuración predeterminada del texto del encabezado

La configuración del texto del encabezado también debe modificarse.

• Peso de la fuente del encabezado 3: Ultra Bold
• Estilo de fuente del título 3: mayúsculas
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3: 0px
• Cabecera 3 Altura de línea: 0em

Configuración del texto del encabezado de desplazamiento

Agregue diferentes valores al pasar el mouse.

• Tamaño del texto del encabezado 3: 35px
• Altura de la línea del título 3: 1.1em

Espaciado

A continuación, vaya a la configuración de espaciado y agregue algunos valores.

• Margen superior: -100px
• Margen izquierdo: 50px
• Margen derecho: 50px
• Acolchado superior: 40px
• Acolchado inferior: 60px

Cambiar la orientación del texto

Vuelva a la configuración del texto y cambie la orientación del texto.

• Orientación del texto: centro

Sombra de cuadro predeterminada

Luego, agregue una sombra de cuadro predeterminada al módulo de texto. Esta sombra de caja será parte del diseño general.

• Posición horizontal de la sombra del cuadro: 1000px
• Posición vertical de la sombra del cuadro: -400px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 250px
• Color de sombra: rgba (175,175,175,0.13)

Sombra de caja flotante

Para crear el efecto especial de superposición de desplazamiento, agregue también una sombra de cuadro de desplazamiento.

• Posición horizontal de la sombra del cuadro: -73px
• Posición vertical de la sombra del cuadro: -49px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 10px
• Color de sombra: rgba (255,182,12,0.53)

Transiciones

Para crear una transición suave, cambie la duración de la transición en la pestaña avanzada.

• Duración de la transición: 1000 ms

Agregar módulo de texto de testimonio a la columna 2

Agregar contenido

En la segunda columna, lo primero que necesitaremos es un título Módulo de texto. Continúe y agregue un resumen del testimonio.

Configuración del texto del encabezado

Luego, cambie la configuración del texto del título.

• Fuente del encabezado 3: Goudy Bookletter 1911
• Alineación del texto del encabezado 3: izquierda
• Tamaño del texto del encabezado 3: 3.5vw (escritorio), 40px (tableta), 30px (teléfono)
• Altura de la línea del título 3: 1.1em

Espaciado

Continúe agregando algunos valores de espaciado personalizados.

• Margen superior: 7vw (escritorio), 100px (tableta), 50px (teléfono)

Agregar módulo de texto descriptivo a la columna 2

Agregar contenido

Agregue otro módulo de texto con el testimonio completo justo debajo del título Módulo de texto.

Configuración de texto

Una vez que haya agregado el testimonio, continúe y cambie la configuración del texto.

• Altura de la línea de texto: 2.2em
• Orientación del texto: izquierda

Espaciado

Agregue también un margen superior personalizado.

• Margen superior: 4vw (escritorio), 50px (tableta y teléfono)

Agregar nueva fila

Estructura de la columna

Ahora que hemos terminado la primera fila, agreguemos la segunda usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y cambie 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

A continuación, agregue algunos valores de espaciado personalizados.

• Margen superior: 100 px
• Relleno superior: 0px
• Acolchado inferior: 0px
• Columna 1 Relleno izquierdo: 11vw (escritorio), 3vw (tableta y teléfono)
• Columna 1 Relleno derecho: 2vw (escritorio), 3vw (tableta y teléfono)

Clonar módulos de texto de la fila anterior y colocarlo en la columna 1

Regrese a la fila anterior y clone ambos módulos en la columna 2. Una vez que lo haga, coloque los duplicados en la primera columna de la nueva fila.

Cambiar la orientación del texto

Cambie la orientación del texto de ambos módulos.

• Orientación del texto: Derecha

Agregar módulo de imagen a la columna 2

Cargar imagen

A continuación, agregue un módulo de imagen a la segunda columna y cargue una nueva imagen vertical.

Alineación de imagen

Cambie la alineación de la imagen del módulo.

• Alineación de imagen: derecha

Dimensionamiento

Continúe cambiando la configuración de tamaño.

• Ancho: 78% (escritorio), 70% (tableta y teléfono)
• Alineación del módulo: derecha

Espaciado

Agregue también algunos valores de espaciado personalizados.

• Margen superior: 50 px (tableta y teléfono)

Agregar módulo de texto superpuesto de desplazamiento a la columna 2

Agregar contenido

El último módulo que necesitamos para terminar este diseño es un módulo de texto debajo del módulo de imagen. Agrega los detalles de la persona en el cuadro de contenido.

Fondo predeterminado

Luego, agregue una imagen de fondo al módulo.

• Color de fondo: rgba (255,255,255,0)

Fondo de desplazamiento

Cambie el color de fondo al pasar el mouse.

• Color de fondo: # 690cff

Configuración de texto predeterminada

A continuación, cambie la configuración de texto.

• Color del texto: #ffffff
• Tamaño del texto: 0px
• Altura de la línea de texto: 0px
• Orientación del texto: centro

Configuración de texto flotante

Haz algunos ajustes al pasar el mouse.

• Tamaño del texto: 19px
• Altura de la línea de texto: 2em

Configuración predeterminada del texto del encabezado

Cambie también la configuración del texto del título.

• Peso de la fuente del encabezado 3: Ultra Bold
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3: 0px
• Cabecera 3 Altura de línea: 0em

Configuración del texto del encabezado de desplazamiento

Con algunos pequeños ajustes al pasar el mouse.

• Tamaño del texto del encabezado 3: 35px
• Altura de la línea del título 3: 1.1em

Espaciado

Continúe yendo a la configuración de espaciado y agregue algunos valores personalizados.

• Margen superior: -80px
• Margen izquierdo: 50px
• Margen derecho: 50px
• Acolchado superior: 40px
• Acolchado inferior: 60px

Sombra de cuadro predeterminada

Agregue una sombra de cuadro predeterminada al módulo de texto.

• Posición horizontal de la sombra del cuadro: -1000px
• Posición vertical de la sombra del cuadro: -420px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 250px
• Color de sombra: rgba (175,175,175,0.13)

Sombra de caja flotante

Y cambia la sombra del cuadro al pasar el mouse.

• Posición horizontal de la sombra del cuadro: -73px
• Posición vertical de la sombra del cuadro: -49px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 10px
• Color de sombra: rgba (12,255,238,0.53)

Transiciones

Por último, pero no menos importante, cree una transición suave cambiando la duración de la transición.

• Duración de la transición: 1000 ms

Avance

Ahora que hemos seguido todos los pasos, ¡echemos un vistazo final al resultado final!

Pensamientos finales

¡Esperamos que esta publicación te haya inspirado a crear impresionantes secciones de testimonios usando superposiciones de desplazamiento! Realmente lo ayudan a agregar otra dimensión a su sitio web sin tener que dedicar mucho tiempo a codificar o resolver las cosas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!