¡Tu licencia Divi con un -20% de DescuentoOferta aquí

5 tipos de sección de testimonios para Divi

Oct 14, 2020 | Tutoriales para Divi

Lo único que los visitantes siempre buscan en un sitio web son testimonios. Representan credibilidad e influyen en el proceso de toma de decisiones que tienen los clientes potenciales o potenciales cuando visitan su sitio web. Además de asegurarse de tener testimonios sólidos para compartir, hacer que sean visualmente atractivos también juega un papel importante. En esta publicación, le mostraremos 5 formas fantásticas en las que puede diseñar el Módulo de testimonios de Divi utilizando solo las opciones integradas.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.

Escritorio

 

módulo testimonial divi

Móvil

 

módulo testimonial divi

Recrear el ejemplo n. ° 1

módulo testimonial divi

Agregar nueva sección

¡Comencemos con el primer ejemplo! Cree una nueva página y agregue una sección regular.

módulo testimonial divi

Agregar nueva fila

Estructura de columna

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

módulo testimonial divi

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y realice algunos cambios en la configuración de Tamaño.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

módulo testimonial divi

Agregar módulo de imagen a la columna 1

Cargar imagen

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

módulo testimonial divi

Filtros

Luego, vaya a la configuración de filtros y juegue con los diferentes efectos.

  • Saturación: 40%
  • Contraste: 126%

módulo testimonial divi

Agregar módulo de botones a la columna 1

Agregar copia

El segundo y último módulo que necesitaremos en la columna 1 es un módulo de botones. Agregue una copia de su elección.

módulo testimonial divi

Configuración de botones

Luego, vaya a la configuración del botón y realice algunos cambios en la apariencia de su botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 14px
  • Color 1: # 5400ff
  • Color 2: # 00fff6
  • Dirección del gradiente: 100 grados
  • Ancho del borde del botón: 0px
  • Peso de fuente: Ultra Bold
  • Estilo de fuente: mayúsculas

módulo testimonial divi

módulo testimonial divi

Espaciado

Agregue también algunos valores de espaciado personalizados.

  • Acolchado superior: 10px
  • Acolchado inferior: 10px
  • Relleno izquierdo: 30px
  • Relleno derecho: 30px

módulo testimonial divi

Sombra de la caja

Y remata con una sutil sombra de caja.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.3)

módulo testimonial divi

Agregar módulo de testimonios a la columna 2

Agregar contenido

En la segunda columna, el único módulo que necesitaremos es un módulo de testimonios. Agregue algo de contenido a los diferentes campos y al cuadro de contenido.

módulo testimonial divi

Color de fondo

A continuación, agregue un color de fondo ligeramente transparente.

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

módulo testimonial divi

Configuración del icono de cotización

Cambie también la configuración del icono de cotización.

  • Color del icono de cotización: # 0c0c0c
  • Color de fondo del icono de cotización: rgba (245,245,245,0)

módulo testimonial divi

Configuración del texto del cuerpo

Luego, modifique la configuración del texto del cuerpo.

  • Fuente del cuerpo: Verdana
  • Altura de la línea del cuerpo: 1.7em

módulo testimonial divi

Espaciado

Continúe agregando diferentes valores de margen y relleno personalizados en la configuración de espaciado.

  • Top Margin: 15vw (Desktop &  Tablet), 0vw (Phone)
  • Bottom Margin: 50px (Tablet & Phone)
  • Left Margin: -10vw (Desktop & Tablet), 0vw (Phone)
  • Right Margin: 5vw
  • Top Padding: 70px
  • Bottom Padding: 70px
  • Left Padding: 50px
  • Right Padding: 50px

módulo testimonial divi

Border

Add a left border as well.

  • Left Border Width: 7px
  • Left Border Color: #5400ff

módulo testimonial divi

Box Shadow

Lastly, add a subtle box shadow to shape the Testimonial Module.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.49)

módulo testimonial divi

Clone Both Modules & Place Duplicates in Column 3 & 4

Once you’re done modifying the modules in column 1 and 2, you can clone the modules and place the duplicates in the two remaining columns.

módulo testimonial divi

Change Image

Don’t forget to change the image of your second testimonial.

módulo testimonial divi

Change Button Gradient Background

Change the button gradient background as well.

  • Color 1: #ff001d
  • Color 2: #3700ff
  • Gradient Direction: 100deg

módulo testimonial divi

Change Testimonial Border Color

And match the border color to the new button gradient background.

  • Left Border Color: #ff001d

módulo testimonial divi

Recreate Example #2

módulo testimonial divi

