- 8
- 74 823
Making Websites Easy
Australia
เข้าร่วมเมื่อ 18 ก.พ. 2019
Are you a complete newbie when it comes to making websites? Do you have zero coding experience whatsoever? Guess what? You can make beautiful websites too!
How To Make a One Page Parallax Website (2021)
We're back with another parallax tutorial! This time you will learn how to make a one page website, without the need to know how to code.
If you missed the first tutorial, you can check it out here:
th-cam.com/video/cEesujpW4E8/w-d-xo.html
In this video, we'll be using a drag and drop website builder to very easily and very quickly add unreal parallax effects in an easy to follow step by step tutorial. In fact, why not download the images we used (in the links provided below) and follow along in the process? There's nothing better than learning as you go!
Please be sure to subscribe to our channel:
DEMO AND IMAGE DOWNLOAD
-----------------------------------------------------------
Demo: makingwebsiteseasy.com/moonlight-parallax
Download images: www.makingwebsiteseasy.com/moonlight-images
USEFUL LINKS
-----------------------------------------------------------
Web Hosting: makingwebsiteseasy.com/host
Elementor: makingwebsiteseasy.com/elementor
Create a website: makingwebsiteseasy.com/create-your-wordpress-website
Download free images: pixabay.com
GIMP: inkscape.org
VIDEO TIMESTAMPS
-----------------------------------------------------------
00:00 Introduction
01:03 Start of tutorial
02:06 Add image layers
04:25 Add parallax effects
06:38 Resize images
08:25 Adjust image positions
10:24 Disable scrolling
11:20 Add blur effects
13:52 Make it responsive
OTHER HELPFUL PARALLAX VIDEOS
-----------------------------------------------------------
How to Create a Parallax Image using Free Images:
th-cam.com/video/E0_ifCCguHE/w-d-xo.html
BRING Your Website Images to LIFE with Parallax Effects:
th-cam.com/video/8DwA-coVP6Q/w-d-xo.html
FOLLOW AND CONNECT WITH US
-----------------------------------------------------------
FB Group: groups/makingwebsiteseasy
Facebook: makingwebsiteseasy
Instagram: makingwebsiteseasy
And don't forget to SUBSCRIBE to Making Websites Easy for more awesome website tutorials!
th-cam.com/users/makingwebsiteseasy
DISCLAIMER
-----------------------------------------------------------
Our content contains affiliate links. If you decide to make a purchase through any links, we will make a small commission at no additional cost to you. This helps fund our free tutorials on the Making Website Easy channel and website. We thank you for your support!
If you missed the first tutorial, you can check it out here:
th-cam.com/video/cEesujpW4E8/w-d-xo.html
In this video, we'll be using a drag and drop website builder to very easily and very quickly add unreal parallax effects in an easy to follow step by step tutorial. In fact, why not download the images we used (in the links provided below) and follow along in the process? There's nothing better than learning as you go!
Please be sure to subscribe to our channel:
DEMO AND IMAGE DOWNLOAD
-----------------------------------------------------------
Demo: makingwebsiteseasy.com/moonlight-parallax
Download images: www.makingwebsiteseasy.com/moonlight-images
USEFUL LINKS
-----------------------------------------------------------
Web Hosting: makingwebsiteseasy.com/host
Elementor: makingwebsiteseasy.com/elementor
Create a website: makingwebsiteseasy.com/create-your-wordpress-website
Download free images: pixabay.com
GIMP: inkscape.org
VIDEO TIMESTAMPS
-----------------------------------------------------------
00:00 Introduction
01:03 Start of tutorial
02:06 Add image layers
04:25 Add parallax effects
06:38 Resize images
08:25 Adjust image positions
10:24 Disable scrolling
11:20 Add blur effects
13:52 Make it responsive
OTHER HELPFUL PARALLAX VIDEOS
-----------------------------------------------------------
How to Create a Parallax Image using Free Images:
th-cam.com/video/E0_ifCCguHE/w-d-xo.html
BRING Your Website Images to LIFE with Parallax Effects:
th-cam.com/video/8DwA-coVP6Q/w-d-xo.html
FOLLOW AND CONNECT WITH US
-----------------------------------------------------------
FB Group: groups/makingwebsiteseasy
Facebook: makingwebsiteseasy
Instagram: makingwebsiteseasy
And don't forget to SUBSCRIBE to Making Websites Easy for more awesome website tutorials!
th-cam.com/users/makingwebsiteseasy
DISCLAIMER
-----------------------------------------------------------
Our content contains affiliate links. If you decide to make a purchase through any links, we will make a small commission at no additional cost to you. This helps fund our free tutorials on the Making Website Easy channel and website. We thank you for your support!
มุมมอง: 4 224
วีดีโอ
BRING Your Website Images to LIFE with Parallax Effects (2020)
มุมมอง 1.9K3 ปีที่แล้ว
Learn how to make a parallax website step by step using a groundbreaking drag and drop website builder quickly and easily. We'll teach you where to download free images, split the image into layers, and then how to make a parallax website by bringing the image to life with WordPress and Elementor parallax effects, using drag and drop and without any coding whatsoever. USEFUL LINKS Web Hosting: ...
How to Create a Parallax Image using Free Images (2020)
มุมมอง 4.2K3 ปีที่แล้ว
In this tutorial, you'll discover how to create a parallax image using free images. We'll go through where you can go to get free images to use for your website, how to easily edit the images using free image editing software, and then how to export the images to use with your website. You will learn step by step, how easy it is to create the images we used in this awesome parallax website: mak...
How to Make a Parallax Website (2021) - Amazing!
มุมมอง 44K4 ปีที่แล้ว
Learn how to make a parallax website without any coding and only through drag and drop. In this tutorial, you'll learn how easy and quick it is to add parallax effects to your WordPress website. If you have no experience creating websites, and no coding knowledge whatsoever, then this video is ideal for you. We're going to teach you step by step, how you can use a groundbreaking drag and drop w...
Best Website Builder: How to Make a Website WITHOUT any Coding! (2019)
มุมมอง 19K5 ปีที่แล้ว
Do you want to discover how to create a WordPress website without forking out tons of money? But you're a complete beginner and have zero coding experience whatsoever? Are you confused with all the overwhelming information out there, the endless tools, plugins, website platforms, and you just don't know where to start? This video is for you. I'm going to teach you how to create a WordPress webs...
How To Make A Website WITHOUT Any Coding or Previous Experience (2019)
มุมมอง 1795 ปีที่แล้ว
Do you want to discover how to create a WordPress website without forking out tons of money? But you're a complete beginner and have zero coding experience whatsoever? Are you confused with all the overwhelming information out there, the endless tools, plugins, website platforms, and you just don't know where to start? This video is for you. I'm going to teach you how to create a WordPress webs...
image repository doesn't work, how to download it?
Can you update these links?
do u have tha source code?
RESPECT
Parallax has been literally my single favorite flavor to add to site designs for 8 years, going back to my ol Adobe Muse based designs! Great tutorial schooling for all here indeed
Thanks for the comment! I’m happy that my tutorial has at least helped you just a little. I agree, parallax is a nice touch to give websites that little oomph!
hy bro are you still active on youtube ... if yes just replay me i wana share something with you
Hey there, great to hear from you! My deepest apologies, I will be back most definitely but I can’t provide a concrete date at the moment. But I will be on TH-cam again one day that’s for sure! What did you want to share with me? I’m interested to know :-)
Hey man, are you still there? awesome tutorial!
Hey Karamiko, thank you so much for the comment! I’m so happy you found the tutorial helpful! I also appreciate you checking in. I’m definitely still here. I’m not going anywhere and I will still produce content. Life circumstances however, have put a hold on them for now unfortunately.
For people who are confused with the template thing, just ignore it. Let the drawing be gone out of the length and width of specified document. Don't use template anywhere, just draw the drawing and leave it with extra beyond the document, but while exporting you can export it with same length and width for all layers. This way you can save the time , and also for continuous repeating for game, you can comr back and make changes, so that terrain begining level will be same as ending and this very important if you want horizontal effect
nice
Thank you Linh! I’m glad you liked it!
Elementornlooks good, but not a fan of expensive plugin subscriptions.. big no-go
Hi Crateer, thank you for your comment. That’s fair enough. Having to implement the parallax effect is a convenience I guess with Elementor Pro, vs having to implement it through code.
That is an amazing tutorial, hands down.
Thank you for the kind words Aditya 🙏🙏🙏 I’m happy you enjoyed it!
How can get images like that can you please tell us because I am searching for this but I cannot get it..
Hey 👋! There are not many services that provide these sorts of multiple layered images. I do have a video that goes through exactly how I created the ones you see in this video though if that helps at all. Have a look at my channel, I basically use free tools to generate them.
@@MakingWebsitesEasy Thank You
Sorry I just edited my comment. I meant to say that “there are NOT many services….”. Apologies if there was some confusion there.
Can You Please Tell Some Website Like That..If I Try T.o Create Manually 😅😅...It Will Take Years To Finish For Me😂😂.. That's Why...Please Tell Us Some Website It Will Be Useful For Other..Thank You In Advance
@@MakingWebsitesEasy it's ok Thank You Buddy Create More Designs and Effects in elementor Buddy We All Will Support You... 🙏🙏...All The Best For Your Success...
Good Elementor project, but not what I was after, looks great though, thanks for sharing
Thank you for the comment Tony, I’m glad you appreciated the video nonetheless! Can I ask what you were after, out of curiosity?
I created this for my site and it works fine on desktop but, on mobile its all wanky! How do you make this top/parallax section mobile friendly? I dont care if mobile has the parallax effect or not, I just dont want it to be all jumbled up.
Thanks so much for your comment. Elementor have yet to resolve the responsiveness issue particularly on the mobile version. I’ve been experimenting with other technologies in an attempt to find a way for both desktop and mobile to work seamlessly. Please watch this space as I’m trying to find ways to fix this. 🙏
@@MakingWebsitesEasy Okay. Thanks.
Not a problem!
The demo website doesn't work at all . It's completely broken.
Hi there, thank you for your comment. Can you please describe you browser and the resolution of your screen? That would be much appreciate, thank you 🙏
amazing tutorial and skills
Thank you for the very kind comment! Much appreciated!🙏🙏🙏
exelent tutorial!
Thank you so much! I’m glad you enjoyed it!
I have seen multiple videos over TH-cam but the way you explained , was really great.. Awesome work and happy to find your channel!!! Please continue doing great work. Best of luck!!!
Thank you so much for the kind words! I'm glad you found my channel, and that you enjoyed the video! There are definitely more videos to come, I can guarantee that! 🙏🏼🙏🏼🙏🏼🙏🏼
Just FYI the demo site is not working properly.
Hey there, sorry for the delayed response. Can you please provide me some more info? Are the motion effects not working at all on your end?
Hello sir I want your help in making my website can you please provide any source to contact you
Hi Sachin, apologies for the delayed response. I’ll try my best to help you. You can contact me on my email if you like, contact@makingwebsiteseasy.com. Thanks.
Great Job & Tutorial. Thx for that!
Thank you for your comment! And you’re welcome, I’m glad you found it helpful!
Hello buddy you are truly great, I need your help with my blog website. Can you help me?
Hi Mrinal, thank you for your comment! Of course, I’ll try to help you as best I can. Please let me know what your problem is.
please check your demo website
Is it not displaying properly for you? Can you please describe what you're seeing? Thank you.
@@MakingWebsitesEasy layout is completely breakout
Thank you. Can I please ask what resolution you are viewing the website on?
@@MakingWebsitesEasy give me mail address i will mail you sc
wow.................
Thank you so much!
Taking websites to the next level! 👊🏼🙌🏼👏🏼
Thanks for the comment The Julom Squad! I’m glad you like the video!
cool video man . 👍
Thanks so much Aima! I’m glad you liked it!
Where you get these image. Any souce please suggest
Hi there! Thanks for the question! I custom created the images in the video from images I downloaded from pixabay.com. I outlined the process in this video: th-cam.com/video/E0_ifCCguHE/w-d-xo.html. Please let me know if you have any questions.
using elementor pro or free version?
Thanks for the comment mate! You will need Elementor Pro to achieve this effect. Sorry it wasn’t clear in the video.
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Where can I find photos to make such effects? please help
Hi Vüsal, the images in the video were custom made by myself. I outline my process in this video: th-cam.com/video/E0_ifCCguHE/w-d-xo.html You can possibly get similar images from pexels.com or pixabay.com, which is where I sometimes source my inspiration. Hope that helps!
@@MakingWebsitesEasy thank you very much
Not a problem! You’re very welcome!
Where can I find photos to make such effects? please help
Best tutorial on TH-cam for parallax in elementor!
Thank you so much for the kind words Yair 🙏 I really appreciate that you liked the video!
Greate job
Thank you for the comment Vüsal! Appreciate the support!
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!
Thanks for your comment Saharsh! Yes the scrolling effect option is only available with Elementor Pro. I’m sorry I wasn’t clear in my video, it’s definitely something I’ll be clarifying in future videos.
@@MakingWebsitesEasy oh okay will buy it then thanks, i though there is some issue with mine thats why.
Bro this is awesome ❤️❤️❤️
Thank you Trilochan! I’m glad you like it! The video showing how I created this is coming!
Subscribed
Thank you so much for subscribing! Hoping to bring new videos soon!
Hi, I just realized I dont have scrolling effect on my motion effect panel, is that exclusive on elementor pro??
Hi Danny, thanks for your comment. Yes, that’s correct, you will need Elementor Pro in order to achieve this effect.
Great! Congratulations!
Thank you for your comment Emiliano! Glad you liked the video 😊
Hi, does it feel lag or take much longer time to load the website ..?
Hi Danny, thank you for your comment! Any lag or lengthening of load times really depends on the size of the images you are using and any plugins or JavaScript code that runs on page load. If you can guarantee that there are no excessive JavaScript code being run as a result of other installed plugins and that your images have appropriate sizes, the performance of the motion effects should be fine.
@@MakingWebsitesEasy thanks mate
Not a problem!
I have followed, Many thanks. _i love u so much ~_ <3 <3 <3
Haha you are very welcome Tien! Thank you for the comment and the follow! Much love to you too!
😊😊😊
😃😃🙏🙏😊😊
to be able to make it work responsively you have to adjust the min height for VH of the hero section for each mode, otherwise, if you just adjust their position(s) while working from one mode to another it will get messed up
Thanks for your comment Dennis! You’re exactly right, each media device would need to be tweaked to adjust the position of each image. My example webpage has already been updated to account for this. Thanks again!
@@MakingWebsitesEasy Yeah, this absolutely requires another video for instruction on responsive design. I've been going mad with a project that looks great at 1920 and then borks the moment you change screen size at all.
Thanks for your comment Britton! Yes I’m trying to perfect a different solution, one that I’m hoping is more responsive in nature than this initial approach. Once I’m happy with the alternative, I’ll upload a video showing how it can be done.
Plzzzzz provide us your image bundle which will be very very helpful for us...
Thanks for your comment Samrat! Yes I will be uploading a video about how I created this and will most definitely include the images I used as well so that you can try to do the same.
Great tutorial, I have used your idea to create www.cleardesign.ch
Thank you for the kind words! Wow I just looked at your website, it is awesome! Well done 👏🏼👏🏼👏🏼 I’m glad my tutorial helped! Keep up the great work!