The ElementsKit Liquid Glass module lets you effortlessly bring the modern, Apple-inspired Liquid Glass interface to your Elementor website. And, it requires no coding efforts. You have full control over the intensity of the glass’s optical properties while maintaining a smooth, fluid aesthetic.
Avec le ElementsKit Liquid Glass module, you can add a stunning glass effect to any Elementor section quickly. Simply enable it from the Advanced tab, choose a preset, adjust the blur and shadow, and publish.
Quick Steps
✅ Install and activate the ElementsKit Liquid Glass Module with Elementor.
✅ Start editing the page or post where you want to apply the liquid glass effect.
✅ Enable the liquid glass toggle button.
✅ Choose an Apple-inspired liquid glass preset.
✅ Adjust the blur strength to determine the density of liquid glass effects.
✅ Choose a pre-made shadow effect to influence the liquid glass showcasing.
And, this was the easiest way to add the trendy liquid glass effect to your site.
Let’s see how to create liquid glass effects in Elementor with the ElementsKit Liquid Glass Module.
How to add Liquid Glass Effect on Elementor Websites? #
Before getting to the main part, you need to know that the ElementsKit Glass module is a part of its pro version. So, make sure you have activated the ElementsKit Pro version. Then proceed to the first step:
Step 1: Activate ElementsKit Liquid Glass Effect Module #
From your WordPress dashboard –
- Aller vers ElementsKit > Modules
- Look for the Liquid Glass module and activate it
- hit the save changes button at the top right
Now, edit any page with Elementor where you want to apply Liquid Glass.
- Click the section you want to add Liquid Glass
- Go to Advanced tab
- Find ElementsKit Liquid Glass mudule
- Élargir la Liquid Glass module
- Enable the toggle button
Step 2: Select a Liquid Glass Effect #
Liquid Glass Effect: There are many glass effects to choose from. Like Deep Glass, Crystal Flow, Heavy Distortion, Liquid Mist, Vertical Wave, Horizontal Flow, Glass Storm, Molten Glass, etc. By using these liquid glass effects, you will be able to blend smooth glass with a sense of transparency and fluidity.
Step 3: Set the Blur Strength #
Blur Strength: The blur strength feature lets you control the transparency and softness of the glass effect. Simply adjust the slider or enter a specific numeric value to define the desired blur intensity.
A higher value increases the gloss and opacity of the glass layer, making the underlying elements less visible.
Whereas, reducing the blur value softens the glass layer. As a result, the elements beneath the panel appear more clearly.
Step 4: Choose A Shadow Effect #
Ombre: ElementsKit liquid glass module offers more than 10 presets of shadow effects. Further, you can create your own custom shadow effect. Selecting the right shadow effect perfectly complements the liquid glass appearance.
Step 5: Fine-Tune & Check Preview #
Now, just fine-tune other aspects of your design. You can add different scrolling animations to bring out a more appealing look for your web design. And, once all done, you must check the preview before publishing or making your design live
Here’s the preview of our design:
Now, you know how to add the liquid glass effect with any Elementor widgets and containers. It doesn’t take any expertise with the ElementsKit Liquid Glass addon.
