Cómo Mostrar y Ocultar los Extractos en la página de Categoría

En esta guía vamos a ver cómo configurar el módulo Blog para que muestre los extractos de las entradas solo al pasar por encima de ellas.

WordPress es Mejor con Divi

Para mostrar y ocultar los extractos de entradas en una página de categoría de Divi necesitamos los siguientes recursos:

¿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 !important;
    transition: all 500ms !important;
  }

}
</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.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Todas las Guías

los Módulos Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *