In this tutorial, I’ll show you how to add an elementor auto moving background to your Elementor sections for free using the premium addons.Â
With this feature you will be able to set an image as your background, set the direction in which it will move (up, down, left, or right), as well as set the moving speed.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Auto Moving Background Tutorial
What You’ll Need to Add an Elementor Auto Moving Background
For the elementor auto moving background, you’re going to need the Premium Addons for Elementor, this is where you’re going to access the Parallax feature which comes in the free version of the premium addons. Install and activate the Premium Addons via your Plugins area, then when you go to the Premium Addons, go to Global Features and enable the Parallax feature (02:22)
To Read: Make an Awesome Website Preloader in Elementor Pro v3.6
Let’s Start by Creating A Hero Section in Elementor
To get started on this, go to your Elementor Editor and add a new section with 2 columns (00:10)
Select your new section, in the Edit Section area on the left, go to Height and select Min Height, then under Minimum Height give it 100 VH.
From your Widgets area, drag a heading widget to your first column (00:24). Select the heading widget and under Content > Title, give it a title; Auto Moving Background.
Under Style, set the Text Color to white (or any color you prefer), under Typography, set the font to Oswald and the Weight to 900 pixels, set the Transform to uppercase and Size to 6.5 EM (00:56).
Go back to your Widgets area and drag an image widget to your second column (00:58).
Under Content, go to the Choose Image option and choose an image from your media library, insert it (01:02)
To Read: 3 Ways to Add MAILTO link in Elementor
Add the Auto Moving Background to your Elementor Section
Select your section and go to Style, set Background Type to Image, then under Image choose an image from your library ad insert it (01:15)
Go to Background Overlay and add a black color.
Select the section and go to Style, set the Size to cover. Save this and then preview (01:53)
Back to the section, select the section, and under Layout, go to the Parallax option and turn on the Enable Parallax option. Under Type, select the Auto Moving Background option. Under Direction select Bottom to Top. on the Speed option, set it to 3, if you want to make it slower you can set it to 1. Otherwise, just save and preview (03:22)
To make the foreground content more visible, select the section and go to Style, under Background Overlay increase Opacity to 0.76, then save your changes and preview.
Also Read: Elementor Image Rotor Cube Effect on Hover using Premium Addons
In Closing
That’s how you can add a parallax auto-moving background for free using Elementor.
If you have any comments or questions don’t hesitate to use the comments section below. Remember to subscribe to my youtube channel and the newsletter for more tips and tutorials.
