Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

Free Elementor Auto Moving Background using Premium Addons

Elementor-Parallax-auto-moving-background

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.

Also Read. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

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

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG