Brugen af glasmorfi i design er blevet mere og mere populær i de senere år. Du kan bruge et matteret glaslook til at give elementerne et interaktivt udseende. Det ElementsKit Glass Morphism modul lader dig nemt anvende glasmorfi-stilen på enhver Elementor-baseret side eller hjemmeside.
Glass Morphism adds a frosted glass effect to any Elementor element and makes your design look modern and layered.
Add glass effects with ElementsKit Glass Morphism modul:
✅ Install ElementsKit Pro
✅ Go to ElementsKit > Modules and enable Glass Morphism
✅ Open any page and edit with Elementor
✅ Select a widget or column
✅ Go to Advanced tab > expand ElementsKit Glass Morphism
✅ Click the edit icon and adjust controls (Blur, Brightness, Contrast, Saturation, Grayscale, Hue)
Sådan tilføjes glasmorfismeeffekter til enhver Elementor-widget #
You need ElementsKit Pro installed and activated to use the Glass Morphism feature.
Følg nedenstående trin for at få en komplet gennemgang til at bringe en glas-lignende stil til dit Elementor-websted.
Step 1: Enable the Glass Morphism Module #
For at komme i gang skal du manuelt aktivere Glass Morphism-modulet. Til dette, fra dit WordPress-dashboard,
- Følge efter ElementsKit > MODULER
- Find Glasmorfisme modul
- Enable the toggle button next to it
- Tryk derefter på "Gem ændringer” button in the top right corner
Step 2: Add the Glass Morphism Effect #
Du kan tilføje Glass Morphism-effekter til styling af produktartikler, billedgallerier, prissektioner, sammenligninger og mange flere.
At gøre dette, open any page or post and edit with Elementor. Then, insert a column or widget.
- Now, go to the Advanced Settings tab
- Expand the “ElementsKit Glasmorfisme” settings
- Click the edit icon and it will reveal all the features of Glass Morphism styling
Step 3: Features of ElementsKit Glass Morphism #
Let’s see how teh controls work.
Slør #
Define a blur value depending on how blurred the surface you want for the design. Blur effects bring a glass-like aesthetic to your design by adding colorful and transparent layers between design elements. Thus, it shows a multilayered appearance to the design.
Lysstyrke #
Use the slider or add a custom value to adjust the brightness of the glass morphism design.
Kontrast #
Define the degree of contrast. It will help to maintain the visual hierarchy while using multiple design elements simultaneously.
Mætning #
Use this slider or give a custom value to control the gray level in the element color. If you increase the saturation level, it will make your color more vibrant. Conversely, decreasing the saturation will cause the color tone to become dull.
Gråtoner #
From here, you can apply gray shades to your design. You decide how light or dark the design will be in shades of gray. Selecting a higher range will bring the darkest version of the design. Whereas, entering a lower value will bring brightness to your design.
Hue #
Hue is a term used to describe the intensity of the blend between two colors. Here, you’re not changing the main color, you’re just adjusting how bright it is against its corresponding color.
Hvis du f.eks. tilføjer to farver som rød og pink, har dit design to nuancer. Og skyderen vil lade dig ændre intensiteten af begge farver.
Denne indstilling er baseret på et farvehjul fra 0 til 360. Her,
- 0 refererer til rød.
- 120 henviser til grøn.
- 240 henviser til blå.
Nu er det din tur. Vi har vist, hvordan man bruger alle ElelmentsKit Glass Morphism-funktionerne til at skabe et tiltalende matteret glas-look hvor som helst på Elementors hjemmeside.