Add New Section

On to the second example! Add a new regular section to your page.

módulo testimonial divi

Add New Row

Column Structure

Without making any changes to the section, add a new row using the following column structure:

módulo testimonial divi

Sizing

Continue by opening the row settings and making some changes to the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

módulo testimonial divi

Spacing

Next, add some custom padding values to the row and columns.

  • Left Padding: 200px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 200px (Desktop), 30px (Tablet), 25px (Phone)
  • Column 1 Left Padding: 5px (Desktop), 0px (Tablet & Phone)
  • Column 1 Right Padding: 2.5px (Desktop), 0px (Tablet & Phone)
  • Columna 2 Relleno izquierdo: 2,5 px (escritorio), 0 px (tableta y teléfono)
  • Columna 2 Relleno derecho: 2,5 px (escritorio), 0 px (tableta y teléfono)
  • Columna 3 Relleno izquierdo: 2.5px (escritorio), 0px (tableta y teléfono)
  • Columna 3 Relleno derecho: 5px (escritorio), 0px (tableta y teléfono)

módulo testimonial divi

Agregar módulo de video a la columna 1

Enlace de video

El primer módulo que necesitaremos en la columna 1 es un módulo de video. Vincula este video a tu video testimonial.

módulo testimonial divi

Superposición de imágenes

Añade también una superposición de imágenes.

módulo testimonial divi

Agregar módulo de testimonios a la columna 1

Agregar contenido

El segundo y último módulo necesario en la columna 1 es un módulo de testimonios. Comience agregando los detalles del testimonio.

módulo testimonial divi

Desactivar el icono de cotización

Luego, desactive el icono de cotización en la configuración de elementos.

  • Mostrar icono de cotización: No

módulo testimonial divi

Color de fondo

A continuación, agregue un fondo blanco.

  • Color de fondo: #ffffff

módulo testimonial divi

Configuración del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

  • Color del texto del cuerpo: # 000000
  • Espaciado de letras del cuerpo: -0.5px
  • Altura de la línea del cuerpo: 1.7em

módulo testimonial divi

Espaciado

Y agregue algunos valores personalizados de margen y relleno en la configuración de espaciado.

  • Margen inferior: 30 px (tableta y teléfono)
  • Relleno superior: 50px
  • Acolchado inferior: 50px
  • Relleno izquierdo: 80px
  • Relleno derecho: 80px

módulo testimonial divi

Frontera

También le damos al módulo las esquinas redondeadas inferior izquierda y derecha ’30px’.

módulo testimonial divi

Sombra de la caja

Y, por último, para crear algo de profundidad, le estamos dando al Módulo de testimonios una sutil sombra de cuadro.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Fuerza de propagación de la sombra de caja: -10px
  • Color de sombra: rgba (0,0,0,0.3)

módulo testimonial divi

Clonar módulos tres veces y colocar duplicados en las columnas restantes

Una vez que haya terminado de modificar ambos módulos en la columna 1, clónelos dos veces y coloque los duplicados en las dos columnas restantes.

módulo testimonial divi

Cambiar enlaces de video, contenido e imágenes superpuestas

No olvide cambiar el enlace del video, el contenido y las superposiciones de imágenes de sus nuevos testimonios.

módulo testimonial divi

Recrear el ejemplo n. ° 3

módulo testimonial divi

Agregar nueva sección

¡Vamos al tercer ejemplo! Agregue una nueva sección regular a su página.

módulo testimonial divi

Agregar nueva fila

Estructura de columna

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

módulo testimonial divi

Color de fondo de la columna 1

Luego, vaya a la configuración de fondo y agregue un color de fondo a la primera columna.

  • Color de fondo de la columna 1: # f9f9f9

módulo testimonial divi

Color de fondo de la columna 2

La segunda columna necesitará un color de fondo blanco.

  • Color de fondo de la columna 2: #ffffff

módulo testimonial divi

Dimensionamiento

Luego, vaya a la configuración de tamaño y elimine el ancho de la canaleta.

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

módulo testimonial divi

Espaciado

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

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Relleno izquierdo: 0px
  • Relleno derecho: 0px
  • Relleno superior de la columna 1: 100 px
  • Relleno inferior de la columna 1: 100 px
  • Columna 1 Relleno izquierdo: 50px
  • Columna 1 Relleno derecho: 50px
  • Relleno superior de la columna 2: 100 px
  • Relleno inferior de la columna 2: 100 px
  • Columna 2 Relleno izquierdo: 50px
  • Columna 2 Relleno derecho: 50px

módulo testimonial divi

Frontera

