No es ningún secreto que los testimonios son una parte crucial de muchas empresas y de su sitio web. Agregan un sentido de credibilidad a los servicios que proporciona o los productos que ofrece. Prestar especial atención a la forma en que muestra sus testimonios a menudo vale la pena.
Con Divi , hay toneladas de formas en las que puedes diseñar tu sección de testimonios, incluso hay un módulo de testimonios dedicado a ello. Sin embargo, si está buscando una forma única de agregar interacción a sus testimonios, le encantará esta publicación. Estamos compartiendo un hermoso diseño de testimonio de movimiento personalizado creado con los nuevos efectos de desplazamiento de Divi . ¡También recrearemos el diseño paso a paso!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de testimonios de The Motion GRATIS
Para poner sus manos en el diseño de testimonios de movimiento libre, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Agregar nueva sección
Color de fondo
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo a negro.
- Color de fondo: #000000
Espaciado
Pase a la pestaña de diseño de la sección y agregue un relleno superior e inferior personalizado en diferentes tamaños de pantalla.
- Relleno superior: 10 % (escritorio), 20 % (tableta), 30 % (teléfono)
- Relleno inferior: 10 % (escritorio), 20 % (tableta), 30 % (teléfono)
Añadir Fila #1
Estructura de la columna
Continúe agregando una primera fila usando la siguiente estructura de columnas:
Agregar módulo de texto a la columna
Agregar contenido H2
El primer módulo que necesitamos en la columna de esta fila es un módulo de texto con algo de contenido H2.
Configuración de texto H2
Pase a la pestaña de diseño del módulo de texto y cambie la configuración de texto H2 en consecuencia:
- Encabezado 2 Fuente: Questrial
- Encabezado 2 Alineación de texto: Centro
- Título 2 Tamaño del texto: 85 px (escritorio), 45 px (tableta), 35 px (teléfono)
- Encabezado 2 Espaciado entre letras: 2px
- Encabezado 2 Altura de línea: 1,1 em
Agregar módulo divisor a columna
Visibilidad
Luego, agregue un módulo divisor justo debajo del módulo de texto y asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Configuración de línea
Pase a la pestaña de diseño del módulo y cambie la configuración de la línea de la siguiente manera:
- Color de línea: #161616
- Estilo de línea: Sólido
- Posición de la línea: Arriba
Dimensionamiento
Modifique también la configuración de tamaño.
- Peso del divisor: 14px
- Ancho: 13% (Escritorio), 20% (Tableta), 30% (Teléfono)
- Alineación del módulo: Centro
Añadir Fila #2
Estructura de la columna
¡A la siguiente fila! Esta fila estará dedicada a nuestro primer testimonio. Utilice la siguiente estructura de columnas:
Imagen de fondo de escritorio
Luego, cargue la imagen de fondo de escritorio azul que puede encontrar en la carpeta de descarga que pudo descargar al comienzo de esta publicación.
- Tamaño de la imagen de fondo: Ajuste
- Imagen de fondo Posición: Centro
Imagen de fondo de la tableta y el teléfono
Estamos usando una versión girada de la imagen de fondo azul en tamaños de pantalla más pequeños. También puede encontrar esta imagen de fondo en la carpeta de descarga.
- Tamaño de la imagen de fondo: Ajuste
- Posición de la imagen de fondo: Centro
Dimensionamiento
Pase a la pestaña de diseño de la fila y cambie el ancho máximo en la configuración de tamaño.
- Ancho máximo: 2000px
Espaciado
Realice algunos cambios en la configuración de espaciado también.
- Margen superior: 100px
- Acolchado superior: 15%
- Acolchado inferior: 15%
Efecto de desplazamiento de movimiento horizontal
Luego, vaya a la pestaña avanzada y habilite algo de movimiento horizontal en los efectos de desplazamiento.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: -4
- Compensación media: 0 (al 50 %)
- Compensación final: 0
- Disparador de efecto de movimiento: Parte superior del elemento
Efecto de desplazamiento de aparición y desaparición gradual
También agregaremos un efecto de desplazamiento de entrada y salida personalizado.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0% (al 19%)
- Opacidad media: 100% (del 25% al 88%)
- Opacidad final: 0% (al 93%)
- Efecto de activación de movimiento: parte superior del elemento
Agregar módulo de texto a la columna
Agregar contenido
El primer módulo que necesitamos en esta fila es un módulo de texto. Coloque el contenido del testimonio en el cuadro de contenido.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Questrial
- Peso de fuente de texto: Negrita
- Color del texto: #ffffff
- Tamaño del texto: 50 px (escritorio), 30 px (tableta), 25 px (teléfono)
- Altura de línea de texto: 1,5 em
- Alineación de texto: Centro
Dimensionamiento
Luego, modifique el ancho en diferentes tamaños de pantalla en la pestaña de diseño.
- Ancho: 63 % (escritorio), 100 % (tableta y teléfono)
- Alineación del módulo: Centro
Agregar módulo de persona a la columna
Agregar contenido
Pasamos al siguiente módulo, que es un módulo de persona. Agregue el nombre, la posición y los enlaces de redes sociales.
Cargar imagen
Cargue una imagen cuadrada de su elección a continuación.
Configuración de iconos
Pase a la pestaña de diseño y cambie el color del icono en la configuración del icono.
- Color del icono: #2b302e
Imagen
Convierta la imagen en un círculo agregando algunas esquinas redondeadas.
- Todas las esquinas: 100px
Configuración del texto del título
Luego, modifique la configuración del texto del título de la siguiente manera:
- Fuente del título: Questrial
- Peso de la fuente del título: Negrita
- Color del texto del título: #ffffff
- Tamaño del texto del título: 24px
Configuración del texto del cuerpo
Realice algunos cambios en la configuración del texto del cuerpo también.
- Fuente del cuerpo: Questrial
- Color del cuerpo del texto: #ffffff
- Tamaño del cuerpo del texto: 15px
Ajustes de texto de posición
También estamos modificando la configuración del texto de posición.
- Fuente de posición: Questrial
- Color de texto de posición: #1b66ff
- Posición Tamaño del texto: 17px
Dimensionamiento
Junto con el ancho en diferentes tamaños de pantalla.
- Ancho: 25 % (escritorio), 100 % (tableta y teléfono)
- Alineación del módulo: Centro
Espaciado
Navegue a la configuración de espaciado a continuación y agregue un poco de margen superior.
- Margen superior: 100px
Elemento principal
Para asegurarnos de que todo el contenido esté alineado en nuestro módulo de persona, iremos a la pestaña avanzada y agregaremos dos líneas de código CSS al elemento principal del módulo.
|
01
02
|
display: flex;align-items: center; |
Imagen de miembro
También usaremos un ancho personalizado para el elemento de imagen del miembro en tamaños de pantalla más pequeños.
Tableta:
|
01
|
width: 20% !important; |
Teléfono:
|
01
02
|
width: 30% !important;margin-right: 5%; |
Clonar Fila #2
Una vez que haya completado la fila que contiene el testimonio, puede clonar toda la fila una vez.
Cambiar imágenes de fondo de fila
Tendremos que hacer algunos cambios en esta fila duplicada, comenzando con las imágenes de fondo en el escritorio y los tamaños de pantalla más pequeños. Puede encontrar las versiones rojas de las imágenes de fondo en la carpeta de descarga.
Cambiar el espacio entre filas
Agregue un margen superior negativo a la siguiente fila.
- Margen superior: -15%
Cambiar el color del texto de la posición del módulo de persona
Y complete la configuración de la fila duplicada cambiando el color del texto de la posición en la configuración del Módulo de persona.
- Color de texto de posición: #ff233e
Clonar última fila
Una vez que haya completado la fila de testimonios duplicados, puede clonarlo.
Cambiar imágenes de fondo de fila
Cambia las imágenes de fondo de la fila usando las versiones amarillas que puedes encontrar en la carpeta de descargas.
Cambiar colores de texto de posición del módulo de persona
¡Modifique el color del texto de posición en la configuración del Módulo de persona también y listo!
- Color de texto de posición: #ffbc1b
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, compartimos un hermoso diseño de testimonio de movimiento que pudo descargar de forma gratuita. Usamos fondos personalizados y pudimos resaltar todos y cada uno de los testimonios con los efectos de desplazamiento de Divi. ¡También hemos recreado el diseño, paso a paso! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Este debería ser un excelente reemplazo para un complemento testimonial independiente .
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.