¿Quieres que tu sitio web construido con Divi luzca moderno, elegante y a la vanguardia de las tendencias UI/UX? El Glassmorphism (efecto de cristal esmerilado) es una técnica de diseño que aporta profundidad, dinamismo y un toque sofisticado mediante transparencias y desenfoques de fondo. En esta mini guía paso a paso, aprenderás cómo aplicar este efecto en cualquier módulo o sección de Divi combinando los ajustes nativos del constructor con unas pocas líneas de CSS limpio y optimizado.
Ruta exacta en Divi:
- Abre el maquetador visual de Divi.
- Crea un Módulo de Anuncio (Blurb) o Módulo de Texto.
- Ve a la pestaña Avanzado > CSS personalizado > Elemento Principal.
- Haz clic en el icono de Divi AI (AI Writer/Code) e introduce el siguiente prompt o inserta directamente el snippet generado.
/* Snippet Glassmorphism para Módulos de Divi */
selector {
/* Fondo semi-transparente con desenfoque de fondo */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Borde fino y sutil */
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
/* Sombra suave para dar profundidad */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
padding: 30px;
transition: all 0.3s ease-in-out;
}
/* Efecto Hover dinámico generado por IA */
selector:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.22);
border-color: rgba(255, 255, 255, 0.45);
}
Explicación paso a paso del código:
- backdrop-filter: blur(12px);: Aplica un desenfoque Gaussiano al contenido que queda por detrás del módulo, creando el efecto visual de vidrio esmerilado.
- background: rgba(255, 255, 255, 0.15);: Define un fondo blanco con solo 15% de opacidad para permitir la traslucidez.
- selector: Es la palabra clave nativa de Divi que reemplaza automáticamente la clase CSS única generada para ese módulo específico.
- transition y transform: Agregan una animación suave al pasar el cursor (hover), elevando el elemento 5 píxeles en el eje Y.
Conclusión
El efecto Glassmorphism es una excelente manera de elevar la estética visual de tu sitio en Divi sin sacrificar el rendimiento ni saturar el diseño. Al dominar la propiedad CSS backdrop-filter junto con las transparencias de color en los módulos de Divi, puedes crear tarjetas, menús y encabezados verdaderamente cautivadores.
¿Lograste implementar el efecto en tu sitio web o tienes alguna duda con el código CSS? ¡Déjanos tu comentario abajo y comparte tu creación con nuestra comunidad de diseñadores Divi!
Preguntas Frecuentes (FAQ)
1. ¿El efecto Glassmorphism funciona en todos los navegadores web? Sí, actualmente es compatible con la gran mayoría de navegadores modernos (Google Chrome, Mozilla Firefox, Safari y Microsoft Edge). Para mayor seguridad en navegadores más antiguos o Safari en iOS, siempre se recomienda incluir la propiedad con el prefijo -webkit-backdrop-filter.
2. ¿Puedo aplicar este efecto usando solo los ajustes visuales de Divi sin tocar CSS? Aunque los ajustes de fondo de Divi permiten cambiar la opacidad del color, la propiedad clave del desenfoque de fondo (backdrop-filter) requiere unas líneas de CSS. La forma más fácil e integrable es colocar la clase CSS en el módulo y escribir el código en la pestaña Avanzado > CSS personalizado del mismo módulo.
3. ¿El efecto de cristal esmerilado afecta el rendimiento o la velocidad de mi sitio en Divi? No de forma significativa. El renderizado del desenfoque lo ejecuta directamente la GPU (tarjeta gráfica) del dispositivo del usuario. Sin embargo, se aconseja no abusar del efecto aplicándolo a decenas de elementos en la misma página para mantener una navegación fluida en dispositivos móviles de gama baja.
