Elementor parallax background effect detailed tutorial: let the site more visual hierarchy

Elementor can create parallax background effects, which can make a websiteMore vivid and add layers. This article will give you a detailed overview of how you can use theCreating a Parallax BackgroundThe result is a compelling visual experience.

What is parallax effect?

Parallax is an effect that creates a sense of depth and dynamism through the difference in relative motion between the background and foreground. When you are scrolling a web page, the background moves at a different speed than the foreground, creating the illusion of movement. Parallax is widely used in web design and games to make the visual experience more immersive.

Why use parallax backgrounds?

Parallax effect not only attracts visitors' attention, but also makes the page content look more three-dimensional. By adjusting the difference in movement speed between the background and the content, a sense of motion and hierarchy can be created, enhancing the user's visual experience and potentially increasing page dwell time.

Steps to create a parallax background in Elementor

needless Elementor Pro version, parallax effects can be implemented in the free version of Elementor. Here are the steps:

Step 1: Create or Edit a Page

First, you need to add theCreate a new page(math.) genusOr edit an existing pageThe

1. Log in to your WordPress dashboard and click "web page">"Add New Page" or select the page to edit.

2. Click "Using Elementor Editors", to enter the Elementor editor.

Step 2: Addcontainersrespond in singingelement

In the Elementor editorAdding a new containerThe parallax effect will be applied to the background of the chapter. You can add any content to the chapter, such as text, images, titles, maps, icons, etc.

1. Click "Adding a new container" and select the structure (e.g.Single column, double column(etc.).

2. Drag and drop text editors, buttons, or other elements into chapters to populate the content.

Step 3: Add a background

Next, add a background image to the container, which is about to apply theParallax effect on the part ofThe

1. Click on the "Edit Container" icon and go to the "Styles" tab.

2. Find "Background Type" and select "Classic" mode.

3. Click "Select Image" and upload or select a suitable background image from the media library.

4. Configure image display options such as position, repeat method, etc. to ensure that the image is displayed correctly on the page.

Step 4: Enable Parallax

This is the key step byFixed background imageRealize parallax effect.

1. Under "Background Type" find "attachment (email)" option, set it to "set rigidly in place".
   • This will makeBackground image is not fixedand the foreground content will move as it scrolls, creating a parallax effect.

2. The display of the background image can be fine-tuned as needed, such as "placement"The option canControl ImageThe alignment of the "magnitude"The option allows you to adjust the image zoom mode.

Step 5: Save and preview the effect

After completing the above settings, you can preview the page to see the parallax effect in action.

1. Click on Elementor's "eyes"Icon and select "Preview Changes".
2. Scroll the page in a new window and observe how the parallax effect behaves.

How to further optimize the parallax background?

If the default parallax effect doesn't quite fit the needs, try the following optimization tips:

1. Adjusting background image transparency: Make foreground content more prominent by adjusting the transparency of the background.

2. Add a color overlay: Adding a layer of transparent color to the background image can enhance the overall stylistic consistency of the page.

3. Combined with dynamic effects: If you want something more flashy, you can use Elementor's scrolling effects to add other animations to foreground or background elements.

Parallax Background Considerations

• Image Selection: Choosing the right background image is crucial. It is recommended to use a clear and thematic image.
• Loading speed: Parallax backgrounds may increase page load time, try to use optimized images to ensure site performance.
• Mobile Device Compatibility: Some parallax effects may not perform well on mobile devices. You can control whether or not parallax effects are displayed on mobile devices by customizing the display options.

summarize

Parallax effect is a very useful visual tool to enhance the attractiveness of a page, and Elementor provides easy-to-use way to achieve this effect without additional plugins. Hopefully, the detailed steps and optimization suggestions in this article will help you easily create impressive parallax backgrounds in Elementor.