5 formas fantásticas de estilizar el módulo de testimonio de la divicidad

Lo único que los visitantes siempre buscan en un sitio web son los testimonios. Representan credibilidad e influyen en el proceso de tomar decisiones que tienen los clientes potenciales o potenciales al visitar su sitio web. Además del hecho de que se asegura de tener testimonios sólidos para compartir, para que sean visualmente atractivos y un papel importante. En esta publicación, le mostraremos 5 formas fantásticas de estilizar el módulo de división testimonial mientras usa solo las opciones construidas. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado final en diferentes dimensiones de pantalla.
Escritorio

Móvil

Recrear el ejemplo no. 1 Suscríbete a nuestro canal de YouTube

¡Agregue una nueva sección para comenzar con el primer ejemplo! Cree una nueva página y agregue una sección normal.

Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y realice algunos cambios en la configuración del tamaño.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Agregue el módulo de imagen a la columna 1 ¡Cargue la imagen es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de imagen en la columna 1. Continúe y cargue una imagen cuadrada de su elección.

Filtros entonces, acceda a la configuración del filtro y juegue con diferentes efectos.
Saturación: 40%
Contraste: 126%

Agregue el módulo de botón a la columna 1 Agregue una segunda copia y el último módulo que necesitaremos en la columna 1 es un módulo de botón. Agregue una copia de su elección. Establezca el botón Luego, acceda a la configuración del botón y realice algunos cambios en el botón.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 14 PX
Color 1: # 5400ff
Color 2: # 00fff6
Dirección de gradiente: 100 grados
El ancho del nudo del botón: 0 PX
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Sparto agregue algunos valores de espaciado personalizados.


Revestimiento superior: 10 px
Finamiento inferior: 10 PX
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Sombra de caja y termina con un tono de caja sutil.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Agregue un módulo testimonial a la columna 2 Agregar contenido a la segunda columna, la única forma en que necesitamos es un módulo testimonial. Agregue contenido a diferentes campos y cuadro de contenido.

El color de fondo entonces, agregue un color de fondo ligeramente transparente.

Color de fondo: RGBA (255.255.255.0.96)
Configuración del icono citado modificar y citar la configuración del icono.

Oferta de icono de color: # 0C0C0C
Icono de cita de fondo: RGBA (245,245,245.0)
Configuración de texto del cuerpo y luego cambie la configuración de texto de su cuerpo.

Cuerpo de fuentes: Verdana
La altura de la línea del cuerpo: 1.7em
El espacio continúa agregando diferentes valores de margen y relleno personalizado en la configuración de espaciado.

Margen superior: 15 VW (escritorio y tableta), 0VW (teléfono)
Margen inferior: 50 PX (tableta y teléfono)
Margen izquierdo: -10VW (escritorio y tableta), 0VW (teléfono)
Margen derecho: 5VW
Revestimiento superior: 70 pxcatuse inferior: 70 px
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Border agregue un borde izquierdo.
Ancho del borde izquierdo: 7 PX

Color del borde izquierdo: # 5400ff
Box Shadow Finalmente agregue una sombra de caja sutil para modular el módulo testimonial.
Poder de poco claro de la sombra de la caja: 80 px

Poder de extender la sombra de la caja: -10px
Shadow Color: RGBA (0.0,0,0.49)
Clone ambos módulos y coloque los duplicados en las columnas 3 y 4 Después de haber terminado de cambiar los módulos en las columnas 1 y 2, puede clonar los módulos y colocar los duplicados en las dos columnas restantes.
Cambie la imagen, no olvide cambiar la imagen del segundo testimonio.

Cambie el fondo del gradiente del botón y el fondo de gradiente del botón.

Color 1: # FF001D

Color 2: # 3700ff
Dirección de gradiente: 100 grados
Cambie el color del testimonio y coincida con el color del borde con el nuevo fondo de gradiente del botón.
Color del borde izquierdo: # FF001D

Recrear el ejemplo no. 2
¡Agregue una nueva sección, vamos al segundo ejemplo! Agregue una nueva sección habitual a su página.

