How to Add a Parallax Effect to Your Hero Section in Elementor
HTML-код
- Опубликовано: 2 авг 2024
- In this tutorial, we’ll add a 3d parallax effect to our hero section on our WordPress website using Elementor.
You'll learn how to:
✔︎ Layer images on top of one another
✔︎ Use vertical scroll on text
✔︎ Set fixed position to a section background
Learn more about the viewport settings: • How to Use Motion Effe...
Read more on Motion Effects here: elementor.com/blog/introducin...
Get Elementor Pro: elementor.com/pro/ 
Хобби
***2023 Update: Position (previously named Custom Positioning) can now be found under the Advanced > Layout tab.
Can you please attach the images files for better practicing
@@Suresh_S326 Yeah
Thank you Boss!
Can you attach the files please! So I can follow it along.
Love it when you show us things like this, really inspirational and a great example of what can be done when doing our own sites!
Nice tutorial, but it would be nice if you can also explain what each setting you're selecting actuslly does.. otherwise its difficult to use this for any other images or layout, unless we're using the exact same images, etc as you are. We don't really learn as much the way you've made the tutorial, where you're just going through all your steps, and have already figured out what setting and values to choose.. but thanks anyways. At least now I know that something like this can be made using Elementor. 👍
+1
i was just about to type this in comment
+1
+1
Cant wait to rewatch this at .25 speed.
@Aiko Stenger why would you do that?that's horrible
@@The_Daliban It´s an ironic remark as this tutorial as way too fast.
@@The_Daliban r/wooosh
Awesome, thanks for the tutorial! Would love to see how you tweaked it to look and work well on mobile view as well.
Gorgeous! One thing I would suggest is showing what each setting does step by step instead of everything at the end :)
Really inspirational and a great example i will try it on my site. Thanks a lot.
Elementor Team please add images to your tutorials so we can follow! It's too difficult to follow do it more simple, please!
Thank you so much for this tutorial 👍🏻
This is a great starting guide but i feel you missed a few important things here that i think you need to address 1. Height of the secion, Min height, full etc 2. Colum position 3.vertical align position 4. z-index of the second section 5.Do the PNGs need to be exactly the same dimensions or cropped to artwork
that website with space was soo awesome
Hi guys, that's amazing. Please create more tutoriais like this one.
Thanks Alessandra! The team has some cool videos coming up 😀
dude finally, thank you so much for sharing!!!
This is absolutely fantastic 👍
Me ayudo mucho para detallar unas dudas que tenia, muchas gracias, con esto ya podre implementar unas ideas que tengo para mi canal! :D te lo agradezco mucho! saludos!
oh wow, you're a genius!! i love you! this is what i need, thanks for this amazing video!!! have a happy life!
Great tutorial Elementor team. It would be great for us to practice these tutorials with the same images, couldn't Pro members have access to the images through our Pro account logins? Or have the Parallax Effect above saved as a template that we (the Pro members) could download or upload? Thanks guys.
Amazing tutorial!
Great example !!
It was confusing for me too but here are the details of the settings I used to achieve mine:
Image: I replicated the same exact design quickly using Illustrator and I exported the designs using the export as "legacy function" so that it could give me the png format that had enough space at the top. Image dimensions were: 1555 × 1168 (I use a MacBook pro)
In elementor: set background image with sunset as the layout's BG image
then as described in the video, upload your images into the section and set them as "absolute"
In layout settings of the header section in elementor
Content width = full width
height = min height 100 vh
Column position = stretch or top
Can You Provide Me The Links Of The Images Used In Video
Nice tutorial. tks so much
Hello, please make tutorial videos.
I love to watch your tutorials .
amazing effect
This is absolutely brilliant.....
this is very awesome affect
Excellent information but ...we need the example site where it is built. It also lacks the images to download. So we can try to follow the tutorial with better possibilities. It would be very useful.Thanks for the info.
I agree that the example site would be cool.
There's this company called vorstudio, their products are often like this. you can check that out to see the example site.
and i agree with the images.. i think you'll have to design all by yourself
Really would like to see a custom search (not the one with toolset). Maybe a tip for the next update? Could use it very good for my costumers.
That was amazing. I feel like we design options horizon just exploded. . . Use carefully everyone! 🙂
Real great! Thanks a lot)
Great! So exciting!
Awesome tip :D
LOVE THIS, wondering how this design would translate to mobile though...
Every time he says "okay great" take a shot
Love that Herzlia accent ;)
hello, when i put the mountain image in absolute position, disappear the background and the next section locate in the top
Great Video.
Love your channel
I love this tutorial! Thank u so much
Amazing!
Very good tutorial. Following the steps, I was able to do something similar and beautiful as the example.
Please share your work too!
Love it! have i two question: 1) wich plugin give me navigation to alementor?
2)Do I have to have elementor pro to do this?
This is not a tutorial. it's brilliant but just all so quick.
Wonderful
Thank you for the tutorial. How about mobile view?
Hi, I manage to do the 1st section, but when I want to add 2nd section after follow all your tutorial, it somehow not working as in the video. In your tutorial, the last image that you insert in the 2nd section, the last image (15.png) if I'm not mistaken, when I try to do the same, my 2nd section not appear the same as yours. It somehow part of the image in first section go out of boundary from the 1st section. Can you help me to figure out this? Other than that, your tutorial is awesome.
Thank you in advance.
are the mountain layers vector graphics or regular png/jpeg/etc. images?
How to find images like these or how you take inspirations
Did you make the hero and lower section before you work on the images above? I just purchased a pro, and I cannot add a block underneath. what to do?
I need to learn how to make graphics like these layered images... I want to put these elementor features to work!
I just saw this video, have you created and examples yet?
Please share the image files in the description so that we can easily practice this effect.
You need to make a module especially for this, and make it so it works on mobile too.
Amazing
I thoroughly enjoyed watching it. As a noob It would be great to follow and learn with some additional assets or a template as some of the other posts suggest...
What is the Image resolution you used.
Perfect
Cool??
Amazing!
Great!
Looks awesome. When you drag the image widget in, how do you get your to present full width? I can only get images to stretch to the entire screen if it's a section background image.
Hi Gordon, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get great advice from other web creators. And you can share screenshots and links there as well: forum.elementor.com.
I have no Custom Position option and I'm using the Pro Version. Did they get rid of it? I have an option to turn parallax on, but nothing happens. Frustrating. Wix does this easily and has since 2000. Why can't Elementor figure this out?
cool function, but it this posible for smarphones to? So is this not only for the web view?
I want make it that it look likes this on the Smartphone too.Could you make a video how it works?
How do you get your images like that on your page. If I add an image it sticks to the column size.. Can somebody help
I have a quick question. I'm at 1:09 and im not sure why my image will not fully expand when I click on "FULL" image size. My image is the same exact dimensions as in the video. What am I doing wrong?
Good tutorial but how about the mobile view? Does it look as nice?
Download of the sprites would be awesome!
Cool .. do you have a link to THE MOUNTAIN parallax page?
you should show all of these how it works on mobile as well
Hi thank you for this beautiful tutorial.
I was wondering why my Hero Element is in a fixed position above in the header section (I've activated positioning and VW) and does not stand inside of the choosen background section or at least does not disappears behind other sections.... (I've actived also Z-Index). Maybe i do miss something.
The other argument would be the mobile environment, as the parallax effect there isn't working at all...
Hi Grether, thanks for your comment and question. I recommend posting your question in the Elementor Community Facebook group. You'll be able to share more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
This is insane but where we will get that type of images
Scrolling effects is now only available on Elementor PRO.
That tool is great. I did it with my own designs and it is amazing for the desktop version. However it breaks the responsive design with tablets and smartphones (it doesn't fit in the frame's devices). Is there a way to make it works on each device, or at least a way to keep it only for desktop version and hide it on other devices ? Thank you !
I'm having the same issue and can't seem to figure it out. it even breaks the responsiveness depending on your desktop size. I wish it would be truly responsive. It has to do with the fact that the images have absolute positions. it works well for one size. which really sucks.
Nice one, is there any website where you can get those layer pictures?
You can go to freepik or similar websites to download free vector images like those
@@MaiNguyen-ic9ue thank you very much mai
Hi there, on motion effects I don't have the option "scrolling effects" is this because I'm not an Elementor Pro user? Are you using the pro version? I look forward to your reply
If I wanted to have the stars like you have at the end of the video on my entire website, how would I accomplish this?
nice ..
Where do I find the images? How did they build these? Is it illustrator or something else
Hi, i want make first page(my domain) just some words and background and "input email" field button, and then costumer can go to my shop page. how to do that, without input email first they cannot go to my shop page. just input email , no need create username or password.
Thats a great tutorial, but im having a problem with elementor while creating my website. I have the free version of elementor and but when i go to the advanced setting of any layer then to motion effects there is no scrolling effect option present. Is that because this effect is not available in free version or whts the matter i cant figure out really. In the motion effect there is only one option of enterence animation and thats it. It would be great help if you can let me know. Thanks!
Its only on pro version
For some reason I am not seeing the Custom Positioning options. Is this happening to anyone else with the pro version?
I find this tutorial not working very well. When you view on inspector, it tends to resize to the first left corner, and not the middle.
I need ways to auto resize or else in terms of web responsive design, Im hearing you have to play with this.
Question! Will this work on mobile??? I think it's the main point. As everyone enters websites through mobiles more than desktops, right?
Possibility to get the images used? 😁Or included as a PRO template, I do love my Elementor Pro!
it would have been amazing if you have provided all files with it for practice
any one tell where to get that pic background (deer mountain)...??? help me
Can't find scrolling effects, mouse effects and sticky on my Advance option. I only have entrance animation. :( Anyone knows what to do?
Id like to see that demo website. Where's the link?
Are you using elementor pro ??
because I'v not found mouse hover effect in motion effects
nice
What effect does this have on page speed?
Cool
How did you edit the images?
kudos
Thanks... nice tutorial. Is this responsive ?
Hi thushara, the design is responsive, but some features, such as "Fixed Attachment" only display on Desktop.
@@Elementor okay... thanks for the reply ..
Hi , can you tell me how to add .gif or animated images on wordpress page to give cool effect .
Great
Which plugin should I use to do this?
Copied the image size and made a mockup of my own to try with pro. Super jerky scrolling! Using Chrome. Anyone have a fix?
elementor pro needed or i can do it with free one .
also, what are we even editing here? is this a header template? is this a page? if the latter, using what template in terms of the page attributes? i'm really confused. it feels like this tutorial didn't start where it should've.
Is it mandatory to have Elementor pro for this?
How can I create those mountain images