We’re with you! We're offering 25% Discount Coupon Code: ENJOY25 More Details

Elementor Page Background – Image, Video, Kenburns Animation

Elementor page background

The default Elementor plugin allows you to create multiple types of Elementor Page Background. For example elementor video background, elementor parallax background with image or video.

As bonus tips, I will share how to arrange animated Gradient, Background Slider, & particles in elementor section background. Check this to add moving background image in Elementor section.

First, let me show you how to arrange a full page background from page settings.

Click on the settings icon on the bottom left of your page editor.

Now navigate to the Style tab. Select background type classic or gradient. From classic option you able to select any image as elementor page background.

Elementor Page Background

This is how general elementor page background works.

It’s time to explain how to arrange video, image, parallax, animated gradient background in your elementor section.

Just add a section on your page. Then navigate to style area. You will see the background option. In default Elementor, there are 4 different background types Classic, Gradient, Video, Slideshow.

I recommend you to put a spacer element or any other element to make the background visible.

Classic Background

From classic background type you able to select color or image. Select gradient type and input your desired colors, color location, Angle, and gradient type (Linear or Radial).

Classic Elementor Section Background

video Background for section

You can use YouTube, Vimeo, self-hosted MP4 Video Link. Then you can define video start time and end time. Enable Play Once if you want to play the video only once. Also, enable Play On Mobile if you prefer to play your section background video in mobile devices.

Elementor Video background

Elementor background slider

Select slideshow and upload or select multiple images from your media. Five transition effect, set Transition Duration, select background size, and position.

Elementor Section Background Slider

That’s all about default elementor section background settings.

Let’s see how to set Elementor Kenburns effect in section background. After that, I will show you how to arrange particles and animated gradient background in elementor section.

If you haven’t installed Master Addons plugin in your WordPress Website, then do it to work with the following feature. Check how to create an interactive background with this free plugin.

Kenburns animation Background Slider

After installing Master Addons plugin you will see Background Slider option in the section style tab. Upload multiple images, select image size, transition, Animation, Overlay style, and image slide delay. You will get 25 different types of transitions and 10 different kenburns animation effects. 

Elementor Kenburns Background slider

Elementor Particles Background

Just enable particles and you will see a “Click Here” link to generate JSON code for the below field. Go to the link and generate your desired particles. Download the JSON file and copy code from the file to paste. Check how to add particle background in Elementor post for more details. Just make sure to set background color, gradient before enables particles. 

Elementor Particles Background

Elementor Animated Gradient Background

As a master addon user you will see “Animated Gradient Background” option in the section style tab. Just enable it and you will see the default animated gradient BG. Change the angle value and add as much color you need for your section gradient. Here is a real example of Elementor animated gradient BG. 

Box Section Animated Gradient

That’s it. Now install and active Master Addons plugin in your WordPress Website. Then arrange any type of elementor page background or Section background. Feel free to get in touch with our expert team if you face any problem. 

Posted in Tutorials

This is Roy and I produce content, Video, Documentation for Master Addons plugin User. Keeping you update through posts, videos is my duty. Also, I provide support for any users to solve their problems.

Get Elementor Pro

convinced enough to purchase

Download Now and Speed up your design skill

Still confused? Try 14 days Free Tiral before Purchase. Don't hesitate, we offer hassle free 30-day money-back guarantee.

Subscribe to our Newsletter

Share via
Share this