Tutorial Divi: Igualar la altura de cada elemento del módulo blog en rejilla

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(12 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

16 comentarios en “Tutorial Divi: Igualar la altura de cada elemento del módulo blog en rejilla”

  1. Pablo Moratinos Almandoz

    Un clásico de las peticiones de los clientes para los que trabajamos con Divi. ¡Gracias por compartir Fernando!

  2. 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!

  3. Fernando Jiménez

    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.

  4. 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

  5. Guillermo Stancanelli

    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

    1. ah vale, perdona, culpa mía. Cambia en la primera fila lo de:

      //Modulo blog rejilla igualado en altura

      por esto otro:

      /* Modulo blog rejilla igualado en altura */
  6. 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

  7. 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!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido