How to Add a Parallax Effect to Your Hero Section in Elementor
Vložit
- čas přidán 22. 07. 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/ - Jak na to + styl
***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!
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 :)
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.
Thank you so much for this tutorial 👍🏻
Really inspirational and a great example i will try it on my site. Thanks a lot.
This is absolutely fantastic 👍
hello, when i put the mountain image in absolute position, disappear the background and the next section locate in the top
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
dude finally, thank you so much for sharing!!!
I love this tutorial! Thank u so much
Great example !!
Amazing tutorial!
that website with space was soo awesome
Nice tutorial. tks so much
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.
This is absolutely brilliant.....
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
oh wow, you're a genius!! i love you! this is what i need, thanks for this amazing video!!! have a happy life!
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.
amazing effect
are the mountain layers vector graphics or regular png/jpeg/etc. images?
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!
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?
Great! So exciting!
this is very awesome affect
Love your channel
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
Real great! Thanks a lot)
Amazing!
Hi guys, that's amazing. Please create more tutoriais like this one.
Thanks Alessandra! The team has some cool videos coming up 😀
How to find images like these or how you take inspirations
Awesome tip :D
Cool .. do you have a link to THE MOUNTAIN parallax page?
What is the Image resolution you used.
Great Video.
Thank you for the tutorial. How about mobile view?
any one tell where to get that pic background (deer mountain)...??? help me
Hello, please make tutorial videos.
I love to watch your tutorials .
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?
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
Wonderful
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?
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?
Elementor Team please add images to your tutorials so we can follow! It's too difficult to follow do it more simple, please!
Please share the image files in the description so that we can easily practice this effect.
Can't find scrolling effects, mouse effects and sticky on my Advance option. I only have entrance animation. :( Anyone knows what to do?
For some reason I am not seeing the Custom Positioning options. Is this happening to anyone else with the pro version?
LOVE THIS, wondering how this design would translate to mobile though...
Amazing
That was amazing. I feel like we design options horizon just exploded. . . Use carefully everyone! 🙂
Great!
Very good tutorial. Following the steps, I was able to do something similar and beautiful as the example.
Please share your work too!
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.
Hi , can you tell me how to add .gif or animated images on wordpress page to give cool effect .
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?
Love that Herzlia accent ;)
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?
Perfect
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
Where do I find the images? How did they build these? Is it illustrator or something else
What effect does this have on page speed?
Good tutorial but how about the mobile view? Does it look as nice?
Possibility to get the images used? 😁Or included as a PRO template, I do love my Elementor Pro!
Id like to see that demo website. Where's the link?
Copied the image size and made a mockup of my own to try with pro. Super jerky scrolling! Using Chrome. Anyone have a fix?
How did you edit the images?
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
You need to make a module especially for this, and make it so it works on mobile too.
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.
How can I create those mountain images
i need that pictures used in the video....kindly share it if anybody can provide it.
can't find the custom positioning option on elementor pro :\
Cool??
Amazing!
Every time he says "okay great" take a shot
Which plugin should I use to do this?
This is insane but where we will get that type of images
Are you using elementor pro ??
because I'v not found mouse hover effect in motion effects
This is not a tutorial. it's brilliant but just all so quick.
Where to get this type of images from?
How to i get these background image, if u feel free then sent me a link i am search for these background images over a week, Help Me...
where to get these files (images you used in your tutorial)?
Do we need elementor pro edition to do that?
Hi. Where can i purchase readdy image like thia type of background?
If i search in google for marketplace what should i write? Paralax image marketplace?
can i get the images that used ?
can we video parlllax in elementor or is it only available in Divi???
where to get the layer images??
I don't have custom positioning where do I get that
Download of the sprites would be awesome!
Does anyone know where to find such graphics?
Cool
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.
Is this only available with Elementor PRO?
Great
Facing problem with fixed position heading. it remains fixed on all page even on the footer how can I solve this
it would have been amazing if you have provided all files with it for practice