How to Create Elementor Parallax Effect

Hello, our support team is ready to present you a new tutorial that shows how to create Elementor plugin Parallax Effect.

There is no such option as parallax background in Elementor plugin by default, but the same effect can be achieved by completing the next steps

1. Navigate to Pages > Add new tab on the left of the Dashboard or open your existing page for editing. You need to make sure that you have selected Full width page layout option.

   

2. Click Edit with Elementor button to proceed to editing with Elementor.

3. Click on Add a new section button to create a new section and select one column section layout.

   

4. Click Edit Section icon and switch to Style settings tab

5. Select Classic background type and upload an image to use it as a section background, choose option Fixed in the Attachment dropdown list, select Cover in the Size list.

   

6. Drop any content modules you want to the section to have some content displayed. If you would like to increase the section height – feel free to add Top and Bottom module padding in Advanced > Padding block of your module. Click on Save button when you are done.

   

7. You will need to add a code snippet as a next step. Code snippets plugin is needed for this. Navigate to Plugins/ Add new and search for Code Snippets plugin. Install and activate it.

   

8. Navigate to Snippets > Add new and paste the following code into the code area:

   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() {
   parallax();
   });
   })(jQuery);
   
   /*
   jQuery Parallax 1.1.3
   Author: Ian Lunn
   Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
   
   Dual licensed under the MIT and GPL licenses:
   http://www.opensource.org/licenses/mit-license.php
   http://www.gnu.org/licenses/gpl.html
   */
   !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((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("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);
   
   </script>
   <?php
   
   }
   
   if (!(is_admin())) {
   wp_enqueue_script('jquery');
   add_action('wp_head', 'jquery_parallax');
   }

9. Click Save Changes and Activate button.

   

10. Now you need to open the settings of section you added via Elementor again, open Advanced tab and input parallax class in CSS Classes field.

    

11. Save the changes. Now you can go to the page you’ve created to see the parallax effect.

In case you’re searching for premium themes to build your website from scratch, look through our collection of beautiful WordPress themes.