Extractos que se Muestran y Ocultan en las Categorías

Para mostrar y ocultar los extractos de entradas en una página de categoría 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 necesario para mostrar y ocultar los extractos de entradas.
• Cómo Personalizar una Página de Categoría con Divi. Si todavía no viste esta guía es importantísimo que la consultes antes de seguir adelante.

¿Cómo Mostrar y Ocultar los Extractos de Entradas en una Categoría con Divi?

El objetivo de esta guía es configurar la plantilla de categorías del blog para que oculte los extractos de las entradas listadas en cada página de categoría y los muestre solo cuando pasamos por encima de cada entrada en particular.

Esto permite a los usuarios ver más publicaciones dentro de la ventana del navegador y, al mismo tiempo, ofrece al usuario la opción de ver los extractos de las publicaciones que le interesan al pasar el cursor sobre la entrada.

Cómo Mostrar y Ocultar los Extractos de Entradas en una Categoría paso a paso

Vamos a editar la plantilla de categorías de Divi para configurarla de forma que oculte todos los extractos de entradas cuando carga la página y los vaya mostrando solo cuando pasamos por encima de cada entrada.

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: alternar-extractos

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

Para agregar el CSS que se ocupará de hacer la magia 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:

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

  /* ocultar extractos */  .alternar-extractos .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

  /* mostrar extractos en hover */  .alternar-extractos .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

  /* transicion */  .alternar-extractos .et_pb_post .post-content {
    -webkit-transition: all 500ms ;
    transition: all 500ms ;
  }

}
</style>

Tengan en cuenta que ésto está configurado para funcionar solo en pantallas de escritorio. No funcionará en dispositivos móviles ya que no podemos hacer hover en éstos.

Y éste es el resultado final.