Cómo resaltar un módulo Blurb suspendido difuminando los demás con Divi

Independientemente del tipo de sitio web que esté creando, es muy probable que en algún momento desee mostrar una lista de diferentes servicios, pasos y más. Una de las formas más fáciles de abordar la creación de una lista de este tipo de manera atractiva es utilizando el módulo Blurb de Divi. Los módulos de Blurb le permiten estructurar el contenido de la lista de manera hermosa al mismo tiempo que le brindan infinitas posibilidades de diseño.

En el tutorial de hoy, lo llevaremos un paso más allá y le mostraremos cómo resaltar un módulo Blurb suspendido desenfocando los otros que ha mostrado. Esta es una excelente manera de enfocarse en un módulo Blurb a la vez, sin permitir que los otros módulos Blurb distraigan al lector. Tan pronto como un visitante pasa a otro Módulo Blurb, ese se convierte en el resaltado. ¡También podrá descargar el archivo JSON del diseño de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño del módulo Hovered Blurb GRATIS

Para poner sus manos en el diseño del módulo de propaganda flotante gratuito, 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

Ú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.

DESCARGAR

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!

¡Empecemos a recrear!

Agregar nueva sección

Color de fondo

Comience agregando una sección normal a una nueva página o en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.

• Coor de fondo: #eaeaea

Espaciado

Agregue también algunos valores personalizados de margen y relleno.

• Margen superior: 2vw
• Margen inferior: 2vw
• Margen izquierdo: 2vw
• Margen derecho: 2vw
• Relleno superior: 0px
• Acolchado inferior: 0px

Frontera

Complete la configuración de la sección agregando un radio de borde.

• Todas las esquinas: 20px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño. Habilitar la opción 'Equalize Column Heights' ayudará con el siguiente paso que alinea el contenido de la columna.

• Ecualizar alturas de columna: Sí
• Ancho: 90%
• Ancho máximo: 1580px
• Altura mínima: 500px (escritorio), automático (tableta y teléfono)

Elemento principal

Alinee el contenido de la columna agregando una sola línea de código CSS al elemento principal de la fila.

align-items: center;

Agregar módulo Blurb a la columna 1

Agregar contenido

El único módulo que usamos a lo largo de este tutorial es un módulo Blurb, pero puede reemplazar este módulo con cualquier módulo de su elección siempre que agregue la clase CSS que compartiremos en los próximos pasos. Agregue el primer módulo Blurb a la columna 1 e inserte algún contenido de su elección.

Seleccionar icono

Seleccione un icono a continuación.

Fondo degradado flotante

Luego, use un fondo degradado solo al pasar el mouse.

• Color 1: #ffffff
• Color 2: # 0f1bff
• Tipo de degradado: lineal
• Posición inicial: 20%
• Posición final: 20%

Configuración de iconos predeterminada

Vaya a la pestaña de diseño del módulo y cambie la configuración del icono de la siguiente manera:

• Color del icono: #ffffff
• Icono de círculo: Sí
• Color del círculo: #ffffff
• Ubicación de la imagen / icono: parte superior
• Alineación de imagen / icono: izquierda

Configuración del icono de desplazamiento

Cambie los diferentes colores de los iconos al pasar el mouse.

• Color del icono: # 0f1bff
• Color del círculo: # f7f7f7

Configuración predeterminada del texto del título

Continúe modificando la configuración del texto del título.

• Fuente del título: Source Sans Pro
• Peso de la fuente del título: negrita
• Estilo de fuente del título: mayúsculas

Configuración del texto del título flotante

Cambie el color del texto del título al pasar el mouse.

• Color del texto del título: #ffffff

Configuración predeterminada del texto del cuerpo

Lo siguiente es la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Altura de la línea del cuerpo: 2em

Colocar el cursor sobre la configuración del texto del cuerpo

Utilice un color de texto flotante blanco.

• Color del texto del cuerpo: #ffffff

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados.

• Relleno superior: 50px
• Acolchado inferior: 50px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Sombra de cuadro predeterminada

También estamos usando una sombra de caja.

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -20px
• Color de sombra: rgba (255,255,255,0.18)

Sombra de caja flotante

Cambia el color de la sombra al pasar el mouse.

• Color de sombra: rgba (0,0,0,0.18)

Clase CSS

Y para que suceda el efecto de desenfoque, necesitaremos asignar una clase CSS a nuestro módulo Blurb. Más adelante en la publicación, usaremos esta clase CSS en algún código de JQuery.

• Clase CSS: elemento publicitario

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya completado el Módulo Blurb en la columna 1, puede clonarlo dos veces y colocar los duplicados en las columnas restantes de la fila.

Clonar toda la fila

Puedes clonar la fila tantas veces como quieras, dependiendo de cuántos módulos de Blurb quieras mostrar en tu página.

Personalice los módulos de Blurb individualmente

Por supuesto, deberá modificar el contenido individual de cada módulo de Blurb.

Agregar nueva fila

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Espaciado

Abra la configuración de la fila y elimine todo el relleno superior e inferior predeterminado. Esto ayudará a reducir el espacio que ocupa esta fila.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de código a la columna

Insertar código JQuery y CSS

Agregue un módulo de código a la columna de la fila e inserte algo de código JQuery y CSS para que el efecto suceda. No olvide poner el código JQuery entre las etiquetas de script y el código CSS entre las etiquetas de estilo, como puede ver en la pantalla de impresión a continuación.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los módulos de Blurb que comparte en su sitio web. Más específicamente, le mostramos cómo resaltar un módulo Blurb suspendido desenfocando los otros que ha mostrado. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.