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 el 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 la canaleta en 1.
- Usar ancho personalizado: Sí
- Ancho del canalón: 1
A continuación, desplácese hacia abajo hasta Espaciado y cambie el Acolchado 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 testimonial a la columna de la izquierda.
Configuración de contenido del módulo de testimonios
A continuación, agregue 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
Cambiar el Color del icono de cotización a #fd335a y configure el Color de fondo al 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 elige Roboto Mono. Deje el resto de la configuración en sus valores predeterminados.
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 Texto de la empresa 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
Próximo, duplicar 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
Abre el ajustes para el 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.
Dale estilo al tercer módulo de testimonios
Abre el ajustes para el tercer módulo testimonial y cambiar 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 a #fccaa0 para que coincida con el borde de la imagen. Cierra la configuración del módulo.
Duplicar la fila
Próximo, duplicar la fila haciendo clic en la opción de duplicado que aparece cuando se desplaza 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
Abre el ajustes para el segundo módulo de testimonios y cambie el contenido.
Imagen
A continuación, desplácese hacia abajo hasta Imagen y cambia 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.
Estilo del Quinto Módulo Testimonial
Abre el ajustes para el quinto módulo testimonial y agregar 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 a #fccaa0 para que coincida con el borde de la imagen. Cierra la configuración del módulo.
Estilo del Sexto Módulo Testimonial
Finalmente, abra el ajustes para el sexto módulo testimonial y reemplazar el contenido testimonial.
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 a #593a94 para que coincida con el borde de la imagen. Cierra la configuración del módulo.
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, agregar una fila de 2 columnas que tiene 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 Dimensionamientoy 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.
Próximo, duplicar La fila.
Seleccione la segunda fila opciones de diseño y elija el diseño con 2/3 a la izquierda y 1/3 a la derecha.
Agregue cuatro módulos de testimonios
Finalmente, crea o arrastra tus módulos testimoniales 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 para Dimensionamiento e ingrese 100% para Altura. Repita esto para cada módulo.
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.
