Cómo crear un testimonio de diseño de cuadrícula en Divi

Los diseños de cuadrícula son ideales para contener grandes cantidades de información. Es un gran ejemplo de cómo los testimonios pueden ayudar. Afortunadamente, presentar los testimonios en una cuadrícula en Divi es tan simple como colocarlos en un módulo separado para cada testimonio. En este tutorial, aprenderemos cómo usar el módulo de testimonios de Divi para construir un diseño de cuadrícula de testimonios. Para ayudarlo a tomar una decisión informada, le mostraremos dos posibles diseños.

Que estamos esperando ?

Vista previa del diseño

Lo que vamos a hacer en esta guía se muestra a continuación. Estoy utilizando el paquete gratuito de diseño de la tienda de impresión para crear un área de testimonios en mi sitio web.

Primer diseño de cuadrícula

Por ahora, le mostraremos ambos diseños en detalle, aunque el segundo utilizará módulos del primero.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Crear fila

Primero, cree una fila de 3 columnas.

A continuación, haga clic en el ion de engranaje para abrir la configuración de la fila.

Habilite la opción de diseño en el menú. Con la opción Ancho de canalón personalizado, establezca el Ancho de canalón en 1.

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

En la sección Espaciado, establezca el Relleno superior e inferior en 0 píxeles cada uno. Termina la fila. Después de terminar esta fila, la clonaremos y crearemos una segunda.

• Relleno: 0px arriba y abajo

Agregar módulo de testimonios

A continuación, debemos agregar un módulo de testimonios.

Contenido testimonial

El contenido testimonial debe agregarse a continuación. Este comprende el nombre, título y empresa del autor, así como el contenido del cuerpo y una fotografía del autor. Para mis muestras, utilizo los nombres de los campos y el contenido del cuerpo predeterminado.

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

Diseño de Módulo de Testimonios

Icono de cotización

Cambie el color del ícono de cotización a #fd335a y el color de fondo a blanco para obtener el efecto deseado. También es posible utilizar el color del icono para el nombre de la persona. Todos los módulos tendrán la misma estructura.

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

Imagen

La imagen es el siguiente elemento de la lista. El ancho del borde de la imagen debe establecerse en 4 px y el color del borde debe cambiarse a #000645. Para cada módulo, el borde coincidirá con el límite del módulo. Cada uno de ellos será actualizado de forma independiente por nuestro equipo.

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

Cuerpo de texto

Seleccione Roboto Mono en el menú desplegable Texto del cuerpo que aparece una vez que hace esto. El resto de la configuración también debe dejarse en sus valores predeterminados.

• Fuente del cuerpo: Roboto Mono

Texto del autor

El texto del autor se puede encontrar después de eso. Cambie la fuente a Oswald, el peso a Semi Bold, el estilo a TT y el color a #fd335a para los toques finales.

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

Texto de posición

Luego querrá modificar la fuente del título de su trabajo a Roboto Mono. El resto de la configuración también debe dejarse en sus valores predeterminados.

• Fuente de posición: Roboto Mono

Texto de la empresa

Luego, en "Texto de la empresa", seleccione Roboto Mono como su fuente predeterminada. Conserve la configuración predeterminada.

• Fuente de la compañía: Roboto Mono

Frontera

En la sección final, haga clic en Borde. Para hacer coincidir el borde de la imagen, cambie el ancho a 24 px y el color del borde a #000645. Cierre los ajustes de configuración del módulo. También es posible modificar el color del borde de cada módulo por separado.

• Ancho: 24px
• Color: #000645

Duplicar el módulo

A continuación, debe copiar el módulo dos veces y moverlo a las otras columnas de esa fila.

Vista previa final

Echa un vistazo a cómo está organizada nuestra cuadrícula. Si todos los testimonios son del mismo tamaño, esta técnica funciona perfectamente.

Aquí hay un enfoque de diseño diferente. Para el contenido de varios tamaños, es ideal.

Pensamientos finales

Eso concluye nuestra mirada a la capacidad del módulo de testimonios de Divi para construir un diseño de cuadrícula de testimonios. Usando las opciones de filas y módulos de Divi, puede construir una cuadrícula con una variedad de configuraciones diferentes de filas y columnas. Ampliando lo que hemos demostrado aquí, podríamos hacer fácilmente una cuadrícula mucho más grande. Los módulos Divi de otros tipos también pueden beneficiarse de estas técnicas.