Una práctica popular de diseño moderno y estético es el morfismo del vidrio. Los diseñadores de UI aportan dimensionalidad y profundidad con una apariencia de vidrio esmerilado. El módulo GutenKit Glass Morphism permite a los usuarios de Gutenberg agregar un fondo elegante y llamativo similar al vidrio para diseñar elementos de la manera más sencilla. 

Este documento trata sobre cómo agregar el efecto Glass Morphism a cualquier sitio web basado en Gutenberg. 

¿Cómo utilizar el módulo de morfismo de vidrio GutenKit? #

Conozcamos la siguiente opción de diseño para aprender cómo aplicar un fondo similar al vidrio a sus elementos de diseño desde el panel del editor de Gutenberg.

Paso 1: habilite el módulo de morfismo de vidrio GutenKit #

Lo primero que debe hacer es activar manualmente el módulo Glass Morphism. Para esto, vaya a su panel de WordPress:

• Seguir GutenKit > Módulos
• Localice el Morfismo del vidrio módulo.
• Una vez que lo veas, activa el botón de alternancia.

¡Eso es todo! De ahora en adelante, verá la opción Morfismo de vidrio en la ventana Lengüeta avanzada de cualquier bloque GutenKit.

Paso 2: aplicar el efecto de morfismo de vidrio #

Para aplicar el diseño Glass Morphism, primero agregue una página o publicación y comience a editar con el editor de bloques. Entonces, inserte un bloque GutenKit> Vaya a la pestaña Avanzado> Abra la opción Glass Morphism> Haga clic en el icono de edición para revelar todas las características de los estilos de Glass Morphism.

A continuación, veremos cómo funcionan todas las funciones del módulo Glass Morphism.

Difuminar #

Utilice el control deslizante Desenfoque para mezclar colores y agregar un fondo estético similar al vidrio esmerilado para su elemento de diseño. Se puede mostrar una apariencia de múltiples capas aplicando capas coloridas y transparentes en la superficie de los elementos de diseño.

Brillo: #

Establezca el brillo para agregar brillo a través de las capas semitransparentes del diseño de morfismo de vidrio. Esto proporcionó un efecto visual mejorado.

Contraste: #

El efecto de contraste se utiliza para crear una jerarquía visual entre el texto y otros elementos. Ingrese un valor personalizado o use el control deslizante para establecer el grado de contraste. 

Saturación #

Usando el control deslizante, puedes aumentar o disminuir la saturación de un color. Cuanto mayor sea la saturación, más vibrante será el color y una menor saturación dará como resultado tonos apagados o apagados. Esto se debe a la presencia de gris; un alto grado de gris da como resultado una baja saturación.

Matiz #

El tono se describe como el equilibrio y la armonía entre dos colores. No es similar a un rojo sólido, naranja, amarillo, azul, etc. Más bien es una combinación de colores como “rojo-amarillo” y el ajuste de brillo entre estos dos colores. 

Aquí, debes usar el control deslizante para definir la intensidad de ambos colores:

Esta configuración se basa en una rueda de colores de 0 a 360. Aquí,

0 se refiere al rojo.

120 se refiere al verde.

240 se refiere al azul.

Esperamos que esta documentación de GutenKit le haya ayudado a aprender cómo agregar un efecto de morfismo de vidrio en su sitio web de WordPress basado en Gutenberg.