How to Add Elementor Parallax Effect Fast and Easy
The parallax effect is often seen on websites that cultivate contemporary aesthetics. It adds an impression of depth and dynamicity and highlights the modern feel on the website. There is a wide variety of WordPress themes that come with parallax effects, but you also always have the option to create a parallax effect by yourself. Numerous sites use the parallax scrolling effect as a powerful user engagement and storytelling tool.
In this article, we will show you how to add the parallax effect to your website using the Elementor page builder. Elementor is the only page builder that comes with an integrated Elementor parallax option. All the other builders require the use of some kind of plugin or tool. Before we continue, let’s just make sure you understand what the parallax effect exactly is. In this article, you’ll read about:
The parallax effect is achieved when elements in the background and elements in the foreground move at a different pace when the user scrolls. More precisely, the background elements are set to move slower than the foreground elements and that’s how an illusion of depth is created.
The Elementor page builder made it easy to add a parallax effect by allowing you to assign a parallax background to a certain row or column. Above you can see an example of the parallax effect created by Elementor.
You can apply a Elementor parallax effect on a row that contains no information – just to serve as a moving image, to make the page more attractive or you can apply it on a row that contains some information, where the parallax image will be behind the information.
It is also possible to add a parallax effect to the entire section, or to the column that is contained in the section.
You can find the Parallax option by clicking on the small icon that resembles an open book and is found in the top left corner of the column we selected for adding parallax. If you want to add parallax to the entire section and not to the column the same option is also found in a blue tab that shows up in the middle of the row when you hover over it. To access the parallax option choose the Edit column or Edit section option. In our case, we are editing the column.
Clicking on the Edit column opens a left-hand menu with three major tabs. Choose the Style tab, to begin with. Click on the Background Type option, and the field for adding an image will show up. You can add an image from your Media Library or upload a new file.
After you choose the image for the parallax section, you can proceed to adjust the image settings.
In the Attachment settings choose Fixed option, because we need the image to behave fixated as we scroll, if we choose Scroll here, the image will move with the background.
The image position settings offer a lot of choice. You can opt to set the image in the center of the section, top right, top left, etc – the good thing is that you immediately see the preview of the image position which makes it easier to decide.
The Repeat option that follows is used mostly when the image is actually a pattern that needs to be repeated, or in cases when the image is too small. In our case, the image is the right size so we choose the default option. For the parallax effect, it is best to have an image size of 1920 pixels – this way the image will take up the width of the whole section. But, in case the size of your image is not optimal you can always adjust it using the Size settings. These offer several options including the Custom settings that let you set the size by yourself using a slider. The preview of every change that you make is immediately available on the right so you can try each of the options to see which one fits best.
After you adjust all these settings you can proceed to Background Overlay menu. When you open it, you will notice that all the options are the same as in the previous menu, but with a few more interesting settings. These are Opacity, CSS Filters and Blend Mode.The Opacity slider lets you set a basic color overlay, and play with the opacity to increase or decrease its effect.
The CSS Filters and Blend Mode allow you to apply Photoshop-like effects to your elements. CSS Filter Effects enable graphic effects like blur or color shifting to images. As for the blend modes Elementor offers 13 of them: Normal (this is the default and has zero blend), Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Saturation, Color, Difference, Exclusion, Hue, and Luminosity.
The height of the parallax section can depend on the content in the section. If, for example, we defined the padding of the content, or the content already has its own default padding, the parallax will adjust in such a way to cover the whole surface behind the element. So, to set the height in this case, we have to make adjustment to the element itself.
If that is not enough or we have a section that has no content in it, we will go back to settings, and choose the Advanced tab. In the Padding settings we can set the height and see how it takes effect immediately in a live preview.
What happens when we have two or more columns in a row, and we want to have the Elementor parallax effect in only one of the columns? The procedure is very simple. Go to the options menu of the column in which you want to set the parallax effect. Add the background just like you did it previously when there was only one column in a row. But, you can not set the parallax height simply by adjusting the padding, it is necessary to add some content to the column. You can either insert the content into the column with the parallax effect or you can insert the content in the other column and then it will be possible to adjust the height of the section by adjusting the padding in the Advanced options menu. If you don’t like the way the parallax image is centered, you can always go back to style settings and adjust its position.
Bottom Line
Micro-interactions and animated user interfaces are often the elements that make the user experience engaging and memorable. That’s one of the reasons why the parallax effect is so popular on all types of websites nowadays. It allows you to reveal the details of your content in a dynamic way and inspires the user to feel as though he is in control.
Parallax effect can really improve many aspects of a user experience. But, it needs t be done right and with a purpose. Adding parallax just because everyone has it makes no sense at all, and it could actually annoy the users, especially if it doesn’t fit the content of the website.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!