How To Add Parallax Effect In Elementor – Part 1

How To Add Parallax Effect In Elementor

Hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’m going to share with you 5 ways to add a parallax background effect to your Elementor Powered website.

The first method is completely free and the other four require premium plugins.

So whether you’re using the free tools or premium ones, this tutorial is definitely for you.

How To Add Parallax Effect In Elementor: what is parallax?

Now first of all, what is Parallax? According to Wikipedia:

Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene and adding to the sense of immersion in the virtual experience.

How To Add Parallax Effect In Elementor: Free vs Pro

Now as mentioned in the intro, currently, out of the box, the Free version of Elementor does not offer parallax, so I’m going to share with you 5 alternatives to pro.

But before we move on, a word: just as I was editing the video for this episode, Elementor announced new parallax features for the Pro version of Elementor.

So in case you have Elementor Pro, there will be a part 2 to this episode, focusing solely on the new parallax features of the Pro version.

But if you are using the free version Elementor; with or without additional 3rd party premium addons, or even if you have Elementor Pro but want to know what the alternatives are, just follow along!

I always encourage you to get Elementor Pro before you get additional 3rd party addons, because I believe the Elementor company should be supported, but I know some of you don’t use the pro version of Elementor, so I hope that this will give you a good bird’s ey view of the available alternatives, at the time of crafting this post.

How To Add Parallax Effect In Elementor: the instructions

For best results, please watch the video above, but in case you need a quick written reference, here it goes :

How To Add Parallax Effect In Elementor: 1 – the free method

The free method below is completely free (courtesy of Sniffle Valve)

1. In WordPress Admin > Install the Elementor plugin
2. In WordPress Admin > Install the Code Snippets plugin
3. Copy and past the code from Sniffle Valve’s tutorial
4. In WordPress Admin > Code Snippets, add a new snippet and paste the code
5. In Elementor Page Builder, edit the section you want to add parallax to, then click on the advanced tab and in the class field, give it the class name “parallax“
6. Save and enjoy

How To Add Parallax Effect In Elementor: 2 – JetElements

The next method uses JetElements from Crocoblock.

1. In WordPress Admin > Install the Elementor plugin
2. In WordPress Admin > Install the JetElements plugin
3. In Elementor Page Builder, click edit on the section you want to add parallax to, then on the Layout tab, go to Jet Parallax, add a background image and tweak the settings to you liking
4. Save and enjoy

Get JetElements

How To Add Parallax Effect In Elementor: 3 – Element Pack Pro

The next method uses Element Pack Pro from Bd Themes.

1. In WordPress Admin > Install the Elementor plugin
2. In WordPress Admin > Install the Element Pack Pro plugin by uploading the zip file
3. In Elementor Page Builder, click edit on the section you want to add parallax to, then in the Style tab, within the Background options, enable the EP – Enable Parallax option and tweak the settings to you liking.Please bear in mind that you won’t see parallax within the Elementor Builder with Element Pack Pro, you actually need to save your page, and view it on the front-end.
4. Save and enjoy in the front-end

Get Element Pack Pro

How To Add Parallax Effect In Elementor: 4 – Piotnet Addons

The next method uses Piotnet Addons For Elementor aka PAFE.

1. In WordPress Admin > Install the Elementor plugin
2. In WordPress Admin > Install the PAFE plugin from the WordPress repository
3. In WordPress Admin > Install the PAFE Pro plugin by uploading the zip file
4. In Elementor Page Builder, click edit on the section you want to add parallax to, then in the Style tab, within the Background options, enable the Enable PAFE Parallax option and tweak the settings to you liking(you may have to enable the Enable PAFE Parallax New Version if it does not work) .Please bear in mind that you won’t see parallax within the Elementor Builder with PAFE, you actually need to save your page, and view it on the front-end.
5. Save and enjoy in the front-end

Get PAFE

How To Add Parallax Effect In Elementor: 5 – Elementor Extras

The next method uses Elementor Extras from Namogo.

1. In WordPress Admin > Install the Elementor plugin
2. In WordPress Admin > Install the Elementor Extras plugin by uploading the zip file
3. In Elementor Page Builder, click edit on the section you want to add parallax to, then in the Style tab, within the Background options, enable the Extras Parallax Background option and tweak the settings to you liking.
4. Save and enjoy

Get Elementor Extras

How To Add Parallax Effect In Elementor: your turn!

So, I hope that you now feel confident to add parallax to your Elementor powered website! Let me know in the comments.

If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like to share it now.

Because let’s face it, there are so many things to do in a day that if you don’t do it now you’ll probably forget.

Now if you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online.

So, that’s it for this episode, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!