Cómo crear un diseño de cuadrícula de testimonios con el módulo de testimonios de Divi

Los diseños de cuadrícula son excelentes para el contenido que debe mantenerse unido. Los testimonios son un excelente ejemplo. Los testimonios de Divi se crean con un nuevo módulo para cada testimonio, pero, afortunadamente, mostrarlos en una cuadrícula es simple. En este artículo, veremos cómo crear un diseño de cuadrícula de testimonios con el módulo de testimonios de Divi. Veremos dos diseños diferentes, para que pueda elegir cuál se adapta mejor a sus necesidades.

¡Empecemos!

Avance

He aquí un vistazo a lo que haremos en este tutorial. Estoy creando una sección de testimonios utilizando los estilos de diseño del paquete gratuito de diseño de la tienda de impresión que está disponible en Divi.

Resultados del diseño de la cuadrícula de testimonios

Resultados alternativos de diseño de testimonios

Creación del primer diseño de cuadrícula

Mostraremos los detalles de ambos diseños, pero el segundo diseño usará los módulos de este primer diseño.

Crear una fila

Primero, cree una nueva fila y seleccione un diseño de 3 columnas .

A continuación, abra la configuración de la fila haciendo clic en su icono de engranaje.

Seleccione la pestaña de diseño y habilite Usar ancho de canalón personalizado y establezca el Ancho de canalón en 1.

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

A continuación, desplácese hacia abajo hasta Espaciado y cambie el Relleno superior e inferior a 0px. Cierra la fila. Crearemos una segunda fila, pero primero terminaremos esta y luego la clonaremos.

  • Relleno: 0px arriba y abajo

Agregar un módulo de testimonios

A continuación, agregue un módulo de testimonios a la columna de la izquierda.

Configuración de contenido del módulo de testimonios

A continuación, añade el contenido testimonial . Esto incluye el nombre del autor, el cargo, el nombre de la empresa, el contenido del cuerpo y la imagen de la persona. Estoy usando los nombres de los campos y el contenido del cuerpo predeterminado para mis ejemplos.

  • Autor: nombre del autor
  • Título del trabajo: título de la persona
  • Empresa: nombre de la empresa
  • Contenido del cuerpo: el testimonio
  • Imagen: la imagen destacada

Configuración de diseño del módulo de testimonios

A continuación, seleccione la pestaña de diseño.

Icono de cotización

Cambie el color del icono de cotización a #fd335a y establezca el color de fondo en blanco. El color del icono también se utilizará para el nombre de la persona. Será el mismo para todos los módulos.

  • Color: #fd335a
  • Color de fondo: #ffffff

Imagen

A continuación, desplácese hacia abajo hasta Imagen . Establezca el Ancho del borde de la imagen en 4px y cambie el Color del borde a #000645. El borde coincidirá con el borde del módulo para cada módulo. Los cambiaremos individualmente.

  • Ancho del borde de la imagen: 4px
  • Color del borde de la imagen: #000645

Cuerpo de texto

A continuación, desplácese hacia abajo hasta Cuerpo de texto y elija Roboto Mono. Deje el resto de la configuración en sus valores predeterminados.

  • Fuente del cuerpo: Roboto Mono

Texto del autor

A continuación, desplácese hacia abajo hasta Texto del autor . Cambie la fuente a Oswald, seleccione Semi negrita para el peso, TT para el estilo y cambie el color a #fd335a.

  • Fuente: Osvaldo
  • Estilo: semi negrita
  • Estilo: TT
  • Color del texto: #fd335a

Texto de posición

A continuación, desplácese hasta Texto de posición (el título del trabajo) y cambie la Fuente a Roboto Mono. Deje el resto de la configuración en sus valores predeterminados.

  • Fuente de posición: Roboto Mono

Texto de la empresa

A continuación, desplácese hacia abajo hasta Company Text y elija Roboto Mono para la fuente. Deje la configuración en sus valores predeterminados.

  • Fuente de la compañía: Roboto Mono

Borde

Finalmente, desplácese hacia abajo hasta Borde . Cambie el Ancho a 24px y el Color del borde a #000645 para que coincida con el Borde de la imagen. Cierra la configuración del módulo. El color del borde también cambiará para cada módulo.

  • Ancho: 24px
  • Color: #000645

Duplicar el módulo de testimonios

A continuación, duplique el módulo dos veces y arrastre los dos módulos clonados a las otras columnas de la fila.

Dale estilo al segundo módulo de testimonios

Abra la configuración del segundo módulo de testimonios y cambie el contenido.

Imagen

A continuación, seleccione la pestaña de diseño y desplácese hacia abajo hasta Imagen . Cambie el color del borde a #acf8f5.

  • Color del borde de la imagen: #acf8f5

Borde

Finalmente, desplácese hacia abajo hasta Borde . Cambie el color del borde a #acf8f5 para que coincida con el borde de la imagen. Cierra la configuración del módulo. Cierra la configuración del módulo.

  • Color: #acf8f5

Dale estilo al tercer módulo de testimonios

Abra la configuración del tercer módulo de testimonios y cambie el contenido.

Imagen

