Cómo crear un aspecto de la rejilla del testimonio con el módulo de testimonios div Div

Los aspectos de la cuadrícula son excelentes para que el contenido se mantenga juntos. Los testimonios son un excelente ejemplo. Los testimonios de la división 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 aspecto del testimonio con el módulo de testimonios. ¡Veremos dos aspectos diferentes para que pueda elegir cuál es mejor para que sus necesidades comiencen! La vista previa es una mirada a lo que haremos en este tutorial. Creo una sección de testimonios utilizando los estilos de diseño en la disposición de la tienda de impresión gratuita, disponible en Div.
Los resultados de la aparición de la rejilla del testimonio

Resultados alternativos de la presentación del testimonio

Creando el primer aspecto de la cuadrícula mostraremos los detalles de ambos modelos, pero el segundo aspecto usará los módulos en el primer aspecto. Cree una fila primero, cree una nueva línea y seleccione un aspecto de 3 columnas.

Luego abra la configuración de línea haciendo clic en el icono de la rueda.

Seleccione la pestaña de diseño y active el uso de ancho de canaleta personalizado y establezca el ancho en 1.
Use ancho personalizado: sí
El ancho de la canaleta: 1

Luego desplácese hacia abajo hasta el espacio y cambie el relleno superior e inferior a 0px. Cierre el giro. Crearemos una segunda fila, pero la terminaremos primero y luego la clonaremos.
Llenado: 0px arriba y abajo

Agregue un módulo de testimonio y luego, agregue un módulo de testimonio a la columna izquierda.

Configuración de contenido Para el módulo de testimonio Luego, agregue el contenido del testimonio. Esto incluye el nombre del autor, el título del trabajo, el nombre de la empresa, el contenido del cuerpo y la imagen de la persona. Utilizo los nombres de los campos y el contenido predeterminado del cuerpo para mis ejemplos. Autor: El nombre del autor
Título de la publicación: El título de la persona
Compañía: Nombre de la empresa
Contenido del cuerpo: testimonio
Imagen: imagen presentada
Configuración de diseño del módulo de testimonio Luego, seleccione la pestaña Diseño.

El icono citado cambia el color del icono citado a #FD335A y establece el color de fondo. El color del icono también se utilizará para el nombre de la persona. Esto será lo mismo para todos los módulos.
Color: #FD335A
Color de fondo: #ffffff
Imagen entonces, desplácese hacia abajo hasta la imagen. Establezca el ancho del marco de la imagen en 4px y cambie el color del borde a #000645. El borde se ajustará al borde del módulo para cada módulo. Los cambiaremos individualmente.

El ancho del marco de la imagen: 4px
Color de borde de la imagen: #000645
El cuerpo del texto entonces, desplácese hacia abajo hasta el texto del cuerpo y elija Roboto Mono. Deje el resto de la configuración a los valores predeterminados.

Fuente del cuerpo: Roboto mono
El autor del autor se desplaza hacia abajo hasta el texto del autor. Cambie la fuente a Oswald, seleccione Semi -Bold para su peso, TT para el estilo y cambie el color a #FD335A.

Fuente: Oswald
Estilo: semi en negrita
Estilo: TT
Color de texto: #FD335A
Coloque el texto y luego, desplácese para colocar el texto (Título de la publicación) y cambie la fuente a Roboto Mono. Deje el resto de la configuración a los valores predeterminados.

Posición de la fuente: Roboto mono
El texto de la compañía entonces, desplácese hacia abajo hasta el texto de la compañía y elija Roboto Monu para fuentes. Deje la configuración a los valores predeterminados. Fuente Compañía: Roboto Mon

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

Color: #000645
Duplique el módulo de testimonio y luego, duplique el módulo dos veces y tire de los dos módulos clonados en las otras columnas en una fila.
Modele el segundo módulo de testimonio Abra la configuración para el segundo testimonio y modifique el contenido.

Imagen luego, seleccione la pestaña de diseño y desplácese hacia abajo hasta la imagen. Cambie el color del borde a #CF8F5.

Color de borde de imagen: #ACF8F5

Finalmente borde, desplácese hacia abajo hasta la frontera. Cambie el color del borde a #CF8F5 para que coincida con el borde de la imagen. Cierre la configuración del módulo. Cierre la configuración del módulo.
Color: #ACF8F5

Modele el tercer módulo de testimonio Abra la configuración para el tercer testimonio y modifique el contenido.
Imagen luego, acceda a la pestaña de diseño, desplácese hacia abajo a la imagen y cambie el color del borde a #FCCAA0.

El color del borde de la imagen: #FCCAA0

