Categories

How to Create Elementor Parallax Effect

Carey Burns July 3, 2018
Rating: 5.0/5. From 1 vote.
Please wait...

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() {
    		
    ?>
    
    
    		
  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.

Themes for ordpress Websites
This entry was posted in Monstroid Tutorials, WordPress Tutorials and tagged background, Elementor, parallax. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket