Cómo Igualar las Alturas en el Módulo Blog de Divi

Para igualar las alturas de las entradas en el módulo Blog de Divi necesitamos los siguientes recursos:

• Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia en caso de que seas nuevo con Divi.
• Módulo Blog de Divi. Es el módulo que nos sirve para mostrar las entradas de la categoría.
• Módulo Código de Divi. Lo vamos a usar para insertar en la página el código CSS necesario para igualar las alturas de las cajas de entradas.

¿Cómo Igualar las Alturas de las Entradas en el Módulo Blog de Divi?

Cuando usamos el diseño de grilla en el módulo Blog de Divi las entradas se distribuyen en tres columnas y cada caja tiene una altura variable. Esto hace que, en el conjunto, las cajas de entradas se vallan desfazando en altura de una columna a otra.

Por lo general ésto no supone un problema, ya que el diseño de grilla funciona bien más allá de las mencionadas diferencias de altura, y una caja se va acomodando justo debajo de la que tiene arriba respetando el margen y formando una grilla uniforme.

Pero hay casos en los que preferimos darle a la página de categoría o a la home un aspecto más ordenado haciendo que todas las cajas de entradas tengan la misma altura, coincidiendo el borde inferior de una columna a otra.

Cómo Igualar las Alturas de la Entradas del Módulo Blog de Divi paso a paso

Para que tus páginas de categoría tengan el aspecto que realmente te gustaría en el video te muestro paso a paso cómo hacer para que las cajas de las entradas tengan siempre la misma altura.

Añadir una clase CSS al módulo de blog

Abrimos los ajustes del módulo de blog de la plantilla de Categorías y, en la pestaña Avanzado, agregamos la siguiente clase CSS:

• Clase CSS: igualar-alturas

Añadir un código CSS a la página

Para agregar el CSS que se ocupará de hacer que todas las entradas del módulo Blog tengan la misma altura vamos a necesitar un módulo de código. Agregamos entonces un nuevo módulo de código debajo del módulo de blog.

Pegamos dentro el siguiente código CSS:

<style>
@media all and (min-width: 981px) {

.igualar-alturas .et_pb_post {
min-height: 400px;
}
}
</style>

Eso es todo. Guardamos el diseño y nos vamos a la página de categoría a ver el resultado final.