Independientemente del tipo de sitio web que esté creando, hay muchas posibilidades de 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 el módulo de difusión de Divi. Los módulos Blurb le permiten estructurar el contenido de la lista maravillosamente mientras le brinda 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 al desenfocar 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 de difusión, ese se convierte en el resaltado en su lugar. ¡También podrás descargar el archivo JSON del diseño de forma gratuita!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

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

Escritorio

módulo publicitario suspendido

Móvil

módulo publicitario suspendido

¡Comencemos a recrear!

Agregar nueva sección

Color de fondo

Comience agregando una sección regular 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.

  • Fondo Coor: #eaeaea

módulo publicitario suspendido

Espaciado

Agregue algunos márgenes personalizados y valores de relleno también.

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

módulo publicitario suspendido

Frontera

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

  • Todas las esquinas: 20 px

módulo publicitario suspendido

Agregar nueva fila

Estructura de columna

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

módulo publicitario suspendido

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 «Igualar alturas de columna» ayudará con el siguiente paso que alinea el contenido de la columna.

  • Igualar alturas de columna: sí
  • Ancho: 90%
  • Ancho Máx .: 1580px
  • Altura mínima: 500 px (escritorio), automático (tableta y teléfono)

módulo publicitario suspendido

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;

módulo publicitario suspendido

Agregar módulo de difusión a la columna 1

Agregar contenido

El único módulo que estamos utilizando 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.

módulo publicitario suspendido

Seleccionar icono

Seleccione un icono a continuación.

módulo publicitario suspendido

Desplazar fondo degradado

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

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

módulo publicitario suspendido

Configuración de icono 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 / ícono: Arriba
  • Alineación de imagen / icono: izquierda

módulo publicitario suspendido

Configuración del icono de desplazamiento

Cambia los diferentes colores de los íconos al desplazarte.

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

módulo publicitario suspendido

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úscula

módulo publicitario suspendido

Configuración del texto del título de desplazamiento

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

  • Color del texto del título: #ffffff

módulo publicitario suspendido

Configuración predeterminada del texto del cuerpo

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

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

módulo publicitario suspendido

Configuración del texto del cuerpo del cursor

Use un color de texto blanco al pasar el mouse.

  • Color del texto del cuerpo: #ffffff

módulo publicitario suspendido

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

módulo publicitario suspendido

Sombra de caja predeterminada

Estamos usando una caja de sombra también.

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

módulo publicitario suspendido

Hover Box Shadow

Cambia el color de la sombra al pasar el cursor.

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

módulo publicitario suspendido

Clase CSS

Y para que el efecto de desenfoque suceda, tendremos que 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: blurb-item

módulo publicitario suspendido

Clone Blurb Module dos veces y coloque 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.

módulo publicitario suspendido

Clonar toda la fila

Puede clonar la fila tantas veces como desee, dependiendo de cuántos módulos Blurb desee mostrar en su página.

módulo publicitario suspendido

Personalizar módulos de Blurb individualmente

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

módulo publicitario suspendido

Agregar nueva fila

Estructura de columna

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

módulo publicitario suspendido

Espaciado

Abra la configuración de la fila y elimine todos los rellenos superiores e inferiores predeterminados. Esto ayudará a reducir el espacio que ocupa esta fila.

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

módulo publicitario suspendido

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 un código JQuery y CSS para que el efecto suceda. No olvide poner 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.

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);
}

módulo publicitario suspendido

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!