Glassmorphism es el aspecto de vidrio esmerilado: una tarjeta semitransparente que difumina todo lo que hay detrás de ella, el estilo en el que Apple y Windows se inclinaron en sus interfaces. Construirlo a mano en Elementor significa CSS personalizado con filtro de fondo y algunas peculiaridades del navegador. El gratis Extensión del morfismo de vidrio en Complementos maestros para Elementor lo convierte en un interruptor en la pestaña Avanzado de cualquier elemento.
Lo enciendes, estableces un valor borroso y un color de fondo semitransparente, alrededor de las esquinas, y el elemento se convierte en una tarjeta de cristal. Aquí está toda la configuración.
Qué hace la extensión Glassmorphism #
La extensión agrega un Vidriomorfismo sección al Avanzado pestaña de cada elemento Elementor, desde secciones completas hasta widgets individuales. Habilite y el elemento obtendrá un desenfoque de fondo, de modo que la imagen de fondo o el contenido detrás de él se difumine en vidrio esmerilado mientras el texto del propio elemento permanece nítido.
La apariencia funciona mejor cuando el elemento se asienta sobre algo visualmente ocupado, como un fondo fotográfico o un degradado. Sobre una sección blanca lisa no hay nada que difuminar, por lo que el efecto no tiene nada que mostrar.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Glassmorphism es una extensión gratuita, por lo que no se requiere licencia Pro.
- Un elemento colocado sobre una imagen o un fondo colorido, para que el desenfoque tenga algo con qué trabajar.
Cómo habilitar la extensión Glassmorphism #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. El transformador de vidrio se encuentra en el Mostrar widgets grupo con insignia Popular, junto a Patrones y Línea de cuadrícula. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios en la parte superior de la página, espere el aviso verde “Configuración guardada correctamente”.
Dónde encontrarlo en el editor Elementor #
Abra su página con Elementor y seleccione el elemento que desea convertir en vidrio. En el ejemplo del vídeo, es un widget de encabezado dual sobre un fondo de foto. Ir al Avanzado tab, y encontrarás el Vidriomorfismo sección con la insignia MA violeta, junto con las otras extensiones de Master Addons como Condiciones de visualización y Efectos flotantes.
Explicación de la configuración del morfismo de vidrio #
Voltear Habilitar el morfismo de vidrio a Sí y aparecen los controles.
- Valoarea blură: qué tan fuerte se difumina el fondo detrás del elemento, de 0 a 100px (20px de forma predeterminada). El desenfoque se aplica a todo el contenedor, e incluso un valor pequeño como 2 se lee claramente en una foto.
- Color de fondo: el tinte del vidrio. La punta del panel lo dice claramente: use colores RGBA para un mejor control. Un color HEX simple se convierte automáticamente a RGBA con un 30 por ciento de opacidad, por lo que el vidrio nunca se vuelve sólido.
- Radiu de border: redondea las esquinas de la tarjeta de cristal, por lado o vinculada.
- Ancho del borde: agrega un contorno blanco semitransparente de 0 a 10px, que se lee como el borde de un panel de vidrio. El color del borde no es ajustable aquí.
- Corregir el desbordamiento (si el desenfoque no funciona): un interruptor de rescate. Algunos diseños tienen desbordamiento: oculto, que bloquea el filtro de fondo que alimenta el desenfoque. Encienda esto si habilitó todo y aún no ve ningún efecto.
Elija el tinte de vidrio con un color RGBA #
Haga clic en la muestra personalizada al lado Color de fondo y elige un color, luego baja el control deslizante alfa. En la demostración, el valor es un rojo semitransparente (#DC4C4C8C), que tiñe la tarjeta mientras los asientos en la foto detrás de ella permanecen visibles a través del desenfoque.
Da la vuelta a las esquinas y rescata un desenfoque perdido #
Establecer un Radio fronterizo para suavizar la tarjeta. Unos pocos píxeles son suficientes para que el cristal luzca. Y si el desenfoque se niega a aparecer, voltee Arreglar desbordamiento a Sí: elimina la regla de desbordamiento:oculto que bloquea el filtro de fondo en algunos contenedores.
El efecto terminado #
Aquí está el resultado en la parte frontal: una tarjeta de vidrio redondeada con un tinte rojo, la foto borrosa detrás y el encabezado y el texto nítidos en la parte superior.
Donde el morfismo del vidrio funciona bien #
- Superposiciones de héroes. Un panel de vidrio para el titular y CTA encima de una foto de ancho completo.
- Precios y tarjetas de características. Tarjetas de cristal sobre fondo de sección degradada.
- Bloques testimoniales. Citas que flotan sobre imágenes sin ocultarlas.
- Encabezados pegajosos. Un desenfoque sutil mantiene el menú legible a medida que el contenido se desplaza debajo de él.
- Casillas de inicio de sesión o registro. El clásico panel esmerilado sobre una imagen de marca.
Preguntas frecuentes #
¿qué es la extensión Glassmorphism en Master Addons?
Es una extensión gratuita que agrega un efecto de vidrio esmerilado a cualquier elemento Elementor de la pestaña Avanzado. Obtienes controles para la resistencia al desenfoque, un color de fondo semitransparente, radio de borde y ancho de borde, y nunca tienes que escribir el CSS tú mismo.
¿por qué no se muestra el desenfoque del morfismo de vidrio?
Por lo general, un contenedor principal transporta un desbordamiento: oculto, que bloquea el filtro de fondo detrás del efecto. Active el interruptor Fix Overflow en la parte inferior de la sección Glassmorphism. También verifique que el elemento se asiente sobre una imagen o un fondo de color, ya que el desenfoque sobre el blanco liso es invisible.
¿qué elementos pueden utilizar el efecto del morfismo de vidrio?
Cualquier elemento Elementor con pestaña Avanzado: secciones, columnas, contenedores y widgets individuales. Habilite la extensión una vez en el panel de complementos maestros y la sección Glassmorphism aparece en la pestaña Avanzado de cada elemento del editor.
¿qué color de fondo debo usar para el morfismo del vidrio?
Un color RGBA semitransparente. Elija cualquier tono y baje el canal alfa para que el fondo permanezca visible a través del tinte. Si ingresa un color HEX sólido, la extensión lo convierte a RGBA con un 30 por ciento de opacidad para que el efecto del vidrio aún funcione.
¿la extensión Glassmorphism es gratuita?
Sí. Se envía con la versión gratuita de Master Addons para Elementor, en el grupo Display Widgets de la pestaña Extensiones. El página de precios enumera lo que los planes Pro agregan más allá de las funciones gratuitas.
Envolviendo #
La extensión Glassmorphism convierte un complicado truco de CSS en algunos controles en la pestaña Avanzado: habilitar, desenfocar, teñir, radio y borde. Coloque un widget sobre una foto, mantenga el color de fondo semitransparente y busque Fix Overflow si el desenfoque alguna vez se oculta. El Página de extensión de Glassmorphism lo compara con escribir el CSS usted mismo. Para obtener más actualizaciones del editor como esta, explore el Widgets y extensiones de complementos maestros, o obtenga un diseño ya hecho del kits de plantillas y agrega el vaso encima.