A continuación, vaya a la pestaña de diseño, desplácese hacia abajo hasta Imagen y cambie el Color del borde a #fccaa0.

  • Color del borde de la imagen: #fccaa0

Borde

Finalmente, desplácese hacia abajo hasta Borde y el Color del borde hasta #fccaa0 para que coincida con el Borde de la imagen. Cierra la configuración del módulo.

  • Color: #fccaa0

Duplicar la fila

A continuación, duplique la fila haciendo clic en la opción de duplicado que aparece cuando pasa el cursor sobre la fila. Dado que agregamos 0px al relleno superior e inferior, esta nueva fila toca automáticamente la fila superior. Abriremos cada módulo en la segunda sección para cambiar su contenido y colores.

Estilo del Cuarto Módulo Testimonial

Abra la configuración del segundo módulo de testimonios y cambie el contenido.

Imagen

A continuación, desplácese hacia abajo hasta Imagen y cambie el Color del borde a #6eea9d.

  • Color del borde de la imagen: #6eea9d

Borde

Finalmente, desplácese hacia abajo hasta Borde y cambie el Color del borde a #6eea9d para que coincida con el Borde de la imagen. Cierra la configuración del módulo.

  • Color: #6eea9d

Estilo del Quinto Módulo Testimonial

Abra la configuración del quinto módulo de testimonios y agregue su contenido.

Imagen

A continuación, desplácese hacia abajo hasta Imagen y cambie el Color del borde a #fff67f.

  • Color del borde de la imagen: #fff67f

Borde

Finalmente, desplácese hacia abajo hasta Borde y el Color del borde hasta #fccaa0 para que coincida con el Borde de la imagen. Cierra la configuración del módulo.

  • Color: #fff67f

Estilo del Sexto Módulo Testimonial

Finalmente, abra la configuración del sexto módulo de testimonios y reemplace el contenido del testimonio.

Imagen

A continuación, desplácese hacia abajo hasta Imagen y cambie el Color del borde a #593a94.

  • Color del borde de la imagen: #593a94

Borde

Finalmente, desplácese hacia abajo hasta Borde y el Color del borde hasta #593a94 para que coincida con el Borde de la imagen. Cierra la configuración del módulo.

  • Color: #593a94

Diseño de testimonio alternativo

La cuadrícula de testimonios que hemos creado funciona muy bien si los testimonios tienen aproximadamente el mismo tamaño. ¿Qué sucede si tiene algunos testimonios pequeños y algunos grandes? Para esto, una cuadrícula con diferentes tamaños para las columnas es ideal. Podemos colocar los testimonios con más información en las columnas más grandes.

Para este ejemplo. crearemos nuevas columnas con la misma configuración de espaciado y usaremos los mismos testimonios que antes, pero con distintas cantidades de texto.

Crear las filas alternativas

Primero, agregue una fila de 2 columnas que tenga una columna de 1/3 a la izquierda y una columna de 2/3 a la derecha.

A continuación, abra la configuración de la fila, vaya a la pestaña de diseño, desplácese hacia abajo hasta Tamaño y seleccione Usar ancho de medianil personalizado. Cambie el Ancho de la canaleta a 1.

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

A continuación, desplácese hasta Espaciado . Introduzca 0px para el relleno superior e inferior. Cierre la configuración de la fila.

  • Relleno: 0px arriba, abajo

A continuación, duplique la fila.

Seleccione las opciones de diseño de la segunda fila y elija el diseño con 2/3 a la izquierda y 1/3 a la derecha.

Agregue cuatro módulos de testimonios

Finalmente, cree o arrastre sus módulos de testimonios a las filas. Estoy usando los mismos módulos que en el ejemplo anterior, pero he cambiado el contenido del cuerpo para crear diferentes tamaños.

Los módulos se ajustan al ancho de sus columnas como lo hicieron en el ejemplo anterior, pero cada uno tiene alturas diferentes debido al contenido de su cuerpo. Esto crea un espacio incómodo dentro de la cuadrícula. Afortunadamente, esto es fácil de arreglar. Esto también funciona para la cuadrícula regular si el contenido de su testimonio es de diferentes tamaños.

Abra la configuración del primer módulo y vaya a la pestaña de diseño. Desplácese hacia abajo hasta Tamaño e ingrese 100% para Altura. Repita esto para cada módulo .

  • Altura: 100%

Resultados

Resultados del diseño de la cuadrícula de testimonios

Aquí hay un vistazo a nuestro diseño de cuadrícula. Esto funciona muy bien si los testimonios son del mismo tamaño.

Resultados alternativos de diseño de testimonios

Aquí está el diseño alternativo. Es ideal para contenido en varios tamaños.

pensamientos finales

Ese es nuestro vistazo a cómo crear un diseño de cuadrícula de testimonios con el módulo de testimonios de Divi. La configuración de filas y módulos de Divi funciona muy bien en conjunto para crear una cuadrícula de varias filas y recuentos de columnas. Los ejemplos que mostramos aquí se pueden ampliar fácilmente para crear cuadrículas aún más grandes. Los conceptos también funcionan con otros tipos de módulos Divi .

Queremos escuchar de ti. ¿Ha creado una cuadrícula de testimonios usando el método que hemos discutido aquí? Cuéntanos tu experiencia en los comentarios.