How To Use The Liquid Glass Effects Extension By Atomic Addons

The Liquid Glass Effects extension in Atomic Addons allows you to apply modern glassmorphism-inspired styles to your Elementor elements. It helps create a sleek and elegant appearance by adding glass-like transparency, blur, and visual depth to sections, containers, widgets, and other content areas. With flexible styling options and easy-to-use controls, you can create attractive and modern interfaces that enhance the overall look of your website without writing custom code. This documentation will guide you through how to use and configure the Liquid Glass Effects extension in Atomic Addons.

Enabling the Liquid Glass Effects Extension

(Open the full-size image in a new tab)

To use the Liquid Glass Effects Extension from Atomic Addons, first, you have to enable the extension.

1. 1

   Go to WordPress dashboard → Atomic Addons Plugin dashboard.

2. 2

   Then, Click the Extensions Tab.

3. 3

   Search for the Liquid Glass Effects Extension.

4. 4

   Enable the Liquid Glass Effects Extension.

5. 5

   Hit the Save Settings Button.

Primary Setup for Liquid Glass Effects Extension

(Open the full-size image in a new tab)

Before using the Liquid Glass Effects extension, you first need to create or select an existing design where you want to apply the effect. This will help you better visualize and customize the glass-style appearance within your layout.

Place to Find the Liquid Glass Effects Extension

(Open the full-size image in a new tab)

To find the Liquid Glass Effects Extension, you must need to select the element where you want to use the extension. Let’s see the steps below –

1. 1

   Click on the element which you want to configure by the Liquid Glass Effects extension.

2. 2

   Now move to the Advanced tab.

3. 3

   Click on the Background Tab.

4. 4

   You will find the Liquid Glass Effects extension here along with the Atomic Addons logo.

Using the Liquid Glass Effects Extension

As the design is already created now we can select the elements where we want to use the Liquid Glass Effects Extension. To show you, we will apply the Liquid Glass effects Extension on Heading element & Advanced Icon Box element. Let’s start exploring those one by one.

Using the Liquid Glass Effects on Heading Element

(Open the full-size image in a new tab)

Select the Heading element and then go to Advanced Tab of the element and click on the Background Tab. Here you will see the Liquid Glass Effects Extension tab. Click on it and adjust the blur level that meet your needs.

Using the Liquid Glass Effects on Advanced Icon Box Element

(Open the full-size image in a new tab)

Select the Advanced Icon Box element and then go to Advanced Tab of the element and click on the Background Tab. Here you will see the Liquid Glass Effects Extension tab. Click on it and adjust the blur level that meet your needs.

Final Preview of The Liquid Glass Effects Extension

(Open the full-size image in a new tab)

After adjusting the effects to your design, publish the page and you can see the output on the preview page.

All done, You have successfully customised the Liquid Glass Effects Extension on your website.

Thanks for being with us.