Y dale a cada uno de los bordes ’20px’.

módulo testimonial divi

Sombra de la caja

Por último, pero no menos importante, dale a tu fila una sombra de cuadro.

  • Fuerza de desenfoque de sombra de caja: 80px

módulo testimonial divi

Agregar módulo de testimonios 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 de testimonios. Agrega el contenido.

módulo testimonial divi

Cargar imagen

Continúe cargando una imagen en la configuración de imagen.

módulo testimonial divi

Desactivar el icono de cotización

A continuación, desactive el icono de cotización.

  • Mostrar icono de cotización: No

módulo testimonial divi

Desactivar el color de fondo

Desactive también el color de fondo.

  • Usar color de fondo: No

módulo testimonial divi

Configuración del texto del cuerpo

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

  • Fuente del cuerpo: Abril Fatface
  • Color del texto del cuerpo: # 000000
  • Tamaño del texto del cuerpo: 20px

módulo testimonial divi

Agregar módulo de texto a la columna 1

Agregar contenido

El segundo módulo que necesitaremos en la columna 1 es un módulo de texto. Agregue la copia del testimonio al cuadro de contenido.

módulo testimonial divi

Espaciado

Luego, vaya a la pestaña de diseño y agregue algunos márgenes superior e inferior personalizados.

  • Margen superior: 50 px
  • Margen inferior: 50 px

módulo testimonial divi

Agregar módulo de imagen a la columna 1

Subir el logotipo de la empresa

El tercer y último módulo que necesitaremos en la columna uno es un módulo de imagen. Puede utilizar este módulo para agregar el logotipo de la empresa relacionado con el testimonio.

módulo testimonial divi

Clonar todos los módulos y colocar duplicados en la columna 2

Una vez que haya terminado de modificar todos los módulos en la columna 1, puede continuar y clonarlos. Una vez que lo haga, coloque los duplicados en la segunda columna.

módulo testimonial divi

Cambiar imagen de testimonio y copiar

Asegúrese de cambiar el contenido del testimonio junto con las imágenes.

módulo testimonial divi

Recrear el ejemplo n. ° 4

módulo testimonial divi

Agregar nueva sección

¡Vamos al cuarto ejemplo! Agrega una nueva sección a tu página.

módulo testimonial divi

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:

módulo testimonial divi

Imagen de fondo de la columna 1

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

  • Repetición de la imagen de fondo de la columna 1: Sin repetición

módulo testimonial divi

Imagen de fondo de la columna 3

Haz lo mismo con la tercera columna.

  • Columna 3 Repetición de la imagen de fondo: Sin repetición

módulo testimonial divi

Dimensionamiento

Luego, vaya a la configuración de tamaño y realice algunos cambios.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1
  • Ecualizar alturas de columna: Sí

módulo testimonial divi

Espaciado

A continuación, elimine el acolchado superior e inferior predeterminado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

módulo testimonial divi

Agregar módulo de testimonios a la columna 1

Agregar contenido

Continúe agregando un módulo de testimonios a la primera columna. Una vez que lo haga, agregue los detalles del testimonio.

módulo testimonial divi

Fondo degradado

Dale al módulo un fondo degradado también.

  • Color 1: # 8b32ff
  • Color 2: # ff35ae
  • Dirección del gradiente: 120 grados

módulo testimonial divi

Configuración del icono de cotización

Luego, realice algunos cambios en la configuración del icono.

  • Color del icono de cotización: # 000000
  • Color de fondo del icono de cotización: #ffffff

módulo testimonial divi

Configuración de texto

Y cambie el color del texto en la configuración del texto.

  • Color del texto: claro

módulo testimonial divi

Espaciado

Para darle al módulo una forma cuadrada, agregaremos un relleno personalizado en la configuración de espaciado.

  • Relleno superior: 100 px
  • Acolchado inferior: 100px
  • Relleno izquierdo: 100px
  • Relleno derecho: 100px

módulo testimonial divi

Sombra de la caja

También querrá agregar algo de profundidad al testimonio usando una sombra de cuadro sutil.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Fuerza de propagación de la sombra de caja: -10px
  • Color de sombra: # ff35ae

módulo testimonial divi

Filtro predeterminado

La idea detrás de este testimonio es que una vez que lo colocas, el testimonio desaparece y aparece la imagen. Para lograr este efecto, usaremos el filtro de opacidad en la configuración de filtros. Asegúrese de que la opacidad predeterminada sea ‘100%’.

  • Opacidad: 100%

módulo testimonial divi

Filtro flotante

Y elimine toda la opacidad al pasar el mouse.

  • Opacidad: 0%