Finalmente, desplácese hacia abajo hasta el borde y el color del borde en #FCCAA0 para que coincida con el marco de la imagen. Cierre la configuración del módulo.
Color: #FCCAA0


Duplique el giro y luego duplique el giro haciendo clic en la opción de duplicación que aparece cuando pasa con el mouse sobre una fila. Debido a que agregué 0px al relleno superior e inferior, esta nueva línea alcanza automáticamente la fila encima. Abriremos cada módulo en la segunda sección para cambiar su contenido y colores. Modele el cuarto testimonio Abra la configuración para el segundo testimonio y modifique el contenido.
Imagen luego, desplácese hacia abajo hasta la imagen y cambie el color del borde a #6EEA9D.

El color del borde de la imagen: #6EEA9D

Finalmente, desplácese hacia abajo hacia el borde y cambie el color del borde a #6EEA9D para que coincida con el marco de la imagen. Cierre la configuración del módulo.

Color: #6EEA9D
Modele el quinto modo de testimonio abra la configuración para el quinto testimonio y agregue su contenido.

Imagen luego, desplácese hacia abajo hasta la imagen y cambie el color del borde a #FFF67F.
Color de borde de imagen: #FFF67F

Finalmente, desplácese hacia abajo hasta el borde y el color del borde en #FCCAA0 para que coincida con el marco de la imagen. Cierre la configuración del módulo.

Color: #FFF67F
Modele el sexto módulo al final, abra la configuración para el sexto testimonio y reemplace el contenido del testimonio.

Imagen luego, desplácese hacia abajo hasta la imagen y cambie el color del borde a #593A94.
Image Edge Color: #593A94

Finalmente el borde, desplácese hacia abajo hasta el borde y el color del borde en el #593A94 para que coincida con el marco de la imagen. Cierre la configuración del módulo.

Color: #593A94
Estructura alternativa para el testimonio La cuadrícula testimonial que hice funciona muy bien si los testimonios tienen aproximadamente el mismo tamaño. ¿Qué sucede si tienes algunos testimonios pequeños y algunos grandes testimonios? Para esto, una cuadrícula con diferentes dimensiones para columnas es ideal. Podemos colocar los testimonios con la mayor cantidad de 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 diferentes cantidades de texto. Cree primero las filas alternativas, agregue una fila con 2 columnas que tenga una columna 1/3 a la izquierda y una columna 2/3 a la derecha.

Luego abra la configuración de la fila, acceda a la pestaña de diseño, desplácese hacia abajo y seleccione el ancho de canalones personalizado. Cambie el ancho de la canaleta a 1.
Use el ancho de canaleta personalizado: sí

El ancho de la canaleta: 1
Luego desplácese hasta el espacio. Ingrese 0px para el relleno superior e inferior. Cierre la configuración de la fila.

Llenado: 0px arriba, abajo
Luego duplique el giro.
Seleccione las opciones de apariencia de la segunda fila y elija el aspecto 2/3 a la izquierda y 1/3 a la derecha.

Agregue cuatro módulos de testimonio al final, cree o dibuje testimonio en líneas. Utilizo los mismos módulos que en el ejemplo anterior, pero hemos cambiado el contenido del cuerpo para crear diferentes dimensiones.
Los módulos coinciden con el ancho de sus columnas como lo hicieron en el ejemplo anterior, pero cada uno tiene diferentes alturas debido al contenido del cuerpo. Esto crea espacios incómodos dentro de la red. Afortunadamente, esto es fácil de remediar. Esto también funciona para la cuadrícula habitual, si su contenido de testimonio es de diferentes tamaños. Abra la configuración para el primer módulo y acceda a la pestaña de diseño. Desplácese hacia abajo hasta el tamaño e ingrese al 100% para la altura. Repita esto para cada módulo. Alteza: 100%

Resultados Los resultados de la aparición del testimonio del testimonio aquí es un vistazo a la aparición de nuestra cuadrícula. Esto funciona excelente si los testimonios tienen el mismo tamaño.

Los resultados alternativos de la presentación del testimonio aquí es el aspecto alternativo. Es ideal para el contenido en varias dimensiones.

Pensamientos finales Esta es nuestra forma de crear un aspecto del testimonio con el módulo de testimonios. La configuración y los módulos de los trabajos de la Divica funcionan juntos para crear un recuento de múltiples filas y columnas. Los ejemplos que hemos mostrado aquí se pueden ampliar fácilmente para crear cuadrículas aún mayores. Los conceptos también funcionan con otros tipos de módulos de división. Queremos escuchar de ti. ¿Ha creado una cuadrícula de prueba utilizando el método que discutimos aquí? Cuéntanos sobre tu experiencia en comentarios.