Índice de contenidos
El problema
El módulo blog en rejilla de Divi se adapta al tamaño del extracto, con lo que su visualización provoca que cada entrada tenga una altura diferente.
Me refiero a esto…
Este estilo masonry, que para muchos puede ser estéticamente agradable, incluso moderno al ser similar a las fichas de Pinterest, para otros clientes puede resultar anti-estético, dejando demasiados espacios entre las entradas con extractos más cortos y la siguiente sección.
La solución
Una posible solución sería forzar a que las cajas que contienen los extractos sean todas de la misma altura, igualarlas en altura, algo muy fácil de conseguir.
Añade una clase CSS al módulo
Primero abre el constructor visual de Divi y en la pestaña Avanzado añade la clase CSS blog_igualado. Guarda los cambios.
A continuación abre el Personalizador de temas y, en la sección CSS adicional, añadimos el código que hará que la clase CSS muestre el módulo blog como queremos, este:
/* Modulo blog rejilla igualado en altura */
@media only screen and (min-width: 768px) {
.blog_igualado .et_pb_post {
min-height: 500px;
max-height:500px;
}
}
Publica los cambios y lo que obtendremos será algo así:
El resultado es que las cajas que contienen cada elemento del módulo blog tendrán la misma altura, ofreciendo una experiencia visual, más equilibrada, que es el efecto buscado.
Puedes, por supuesto, personalizar la altura al tamaño que quieras (en el ejemplo 500px)
El código CSS que hemos aplicado solo tendrá efecto en la visualización de escritorio, no en dispositivos móviles, pues en estos últimos al ir cada elemento encima del otro no supone ningún problema el estilo original, y de hecho se vería raro.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Eres un fenómeno Fernando. Gracias por tanta ayuda desinteresada.
Gracias 🙂
Un clásico de las peticiones de los clientes para los que trabajamos con Divi. ¡Gracias por compartir Fernando!
Tú lo has dicho, un clásico 🙂
Hola Compañ[email protected]… A mí no me funciona… No me importa mucho, pues me gusta cómo queda el original… pero cuando no me funciona algo que funciona a [email protected]… me pica la curiosidad… ¿A alguien se le ocurre a qué podría ser debido?
Gracias… Abrazo…
Hola Fernando, muchísimas gracias por tu ayuda.
He probado tu truco de CSS, pero no me funciona en sí, porque son otro tipo de cajas. ¿Podrías ayudarme? ¡Mil gracias!
Como siempre, tocayo, ¡genial!
Si pongo el css en el style del tema hijo no funciona, si lo pongo en las opciones de Divi va OK.
O en el Personalizador
Hola Fernando
Me pregunto si no hay una función que me calcule el tamaño del post mayor dentro de la fila y así asignarle este valor a max-height y min-height.
Muchas gracias por estas perlas, para novatos como yo son muy útiles
Un saludo
Hola Fernando, cuándo lo pegas en el personalizado da 2 errores que tiene que ver con: expected lbrace at line 2.
A partir de allí lo puedes guardar pero no hace el efecto de igualar.
Saludos
ah vale, perdona, culpa mía. Cambia en la primera fila lo de:
por esto otro:
10 puntos Fernando, muchas gracias.
Hola Fernando,buen tutorial y funciona perfecto.
Tengo un problema parecido pero en categorías de productos en mi tienda,únicamente se descuadran los productos si veo la página en modo vertical en mi iPad y iPad mini,si lo veo en horizontal todo vuelve a encajar perfectamente,no se en otro tipo de tabletas.Sabrias solventar esto con algún tipo de código? Gracias de antemano
Hola Fernando, he probado a copiar tu código y no me funciona. Puede ser debido a alguna actualización de Divi/Wordpress durante este tiempo, desde que publicaste el tutorial?
Gracias!
Una pregunta. ¿Esto podría aplicarse también al modulo tienda?
Perfecto. Y, además, sencillo. Eskerrik asko!