The Backdrop Filter extension in Wow Elements Pro allows you to apply stylish visual filter effects to the background area behind your website elements without any coding. It helps enhance the appearance of sections, containers, and widgets by adding effects like blur, brightness, contrast, grayscale, and more for a modern and creative design experience. With flexible customization controls and smooth visual styling options, you can easily create elegant and visually engaging layouts for your Elementor website. In this documentation, we will guide you through how to use and customize the Backdrop Filter extension in Wow Elements Pro.
Enabling the Backdrop Filter Extension #
To use the Backdrop Filter Extension from Wow Elements Pro, first, you have to enable the extension.
- Go to WordPress dashboard → Wow Elements Plugin dashboard.
- Then, Click the Extension Tab.
- Search the Backdrop Filter Extension Name.
- Enable the Backdrop Filter Extension.
- Hit the Save Settings Button
Initial 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.
Where 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.
Configuring the Backdrop Filter Extension #
As the design is already created now we can select the elements where we want to use the Backdrop Filter Extension. To show you, we will apply the Backdrop Filter Extension on Heading element & Advanced Icon Box element. Let’s start exploring those one by one.
Using the Backdrop Filter Extension on Heading Element #
1. Blur: You can adjust the transparency of the selected element background with this option.
2. Brightness: You can adjust how light or dark the background appears with this option. You can set higher values making it brighter and lower values making it darker.
3. Contrast: You can control the difference between light and dark areas in the background, where higher values create stronger contrast and lower values make it look flatter.
4. Grayscale: You can remove color from the background, turning it gradually from full color to black and white.
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.
Using the Backdrop Filter Extension on Advanced Icon Box Element #
1. Select the Advanced Icon Box widget first.
2. Navigate to the Advanced Tab.
3. Click on the Background Section.
4. Now click on the Backdrop Filter extension.
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.
Final 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 Assist #
You can also watch the tutorial video about the Backdrop Filter Extension. Please visit the demo page for examples.
Thanks for staying with us.
