¿Quiere saber cómo mostrar fragmentos de artículos al pasar el mouse sobre Divi ?

La vista previa de fragmentos de publicaciones de blog al pasar el mouse puede ser una forma efectiva de mantener un diseño de cuadrícula compacto para sus publicaciones de blog sin abandonar esos fragmentos por completo. 

Por lo tanto, la idea es ocultar inicialmente los fragmentos y luego mostrarlos cuando pase el mouse sobre una publicación en la cuadrícula. Por lo tanto, permite a los lectores ver más publicaciones al mismo tiempo que les brinda la posibilidad de ver fragmentos de las publicaciones que les interesan.

Entonces, en este tutorial, le mostraremos cómo crear este efecto de alternancia de fragmentos de publicación de blog al pasar el mouse sobre Divi

Vamos a empezar!

vista

Primero, aquí hay una descripción general de lo que crearemos en este tutorial.

mostrar extractos de artículos sobre hover 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 tutorial, agregaremos una fila a una columna e insertaremos un módulo Blog en ella.

crear una línea

Para comenzar, inserte una fila de una columna en la sección

ancho de línea

Luego vaya a la configuración de línea. luego, en la pestaña Estilo, en Dimensionamiento, modifique los anchos de la siguiente manera:

  • Ancho máximo: 90%
  • Ancho máximo: 1200px
mostrar extractos de artículos sobre hover en Divi

Agregar un módulo de blog

Luego, inserte un módulo Blog en la columna de la línea creada anteriormente.

Configuración del módulo de blog

Luego, vaya a la configuración del módulo Blog, en la pestaña Contenido, en Elementos, establezca la opción "Mostrar botón Leer más" en "Sí"

Ahora vaya a la pestaña Estilo, en Plantilla, seleccione la plantilla "Cuadrícula" como diseño para el blog.

Finalmente, vaya a la pestaña Avanzado y agregue la siguiente clase CSS: 

Clase CSS: alternar-blog-extracto

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

Agregue CSS personalizado con el módulo Código.

En este punto, las publicaciones de nuestro blog están dispuestas en una cuadrícula y se ha agregado una clase CSS personalizada al menú Blog. Así que vamos a usar este selector de clase de CSS para apuntar específicamente a este módulo de blog y agregar un efecto de alternancia al pasar el mouse sobre un artículo.

Para agregar CSS, usaremos el módulo Código. Para hacer esto, agregue un módulo Código debajo del módulo Blog.

A continuación, pegue el CSS personalizado a continuación necesario para crear el efecto de alternancia del fragmento de artículo al pasar el mouse. Sobre todo, asegúrese de pegar el código CSS entre las etiquetas de estilo necesarias.

  1. @media all and (min-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 500ms !important;
  6.   }
  7.   /* keep post content visible in visual builder */
  8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
  9.     visibility:visible;
  10.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  17.     max-height:0px;
  18.   }
  19.   /* show post content when hovering over post item */
  20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
  21.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  28.   }
  29. }

Veamos el resultado obtenido hasta ahora.

Resultado

Agreguemos un estilo adicional al módulo Blog con el constructor Divi

Ahora que el CSS está implementado para brindarnos el efecto de alternancia para los fragmentos de publicaciones de nuestro blog, podemos agregar cualquier estilo adicional al módulo del blog usando el constructor. Divi.

Para este ejemplo, haremos ajustes mínimos al estilo, pero siéntete libre de explorar tu propio estilo también.

Estilo del título del artículo

  • Título de luz tenue: texto en negrita
  • Color del texto del título: #6D6A7E
  • Tamaño del texto del título: 20px
  • Altura de la línea del título: 1.3 em
mostrar extractos de artículos sobre hover en Divi

Estilo de texto "Leer más"

  • Leer más Luz tenue: texto en negrita
  • Leer más Estilo de copia: TT
  • Color del texto Leer más: #6D6A7E
  • Espaciado entre letras Leer más: 1px
  • Altura de línea Leer más: 3.5em

Cambiar la visualización de la paginación de texto

  • Mostrar paginación Luz tenue: texto en negrita
  • Color del texto Mostrar paginación: #6D6A7E
  • Espaciado entre letras Mostrar paginación: 1px
  • Mostrar paginación Copiar estilo: TT
mostrar extractos de artículos sobre hover en Divi

Eliminar borde

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

Estilo de cuadro de sombra flotante

  • Cuadro de sombra: Ver captura de pantalla
  • Posición inicial: 0px
  • Fuerza de desenfoque de sombra de cuadro: 38px
  • Color de fuente de los subtítulos: rgba (109,106,126,0.25)

Resultado final

Conclusión

En conclusión, como se muestra en este tutorial, agregar algunos fragmentos de CSS puede brindarle la funcionalidad que necesita para sacudir fragmentos de publicaciones de blog con un agradable efecto de desplazamiento. 

Lo más importante de este método es que podemos agregar estilo adicional como deseemos al módulo de blog utilizando las opciones integradas de Divi. Además, le permitirá personalizar los elementos de la publicación, incluida la adición de más efectos de desplazamiento. 

Espero que esto ayude a darle al blog su Sitio web Divi un impulso extra en términos de diseño y funcionalidad. Cuéntanos tus experiencias en los comentarios.