Free Elementor Auto Moving Background using Premium Addons

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)

qGWo hglQhJwd yEhhb5Qmv2 tFGMdgUqIzAs 6toCSp7NBzSWAOisoRmkyG4rwsRB F9Lxk

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)

jx9QH8kARUs11IeDooDUkJ4TW4 6Ee7cIHGTcv9FdqURfJBUdwIo1i9n2xq9o27N0fCfFsGWqTDdYzWSwVnz3IJPcQ7m i6v5y OHIB8uK3bHoSOIXyjTYUjt8Hr6ax
ylo4gNyXZXEJnKYqxuUfDSiBPYk5DmL v13DvEarw32CxOI9afTsI2AzntHhM

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.

l0Y6cbs8JQv RW7Q23gyYf2p8vrGmr5iIyBT5sENGaYvgiyzhy jYDylCw1HqBVGOkN0iJjTQuftu7aS1LOLATU3Bd73yuh

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).

4kFOv8XwbvYKtaZsU4doW6QAagJ5gNLAmtwuz2Hdqj0OGIR2kgnkseTqTSs7pj0ndWGAZShqb9r3 Tj08REE95gtwjn6iEmL XVd5d16Ch5NxC SnOVP OHhTYG2vQZ3u6Zpffvr

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)

UsoY9vivY39YUJcDyCIJIOWcW37VrLBU aeXt zZkEWbRWKPcpSQEMR6pqomcnXtwE VOi4fraeUD8pakHfL2e5c2LSFI80QIHQdE roL OsiFMCwU6uYQiIKeGjY89h6BNvMP2s

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)

Fx IfQK TbPlcLzzwiVjX 5umRJqLQurk879rkKpgnJ7 rBIwvMsOpqD82oP6K D4erqCSw ge5C62I8YqxVB3duF9sit5Hv5ePxU0c sfhSgIUEFfGPx

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)

VN1YhxqFcDsL71I4OZHR 11Cey8wCuhW9 zqYeNVOs6qJIfzjbqy8haHtlsVka

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)

SV0mlAVd1yMBXUuG4qXGtI02VmvEHoUNu cBo7OjFH9hkixr 63iIk KqrVDXTC8RHAWEf2QRltOM kzsLdld5dTChEzdRG5rnJhTyWVnJtcICutprSTGQeiWs2m7WnTKi5HSsfo

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users