Agregue una nueva estructura de fila de la columna sin hacer cambios en la sección, agregue una nueva línea utilizando la siguiente estructura de columna:

Dimensión Continúe abriendo la configuración de la fila y haciendo algunos cambios en la configuración del tamaño.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio entonces, agregue algunos valores de llenado personalizados en una fila y columnas.
Revelaje izquierdo: 200 PX (escritorio), 30 px (tableta), 25 px (teléfono)

Llenado derecho: 200 PX (escritorio), 30 px (tableta), 25 px (teléfono) izquierda 1 relleno: 5 px (escritorio), 0 px (tableta y teléfono)
Columna 1 Reinicio derecho: 2.5 PX (escritorio), 0 PX (tableta y teléfono)
Columna 2 relleno izquierdo: 2.5 px (escritorio), 0 px (tableta y teléfono)
COLUMNA 2 ENLIZACIÓN DERECHA: 2.5 PX (escritorio), 0 PX (tableta y teléfono)
Columna 3 ENLIZACIÓN IZQUIERDA: 2.5 PX (escritorio), 0 PX (tableta y teléfono)
Columna 3 Reinicio derecho: 5 PX (escritorio), 0 PX (tableta y teléfono)
Agregue el modo de video al enlace de video de la columna 1 El primer modo que necesitaremos en la columna 1 es un módulo de video. Conecte este video a su video testimonial.
Superposición de imagen Agregue una superposición de imágenes.
Agregue un módulo testimonial a la columna 1 agrega el segundo contenido y el último módulo requerido en la columna 1 es un módulo testimonial. Comience agregando los detalles del testimonio.

Deshabilite el icono de cotización y luego, deshabilite el icono de cotización en la configuración de elementos.

Muestra el icono de oferta: no

El color de fondo agrega un fondo blanco.

Color de fondo: #ffffff
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.

El color del texto del cuerpo: # 000000
Espacio de letras del cuerpo: -0.5 PX

La altura de la línea del cuerpo: 1.7em
Espacio y agregue algunos valores de margen personalizado y llenado en la configuración de espaciado.
Margen inferior: 30 PX (tableta y teléfono)
Revestimiento superior: 50 px

Revestimiento inferior: 50 PX
Junta izquierda: 80 PX
Junta derecha: 80 PX
Border también ofrecemos el módulo de esquinas redondeadas a la izquierda y a la derecha “30 PX”.
Box Shadow y, finalmente, para crear una cierta profundidad, ofrecemos al módulo testimonial una sombra sutil de la caja.
Poder de extender la sombra de la caja: -10px

Color de la sombra: RGBA (0.0,0,0,3)

Clon los módulos tres veces y coloque los duplicados en las columnas restantes después de haber terminado de cambiar ambos módulos en la columna 1, clonos dos veces y coloque los duplicados en las dos columnas restantes.
Cambie los enlaces de video, las superposiciones de contenido e imagen No olviden cambiar el enlace de video, las superposiciones de contenido e imagen de sus nuevos testimonios.
Recrear el ejemplo no. 3
¡Agregue una nueva sección, pasamos al tercer ejemplo! Agregue una nueva sección habitual a su página.

Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Columna 1 Color de fondo Luego, acceda a la configuración de fondo y agregue un color de fondo a la primera columna.

Columna 1 Color de fondo: # F9F9F9

El color de fondo de la columna 2 de la segunda columna necesitará un color de fondo blanco.

Columna 2 Color de fondo: #ffffff

Dimensión Luego, acceda a la configuración del tamaño y retire el ancho de la canaleta.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
El espacio agregue algunos valores de espaciado personalizados.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Junta izquierda: 0 PX

