Back to contents

JetElements Parallax effect. How to create a parallax background for the section with JetElements

Keep reading to learn about creating the parallax background for sections using JetElements plugin for Elementor.

Liven up your website by adding parallax background to sections using JetElements Parallax option.

Creating a parallax background

Make sure, that you’ve activated the Section Parallax Extension in the JetElements Settings. To perform it you should proceed to the Elementor > JetElements Settings option and here go to the last tab which is called Available Extensions where you need to toggle on the Section Parallax Extension option.

Available Extension in JetElements settings

Step 1 — To get started, first, let’s create a new section. Second, click the Edit Section button at the top of the section.

Step 2 — After that, go forward to the Layout > Jet Parallax block in Elementor. Let’s click the Add New button to add a background image for this section.

Jet Parallax block in Elementor

Step 3 — Then, upload an image using the Image option. Attention! This image should have portrait orientation (the height should be larger than the width).

Layouts for Jet Parallax block

Step 4 — In the Parallax Type section select Scroll, so that the picture moves along while one’s scrolling up or down.

Step 5 — In the Background Size section pick the Cover option in order for the background picture change its ratio and cover the whole section.

Step 6 — Afterwards, move on to the Animation Property block, where you should choose the Background Position option.

Step 7 — Next, set the animation speed using the Parallax Speed toggle.

Step 8 — You can also make some changes in the z-Index, Background X Position(%) and Background Y Position(%) fields if you need.

Step 9 — Determine the devices the parallax effect will be seen at in the Enable On Device block.

Items settings in Jet Parallax block

Step 10 — The very last step is to fill this section with the content!