Saltar al contenido principal

3 forma diferente de personalizar el módulo de testimonios en Divi

Divi: el tema de WordPress más fácil de usar

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Lo único que los visitantes siempre buscan en un sitio web son los testimonios. Representan credibilidad e influyen en el proceso de toma de decisiones de los clientes potenciales cuando visitan su sitio web.

Además de garantizar que tenga historias sólidas para compartir, su atractivo visual también juega un papel importante. En este tutorial, le mostraremos formas fantásticas de 3 para personalizar el módulo de testimonios Divi utilizando solo las opciones integradas.

estudio

Antes de sumergirse en el tutorial, veamos el resultado final en diferentes tamaños de pantalla.

oficina

Ejemplo de modificacion de modulo 1 testimonial.jpg

Ejemplo del módulo de modificación de 2 testimony.jpg

Ejemplo de modificacion de modulo 3 testimonial.jpg

Móvil

ejemplo.jpg móvil

Recrear el Ejemplo # 1

primer ejemplo testimonial divi.png

Añadir una nueva sección

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

añadir una sección en divi.jpg

Añadir una nueva linea

Estructura de la columna

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

añadir una nueva columna en divi.jpg

apresto

Sin agregar más módulos, abra los parámetros de línea y realice algunos cambios en los parámetros de tamaño.

  • Hacer esta línea de ancho completo: si
  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1

configurando el dimensionamiento divi.jpg

Añadir un módulo de imagen a la columna 1.

Cargar una imagen

¡Es hora de empezar a añadir módulos! El primer módulo que necesitaremos es un módulo de imagen en la columna 1. Continúa y descarga una imagen cuadrada de tu elección.

descargar una imagen divi.jpg

filtros

Luego ve a la configuración del filtro y juega con los diferentes efectos.

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

imagen configuracion.jpg

Agregar un módulo de botón a la columna 1

Añadir una copia

El segundo y último módulo que necesitaremos en la columna 1 es un módulo de botón. Añadir una copia de elección.

hacer una copia de una imagen.jpg

Configuración de botones

Luego vaya a la configuración de los botones y cambie la apariencia de su botón.

  • Use 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: 100deg
  • Ancho del borde del botón: 0px
  • Peso de la fuente: Ultra Bold
  • Estilo de letra: mayúsculas

configuración del botón divi.jpg

espaciamiento

También agrega valores de espaciado personalizados.

  • Relleno superior: 10px
  • Acolchado inferior: 10px
  • Relleno izquierdo: 30px
  • Derecho de tapicería: 30px

Configuracion de relleno interno.jpg

Caja de sombra

Y terminar con una caja sutil de sombra.

  • Box Shadow Blur Force: 80px
  • Color de la sombra: rgba (0,0,0,0,3)

configuración de la sombra divi.jpg

Agregar un 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 contenido a los diferentes campos y al área de contenido.

añadir un módulo testimonial.jpg

Color de fondo

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

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

imagen de fondo configuracion.jpg

Ajustes para el icono de testimonial.

También cambiar la configuración del icono de testimonio.

  • Color del icono del testimonio: # 0c0c0c
  • Color del fondo del icono testimonial: rgba (245,245,245,0)

Configuración de la sección del icono testimonial.jpg

Configuración del texto del cuerpo

A continuación, cambie la configuración del texto del cuerpo.

  • Fuente Cuerpo: Verdana
  • Altura del cuerpo: 1.7em

cuerpo texto parametro testimonial.jpg

espaciamiento

Continúe agregando diferentes márgenes personalizados y complete los valores en la configuración de espaciado.

  • Margen superior: 15vw (escritorio y tableta), 0vw (teléfono)
  • Margen inferior: 50px (tableta y teléfono)
  • Margen izquierdo: -10vw (escritorio y tableta), 0vw (teléfono)
  • Margen derecho: 5vw
  • Relleno superior: 70px
  • Acolchado inferior: 70px
  • Relleno izquierdo: 50px
  • Derecho de tapicería: 50px

configuración de espacio divi módulo testimonial.jpg

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