Revestimiento derecho: 0 PX
Columna 1 revestimiento superior: 100 px
Columna 1 revestimiento inferior: 100 px
Columna 1 Reinicio izquierdo: 50 PX
Columna 1 Revelaje derecho: 50 PX
Columna 2 revestimiento superior: 100 px
Columna 2 revestimiento inferior: 100 px
Columna 2 Lineo izquierdo: 50 PX
Columna 2 Reinicio derecho: 50 PXfrontier y dar cada uno de los bordes “20px”.
Box Shadow por último, pero no menos importante, dale a tu giro un tono de caja.
Poder de poco claro de la sombra de la caja: 80 px
Agregue un módulo testimonial a la columna 1 ¡Agregar contenido es hora de comenzar a agregar módulos! El primer módulo que necesitaremos en la columna 1 es un módulo testimonial. Agregue el contenido.
Cargue la imagen Continuar cargando una imagen en la configuración de la imagen.

Deshabilite el icono de cotización y luego, desactive el icono de cotización.

Muestra el icono de oferta: no
Deshabilitar el color del color Deshabilitar y el color de fondo.


Use el color de fondo: no

Continúe con la configuración del texto accediendo a la pestaña de diseño y realice algunos cambios en la configuración del texto del cuerpo.

Font Corp: Abril Fatface
El color del texto del cuerpo: # 000000

Tamaño del texto del cuerpo: 20 PX
Agregue un módulo de texto a la columna 1 Agregar contenido El segundo modo que necesitaremos en la columna 1 es un módulo de texto. Agregue la prueba del testimonio al cuadro de contenido.

Extienda luego, acceda a la pestaña de diseño y agregue algunos bordes personalizados desde arriba e abajo.
Margen superior: 50 PX
Margen inferior: 50 PX
Agregue el módulo de imagen a la columna 1 Cargue el logotipo de la tercera compañía y el último módulo que necesitamos en la primera columna es un módulo de imagen. Puede usar este módulo para agregar el logotipo al testimonio.

Clone todos los módulos y coloque los duplicados en la columna 2 después de haber terminado de cambiar todos los módulos en la columna 1, puede continuar y puede clonarlos. Después de hacer esto, coloque los duplicados en la segunda columna.

Cambie la imagen y la copia del testimonio Asegúrese de cambiar el contenido del testimonio con las imágenes. Ejemplo de registro # 4
¡Agregue una nueva sección, pasamos al cuarto ejemplo! Agregue una nueva sección a su página.
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea a su sección utilizando la siguiente estructura de columna:

Columna 1 Imagen de fondo Abra la configuración de la fila y agregue una imagen de fondo a la primera columna.

Columna 1 repetir la imagen de fondo: sin repetición

La imagen de fondo de la columna 3 hace lo mismo para la tercera columna.

Columna 3 repetición de imagen de fondo: sin repetición

Dimensión Luego, acceda a la configuración del tamaño y realice algunos cambios.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Espacio Retire el relleno predeterminado e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue un módulo testimonial a la columna 1 Agregar contenido Continúe agregando un testimonio a la primera columna. Una vez que lo haya hecho, agregue los detalles del testimonio.
Los antecedentes de gradiente dan el módulo y un fondo de gradiente.
Color 1: # 8b32ff

Color 2: # FF35AE
Dirección de gradiente: 120 grados
La configuración del icono citada entonces, realice algunos cambios en la configuración del icono.

Icono de color citado: # 000000

Icono Citado Color de fondo: #ffffff
Configuración de texto y cambie el color de texto en la configuración del texto.
Color de texto: Abierto
Espacio para darle al módulo una forma cuadrada, agregaremos algunos rellenos personalizados a la configuración de espaciado.

Revestimiento superior: 100 px
Finamiento inferior: 100 Izquierda Izquierda: 100 PX
Revestimiento derecho: 100 PX

Box Shadow También querrá agregar algo de profundidad al testimonio utilizando una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px

Poder de extender la sombra de la caja: -10px
Color de la sombra: # FF35AE
Filtro predeterminado La idea detrás de este testimonio es que, una vez que lo coloca, el testimonio desaparece y aparece la imagen. Para lograr este efecto, utilizaremos el filtro de opacidad en la configuración del filtro. Asegúrese de que la opacidad predeterminada sea “100%”.
Opacidad: 100%
Pase el mouse en el filtro y elimine cualquier opacidad a la carrera.

