How To Use The Backdrop Filter Extension By Atomic Addons

The Backdrop Filter extension in Atomic Addons allows you to apply visual effects to the area behind your Elementor elements, helping you create modern and stylish designs without custom coding. It can be used to enhance sections, containers, and widgets with effects such as blur, brightness, contrast, grayscale, and more. With adjustable filter controls and flexible styling options, you can easily create unique layouts and improve the overall visual appearance of your website. This documentation will guide you through how to use and configure the Backdrop Filter extension in Atomic Addons.

Enabling the Backdrop Filter Extension #

To use the Backdrop Filter Extension from Atomic Addons, first, you have to enable the extension.

Go to WordPress dashboard → Atomic Addons Plugin dashboard.
Then, click on the Elementor Tab and the sub items will open.
Then, Click the Extensions Tab.
Search for the Backdrop Filter Extension.
Enable the Backdrop Filter Extension.
Hit the Save Settings Button.

Primary Setup for Backdrop Filter Extension #

Before using the Backdrop Filter 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 transparency appearance within your layout.

Place To Find The Backdrop Filter Extension #

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

1. Click on the element which you want to configure by the Backdrop Filter extension.
2. Now move to the Advanced tab.
3. Click on the Background Tab.
4. You will find the Backdrop Filter extension here along with the Wow Elements logo.

Using the Backdrop Filter Extension #

First, select the Advanced Icon Box widget and navigate to the Advanced tab. Then, open the Background section and click on the Backdrop Filter extension to access its available settings.

Now, let’s see what we have on the Backdrop Filter extension and let’s customize each option –

1. Blur: You can adjust the transparency of the selected element background with this option.
2. Brightness: You can adjust the brightness of the background with this option.
3. Contrast: You can control the contrast of the background to set more dark or light with this option.
4. Grayscale: You can control the black and white color of the background with this option.
5. Invert: This option allows you to reverses the background colors, producing a negative-style visual effect as the value increases.

6. Opacity: You can control the transparency of the backdrop effect, making the background more or less visible through the element with this option.
7. Sepia: You can apply a warm brown tone to the background, creating a vintage or classic style effect.
8. Saturate: You can adjust the intensity of background colors, where higher values make colors more vibrant and lower values make them duller.
9. Hue: You can rotate shifts the background colors along the color spectrum, changing the overall color tone based on the degree value.

Preview of The Backdrop Filter Extension #

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 Backdrop Filter Extension on your website.

Video Tutorial #

You can also watch the video tutorial to learn more about the Backdrop Filter extension.

Thanks for being with us.

Atomic Addons