Truco Divi: Mostrar extracto al pasar el cursor por entradas del blog

Si tienes una página hecha con Divi y has añadido un módulo de blog habrás comprobado que son muchos los ajustes de diseño y aspecto que puedes hacer. No solo decides si mostrar la imagen destacada o el extracto, sino que controlas toda la información que quieres mostrar o no, es realmente completo.

Pero ¿te apetece ir un poco más allá? ¿qué tal hacer que normalmente solo se muestre la imagen destacada y el título, y que al pasar el cursor se muestre el extracto?

Vamos a ello, es realmente sencillo.

Configura el módulo blog de Divi

Lo primero, lógicamente, es tener una página con un módulo de blog en ella, configurado en modo rejilla (grid en inglés), o cuadrícula, como quieras llamarlo.

El siguiente paso, imprescindible, es que esté visible el elemento del extracto, sí, para luego poder ocultarlo y mostrarlo a voluntad 😀

Esto lo haces en los ajustes de diseño del módulo blog, en la sección de elementos.

El resto de elementos es totalmente opcional, pero vaya, que no está de más nunca, al menos visualmente, mostrar la imagen destacada. Pero ya te digo que es opcional, lo importante es activar lo de «Mostrar extracto».

Y casi hemos terminado, quedan un par de cosillas…

Ahora pásate por la pestaña «Avanzado» y en la caja de ID y clases CSS añade la siguiente clase CSS: mostrar-extracto. Como en la siguiente captura…

Ya solo nos queda añadir el CSS necesario para que nuestra nueva clase CSS haga lo que queremos. Para conseguirlo añade justo debajo del módulo de blog un nuevo módulo, en este caso de código.

En la caja de código añade lo siguiente:

<style>@media all and (min-width: 981px) {
/* Transicion al mostrar el extracto*/
.mostrar-extracto .et_pb_post .post-content {
-webkit-transition: all 500ms !important;
transition: all 500ms !important;
}
/* En el maquetador se ve el extracto */
body.et-fb .mostrar-extracto .et_pb_post .post-content {
visibility:visible;
opacity: 1;
max-height:none;
}
/* Ocultar extracto */
.mostrar-extracto .et_pb_post .post-content {
visibility: hidden;
opacity: 0;
max-height:0px;
}
/* Mostrar extracto al pasar el cursor */
.mostrar-extracto .et_pb_post:hover .post-content {
visibility: visible;
opacity:1;
max-height: 500px;
}
/* Altura minima de las entradas del modulo blog */
.mostrar-extracto .et_pb_post {
min-height: 400px; 
}
}</style>

Tal que así:

¡Ya hemos terminado!

Guarda los cambios realizados desde el constructor de Divi y comprueba en la página que las entradas del módulo blog no muestran el extracto por defecto, hasta que pasas el cursor sobre ellas, como en este vídeo…