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 usar Divi y su módulo Blurb. Los módulos de Blurb le permiten estructurar el contenido de la lista de manera hermosa y le brindan infinitas posibilidades de diseño.
En el tutorial de hoy, daremos un paso más y le mostraremos cómo resaltar un módulo de Blurb sobre el que se encuentra desenfocando los otros que ha mostrado. Esta es una excelente manera de enfocarse en un módulo de Blurb a la vez, sin permitir que los otros módulos de Blurb distraigan al lector. Tan pronto como un visitante pasa a otro módulo de Blurb, ese se convierte en el resaltado. ¡También podrá descargar el archivo JSON del diseño de forma gratuita!
Hagámoslo.
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 publicidad flotante gratuito, 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!
¡Empecemos a Recrear!
Agregar nueva sección
Color de fondo
Comience agregando una sección regular a una página nueva o en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.
- Color de fondo: #eaeaea
Espaciado
Agregue también algunos márgenes personalizados y valores de relleno.
- Margen superior: 2vw
- Margen inferior: 2vw
- Margen izquierdo: 2vw
- Margen derecho: 2vw
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
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 utilizando 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 ‘Ecualizar alturas de columna’ ayudará con el próximo paso que alinea el contenido de la columna.
- Igualar alturas de columna: Sí
- Ancho: 90%
- Ancho máximo: 1580px
- Altura mínima: 500 px (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.
|
01
|
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, 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 de 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 gradiente: lineal
- Posición inicial: 20%
- Posición final: 20%
Configuración de iconos predeterminada
Pase 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
- 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: #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: Fuente 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
Configuración del texto del cuerpo flotante
Use un color de texto flotante blanco.
- Color del cuerpo del texto: #ffffff
Espaciado
Luego, vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados.
- Relleno superior: 50px
- Relleno 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 cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -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 se produzca 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 JQuery.
- Clase CSS: elemento publicitario
Clonar módulo Blurb dos veces y colocar 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
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.
Agregar nueva fila
Estructura de la columna
Agregue otra fila a la sección utilizando 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
- Relleno 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 de script y el código CSS entre las etiquetas de estilo, como puede ver en la pantalla de impresión a continuación.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
jQuery(function($){$('[class*="blurb-item"]').hover(function() {var selector = $(this);$('[class*="blurb-item"]').addClass('blur');selector.removeClass('blur');},function() {$('[class*="blurb-item"]').removeClass('blur');});}); |
|
01
02
03
04
|
.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 de Blurb sobrevolado al desenfocar los otros que ha mostrado. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.