Descargue un diseño de testimonio de movimiento GRATUITO para Divi
Publicado: 2020-04-30No es ningún secreto que los testimonios son una parte crucial de muchas empresas y de su sitio web. Añaden 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 muchas formas en las que puede diseñar su 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. Compartimos un hermoso diseño de testimonios de movimiento personalizado creado con los nuevos efectos de desplazamiento de Divi. ¡También recrearemos el diseño paso a paso!
Hagámoslo.
Avance
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 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
¡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
Vaya 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)
- Acolchado inferior: 10% (escritorio), 20% (tableta), 30% (teléfono)
Agregar fila n. ° 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
Vaya a la pestaña de diseño del Módulo de texto y cambie la configuración del texto H2 en consecuencia:
- Fuente del encabezado 2: Questrial
- Alineación del texto del encabezado 2: centro
- Tamaño del texto del encabezado 2: 85 px (escritorio), 45 px (tableta), 35 px (teléfono)
- Encabezado 2 espaciado de letras: 2px
- Altura de la línea del rumbo 2: 1.1em
Agregar módulo divisor a la 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
Vaya 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: superior
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
Agregar fila n. ° 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 azul del escritorio que puede encontrar en la carpeta de descargas que pudo descargar al comienzo de esta publicación.
- Tamaño de la imagen de fondo: Ajustar
- Posición de la imagen de fondo: Centro
Imagen de fondo de tableta y teléfono
Estamos usando una versión rotada 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: Ajustar
- Posición de la imagen de fondo: Centro
Dimensionamiento
Vaya 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 también algunos cambios en la configuración de espaciado.
- Margen superior: 100 px
- Acolchado superior: 15%
- Acolchado inferior: 15%
Efecto de desplazamiento de movimiento horizontal
Luego, vaya a la pestaña avanzada y habilite algún movimiento horizontal en los efectos de desplazamiento.
- Habilitar movimiento horizontal: Sí
- Desplazamiento inicial: -4
- Desplazamiento medio: 0 (al 50%)
- Desplazamiento final: 0
- Disparador de efecto de movimiento: parte superior del elemento
Efecto de desplazamiento que se desvanece y desaparece
También agregaremos un efecto de desplazamiento de entrada y salida personalizado.
- Activar desvanecimiento de entrada y salida: Sí
- Opacidad inicial: 0% (al 19%)
- Opacidad media: 100% (de 25% a 88%)
- Opacidad final: 0% (al 93%)
- Efecto de disparo 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
Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Questrial
- Peso de la fuente del texto: negrita
- Color del texto: #ffffff
- Tamaño del texto: 50 px (escritorio), 30 px (tableta), 25 px (teléfono)
- Altura de la línea de texto: 1.5em
- 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
Pasemos al siguiente módulo, que es un módulo de persona. Agregue el nombre, la posición y los enlaces de las redes sociales.
Cargar imagen
Sube una imagen cuadrada de tu elección a continuación.
Configuración de iconos
Vaya 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 también algunos cambios en la configuración del texto del cuerpo.
- Fuente del cuerpo: Questrial
- Color del texto del cuerpo: #ffffff
- Tamaño del texto del cuerpo: 15px
Configuración de texto de posición
También estamos modificando la configuración del texto de posición.
- Fuente de posición: Questrial
- Color del texto de posición: # 1b66ff
- Tamaño del texto de posición: 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 margen superior.
- Margen superior: 100 px
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.
display: flex; align-items: center;
Imagen de miembro
También usaremos un ancho personalizado para el elemento de imagen de miembro en tamaños de pantalla más pequeños.
Tableta:
width: 20% !important;
Teléfono:
width: 30% !important; margin-right: 5%;
Clonar fila n. ° 2
Una vez que haya completado la fila que contiene el testimonio, puede clonar toda la fila una vez.
Cambiar las imágenes de fondo de la fila
Tendremos que hacer algunos cambios en esta fila duplicada, comenzando con las imágenes de fondo en el escritorio y tamaños de pantalla más pequeños. Puede encontrar las versiones en rojo de las imágenes de fondo en la carpeta de descargas.
Cambiar el espaciado de filas
Agregue un margen superior negativo a la fila siguiente.
- 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 del texto de posición: # ff233e
Clonar última fila
Una vez que haya completado la fila de testimonios duplicados, puede clonarla.
Cambiar las imágenes de fondo de la fila
Cambie las imágenes de fondo de la fila usando las versiones amarillas que puede encontrar en la carpeta de descargas.
Cambiar los colores del texto de la posición del módulo de persona
Modifique también el color del texto de la posición en la configuración del Módulo de persona 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, hemos compartido un hermoso diseño de testimonios de movimiento que pudo descargar de forma gratuita. Hemos utilizado 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.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.