¿Quieres saber cómo poner un módulo de Blurb de Divi resaltado mientras difumina otros?
Independientemente del tipo de Sitio web está construyendo, es probable que en algún momento desee ver una lista de diferentes servicios, etapas y más.
Una de las formas más sencillas de abordar la creación de una lista de este tipo de forma atractiva es utilizar el módulo de Blurb de Divi. Los módulos de Blurb te permiten estructurar bellamente el contenido de la lista y al mismo tiempo le brinda infinitas posibilidades de diseño.
En este tutorial, daremos un paso más y le mostraremos cómo resaltar un módulo de Blurb al pasar el mouse y desenfocar los demás que ha mostrado. Es una excelente manera de enfatizar un módulo de Blurb a la vez, sin dejar que otros módulos de Blurb distraigan al lector.
Vamos.
vista
Antes de sumergirnos en este tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Ordenador de oficina
Versión móvil
Empecemos a diseñar con Divi
Añadir una nueva sección
Color de fondo
Comience agregando una sección regular a una página nueva o en la que está trabajando.
También puedes consultar: Divi: Cómo crear una sección de miembros del equipo como un carrusel
Abra la configuración de la sección y cambie el color de fondo.
- Fondo: #eaeaea
Distanciamiento
También agregue valores de espaciado.
- Margen (superior, inferior, izquierdo y derecho): 2vw
- Relleno (superior e inferior): 0px
Frontera
Complete los parámetros de la sección agregando un radio de borde.
- Esquinas redondeadas: 20px
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Guía de Tallas
Sin agregar ningún módulo todavía, abra la configuración de línea y cambie la configuración de tamaño.
- Igualar alturas de columna: SÍ
- Ancho: 90%
- Ancho máximo: 1px
- Altura mínima: 500 px (escritorio), automático (tableta y teléfono)
CSS personalizado (elemento principal)
Alinear el contenido de la columna agregando una sola línea de código CSS al elemento principal de la fila.
align-items: center;
Agregue el 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 de Blurb.
Sin embargo, 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 de Blurb a la columna 1 e inserte el contenido De tu elección
Seleccione el icono
Luego seleccione un icono.
- Icono de uso: SÍ
- Icono: Ver captura de pantalla
Gradiente de fondo (desplazamiento)
Luego use un degradado de fondo solo al pasar el mouse.
- Paradas de gradiente
- 20%: #ffffff
- 80%: #0f1bff
- Tipo de gradiente: lineal
Configuración de iconos (escritorio)
Cambiar a pestaña Diseño del módulo y cambie la configuración del icono de la siguiente manera:
- Color del icono: #ffffff
- Imagen/Icono Esquinas redondeadas: 50px
- Ancho del borde de la imagen/icono: 5 px
- Color del borde: #ffffff
- Colocación de imagen/icono: Arriba
- 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 (pasar el cursor): #0f1bff
- Color de fondo de imagen/icono (pasar el cursor): #f7f7f7
Configuración del texto del título
Continúe cambiando la configuración del texto del título.
- Fuente del título: Fuente Sans Pro
- Peso de fuente: Negrita
- Estilo de fuente del título: TT (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
Descripción Ajustes de texto (Escritorio)
A continuación están los ajustes del texto del cuerpo.
- Fuente del cuerpo: Open Sans
- Altura de la línea del cuerpo: 2 em
Configuración de texto de descripción flotante
Use un color de texto al pasar el mouse.
- Color del cuerpo del texto (pasar el cursor): #ffffff
Distanciamiento
A continuación, vaya a la configuración de espaciado y agregue valores de relleno personalizados.
- Relleno (Superior, Inferior, Izquierda y Derecha): 50px
Sombra de caja (escritorio)
También usamos una sombra de caja.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -20px
- Color de sombra: rgba (255,255,255,0.18)
Sombra de cuadro (flotar)
Cambia el color de la sombra flotante.
- Color de sombra: rgba (0,0,0,0.18)
Clase de CSS
Y para que ocurra el efecto de desenfoque, necesitaremos asignar una clase CSS a nuestro módulo Blurb. Más adelante en el artículo, usaremos esta clase CSS en código JQuery.
- Clase CSS: elemento publicitario
Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes
Una vez que complete el módulo de Blurb en la columna 1, puede clonarlo dos veces y colocar los duplicados en las columnas restantes de la fila.
Clonar toda la fila
Puede clonar la fila tantas veces como desee, según la cantidad de módulos de Blurb que desee mostrar en su página.
Personalice los módulos de Blurb individualmente
Por supuesto, deberá modificar el contenido individual de cada módulo de Blurb.
Añadir una nueva linea
Estructura de la columna
Agregue otra fila a la sección usando la siguiente estructura de columnas:
Distanciamiento
Abra la configuración de línea y elimine todo el relleno superior e inferior de forma predeterminada. Esto ayudará a reducir el espacio ocupado por esta fila.
- Relleno (superior e 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 código JQuery y CSS para lograr el efecto.
No olvide colocar el código JQuery entre las etiquetas del 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');
});
});Lea también: Divi: Cómo crear una sección de Testimonios en forma de cuadrícula
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
Ordenador de oficina
Versión móvil
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo ser creativo con los módulos de Blurb que comparte en su Sitio web.
Específicamente, le mostramos cómo resaltar un módulo de Blurb al pasar el mouse desdibujando los otros que ha mostrado.
Esperamos que este tutorial te sirva de inspiración para tus próximos proyectos. Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