módulo testimonial divi

Clonar el módulo de testimonios en la columna 3

Una vez que haya terminado de modificar el Módulo de testimonios en la columna 1, clónelo y coloque el duplicado en la tercera columna.

módulo testimonial divi

Cambiar fondo degradado

Cambie el fondo degradado del duplicado a continuación.

  • Color 1: # 32b0ff
  • Color 2: # 89009e
  • Dirección del gradiente: 120 grados

módulo testimonial divi

Fila de clonación

Y clona toda la fila.

módulo testimonial divi

Eliminar el fondo degradado de testimonio y cambiar el color de fondo

Lo siguiente que deberá hacer es eliminar el fondo degradado de los módulos de testimonios y utilizar un color de fondo blanco en su lugar.

  • Color de fondo: #ffffff

módulo testimonial divi

Cambiar la configuración del texto del testimonio

Una vez que haya eliminado el fondo degradado, puede cambiar el color del texto en la configuración del texto.

  • Color del texto: oscuro

módulo testimonial divi

Recrear el ejemplo n. ° 5

módulo testimonial divi

Agregar nueva sección

¡Pasemos al siguiente y último ejemplo de este tutorial! Agregue una nueva sección regular a su página.

módulo testimonial divi

Color de fondo

Cambia el color de fondo de la sección.

  • Color de fondo: #ededed

módulo testimonial divi

Agregar nueva fila

Estructura de columna

Luego, agregue una nueva fila usando la siguiente estructura de columnas:

módulo testimonial divi

Dimensionamiento

Realice también algunos cambios en la configuración de tamaño.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 2

módulo testimonial divi

Agregar módulo de texto a la columna 1

Agregar contenido

Continúe agregando un módulo de texto a la primera columna. Agregue la copia del testimonio al cuadro de contenido.

módulo testimonial divi

Color de fondo

Y cambia el color de fondo del módulo.

  • Color de fondo: #ffffff

módulo testimonial divi

Configuración de texto

Luego, vaya a la pestaña de diseño y cambie la orientación del texto en la configuración del texto.

  • Orientación del texto: centro

módulo testimonial divi

Espaciado

Agregue también 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)

módulo testimonial divi

Agregar módulo de testimonios a la columna 1

Agregar contenido

Justo debajo del Módulo de texto, puede continuar y agregar un Módulo de testimonios. Complete los campos de nombre del autor, cargo y nombre de la empresa.

módulo testimonial divi

Cargar imagen

Sube una imagen en la configuración de imagen también.

módulo testimonial divi

Fondo degradado

Y agrega un fondo degradado.

  • Color 1: # 5b32ff
  • Color 2: # 32e5f2
  • Dirección del gradiente: 100 grados

módulo testimonial divi

Configuración del icono de cotización

Continúe yendo a la pestaña de diseño y cambiando la configuración del icono de cotización.

  • Color del icono de cotización: # 000000
  • Color de fondo del icono de cotización: #ffffff

módulo testimonial divi

Configuración de texto

Cambie también la orientación del texto en la configuración del texto.

  • Orientación del texto: centro
  • Color del texto: claro

módulo testimonial divi

Configuración del texto del cuerpo

A continuación, juegue con la configuración del texto del cuerpo.

  • Peso de la fuente del cuerpo: Ultra Bold
  • Estilo de fuente del cuerpo: mayúsculas
  • Tamaño del texto del cuerpo: 15px
  • Espaciado de letras del cuerpo: -0.5px
  • Altura de la línea del cuerpo: 2.1em

módulo testimonial divi

Espaciado

Agregue un margen superior negativo para crear la superposición entre este módulo y el Módulo de texto.

  • Margen superior: -25px

módulo testimonial divi

Sombra de la caja

Y termine el diseño de testimonios dándole al Módulo de testimonios una sombra de caja sutil.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.3)

módulo testimonial divi

Clonar ambos módulos dos veces y colocar duplicados en las columnas restantes

Una vez que haya terminado de modificar los módulos en la columna 1, puede clonarlos dos veces y colocar los duplicados en las dos columnas restantes.

módulo testimonial divi

Cambiar el contenido y las imágenes de los testimonios

Asegúrese de cambiar el contenido y las imágenes que se utilizan en los módulos.

módulo testimonial divi

Cambiar fondos degradados testimoniales

Junto con los fondos degradados.

  • Color 1: # a632ff
  • Color 2: # f7a131

módulo testimonial divi

  • Color 1: # 3281ff
  • Color 2: # 2cf483

módulo testimonial divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This