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 sus publicaciones de blog sin abandonar esos extractos por completo. La idea es ocultar los extractos inicialmente y luego alternar su visibilidad al pasar el mouse sobre un elemento de publicación dentro de la cuadrícula. Esto permite a los usuarios ver más publicaciones dentro de la ventana del navegador al tiempo que les brinda la opción de ver extractos de las publicaciones que les interesan al pasar el mouse sobre la publicación.
En este tutorial, le mostraremos cómo alternar extractos de publicaciones de blog al pasar el mouse en Divi . Para hacer esto, agregaremos algunos fragmentos de CSS personalizados 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 de blog como desee utilizando la configuración integrada de Divi.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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.
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
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás 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: alternar-blog-extracto
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 nuestras publicaciones de blog con una clase CSS personalizada agregada al módulo de blog. Usaremos este selector de clase CSS para apuntar a este módulo de blog específico y agregar un efecto de alternar al pasar el mouse por encima de la parte del extracto de la publicación del elemento de la publicación.
Para agregar el CSS, vamos a usar 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 posterior. Asegúrese de envolver el CSS en las etiquetas de estilo necesarias .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@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 alternancia 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, vamos a hacer ajustes mínimos al estilo, pero siéntete libre de explorar tu propio estilo también.
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 del título: 1,3 em
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,5 em
Paginación de estilo
- Peso de fuente de paginación: Negrita
- Estilo de fuente de paginación: TT
- Color del texto de paginación: #6d6a7e
- Espaciado entre letras de paginación: 1px
Eliminar borde
- Ancho del borde del diseño de cuadrícula: 0px
Sombra de cuadro de estilo al pasar el mouse
- Sombra de cuadro: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 38px
- Color de sombra (escritorio): transparente
- Color de sombra (desplazamiento): rgba (109,106,126,0.25)
Resultado final
Sobre el código CSS
Si está interesado en el desglose del CSS personalizado agregado al módulo de código anteriormente, aquí está.
Primero, debemos 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 mouse 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 hacer esto, usamos la visibilidad: oculto 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 opacity:1 al estado de desplazamiento. También usamos max-height:0px para obtener el efecto de alternancia 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 el estado de desplazamiento. 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 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.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@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 utilizando 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 escuchar de usted en los comentarios.
¡Salud!