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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.7 / 5. Total de votos: 17

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

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

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

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

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido