Background Overlay

The Elementor Background Overlay feature is a powerful tool that enhances your web designing process by providing the facility to custom-create the background. The Elementor Extension elevates your site aesthetics by adding an eye-catching gradient or image background in a way that satisfies your requirement.

This Xpro feature is included in the Free Elementor Addons and can be utilized with any Elementor widget.

How to Install Background Overlay Extension for Elementor

Requirements

You need to install and activate the Free version of Xpro Elementor Addons to use our Background Overlay Feature for your WordPress websites. Once the plugin is installed, just make sure the Background Overlay is ‘Enabled’ from the Extensions tab of the Xpro Dashboard. This way you will easily find & use the effect in the Elementor editor.

Follow the steps below to enable the extension:

Step 1

Click on the Xpro Addons option available in the WordPress dashboard menu.

Step 2

From the Dashboard, click on the Extensions Tab, find the Background Overlay, and then toggle the button ‘ON’ to enable it.

How to Use Elementor Background Overlay Feature

The Overlay Background feature for Elementor can be easily integrated with any Eleemntor widget. Simply select the widget, go to the advance tab, and add a background overlay color or image for normal and hover effects.

Let’s do this step by step.

Step 1

Select a widget and click on the Advance tab.

Step 2

Scroll down and open the Background Overlay menu.

How to Add Color in Background Overlay

You have the option to add a gradient or classic color to the overlay background. Click on the option of what kind of color you want to add. Select the color from the color box.

How to Add an Image in Background Overlay Effect

Click on the classic option where you can view a box to add an image. Select an image from your WordPress or upload it to show in the background.

Apply the Background Overlay effect for a normal display and hover state so that the widget appearance change when the user drags the mouse above it.

You can also customize the background with CSS filters for normal and hover state which allows you to perform the following settings.

• Blur
• Brightness
• Contrast
• Saturation
• Hue

Moreover, select between 10 different types of blend modes.

Best Background Overlay Feature for Elementor

This is all from the Background Overlay feature for Elementor. We hope you fully understand the functionality and uses of this Elementor extensions. Xpro Elementor also offers other extensions that can give the background a unique look such as Elementor Backdrop Filter.

The Xpro Elementor Addons provide a wide range of widgets, extensions, and theme templates that allows you to create an appealing website without a need for coding. Check out our full list of more than 120 widgets for Elementor.