Support » Plugin: Elementor Website Builder » Parallax in Elementor

  • Hello! Very surprised that no parallax. How to add a parallax effect in sections and column? Tried plugin yellow pencil, but for some reason it does not work. Maybe there is a plugin that is friendly with elementor or ..?

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hi @benjober,
    No additional plugin is needed.
    Just create a section, under Style set a background image for it and under Attachment choose Fixed.

    Thread Starter Benjober


    Yes, I know there is the fixed, but I want that kind of parallax. Here is an example:

    Hi @benjober,
    We don’t have a built-in effect exactly like this.
    Probably there is a plugin that can be added to Elementor.

    Jeff S


    Hi @benjober

    I investigated how the Sydney theme got its parallax effect (see to see if it could be added to another theme using Elementor.

    I discovered that Sydney is using jQuery-Parallax

    So I borrowed some code from Sydney and added it to the functions.php of my child theme as follows:

    function jquery_parallax() {
        <script language="JavaScript" type="text/javascript">
    ;(function($) {
       'use strict'
        var testMobile;
        var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i);
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i);
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            Opera: function() {
                return navigator.userAgent.match(/Opera Mini/i);
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i);
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    	var parallax = function() {
    		testMobile = isMobile.any();
    		if (testMobile == null) {
    			$(".parallax").parallax("50%", 0.3);
    	// Dom Ready
    	$(function() {
    jQuery Parallax 1.1.3
    Author: Ian Lunn
    Plugin URL:
    Dual licensed under the MIT and GPL licenses:
    !function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round(("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$"firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);
    if (!(is_admin())) {
    add_action('wp_head', 'jquery_parallax');

    By adding the css selector ‘parallax’ in the Advanced tab after following @boaz instructions

    Just create a section, under Style set a background image for it and under Attachment choose Fixed.

    you’ll have the parallax effect you are looking for.

    Thread Starter Benjober



    Hi @12steprecovery, thanks for sharing how you added parallux. Sorry to say but I’m rather new at this so I’m wondering if you could explain it a bit more. For instance I downloaded the code at the github link but I’m not exactly sure what to do with it. I’m thinking I need to upload the 3 javascript files somewhere on my wordpress site but I’m not sure how. I hope you could enlighten me.


    You are my hero, @12steprecovery! You’ve just saved me minutes of not hours of trial and error. Can I send you some money?! Seriously 🙂 Thanks mate.

    Hi, thanks for sharing @12steprecovery. Unfortunately, it doesn’t work with tablets and phones (but works great with desktop). I get white spaces above and/or under the background.


    • This reply was modified 4 years, 6 months ago by Vertiges.

    Thanks Lyle, I’ll check for sure 😉

    Hi there,
    I used this method for two of my sites, worked great.

    But since elementor 1.5 the parallax don’t work as it should with the code of this thread, the background doesn’t “follow” smoothly as it should..

    Anyone experiencing the same issue ? Maybe elementor made changes on its structure idk..

    Thanks !

    Yeah, @elemntor have added a slight transition to background. I’ll post the CSS to resolve that asap. Cheers!

    The simplest solution would be to deactivate the transition for the elements that contain the class parallax. Simply add the following code to your theme’s stylesheet (style.css):

    .parallax {
        transition: none !important;

    But keep in mind that this will also disable the new transitions for border, border-radius and box-shadow for these elements.

    • This reply was modified 4 years, 3 months ago by cgdannie.


    BRILLIANT!!! 🙂 That works PERFECTLY!

    @terre-terre – add the CSS posted by @cgdannie and it will work fine!


    Thanks it works 🙂



    Hey it’s me again ! xD

    Is anyone experiencing a problem with paralax since the last elementor update ?

    The calculation of the space between the top of the container and the top of the background seems to be wrong, resulting in a white space 🙁

    Investingating but didn’t figure it out yet..

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Parallax in Elementor’ is closed to new replies.