Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿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 le permiten estructurar bellamente el contenido de la lista y le brindan 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

resaltar un módulo Divi Blurb mientras desenfoca los demás

Versión móvil

resaltar un módulo Divi Blurb mientras desenfoca los demás

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)

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

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

align-items: center;
Módulo Blurb de Divi

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 su 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)

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

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

resaltar un módulo Divi Blurb mientras desenfoca los demás

Versión móvil

resaltar un módulo Divi Blurb mientras desenfoca los demás

¡¡¡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 lo inspire para sus 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.

...

%d bloggers les gusta esta página: