¿Le gustaría crear una sección de Testimonios en forma de cuadrícula? en tu página web con el módulo de Testimonios de Divi ?
Los diseños de cuadrícula son ideales para contenido que deben mantenerse unidos. Los testimonios son un gran ejemplo de esto. Dentro Divi, los testimonios 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 organizar testimonios en forma de cuadrícula con el módulo Testimonios de Divi. Veremos dos diseños diferentes, para que elijas el que mejor se adapta a tus necesidades.
Vamos a empezar!
vista
Aquí hay una descripción general de lo que haremos en este tutorial.
Diseño de cuadrícula
Arreglo alternativo
Diseño de la primera maqueta con Divi
Mostraremos los detalles de ambos diseños, pero el segundo diseño usará los módulos del primero.
crear una línea
Primero, cree una nueva fila y seleccione un diseño de 3 columnas.
Luego abre el parámetros de línea haciendo clic en su icono de engranaje.
Seleccione la pestaña Diseño y activar Usar ancho de canalón personalizado y configúrelo en 1.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Luego, desplácese hacia abajo hasta Distanciamiento y cambie la configuración de espaciado de la siguiente manera. Cierra la fila. Vamos a crear una segunda fila, pero primero terminaremos esta y luego la clonaremos.
- Relleno (superior e inferior): 0 px
Agregue un módulo de "Testimonio"
Luego agrega un modulo testimonial en la columna izquierda
Configuración del contenido del módulo
Luego agrega el contenido del testimonio. Esto incluye el nombre del autor, puesto de trabajo, nombre de la empresa, contenido del cuerpo y la fotografía de la persona que presta el testimonio.
- Autor: nombre del autor
- Cargo: Puesto que ocupa en la empresa
- Empresa: nombre de la empresa
- Contenido del cuerpo: el testimonio
- Imagen: la imagen seleccionada
Parámetros de diseño del módulo
Luego selecciona la pestaña Diseño.
Icono de cotización
Cambiar la configuración de los iconos. El color del icono también se utilizará para el nombre de la persona. Será el mismo para todos los módulos.
- Color del icono de cotización: #fd335a
- Color de fondo del icono de cotización: #ffffff
Imagen
Luego, desplácese hacia abajo hasta Imagen y cambie la siguiente configuración:
- Ancho del borde de la imagen: 4 píxeles
- Color del borde de la imagen: #000645
Cuerpo de texto
Luego, desplácese hacia abajo hasta cuerpo de texto y cambiar la fuente
- Fuente del cuerpo: Roboto Mono
Texto del autor
Luego, desplácese hacia abajo hasta Texto del autor.
- Fuente del autor: Oswald
- Peso de fuente: semi negrita
- Estilo de fuente: TT
- Color del texto: #fd335a
Texto de posición
Luego, desplácese hacia abajo hasta Texto de posición (el título del trabajo) y cambie la fuente.
- Fuente de posición: Roboto Mono
Texto de la empresa
Luego, desplácese hacia abajo hasta Texto de la empresa y cambie la fuente también.
- Fuente de la compañía: Roboto Mono
Frontera
Finalmente, desplácese hacia abajo hasta Frontera y modifique el borde de la siguiente manera:
- Ancho del borde: 24px
- Color del borde: #000645
Duplicar el módulo Testimonial
Después, duplicar el módulo dos veces y arrastre los dos módulos clonados a las otras columnas de la fila.
Personaliza el segundo módulo Testimonial
Abrirlos configuraciones del segundo módulo de Testimonios y edite el contenido.
Imagen
Luego selecciona la pestaña Desing y desplázate hasta Imagen. Cambia el color del borde.
- Color del borde de la imagen: #acf8f5
Frontera
Finalmente, desplácese hacia abajo hasta Frontera y cambiar el color.
- Color del borde: #acf8f5
Personalice el tercer módulo de testimonios
Abrirlos configuraciones del tercer módulo Testimonial y editar el contenido.
Imagen
Luego ve a la pestaña Diseño, desplácese hasta Imagen y cambiar el color del borde.
- Color del borde de la imagen: #fccaa0
Frontera
Finalmente, desplácese hacia abajo hasta Frontera y cambie el color del borde para que coincida con el borde de la imagen. Cierre la configuración del módulo.
- Color del borde: #fccaa0
Fila duplicada
Después, duplicar la linea haciendo clic en la opción de duplicado que aparece al pasar el cursor sobre la línea. Dado que agregamos 0px al relleno superior e inferior, esta nueva línea toca automáticamente la línea superior. Abriremos cada módulo en la segunda sección para cambiar su contenido y colores.
Personaliza el cuarto módulo Testimonial
Abrirlos configuraciones del segundo módulo de Testimonios y edite el contenido.
Imagen
Luego, desplácese hacia abajo hasta Imagen y cambia el color del borde a #6eea9d.
- Color del borde de la imagen: #6eea9d
frontera
Finalmente, desplácese hacia abajo hasta Frontera y cambie el color del borde a #6eea9d para que coincida con el borde de la imagen. Cierre la configuración del módulo.
- Color del borde: #6eea9d
Personaliza el quinto módulo Testimonial
Abrirlos configuraciones del quinto módulo de Testimonios y modificar su contenido.
Imagen
Luego, desplácese hacia abajo hasta Imagen y cambie el color del borde a #fff67f.
- Color del borde de la imagen: #fff67f
Frontera
Finalmente, desplácese hacia abajo hasta Frontera y cambie el color del borde para que coincida con el borde de la imagen. Cierre la configuración del módulo.
- Color del borde: #fff67f
Personaliza el Sexto Módulo de Testimonios
Finalmente, abra el configuraciones del sexto módulo de Testimonios y reponer los contenidos.
Imagen
Luego, desplácese hacia abajo hasta Imagen y cambia el color del borde a #593a94.
- Color de la imagen del borde: #593a94
Frontera
Finalmente, desplácese hacia abajo hasta Frontera y cambie el color para que coincida con el borde de la imagen. Cierre la configuración del módulo.
- Color del borde: #593a94
Resultado
Aquí está el resultado que tenemos hasta ahora.
Diseño de la segunda maqueta con Divi
La cuadrícula de testimonios que creamos funciona muy bien si los testimonios son aproximadamente del mismo tamaño.
¿Qué pasaría si tuvieras testimonios cortos y largos? Para esto, un rejilla con diferentes tamaños para las columnas es ideal. Podemos colocar los testimonios con más información en las columnas 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 líneas alternativas
En primer lugar, agregar una fila a 2 columnas con una columna 1/3 a la izquierda y un columna 2/3 a la derecha.
Luego abra la configuración de línea, vaya a la pestaña de Diseño, desplácese hasta Guía de Tallas y seleccione Usar ancho de canalón personalizado. Cambie el ancho de la canaleta a 1.
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
Luego, desplácese hacia abajo hasta Distanciamiento.
- Relleno (superior e inferior): 0 px
Después, duplicar la línea.
Seleccione las opciones disposición de la segunda fila y elija la disposición con quedan 2/3 et 1/3 correcto.
Agregue cuatro módulos de Testimonios
Enfin, crea o arrastra tus módulos de Testimonios a las lineas Estamos usando los mismos módulos que en el ejemplo anterior, pero el contenido se ha modificado para crear diferentes tamaños.
Los módulos se adaptan al ancho de sus columnas como en el ejemplo anterior, pero cada uno tiene alturas diferentes debido al contenido de su cuerpo. Esto crea un espacio incómodo en la cuadrícula. Por suerte, es fácil de arreglar.
Abra la configuración del primer módulo y vaya a la pestaña Diseño. Desplácese hasta Guía de Tallas e ingrese 100% para "Altura".
Repita esto para cada módulo .
- Altura: 100%
Resultados finales
Diseño de cuadrícula
Aquí hay un vistazo a nuestro diseño de cuadrícula. Esto funciona muy bien si los testimonios son del mismo tamaño.
Arreglo alternativo
Aquí está el diseño alternativo. Es ideal para testimonios de diferentes tamaños.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Este es nuestro vistazo a cómo crear una sección de testimonios en formato de cuadrícula con el módulo Testimonios de Diví. La configuración de filas y módulos de Divi funciona perfectamente en conjunto para crear una cuadrícula de múltiples filas y 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.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