Opacidad: 0%
Clon el módulo de testimonio en la columna 3 después de haber terminado de cambiar el módulo testimonial en la columna 1, clon y coloque el duplicado en la tercera columna.
Cambie el fondo de gradiente y luego cambie el fondo de gradiente duplicado.
Color 1: # 32b0ff

Color 2: # 89009E
Dirección de gradiente: 120 grados

Clon fila y clonando toda la fila.
Elimine el testimonio del testimonio y cambie el color de fondo lo siguiente que tendrá que hacer es eliminar el fondo de gradiente de los módulos de testimonio y usar un color de fondo blanco.

Color de fondo: #ffffff

Cambie la configuración del texto después de haber eliminado el fondo degradado, puede cambiar el color de texto en la configuración del texto.
Color de texto: oscuro
Recrear el ejemplo no. 5
¡Agregue una nueva sección, pasamos al siguiente y último ejemplo de este tutorial! Agregue una nueva sección habitual a su página.

El color de fondo cambia el color de fondo de la sección.

El color del fondo: #ededed
Agregue una nueva línea a la estructura de la columna y luego, agregue una nueva fila utilizando la siguiente estructura de columnas: dimensión y algunos cambios en la configuración de tamaño.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2

Agregue un módulo de texto a la columna 1 Agregar contenido Continuar agregando un módulo de texto a la primera columna. Agregue la prueba del testimonio al cuadro de contenido.

Color de fondo y cambie el color de fondo del módulo.
Color de fondo: #ffffff

Configuración de texto luego acceda a la pestaña de diseño y cambie la orientación de texto en la configuración de texto.

Orientación de texto: centro
Sparto agregue algunos valores de margen personalizados.
Margen izquierdo: 50 PX (escritorio y tableta), 20 PX (teléfono)
Margen derecho: 50 PX (escritorio y tableta), 20 PX (teléfono)

Agregue un módulo de testimonio a la columna 1 Agregar contenido justo debajo del módulo de texto, puede ir más allá y puede agregar un módulo de testimonio. Complete los nombres del nombre del autor, el título de la publicación y el nombre de la empresa.

Cargue la imagen Subir una imagen en la configuración de la imagen.
Fondo de gradiente y agregar un fondo de gradiente.

Color 1: # 5b32ff
Color 2: # 32E5F2

Dirección de gradiente: 100 grados
Configuración del icono citado Continúe accediendo a la pestaña de diseño y cambiando la configuración de icono de oferta.
Icono de color citado: # 000000

Icono Citado Color de fondo: #ffffff

Configuración de texto Cambie la orientación del texto del texto en la configuración del texto.

Orientación de texto: centro
Color de texto: Abierto
Configuración de texto del cuerpo Entonces, juegue con la configuración de texto de su cuerpo.
Peso de la fuente del cuerpo: Ultra Bold

Estilo de fuente corporal: mayúsculas
Tamaño del texto del cuerpo: 15 PX
Espaciado de las letras del cuerpo: -0.5 PX -Cuerpo de cuerpo: 2.1em

Espaciado Agregue un margen superior negativo para crear superposición entre este módulo y el módulo de texto.
Margen superior: -25px
Box Shadow y complete el diseño del testimonio dando al módulo testimonial un tono de caja sutil.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Clon ambos módulos dos veces y coloque los duplicados en las columnas restantes después de haber terminado de cambiar los módulos en la columna 1, puede clonar dos veces y colocar los duplicados en las dos columnas restantes.
Cambie el contenido y las imágenes del testimonio Asegúrese de cambiar el contenido y las imágenes utilizadas en los módulos.
Cambie los antecedentes del gradiente de testimonio junto con los fondos de gradiente.
Color 1: # A632ff

Color 2: # F7A131
Color 1: # 3281ff

Color 2: # 2CF483
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado final en diferentes dimensiones de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le he mostrado 5 formas fantásticas de dar forma al módulo de testimonios. Le guié paso a paso el tutorial y creé los testimonios que prácticamente puede usar en cualquier sitio web para el que trabaje. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.