Descargue un diseño gratuito para el testimonio de la división

No es ningún secreto que los testimonios son una parte crucial de muchas empresas y su sitio web. Agregan una sensación de credibilidad a los servicios que ofrece o a los productos que ofrece. A menudo se presta especial atención a la forma en que muestra sus testimonios. Con Div, hay muchas formas en que puedes estilizar la sección de testimonio, incluso hay un módulo de testimonio dedicado a ella. Sin embargo, si está buscando una forma única de agregar interacción a sus testimonios, le gustará esta publicación. Compartimos un hermoso aspecto personalizado para los testimonios de movimiento, creados con los nuevos efectos de desplazamiento de Div. ¡También recrearemos el diseño del paso por paso!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el diseño de testimonio gratuito gratuito para poner su mano en la apariencia de libre movimiento, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección de fondo. Comience agregando una nueva sección a la página en la que trabaja. Abra la configuración de la sección y cambie el color de fondo negro.
Color de fondo: # 000000
Cambio de espacio a la pestaña de diseño de sección y agregue algunos rellenos personalizados en la parte superior e inferior en diferentes tamaños de pantalla.

Revestimiento superior: 10% (escritorio), 20% (tableta), 30% (teléfono)
Bajo revestimiento: 10% (escritorio), 20% (tableta), 30% (teléfono)
Agregue la estructura de la columna de la fila # 1 Continuar agregando una primera fila utilizando la siguiente estructura de columna:

Agregue un módulo de texto a la columna Agregar contenido H2 El primer módulo que necesitamos en esta columna de fila es un texto con contenido H2.

Configuración de texto H2 Cambiar a la pestaña de diseño del módulo de texto y cambiar la configuración de texto H2 en consecuencia:

2 Fuentes de fuentes: Questrial
Título 2 Alineación de texto: Centro
Título 2 Dimensión de texto: 85 PX (escritorio), 45 PX (tableta), 35 PX (teléfono)
Rúbrica 2 Espaciación de litros: 2 PX
Rúbrica 2 altura de línea: 1.1em
Agregue el módulo divisor a la visibilidad de la columna y luego, agregue un módulo divisor justo debajo del módulo de texto y asegúrese de que se active la opción “Pantalla divisor”.

Configuración de línea Cambie a la pestaña Diseño del módulo y cambie la configuración de línea de la siguiente manera:
Color de línea: # 161616

Estilo de línea: sólido
Posición de línea: arriba
Dimensión Modifique la configuración de tamaño.
Peso del divisor: 14 PX

Ancho: 13% (escritorio), 20% (tableta), 30% (teléfono)
Alineación del módulo: centro
Agregue la estructura de la fila # 2 de la columna, ¡pasamos la siguiente fila! Esta línea se dedicará a nuestro primer testimonio. Use la siguiente estructura de columna:
Fondo de escritorio y luego cargue la imagen de fondo azul del escritorio que puede encontrar en la carpeta de descarga que pueda descargar al comienzo de esta publicación.

Tamaño de la imagen de fondo: adecuado

Imagen de fondo de posición: centro
La imagen de fondo para la tableta y el teléfono utilizamos una versión girada del fondo azul en tamaños de pantalla más pequeños. Puede encontrar esta imagen de fondo en la carpeta de descarga.
Tamaño de la imagen de fondo: adecuado

Posición de la imagen de fondo: Centro
Dimension Switch a la pestaña Diseño de fila y cambie el ancho máximo en la configuración del tamaño.
Ancho máximo: 2000 PX

Espacio y hacer algunos cambios en la configuración de espaciado.
Margen superior: 100 PX

Revestimiento superior: 15%
Finamiento inferior: 15%
Efecto del movimiento horizontal luego acceda a la pestaña avanzada y active un movimiento horizontal en los efectos de desplazamiento.
Active el movimiento horizontal: sí

Comenzando el desplazamiento: -4
GAPACIÓN PROMEDIA: 0 (al 50%)
Grado final: 0
Disparador del efecto de movimiento: la parte superior del artículo
Efecto efectivo dentro y fuera también agregaremos un efecto de desfile personalizado dentro y fuera.
Habilitar el desvanecimiento dentro y fuera: Sí


Opacidad inicial: 0% (al 19%)
Opacidad promedio: 100% (del 25% al ​​88%)
Opacidad final: 0% (al 93%)
Efecto desencadenante de movimiento: la parte superior del artículo
Agregue un 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 Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: Questrial

El peso de la fuente de texto: en negrita
Color de texto: #ffffff
Tamaño de texto: 50 px (escritorio), 30 px (tableta), 25 px (teléfono)
La altura de la línea de texto: 1.5em
Alineación de texto: Centro
Dimensión Entonces, cambie 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
Agregue el módulo de persona al interruptor de contenido de la columna al módulo siguiente, que es un módulo de persona. Agregue el nombre, la posición y los enlaces sociales.
Cargue la imagen cargar una imagen cuadrada en la siguiente opción.

Icono de configuración Vaya a la pestaña Diseño y cambie el color del icono desde la configuración del icono.

Icono de color: # 2B302E

La imagen convierte la imagen en un círculo agregando algunas esquinas redondeadas.
Todas las esquinas: 100 px

Configuración de texto de título Luego cambie la configuración del texto del título de la siguiente manera:
Título de la fuente: Questrial

Título Fuente de peso: Bold
Color de texto del título: #ffffff
Título Tamaño del texto: 24 PX
Configuración de texto de Corp Haga 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: 15 PX
Configuración Posición del texto También, cambiamos la configuración del texto de la posición.
Posición de fuente: Questrial
Color de texto de posición: # 1b66ff

Posición del tamaño del texto: 17 PX
Dimensión junto con ancho en diferentes tamaños de pantalla.
Ancho: 25% (escritorio), 100% (tableta y teléfono)
Alineación del módulo: centro

Espacio navegue a la siguiente configuración de espaciado y agregue un borde superior.
Margen superior: 100 PX
El elemento principal para garantizar 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.

Pantalla: Flex;
Alinine-Ritams: Centro;

Imagen del miembro Usaremos un ancho personalizado para el elemento de imagen del miembro y los tamaños de pantalla más pequeños. Tableta: Ancho: 20%! Importante; Teléfono: Ancho: 30%! Importante;
Margen-derecha: 5%;
Clone fila # 2 Después de haber completado la fila que contiene el testimonio, puede clonar toda la fila una vez.

Cambiar imágenes de fondo Deberá hacer algunos cambios en este duplicado, comenzando con el fondo y las imágenes de fondo de pantalla más pequeña. Puede encontrar las versiones rojas de las imágenes de fondo en la carpeta de descarga.
Cambie el espacio de fila Agregue un margen superior negativo a la siguiente fila.

Margen superior: -15%

Cambie el color del texto de la posición del texto y complete la configuración de la línea duplicada cambiando el color del texto de posición en la configuración del módulo de la persona.

Posición de texto en color: # FF233E
Clone La última fila Después de haber completado el testimonio duplicado, puede clonarlo. Cambiar las imágenes de fondo de la fila, cambiar las imágenes de fondo de la fila utilizando las versiones amarillas que puede encontrar en la carpeta de descarga.

¡Cambie el color del texto del módulo de la persona Cambio y el color del texto de posición en la configuración del módulo de la persona y termine!
Posición de texto en color: # FFBC1B

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Pensamientos finales En esta publicación, ¡compartimos un buen aspecto de testimonios sobre el movimiento que podría descargar gratis! Utilicé antecedentes personalizados y podría resaltar cada testimonio con los efectos de desplazamiento de Div. ¡Recreé el diseño, paso a paso también! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.