Lo único que los visitantes siempre buscan en un sitio web son los testimonios. Representan credibilidad e influencia en el proceso de toma de decisiones que tienen los leads o potenciales clientes al visitar tu sitio web. Además de asegurarse de tener testimonios sólidos para compartir, hacerlos 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 mientras usa solo las opciones integradas.
¡Hagámoslo!
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 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ón: 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 copia
El segundo y último módulo que necesitaremos en la columna 1 es un módulo de botones. Agregue alguna 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 negrita
- Estilo de fuente: Mayúsculas
Espaciado
Agregue también algunos valores de espaciado personalizados.
- Relleno superior: 10px
- Relleno inferior: 10px
- Relleno izquierdo: 30px
- Relleno derecho: 30px
Sombra de la caja
Y termina con una sutil sombra de caja.
- Fuerza de desenfoque de sombra de cuadro: 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 Testimonial. 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,7 em
Espaciado
Continúe agregando diferentes márgenes personalizados y valores de relleno en la configuración de espaciado.
- Margen superior: 15vw (computadora de escritorio y tableta), 0vw (teléfono)
- Margen inferior: 50 px (tableta y teléfono)
- Margen izquierdo: -10vw (computadora de escritorio y tableta), 0vw (teléfono)
- Margen derecho: 5vw
- Relleno superior: 70px
- Relleno inferior: 70px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Borde
Agregue un borde izquierdo también.
- Ancho del borde izquierdo: 7px
- Color del borde izquierdo: #5400ff
Sombra de la caja
Por último, agregue una sutil sombra de cuadro para dar forma al módulo Testimonial.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: rgba (0,0,0,0,49)
Clone ambos módulos y coloque 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 olvides cambiar la imagen de tu segundo testimonio.
Cambiar fondo de degradado de 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 #2
Agregar nueva sección
¡Vamos al segundo ejemplo! Agregue una nueva sección regular a su página.
Agregar nueva fila
Estructura de la columna
Sin realizar ningún cambio en la sección, agregue una nueva fila utilizando 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 del canalón: 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)
- Relleno izquierdo de la columna 1: 5 px (escritorio), 0 px (tableta y teléfono)
- Relleno derecho de la columna 1: 2,5 px (escritorio), 0 px (tableta y teléfono)
- Relleno izquierdo de la columna 2: 2,5 px (escritorio), 0 px (tableta y teléfono)
- Relleno derecho de la columna 2: 2,5 px (escritorio), 0 px (tableta y teléfono)
- Relleno izquierdo de la columna 3: 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 una superposición de imagen también.
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 Testimonial. Comience agregando los detalles del testimonio.
Deshabilitar icono de cotización
Luego, deshabilite el ícono de cotización en la configuración de los elementos.
- Mostrar icono de cotización: No
Color de fondo
Agregue un fondo blanco a continuación.
- Color de fondo: #ffffff
Configuración del texto del cuerpo
Modifique también la configuración del texto del cuerpo.
- Color del cuerpo del texto: #000000
- Espaciado entre letras del cuerpo: -0.5px
- Altura de la línea del cuerpo: 1,7 em
Espaciado
Y agregue algunos márgenes personalizados y valores de relleno en la configuración de espaciado.
- Margen inferior: 30px (tableta y teléfono)
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 80px
- Relleno derecho: 80px
Borde
También estamos dando al módulo las esquinas redondeadas inferiores izquierda y derecha ’30px’.
Sombra de la caja
Y, por último, para crear algo de profundidad, le estamos dando al módulo Testimonial una sutil sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -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 enlaces de video, contenido y 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 #3
Agregar nueva sección
¡Vamos al tercer ejemplo! Agregue una nueva sección regular a su 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 del canalón: 1
Espaciado
Agregue algunos valores de espaciado personalizados a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno izquierdo: 0px
- Relleno derecho: 0px
- Columna 1 Relleno superior: 100px
- Relleno inferior de la columna 1: 100px
- Columna 1 Relleno izquierdo: 50px
- Columna 1 Relleno derecho: 50px
- Relleno superior de la columna 2: 100px
- Relleno inferior de la columna 2: 100px
- Columna 2 Relleno izquierdo: 50px
- Columna 2 Relleno derecho: 50px
Borde
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 caja.
- Fuerza de desenfoque de sombra de cuadro: 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.
Deshabilitar icono de cotización
A continuación, deshabilite el icono de cotización.
- Mostrar icono de cotización: No
Deshabilitar color de fondo
Deshabilite el color de fondo también.
- 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 cuerpo del texto: #000000
- Tamaño del texto del cuerpo: 20 px
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 testimonial al cuadro de contenido.
Espaciado
Luego, vaya a la pestaña de diseño y agregue un margen superior e inferior personalizado.
- Margen superior: 50px
- Margen inferior: 50px
Agregar módulo de imagen a la columna 1
Cargar el logotipo de la empresa
El tercer y último módulo que necesitaremos en la columna uno es un módulo de imagen. Puede usar 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 y copia de testimonio
Asegúrate de cambiar el contenido del testimonio junto con las imágenes.
Recrear el Ejemplo #4
Agregar nueva sección
¡Vamos al cuarto ejemplo! Añade 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.
- Columna 1 Imagen de fondo Repetir: No repetir
Imagen de fondo de la columna 3
Haz lo mismo con la tercera columna.
- Columna 3 Imagen de fondo Repetir: No repetir
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ón: 1
- Igualar alturas de columna: Sí
Espaciado
Elimine el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de testimonios a la columna 1
Agregar contenido
Continúe agregando un Módulo Testimonial 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 cambie el color del texto en la configuración de texto.
- Color del texto: Claro
Espaciado
Para darle al módulo una forma cuadrada, agregaremos un relleno personalizado en la configuración de espaciado.
- Relleno superior: 100px
- Relleno 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 cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: #ff35ae
Filtro predeterminado
La idea detrás de este testimonio es que una vez que pasa el cursor sobre él, el testimonio desaparece y aparece la imagen. Para lograr este efecto, vamos a utilizar el filtro de opacidad en la configuración de 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 Módulo de Testimonios a 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
Cambia el fondo degradado del duplicado a continuación.
- Color 1: #32b0ff
- Color 2: #89009e
- Dirección del gradiente: 120 grados
Clonar Fila
Y clonar toda la fila.
Quitar el fondo degradado de testimonios 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 testimonial
Una vez que haya eliminado el fondo degradado, puede cambiar el color del texto en la configuración de texto.
- Color del texto: oscuro
Recree el Ejemplo #5
Agregar nueva sección
¡Pasemos al siguiente y último ejemplo de este tutorial! Agregue una nueva sección regular a su 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 columna:
Dimensionamiento
Realice algunos cambios en la configuración de tamaño también.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 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 testimonial 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, 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 (computadora de escritorio y tableta), 20 px (teléfono)
- Margen derecho: 50 px (computadora de escritorio y tableta), 20 px (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. Rellene los campos de nombre del autor, cargo y nombre de la empresa.
Cargar imagen
Cargue 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 ícono 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 de 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 negrita
- Estilo de fuente del cuerpo: Mayúsculas
- Tamaño del cuerpo del texto: 15px
- Espaciado entre letras del cuerpo: -0.5px
- Altura de la línea del cuerpo: 2,1 em
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 finalice el diseño de testimonios dándole al módulo de testimonios una sutil sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 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 contenido e imágenes de testimonios
Asegúrese de cambiar el contenido y las imágenes que se utilizan en los módulos.
Cambiar fondos degradados de testimonios
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.