Cómo alternar extractos de publicaciones de blog al pasar el mouse en Divi

Publicado: 2021-08-02

Alternar extractos de publicaciones de blog al pasar el mouse puede ser una forma efectiva de mantener un diseño de cuadrícula compacto para las publicaciones de su blog sin abandonar esos extractos por completo. La idea es ocultar los extractos inicialmente y luego alternar su visibilidad al pasar el cursor sobre un elemento de publicación dentro de la cuadrícula. Esto permite a los usuarios ver más publicaciones dentro de la ventana gráfica del navegador y, al mismo tiempo, ofrece al usuario la opción de ver extractos de las publicaciones que les interesan colocando el cursor sobre la publicación.

En este tutorial, le mostraremos cómo alternar extractos de publicaciones de blog al pasar el mouse por encima en Divi. Para hacer esto, agregaremos algunos fragmentos de CSS personalizado que alternarán los extractos del elemento de publicación de un módulo de blog al pasar el mouse (no se necesita JQuery). Una vez que el código esté en su lugar, puede diseñar el módulo del blog como desee utilizando la configuración incorporada de Divi.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos
Descárgalo gratis

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

cuadro de notificación divi

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

expandiendo pestañas de esquina

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active Divi Theme.
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
  3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Cómo alternar extractos de publicaciones de blog al pasar el mouse en Divi

Creación del diseño del módulo de blog

Primero, necesitamos crear un diseño básico para nuestras publicaciones de blog. Para este ejemplo, vamos a agregar una fila de una columna con un módulo de blog dentro.

Crear fila

Agregue una fila de una columna a la sección.

Ancho de fila

En el modal de configuración de fila, actualice la siguiente configuración de diseño para ajustar el ancho.

  • Ancho: 95%
  • Ancho máximo: 1200px

Agregar módulo de blog

Dentro de la columna de la fila, agregue un nuevo módulo de blog.

Configuración del módulo de blog

A continuación, actualice la configuración de contenido del módulo de blog seleccionando para mostrar el botón leer más.

En la pestaña de diseño, seleccione el diseño de cuadrícula para el blog.

En la pestaña avanzada, agregue la siguiente clase CSS:

  • Clase CSS: toggle-blog-excerpt

Usaremos esta clase como selector para nuestro código CSS personalizado en el siguiente paso.

Agregar CSS personalizado con módulo de código

En este punto, tenemos un diseño de cuadrícula básico para las publicaciones de nuestro blog con una clase CSS personalizada agregada al módulo del blog. Usaremos este selector de clases de CSS para apuntar a este módulo de blog específico y agregar un efecto de alternancia al pasar el mouse por encima de la parte del extracto de la publicación del elemento de publicación.

Para agregar el CSS, usaremos un módulo de código. Agregue un nuevo módulo de código debajo del módulo de blog.

Pegue el siguiente CSS personalizado necesario para el efecto de alternancia del extracto de la publicación. Asegúrese de envolver el CSS en las etiquetas de estilo necesarias. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Veamos el resultado hasta ahora en la página en vivo.

Resultado

Repasaremos el código un poco más en detalle al final del artículo. Pero por ahora, veamos el resultado hasta ahora.

Agregue estilo adicional al módulo de blog con Divi Builder

Ahora que el CSS está en su lugar para darnos el efecto de alternar para los extractos de nuestra publicación de blog, podemos agregar cualquier estilo adicional al módulo de blog usando Divi Builder.

Para este ejemplo, haremos ajustes mínimos en el estilo, pero siéntase libre de explorar también su propio estilo.

Título de la publicación de estilo

  • Peso de la fuente del título: negrita
  • Color del texto del título: # 6d6a7e
  • Tamaño del texto del título: 20px
  • Altura de la línea de título: 1.3em

Estilo Leer más texto

  • Leer más Peso de fuente: Negrita
  • Leer más Estilo de fuente: TT
  • Leer más Color del texto: # 6d6a7e
  • Leer más Espaciado entre letras: 1px
  • Leer más Altura de la línea: 3.5em

Paginación de estilo

  • Peso de fuente de paginación: negrita
  • Estilo de fuente de paginación: TT
  • Color de texto de paginación: # 6d6a7e
  • Espaciado de letras de paginación: 1px

Quitar borde

  • Ancho del borde del diseño de la cuadrícula: 0px

Sombra de caja de estilo al pasar el mouse

  • Box Shadow: ver captura de pantalla
  • Posición vertical de la sombra del cuadro: 0px
  • Fuerza de desenfoque de sombra de caja: 38px
  • Color de sombra (escritorio): transparente
  • Color de sombra (flotar): rgba (109,106,126,0.25)

Resultado final

Acerca del código CSS

Si está interesado en el desglose del CSS personalizado agregado al módulo de código anteriormente, aquí está.

Primero, necesitamos envolver todo el CSS en una consulta de medios que solo aplicará el CSS a los navegadores de escritorio. 

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

}

En segundo lugar, debemos agregar una transición con una duración de 500 ms al contenido / extracto de la publicación a los cambios de estilo que se producirán al pasar el cursor sobre el elemento de la publicación.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

En tercer lugar, debemos asegurarnos de que el contenido / extracto de la publicación permanezca visible al usar el generador visual para que podamos realizar ediciones.

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

En cuarto lugar, debemos ocultar el contenido / extracto de la publicación de forma predeterminada cuando se carga la página. Para ello usamos Visibilidad: oculta para ocultar el contenido. Luego agregamos opacity: 0 para que podamos obtener un efecto de transición de aparición y desaparición gradual cuando agregamos opacidad: 1 al estado de desplazamiento. También usamos max-height: 0px para obtener el efecto de palanca deslizante cuando agregamos max-height: 500px al estado de desplazamiento.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

En quinto lugar, mostramos el contenido / extracto de la publicación cuando el elemento de la publicación (.et_pb_post) está en estado flotante. Para hacer esto, cambiamos la visibilidad a visible, la opacidad a 1 y la altura máxima a 500px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Para el fragmento final, podemos dar a todos los elementos de la publicación la misma altura mínima para un diseño de cuadrícula alineado verticalmente más limpio.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Aquí hay una mirada más al código final. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Pensamientos finales

Como se muestra en este tutorial, agregar algunos fragmentos de CSS puede brindarle la funcionalidad necesaria para alternar extractos de publicaciones de blog con un agradable efecto de desplazamiento. La mejor parte de este método es que podemos aprovechar esta funcionalidad agregando cualquier estilo adicional que queramos al módulo de blog usando las opciones integradas de Divi. Esto le permitirá agregar un estilo más avanzado a los elementos de la publicación, incluidos más efectos de desplazamiento. Con suerte, esto ayudará a darle al blog de su sitio web Divi un impulso adicional en diseño y funcionalidad.

Espero tener noticias tuyas en los comentarios.

¡Salud!