frontera

También agregue un borde izquierdo.

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

configuración del borde izquierdo divi.jpg

Caja de sombra

Finalmente, agregue una sombra de cuadro sutil para dar forma al módulo de testimonio.

  • Box Shadow Blur Force: 80px
  • Fuerza de propagación de la sombra de la caja: -10px
  • Color de la sombra: rgba (0,0,0,0,49)

modulo de configuracion de sombra testimonial.jpg

Clone ambos módulos y coloque los duplicados en las columnas 3 y 4

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

clonar dos modulos divi.jpg

Cambiar la imagen

No olvides cambiar la imagen de tu segundo testimonio.

edita la imagen divi.jpg

Cambiar el fondo degradado

También cambiar el fondo degradado del botón.

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

cambiar el fondo del módulo divi degradado testimonial.jpg

Cambia el color del borde del testimonio.

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

  • Color del borde izquierdo: # ff001d

módulo de testimonio divi

Recrear el Ejemplo # 2

ejemplo 2 creación de una sección de testimonios.png

Añadir una nueva sección

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

selección de una nueva sección divi.jpg

Añadir una nueva linea

Estructura de la columna

Sin realizar ningún cambio en la sección, agregue una nueva fila utilizando la siguiente estructura de columna:

Elija un diseño para el módulo testimonial divi.jpg

apresto

Continúe abriendo los parámetros de línea y cambiando los parámetros de tamaño.

  • Hacer esta línea de ancho completo: si
  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1

módulo espaciamiento testimonial divi.jpg

espaciamiento

Luego agregue valores de relleno personalizados a la fila y columnas.

  • Relleno a la izquierda: 200px (escritorio), 30px (tableta), 25px (teléfono)
  • Relleno a la derecha: 200px (escritorio), 30px (tableta), 25px (teléfono)
  • Columna 1 Relleno a la izquierda: 5px (escritorio), 0px (tableta y teléfono)
  • Columna 1 Relleno a la derecha: 2.5px (escritorio), 0px (tableta y teléfono)
  • Columna 2 Relleno a la izquierda: 2.5px (escritorio), 0px (tableta y teléfono)
  • Columna 2 Relleno a la derecha: 2.5px (escritorio), 0px (tableta y teléfono)
  • Columna 3 Relleno a la izquierda: 2.5px (escritorio), 0px (tableta y teléfono)
  • Columna 3 Relleno a la derecha: 5px (escritorio), 0px (tableta y teléfono)

Personalización de la línea de margen divi.jpg

Agregar un 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. Enlace este video a su video testimonial.

agregar un video.jpg modulo

Superposición de imagen

También agrega una superposición de imagen.

para configurar la superposición de imágenes en divi.jpg

Agregar un 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.

agregar un módulo de testimonios a la columna 1.jpg

Desactivar el icono de testimonial.

Luego, deshabilite el ícono de testimonio en la configuración del ítem.

  • Mostrar ícono de testimonio: No

Deshabilitando el clon en el testimonial divi.jpg

Color de fondo

Añadir un fondo blanco entonces.

  • Color de fondo: #ffffff

establecer el color de fondo.jpg

Configuración del texto del cuerpo

También cambia la configuración del texto del cuerpo.

  • Texto del color del cuerpo: # 000000
  • Espacio entre letras del cuerpo: -0.5px
  • Altura del cuerpo: 1.7em

Configura el color del módulo de fuente testimonial.jpg

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

espaciamiento

Y añada márgenes personalizados y complete los valores en la configuración de espaciado.

  • Margen inferior: 30px (tableta y teléfono)
  • Relleno: 50px
  • Acolchado inferior: 50px
  • Relleno izquierdo: 80px
  • Derecho de tapicería: 80px

configurar la tapicería.jpg

frontera

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

configuración de bordes redondeados.jpg

Caja de sombra

Finalmente, para dar profundidad, le damos al módulo Testimonial una sombra de caja sutil.

  • Box Shadow Blur Force: 80px
  • Fuerza de propagación de la sombra de la caja: -10px
  • Color de la sombra: rgba (0,0,0,0,3)

Testimonios del módulo de creación de fronteras divi.jpg

Clone los módulos tres veces y coloque los duplicados en las columnas restantes

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

módulos testimoniales divi blogpascher.jpg

Editar enlaces de video, contenido y superposiciones de imágenes

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

modificar enlaces videos módulos testimonios ejemplo 2.jpg

Recrear el Ejemplo # 3

crear el ejemplo del módulo divi de 3 testimonials.png

Añadir una nueva sección

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

selección de una sección divi.jpg

Añadir una nueva linea

Estructura de la columna

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

elige un diseño de columna doble.jpg

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

configurando los ajustes de línea divi.jpg

Color de fondo de la columna 2

La segunda columna necesitará un fondo blanco.

  • Color de fondo de la columna 2: #ffffff

configuración de color en divi.jpg

apresto

Luego, vaya a los parámetros de tamaño y elimine el ancho de la canaleta.

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1

Configuración del módulo de espaciado. Ejemplo de ejemplo divi 3.jpg

espaciamiento

Agregue valores de espaciado personalizados a continuación.

  • Mejor relleno: 0px
  • Parte inferior de relleno: 0px
  • Relleno izquierdo: 0px
  • Derecho de tapicería: 0px
  • Columna 1 Relleno superior: 100px
  • Columna 1 Relleno inferior: 100px
  • Columna 1 Relleno a la izquierda: 50px
  • Columna 1 Relleno a la derecha: 50px
  • Columna 2 Relleno superior: 100px
  • Relleno inferior de la columna 2: 100px
  • Columna 2 Relleno a la izquierda: 50px
  • Columna 2 Relleno a la derecha: 50px

Configuración de espaciado de columnas en divi.jpg

frontera

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

Conifguración de fronteras en divi.jpg

Caja de sombra

Por último, pero no menos importante, dale sombra a tu línea.

  • Box Shadow Blur Force: 80px

Ejemplo de testimonio del módulo de configuración de sombra 3.jpg

Agregar un módulo de testimonios a la columna 1

Agregar contenido

¡Es hora de empezar a añadir módulos! El primer módulo que necesitaremos en la columna 1 es un módulo de testimonios. Añade el contenido.

añadir un ejemplo de módulo de testimonios divi 3.jpg

Cargar una imagen

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

descargar una imagen divi constructor modulo testimonial.jpg

Desactivar el icono de testimonial.

Luego, deshabilita el ícono de testimonio.

  • Mostrar ícono de testimonio: No

Desactiva el ícono de ejemplo de ejemplo divi 3.jpg

Desactivar color de fondo

Además, apaga el color de fondo.

  • Usar color de fondo: No

deshabilita el color de fondo.jpg

Configuración del texto del cuerpo

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

  • Cuerpo de Policía: Abril Fatface
  • Texto del color del cuerpo: # 000000
  • Tamaño del texto del cuerpo: 20px

cuerpo texto parámetros modulo testimonial divi.jpg

Añadir un 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 área de contenido.

agregue un módulo de texto a la columna 1 divi ejemplo 3.jpg

espaciamiento

Luego, vaya a la pestaña Diseño y agregue márgenes superiores e inferiores personalizados.

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

Configuración del ejemplo de testimonio del módulo de espaciado 3.jpg

Añadir un módulo de imagen a la columna 1.

Descarga el logo de la empresa.

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

módulo de testimonio divi

Clone todos los módulos y coloque duplicados en la columna 2

Una vez que haya terminado de editar todos los módulos en la columna 1, puede copiarlos y copiarlos. Una vez que hayas terminado, coloca los duplicados en la segunda columna.

módulo de testimonio divi

Cambia la imagen y la copia del testimonio.

Asegúrate de cambiar el contenido del testimonio con las fotos.

Cambia el icono y el contenido del testimonio divi.jpg.

Para terminar

Eso es todo para este tutorial, espero que te permita proponer varias variantes.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
2 acciones
cuota2
Tweet
Siguiente
WhatsApp