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:

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 este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (4 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest