{"id":84966,"date":"2018-07-03T03:58:10","date_gmt":"2018-07-03T07:58:10","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=84966"},"modified":"2018-07-03T03:58:10","modified_gmt":"2018-07-03T07:58:10","slug":"how-to-create-elementor-parallax-effect","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-create-elementor-parallax-effect.html","title":{"rendered":"How to Create Elementor Parallax Effect"},"content":{"rendered":"

Hello, our support team is ready to present you a new tutorial that shows how to create Elementor plugin Parallax Effect<\/strong>.<\/p>\r\n

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<\/p>\r\n

    \r\n\t

  1. Navigate to Pages > Add new<\/strong> 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<\/strong> page layout option.<\/p>\r\n\t\r\n\"\"<\/a>\t\t\r\n\t\t\r\n\t<\/li>\r\n\t

  2. Click Edit with Elementor<\/strong> button to proceed to editing with Elementor. <\/p><\/li>\r\n\t

  3. Click on Add a new section<\/strong> button to create a new section and select one column section layout. <\/p>\r\n\t\r\n\"\"<\/a>\t\t\r\n\t\t\r\n\t<\/li>\r\n\t

  4. Click Edit Section<\/strong> icon and switch to Style settings<\/strong> tab<\/p><\/li>\r\n\t

  5. Select Classic background<\/strong> type and upload an image to use it as a section background, choose option Fixed<\/strong> in the Attachment<\/strong> dropdown list, select Cover<\/strong> in the Size<\/strong> list.<\/p>\r\n\t\r\n\"\"<\/a>\t\t\r\n\t\t\r\n\t<\/li>\r\n\t

  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<\/strong> block of your module. Click on Save<\/strong> button when you are done.<\/p>\r\n\t\r\n\"\"<\/a>\t\t\r\n\t\t\r\n\t<\/li>\r\n\t

  7. You will need to add a code snippet as a next step. Code snippets plugin<\/strong> is needed for this. Navigate to Plugins\/ Add new<\/strong> and search for Code Snippets<\/strong> plugin. Install and activate it.<\/p>\r\n\t\r\n\"\"<\/a>\t\t\r\n\t\t\r\n\t<\/li>\r\n\t

  8. Navigate to Snippets > Add new<\/strong> and paste the following code into the code area:<\/p>\r\n\t\t

    function jquery_parallax() {\r\n\t\t\r\n?>\r\n<script language=\"JavaScript\" type=\"text\/javascript\">\r\n\r\n\r\n;(function($) {\r\n\r\n'use strict'\r\n\r\nvar testMobile;\r\nvar isMobile = {\r\nAndroid: function() {\r\nreturn navigator.userAgent.match(\/Android\/i);\r\n},\r\nBlackBerry: function() {\r\nreturn navigator.userAgent.match(\/BlackBerry\/i);\r\n},\r\niOS: function() {\r\nreturn navigator.userAgent.match(\/iPhone|iPad|iPod\/i);\r\n},\r\nOpera: function() {\r\nreturn navigator.userAgent.match(\/Opera Mini\/i);\r\n},\r\nWindows: function() {\r\nreturn navigator.userAgent.match(\/IEMobile\/i);\r\n},\r\nany: function() {\r\nreturn (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());\r\n}\r\n};\r\n\r\nvar parallax = function() {\r\ntestMobile = isMobile.any();\r\nif (testMobile == null) {\r\n$(\".parallax\").parallax(\"50%\", 0.3);\r\n}\r\n};\r\n\r\n\/\/ Dom Ready\r\n$(function() {\r\nparallax();\r\n});\r\n})(jQuery);\r\n\r\n\/*\r\njQuery Parallax 1.1.3\r\nAuthor: Ian Lunn\r\nPlugin URL: http:\/\/www.ianlunn.co.uk\/plugins\/jquery-parallax\/\r\n\r\nDual licensed under the MIT and GPL licenses:\r\nhttp:\/\/www.opensource.org\/licenses\/mit-license.php\r\nhttp:\/\/www.gnu.org\/licenses\/gpl.html\r\n*\/\r\n!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);\r\n\r\n<\/script>\r\n<?php\r\n\r\n}\r\n\r\nif (!(is_admin())) {\r\nwp_enqueue_script('jquery');\r\nadd_action('wp_head', 'jquery_parallax');\r\n}<\/pre>\r\n\t\t<\/li>\r\n\t\t
  9. Click Save Changes and Activate <\/strong> button.<\/p>\r\n\t\t\r\n\"\"<\/a>\t\t\t\r\n\t\t\t\r\n\t\t<\/li>\r\n\t\t
  10. Now  you need to open the settings of section you added via Elementor again, open Advanced<\/strong> tab and input parallax<\/strong> class in CSS Classes<\/strong> field.<\/p>\r\n\t\t\r\n\"\"<\/a>\t\t\t\r\n\t\t\t\r\n\t\t<\/li>\r\n\t\t
  11. Save the changes. Now you can go to the page you\u2019ve created to see the parallax effect.<\/p><\/li>\r\n\t\t<\/ol>\t\t\r\n
    In case you’re searching for premium themes to build your website from scratch, look through our collection of beautiful WordPress themes<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
    Hello, our support team is ready to present you a new tutorial that shows how to create Elementor plugin Parallax Effect<\/strong><\/p>\n","protected":false},"author":56,"featured_media":84974,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[1008,2602,1773],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/84966"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=84966"}],"version-history":[{"count":4,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/84966\/revisions"}],"predecessor-version":[{"id":84998,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/84966\/revisions\/84998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/84974"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=84966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=84966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=84966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}