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. 👍
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
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.
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
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?
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.
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?
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.
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!
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?
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
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?
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
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.
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.
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.
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
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.
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.
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!
Hi! When I try to create this effect the main heading (the THEME MOUNTAIN tex) becomes visible in the second section. Is there a way to set up a fixed element to be visible only in the section it is located and not on the entire page? Thanks
***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.
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
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
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
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
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?
Awesome, thanks for the tutorial! Would love to see how you tweaked it to look and work well on mobile view as well.
Thank you for the tutorial. How about mobile view?
Elementor Team please add images to your tutorials so we can follow! It's too difficult to follow do it more simple, please!
that website with space was soo awesome
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.
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 it! have i two question: 1) wich plugin give me navigation to alementor?
2)Do I have to have elementor pro to do this?
How to find images like these or how you take inspirations
hi i did my first wordpress website with elementor, but i'm getting: Nothing Found message when i'm loding the page can you please help me with that?
LOVE THIS, wondering how this design would translate to mobile though...
Hi guys, that's amazing. Please create more tutoriais like this one.
Thanks Alessandra! The team has some cool videos coming up 😀
What is the Image resolution you used.
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.
This is not a tutorial. it's brilliant but just all so quick.
Please share the image files in the description so that we can easily practice this effect.
Really inspirational and a great example i will try it on my site. Thanks a lot.
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!
Id like to see that demo website. Where's the link?
Good tutorial but how about the mobile view? Does it look as nice?
Nice tutorial. tks so much
Thank you so much for this tutorial 👍🏻
hello, when i put the mountain image in absolute position, disappear the background and the next section locate in the top
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
Are you using elementor pro ??
because I'v not found mouse hover effect in motion effects
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?
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?
Every time he says "okay great" take a shot
This is absolutely brilliant.....
where to get these files (images you used in your tutorial)?
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
Amazing tutorial!
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?
Facing problem with fixed position heading. it remains fixed on all page even on the footer how can I solve this
Is it mandatory to have Elementor pro for this?
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
Great example !!
can we video parlllax in elementor or is it only available in Divi???
I love this tutorial! Thank u so much
dude finally, thank you so much for sharing!!!
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
Love that Herzlia accent ;)
Do we need elementor pro edition to do that?
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.
I tried this tutorial, but the hero image is not showing on mobile? Is there something I did that made it invisible?
Hi how can you play a video and after playing it let say 50% a call to action button below can appear ? Is it possible with elementor ?
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...
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?
perfect, but is i ok that you have placed such a big image (6000 px?) wouldnt that be wrong for late loading time? thx
Hi Celestial, good catch! Check out this video on optimizing your images for web: th-cam.com/video/8BqHUx6Zex4/w-d-xo.html
This is absolutely fantastic 👍
Is this only available with Elementor PRO?
Which plugin should I use to do this?
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.
Wonderful
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.
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.
Where to get this type of images from?
Cool .. do you have a link to THE MOUNTAIN parallax page?
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
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
@@the_evergreen_paradise thank you very much mai
Hello, please make tutorial videos.
I love to watch your tutorials .
Can't find scrolling effects, mouse effects and sticky on my Advance option. I only have entrance animation. :( Anyone knows what to do?
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.
Its working on mobile too?
are the mountain layers vector graphics or regular png/jpeg/etc. images?
i did't find custom position in elementor pro container base site, where I can find this?
Hi Waqas, Position (previously named Custom Positioning) can now be found under the Advanced > Layout tab.
Does anyone know where to find such graphics?
Awesome tip :D
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.
When I fenshed dosnot work in my site why please help i need it so much
I don't have custom positioning where do I get that
Where do I find the images? How did they build these? Is it illustrator or something else
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 ..
Fabuleux 🤩
elementor pro needed or i can do it with free one .
can't find the custom positioning option on elementor pro :\
How did you edit the images?
oh wow, you're a genius!! i love you! this is what i need, thanks for this amazing video!!! have a happy life!
Scrolling effects is now only available on Elementor PRO.
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!
Please provide those image which you used.
Hi! When I try to create this effect the main heading (the THEME MOUNTAIN tex) becomes visible in the second section. Is there a way to set up a fixed element to be visible only in the section it is located and not on the entire page? Thanks
I'm also facing the same problem.
for me the solution was to put the 2nd section (the black one) a superior CSS ID higher than the previous one, then the text is masked behind
are the editing tools used in this tutorial all available in Elementor free?
If you want to make a Parallax Effect using Free Elementor, I've created a video tutorial for it: th-cam.com/video/p6bR0bTtiPc/w-d-xo.html
Hi , can you tell me how to add .gif or animated images on wordpress page to give cool effect .
no puedo hacerlo porque mi wordpress no tiene esas opciones de efectos.
Is this a pro feature? I dont see this option
where to get the layer images??
this is very awesome affect
Very good tutorial. Following the steps, I was able to do something similar and beautiful as the example.
Please share your work too!
Do you have the reference files please?
i need that pictures used in the video....kindly share it if anybody can provide it.
Could we please have the files for this tutorial?