Parallax Effect In Elementor
Whether you’re new to Elementor or a seasoned user seeking to elevate your website’s design, you’ve come to the right spot. By the end of this tutorial, you’ll have the knowledge to effortlessly integrate a captivating parallax effect that will set your website apart from the rest. So, let’s get started!
1. Create a New Page:
First things first, open your WordPress dashboard and click on “Pages” on the left side. Then, select “Add New” to create a new page for your stunning parallax effect.
2. Add a Flexbox Container:
Click the plus sign to add a new element to your page and choose a “Flexbox Container.” Make sure you’ve updated to the Flexbox container so you can access all the container options.
3. Customize Container Settings:
To create a full-width effect, change the content width to “Full Width.” Set the main height to “VH” and then enter “100” in the field next to it. This will create a full-page container for your parallax effect.
4. Styling Your Container:
Give your container a background color to match your website’s theme. You can use the color palette and enter the desired color code. This will serve as the background for your parallax section.
5. Add a Heading:
Next, locate the “Heading” widget on the screen and drag it into your container. Align the container’s content to the center for a clean look.
6. Customize the Heading:
Go to the style settings and change the text color to your preferred color (in this case, black). Adjust the typography to your liking. In this example, we’re using the “Poppins” font at size 84. Make sure to center-align the heading for a neat appearance.
7. Add Stroke (Optional):
If you want to add some extra flair, you can add a text stroke from the style settings. Adjust the color to your liking for a stylish effect.
8. Duplicate the Container:
Duplicate the container with the heading by clicking the dotted lines icon. This will create a second container with the same settings.
9. Create the Parallax Scrolling Container:
Now, click the plus sign again and add a “Flexbox Container” with a “Column” direction.
10. Customize the Scrolling Container:
Like before, set the content width to “Full Width” and the main height to “VH” with a value of 100. This ensures it spans the entire page.
11. Styling for the Scrolling Container:
Give the scrolling container the same background color as the previous ones for consistency.
12. Add Images:
Inside this container, add images. In this example, we’ve added three images to create a beautiful scenery. Adjust the image sizes to your liking.
13. Set Image Position:
For each image, go to the “Advanced” settings, scroll down, and change the position to “Absolute.” Set the Z-index to 1 for all images.
14. Blend the Sun Image:
Add custom CSS to the “Advanced” settings for the sun image. This CSS will help the sun image blend with the parent image, creating a seamless effect.
mix-blend-mode: screen;15. Add Scrolling Effect:
To make the parallax effect come alive, enable scrolling effects for the bird and sun images. In the “Advanced” settings, scroll down and activate the “Motion Effect.” Configure the vertical and horizontal scrolling directions to your liking.
16. Preview Your Parallax Effect:
Click “Publish” and then “Preview Changes” to see how your stunning parallax effect looks on your website.
That’s it! You’ve successfully added a stylish parallax effect to your WordPress website using Elementor. I hope you enjoyed this tutorial. If you’d like more videos like this, please subscribe to my channel, hit the like button, and leave a comment below. Thank you for joining me on WebSense Pro, and stay tuned for more exciting tutorials!
