How to add parallax elements to a section?
Parallax effect is one of the fancy and modern looking effects which you can use in your layout. You can apply parallax effect on mouse move or scroll. You can easily add the 3D particles, or apply parallax effect for the section’s background.
Also you can enable the Parallax effect feature for specific screen sizes like Desktopand Tablet.
Beware!Parallax effect element is a part of the JetElements. The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here. But you can use parallax effect for the Section’s background without JetElements and just with the Elementor’s default options.
Adding Parallax Effect to a section’s background
To apply a simple parallax effect to the section’s background, all you need to do is set the attachment property of the section’s background to Fixed. That will add a simple parallax effect to the background during scroll:
1. Add a new page or edit an existing one.
2. Click on Edit with Elementor button.
3. Select the section which background you want to add parallax effect to.
4. A new dashboard on the left will open with the element’s settings.
5. From the Style tab and Background section, upload an Image background or insert it from Media Library.
6. Set the attachment property of the background to Fixed.
7. Update the page.
Adding Parallax Effect to the section’s elements
If you want to have more features and add a fancier parallax element to your section, you can get help from JetElements Parallax Effect. This enables you to have different options for the parallax effects and add more professional parallax effect to the items of an Elementor’s section.
In order to add Parallax elements to an Elementor’s section:
1. Add a new page or edit an existing one.
2. Click on Edit with Elementor button.
3. Select the section you want to add parallax effect to.
4. A new dashboard on the left will open with the element’s settings.
5. From the Layout tab, open Jet Parallax section.
6. Add an Item to the section, to apply parallax effect to that Item.
7. Upload your Item or insert it from Media Library.
8. Set the parallax type for the Item and customize order settings.
Here are the most important options of JetElements Parallax Effects:
- Parallax Speed: How many times is the speed of parallax effect is faster than the speed of scrolling or moving the mouse.
- Parallax Type: Set the type of Parallax Effect. For instance Mouse Move.
- z-Index: Specify the stack order of an element in Section. Please refer to this article.
- Background X, Background Y portions: Set the position of the element in the parent section.
- Background Size: Define the size of the element in the parent section.
- Animation Property: Set which animation property need to be applied to the element.
- Enable on Device: Specify the devices (screen sizes) parallax effects need to be visible in.
9. You can add as many parallax items as you want to your section.
10. Edit the settings and Update the page.
