5 formas fantásticas de diseñar el módulo de testimonios de 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óvil

Recrear el ejemplo n. ° 1

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de 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 de la canaleta: 1

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.

Filtros

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

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

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.

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

Espaciado

Agregue también algunos valores de espaciado personalizados.

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

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)

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.

Color de fondo

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

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

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)

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

Espaciado

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

• Margen superior: 15vw (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
• Acolchado superior: 70px
• Acolchado inferior: 70px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Agrega también un borde izquierdo.

• Ancho del borde izquierdo: 7px
• Color del borde izquierdo: # 5400ff

Sombra de la caja

Por último, agregue una sombra de cuadro sutil para dar forma al Módulo de testimonios.

• 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.49)

Clonar ambos módulos y colocar duplicados en las columnas 3 y 4

Una vez que haya terminado de modificar los módulos en las columnas 1 y 2, puede clonar los módulos y colocar los duplicados en las dos columnas restantes.

Cambiar imagen

No olvide cambiar la imagen de su segundo testimonio.

Cambiar fondo degradado del botón

Cambie también el fondo degradado del botón.

• Color 1: # ff001d
• Color 2: # 3700ff
• Dirección del gradiente: 100 grados

Cambiar el color del borde del testimonio

Y haga coincidir el color del borde con el nuevo fondo degradado del botón.

• Color del borde izquierdo: # ff001d

Recrear el ejemplo n. ° 2

Agregar nueva sección

¡Pasemos al segundo ejemplo! Agrega una nueva sección regular a tu página.

Agregar nueva fila

Estructura de la columna

Sin hacer ningún cambio en la sección, agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

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

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

Espaciado

A continuación, agregue algunos valores de relleno personalizados a la fila y las columnas.

• Relleno izquierdo: 200 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Relleno derecho: 200 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Columna 1 Relleno izquierdo: 5px (escritorio), 0px (tableta y teléfono)
• Columna 1 Relleno 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 Relleno derecho: 2,5 px (escritorio), 0 px (tableta y teléfono)
• Columna 3 Relleno izquierdo: 2,5 px (escritorio), 0 px (tableta y teléfono)
• Columna 3 Relleno derecho: 5px (escritorio), 0px (tableta y teléfono)

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.

Superposición de imágenes

Agregue también una superposición de imágenes.

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.

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

Color de fondo

A continuación, agregue un fondo blanco.

• Color de fondo: #ffffff

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

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

Frontera

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

Sombra de la caja

Y, por último, para crear algo de profundidad, le damos al Módulo de testimonios 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: rgba (0,0,0,0.3)

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.

Cambiar los enlaces de video, el contenido y las superposiciones de imágenes

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

Recrear el ejemplo n. ° 3

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

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

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

Color de fondo de la columna 2

La segunda columna necesitará un color de fondo blanco.

• Color de fondo de la columna 2: #ffffff

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 de la canaleta: 1

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 a la izquierda: 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

Frontera

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

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

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.

Cargar imagen

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

Desactivar el icono de cotización

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

• Mostrar icono de cotización: No

Desactivar el color de fondo

Desactive también el color de fondo.

• Usar color de fondo: No

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

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.

Espaciado

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

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

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.

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.

Cambiar imagen de testimonio y copiar

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

Recrear el ejemplo n. ° 4

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

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

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

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

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 de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

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

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

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.

Fondo degradado

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

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

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

Configuración de texto

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

• Color del texto: claro

Espaciado

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

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

Sombra de la caja

También querrá agregar algo de profundidad al testimonio mediante el uso de 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

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 los filtros. Asegúrese de que la opacidad predeterminada sea '100%'.

• Opacidad: 100%

Filtro flotante

Y elimine toda la opacidad al pasar el mouse.

• Opacidad: 0%

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.

Cambiar fondo degradado

Cambie el fondo degradado del duplicado a continuación.

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

Fila de clonación

Y clona toda la fila.

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 usar un color de fondo blanco en su lugar.

• Color de fondo: #ffffff

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

Recrear el ejemplo n. ° 5

Agregar nueva sección

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

Color de fondo

Cambia el color de fondo de la sección.

• Color de fondo: #ededed

Agregar nueva fila

Estructura de la columna

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

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 de la canaleta: 2

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.

Color de fondo

Y cambia el color de fondo del módulo.

• Color de fondo: #ffffff

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

Espaciado

Agregue también algunos valores de margen personalizados.

• Margen izquierdo: 50 px (escritorio y tableta), 20 px (teléfono)
• Margen derecho: 50px (escritorio y tableta), 20px (teléfono)

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 con el nombre del autor, el cargo y el nombre de la empresa.

Cargar imagen

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

Fondo degradado

Y agrega un fondo degradado.

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

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

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

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

Espaciado

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

• Margen superior: -25px

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)

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.

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.

Cambiar fondos degradados testimoniales

Junto con los fondos degradados.

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

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

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos 5 formas fantásticas en las que puede diseñar el Módulo de testimonios de Divi. Lo guiamos a través del tutorial paso a paso y creamos testimonios que puede usar básicamente en cualquier sitio web en el que esté trabajando. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.