Cómo crear un increíble efecto de glassmorfismo (glass morphism) con divi

El Glassmorfismo (Glass Morphism) es un efecto de desenfoque de fondo que crea una sensación o apariencia como si viéramos a través de un cristal. Este efecto de «borrones» transparentes lo podemos ver aplicado en el nuevo sistema operativo de Mac OS Big Sur y iOS y se está convirtiendo en una tendencia para este 2021.

Por tal motivo, para mantenernos en esta tendencia y experimentar un poco más este nuevo estilo de diseño de interfaces, en este tutorial exclusivo de OV DIVI aprenderás a crear este increíble efecto con el constructor visual de divi. No solo vas a aprender a aplicar fondos con desenfoques en los elementos sino que además de esto, aprenderás a insertar formas en movimiento como fondo de secciones y filas, así mismo, te mostraré como implementar un increíble efecto de inclinación al pasar el cursor sobre cualquier módulo.

Hay mucho por aprender en este tutorial, así que no esperes más y accede a los tutoriales exclusivos.

ACTUALIZACIÓN: Tutorial liberado gratis para el canal de youtube.

VER TUTORIAL EN YOUTUBE

RECURSOS:
> Descarga los assets y json
> Sitio web Lottie Files
> Tutorial Lottie Files Divi
> Tutorial Tilt.js Divi

CÓDIGOS:

Centrar verticalmente la forma blob:

display: flex;
justify-content: center;

Sincronizar Tilt.js con divi:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

<script>
jQuery(document).ready(function( $ ){
  $('.efecto-tilt').tilt({
    maxTilt: 25,
    perspective: 500,
    scale: 1,
    speed: 300,
    glare: true,
    maxGlare: 0.7,
  });
});
</script>

Código para desenfocar el fondo de los módulos anuncio:

backdrop-filter: blur(3px);