How to Create Parallax Background (based on Elementor)

From this tutorial you’ll learn how to create parallax background using Elementor live page builder.
You must’ve noticed that there is no such option as parallax background in Elementor, so it will take some effort to create a background with such an effect, but everything is rather simple.

Creating Parallax Background
  1. First, let’s navigate to Pages > Add new tab on the left of the Dashboard. Here you need to make sure that you use a full width page layout. Apply Sidebar not selected option to the page sidebar. Create Parallax Background
  2. Select No sidebar in Sidebar Layout and Fullwidth in Content Layout. You can find both options in Layout Options block.
  3. Click Edit with Elementor button to proceed to editing with Elementor. Create Parallax Background
  4. Next, click  Add a new section button to create a new section and select one column section layout from the section layouts block. Create Parallax Background
  5. Click Edit Section icon to open Edit Section block. Here switch to Style settings tab. 
  6. Select Classic background type and upload an image to use it as a section background. Create Parallax Background
  7. Choose Fixed in the Attachment dropdown list.
  8. Specify Cover in the Size list.
  9. Let’s add some content to the section area. Drop any content modules you want to add to it (in our case, we added Heading module). Create Parallax Background
  10. To make the section height larger we added 250 px value to Top and Bottom Heading module padding in Advanced > Padding block.
    You can also use Spacer modules to increase the section height.
  11. Click Save button in order to save the changes.
  12. Now let’s return to WordPress Dashboard. We need to add a code snippet, so you should install code snippet plugin first. Please, navigate to Plugins > Add new tab and search for Code Snippets plugin. Install and activate it. Create Parallax Background
  13. After you’ve activated Code Snippets plugin, you can see Snippets tab on the left of the Dashboard. Navigate to Snippets > Add new and paste the following code into the code area.  Create Parallax Background
  14. Click Save the changes and activate button to make the code snippet work. 
  15. Now let’s return to Elementor page builder. Open the page where you created the section with Elementor.
  16. Here click Edit Section icon and switch to Advanced settings tab. Create Parallax Background
  17. In the CSS Classes field input parallax class.
  18. Save the changes. Now you can go to the page you’ve created to see the parallax effect in work!
In the case You’re not so well-versed in coding and want to create parallax effects right from Elementor editing page without any code snippets, You can always purchase JetParallax plugin!
It is easy to use and makes creating parallax effects very simple!

Was this helpful?