How to Make a Parallax Website (2021) - Amazing!

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 พ.ค. 2024
  • 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 website builder to generate stunning parallax scrolling effects that will blow your mind! We also provide a link below to the images we created in the video, so that you can follow along as well and see just how easy it is.
    Web Hosting: makingwebsiteseasy.com/host
    Elementor: makingwebsiteseasy.com/elementor
    Astra: makingwebsiteseasy.com/astra
    Demo: makingwebsiteseasy.com/parallax
    Download images: makingwebsiteseasy.com/images
    Create a website: makingwebsiteseasy.com/create...
    Video timestamps:
    00:00 Introduction
    01:43 Elementor intro
    02:30 Start of tutorial
    02:58 Add sky image
    03:14 Add sun image
    03:54 Add mountain
    04:26 Absolute positioning
    04:50 Navigator
    05:17 Add valleys
    06:45 Add birds image
    07:40 Add filler image
    08:40 Add PARALLAX effects!
    12:58 Adjust image positions
    14:57 Finished product
    15:23 Hosting
    17:14 WordPress & Elementor
    17:53 Elementor Pro
    18:44 Elementor Pro license
    19:05 Start using Elementor
    Other Useful Parallax Videos
    How To Make a One Page Parallax Website:
    • How To Make a One Page...
    How To Create a Parallax Image Using Free Images:
    • How to Create a Parall...
    FOLLOW US
    FB Group: / makingwebsiteseasy
    Facebook: / makingwebsiteseasy
    Instagram: / makingwebsiteseasy
    Music & Sounds
    www.bensound.com
    InspectorJ (www.jshaw.co.uk) of Freesound.org
    JohnsonBrandEditing of Freesound.org
    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!
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 264

  • @edduwelling
    @edduwelling 3 ปีที่แล้ว +1

    Great tutorial! Thank you!!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks so much for your comment! I’m glad you enjoyed the tutorial. You’re very welcome!

  • @yairbahena1188
    @yairbahena1188 3 ปีที่แล้ว +1

    Best tutorial on TH-cam for parallax in elementor!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you so much for the kind words Yair 🙏 I really appreciate that you liked the video!

  • @bySterling
    @bySterling ปีที่แล้ว

    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

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  ปีที่แล้ว

      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!

  • @Childfulness
    @Childfulness 2 ปีที่แล้ว

    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!!!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว

      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! 🙏🏼🙏🏼🙏🏼🙏🏼

  • @zgear89
    @zgear89 2 ปีที่แล้ว

    That is an amazing tutorial, hands down.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว

      Thank you for the kind words Aditya 🙏🙏🙏 I’m happy you enjoyed it!

  • @emilianofernandes3545
    @emilianofernandes3545 3 ปีที่แล้ว

    Great! Congratulations!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you for your comment Emiliano! Glad you liked the video 😊

  • @separatetraveler8226
    @separatetraveler8226 4 ปีที่แล้ว

    Just Amazing.

  • @logicaloffensive1050
    @logicaloffensive1050 3 ปีที่แล้ว

    Hats Off Sir, excellent video tutorial. You deserve more subscribers.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Awesome, thank you very much! Glad you liked the video. Your support is very much appreciated!

  • @MAMBO-Stablecoins
    @MAMBO-Stablecoins 2 ปีที่แล้ว

    amazing tutorial and skills

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว

      Thank you for the very kind comment! Much appreciated!🙏🙏🙏

  • @mambocreator204
    @mambocreator204 2 ปีที่แล้ว

    exelent tutorial!

  • @tiennhat1089
    @tiennhat1089 3 ปีที่แล้ว

    I have followed, Many thanks.
    _i love u so much ~_

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Haha you are very welcome Tien! Thank you for the comment and the follow! Much love to you too!

    • @tiennhat1089
      @tiennhat1089 3 ปีที่แล้ว

      😊😊😊

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      😃😃🙏🙏😊😊

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Greate job

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you for the comment Vüsal! Appreciate the support!

  • @VishalSharma-ir1nn
    @VishalSharma-ir1nn 3 ปีที่แล้ว +6

    Elementor team should learn something from you. Like how u provided your demo images for practice

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks so much mate, I really appreciate that 🙏🙏

  • @tonyxavier3567
    @tonyxavier3567 2 ปีที่แล้ว

    Good Elementor project, but not what I was after, looks great though, thanks for sharing

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว

      Thank you for the comment Tony, I’m glad you appreciated the video nonetheless! Can I ask what you were after, out of curiosity?

  • @abdoelkbeer9667
    @abdoelkbeer9667 3 ปีที่แล้ว +1

    Great :D

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thank you so much! I'm glad you liked the video!

  • @Merchantshoard
    @Merchantshoard 3 ปีที่แล้ว

    I Contacted Making websites easy for support on a parallax on my home page, words can't describe how much this man helped me out right before our start ups launch date too! The man's not only got a heart of gold and great standards, he's also a wizz kid with websites make sure you get in touch! Don't struggle like I did! Good rate. Good job. Great company!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you so much for your comment, very kind of you! I'm just happy to have helped you just before the launch of your startup, which gives me great satisfaction. All the best to you mate, keep striving and never give up!

  • @dennisgutierrez9982
    @dennisgutierrez9982 3 ปีที่แล้ว +1

    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

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      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!

    • @brittonkimler2229
      @brittonkimler2229 2 ปีที่แล้ว

      @@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.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว

      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.

  • @entertainmentdeliveredhere
    @entertainmentdeliveredhere 3 ปีที่แล้ว

    Subscribed

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thank you so much for subscribing! Hoping to bring new videos soon!

  • @Alex80sNeonDreamLemoing
    @Alex80sNeonDreamLemoing 4 ปีที่แล้ว

    Thanks for the video! is there a way to fix the responsiveness for multiple displays? my elements all over the place depending on the size of the desktop/tablet :-(

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว +2

      Thanks Alex! With regards to responsiveness, I’m actually in contact with the developers from Elementor to look into the issue of elements going all over the place, as I’ve noticed this too.
      Sometimes I’ve seen that resizing the browser window on desktop fixes things, however this obviously isn’t possible with mobile devices. This is something Elementor are aware of and I’m sure they have a plan to address it.

    • @Alex80sNeonDreamLemoing
      @Alex80sNeonDreamLemoing 4 ปีที่แล้ว +1

      @@MakingWebsitesEasy I ended up using a background and background overlay on the website. Much easier to deal with on mobile and tablet and it still somewhat moves around if you know what I mean.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว

      Thanks for the update Alex! I also experimented with using backgrounds and overlays myself. I think perhaps limiting the number of layers to 3 for the moment would result in a better outcome, until Elementor are able to resolve the issues.

    • @martindemanable
      @martindemanable 4 ปีที่แล้ว

      @@MakingWebsitesEasy Thanks again for the link and demo, I viewed your demo on my iPhone 8 and it looks great with parallax. How did you fixed it like this?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว

      Thanks Martin! To achieve this effect, you would have to adjust the custom positioning of all the image elements for tablet and mobile devices to make it responsive. Does that make sense?

  • @dannydanny2288
    @dannydanny2288 3 ปีที่แล้ว

    Hi, I just realized I dont have scrolling effect on my motion effect panel, is that exclusive on elementor pro??

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi Danny, thanks for your comment. Yes, that’s correct, you will need Elementor Pro in order to achieve this effect.

  • @amircohen5039
    @amircohen5039 3 ปีที่แล้ว +1

    The effect is amazing. Thanks for the video. But when I'm trying to view the demo, it doesn't scroll or work anyhow. Does it need to be updated?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi Amir, sorry for the delayed response. Yes you were right, the demo wasn't scrolling for some odd reason. I have fixed it now, so it should be all good. Thank you for bringing it to my attention.

  • @shaunaknandedkar2147
    @shaunaknandedkar2147 3 ปีที่แล้ว

    Hi, good work here! I have a question, I created some layers of my own and followed the steps given, but what happens is when I scroll, all my layers that are behind can be seen underneath the first layer

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you! Hmm is your page accessible at all? I can take a look if you like.

    • @shaunaknandedkar2147
      @shaunaknandedkar2147 3 ปีที่แล้ว

      @@MakingWebsitesEasy sorry, it isn't published yet, though I can send you like a video on your email or something, if that's possible. Thanks

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@shaunaknandedkar2147 not a problem. How about this, grab a video of your page, upload it as a private video on your TH-cam channel, and then post the link as a reply here. Will that work for you?

    • @jens2935
      @jens2935 3 ปีที่แล้ว

      @@MakingWebsitesEasy I have the same problem, any way to fix this? :)

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi @@jens2935 thanks for the comment! Do you have a link to your webpage that's exhibiting the issue? That way, I can have a look and see if I can figure it out. Thanks.

  • @borislavr4291
    @borislavr4291 3 ปีที่แล้ว

    Is there a way to achieve Parallax effect with Elementor Free without going with the PRO version or messing with the source code? I've tried a plugin called "granular control" but it can only be applied to Sections and not Images. Thanks.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for the comment! Currently there is no way to achieve the parallax effect using the free version on its own. I haven’t experimented with that plugin I must say. However, if you can apply it to sections, you could perhaps add background images to multiple sections and set each section to be absolute to achieve the layered effect. This is just a suggestion, and I can’t promise that it will work.

  • @saharshmishra910
    @saharshmishra910 3 ปีที่แล้ว

    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!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      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.

    • @saharshmishra910
      @saharshmishra910 3 ปีที่แล้ว

      @@MakingWebsitesEasy oh okay will buy it then thanks, i though there is some issue with mine thats why.

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @wpexplaind9823
    @wpexplaind9823 3 ปีที่แล้ว

    The demo doesn't scroll. Also will this work on mobile. When you implemented this, did it work seemlessly on mobile. It says right in elementor that "Custom positioning is not considered best practice for responsive web design and should not be used too frequently". I am trying to implement this and it looks fine on desktop, ok on tablet, but I am having difficulty with mobile. I can't seem to get it to line up properly. What do you suggest for getting this to work on mobile?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for the heads up. This was brought to my attention the other day and has now been fixed, so please check out the demo again.
      With regards to getting to work for mobile, yes desktop and tablet should be fine. Mobile however would need to be tweaked a little bit more. I've received a lot of messages regarding how to get mobile parallax working. In response, I'll create a video showing exactly how you can get it working for you. Please look out for it.

  • @VishalSharma-ir1nn
    @VishalSharma-ir1nn 3 ปีที่แล้ว

    Is there any way I can place a text in between Mountain and the text will also hide as moves down the page. Please help thanks.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thanks for you comment Vishal! Yes there’s definitely a way to do that. It’ll be the same as adding another layer, but instead of an image element, you would need to add a text element. Then you can also add motion effects to it so that it appears to move with parallax effects as well. Please let me know if you need more instructions to get it going.

  • @linhngoc1127
    @linhngoc1127 2 ปีที่แล้ว

    nice

  • @aeon-studio
    @aeon-studio 3 ปีที่แล้ว

    Is this possible in Visual Composer or just Elementor?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you for your comment. I believe creating a parallax effect with Visual Composer is possible however I have not personally tried to create the same hero image in Visual Composer, so I can't say for sure.

  • @gabycurillan
    @gabycurillan 3 ปีที่แล้ว

    Hi! thanks for the video! Where can I get more images like that? is there any page? I saw some images in adobe stock, but they are complete photographs, not parts like these :(

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thanks for the comment Gaby! I created the images you see in the video myself, with inspiration from a great game called Firewatch. You can download similar vector images from websites like Pixabay and Freepik, however layered images like the ones I created are very rarely available for free, if any. Are you interested in a video detailing how I created the images at all?

    • @gabycurillan
      @gabycurillan 3 ปีที่แล้ว

      @@MakingWebsitesEasy Yes please! thank you!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Awesome, look out for that video!

    • @nayanbhanushali7740
      @nayanbhanushali7740 3 ปีที่แล้ว

      @@MakingWebsitesEasy yes please make on video

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +2

      @@nayanbhanushali7740 it’s almost done! Halfway through the editing process at the moment. Please look out for it! Thanks.

  • @filmyentity
    @filmyentity 3 ปีที่แล้ว

    How to make that images or is there any website where we can download that type of images or when you will upload that process

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thank you for the message! The video is coming brother, I promise. It is currently in the making and will be my next upload.

  • @warrior7862
    @warrior7862 3 ปีที่แล้ว

    You doing a very good job i appreciate it but i am not sure but its suks for me i am doing exactly what u did but when i add motion effect its look like potato uper section is mixd or hide the second section ...
    Plz make a fresh page for us

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      I appreciate the kind words, thank you! But I'm sorry you weren't able to get the same effect with your website, perhaps I didn't explain it as well as I thought, apologies for that. Are you able to provide me a link to your website so I can take a look?

    • @warrior7862
      @warrior7862 3 ปีที่แล้ว

      @@MakingWebsitesEasy
      Can i contact you ? Fb instagram or twitter ? Plz ?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Sure! You can reach me at fb.com/makingwebsiteseasy

    • @warrior7862
      @warrior7862 3 ปีที่แล้ว

      @@MakingWebsitesEasy thanks i send you a message

  • @GoogleGoogle-dd5dx
    @GoogleGoogle-dd5dx 3 ปีที่แล้ว

    Where you get these image. Any souce please suggest

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      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.

  • @hamidasadi5571
    @hamidasadi5571 3 ปีที่แล้ว

    Hi there
    I do step by step like a tutorial
    but I have a problem
    mountain and birds move with lag
    not smoothly like urs
    can u help me with that?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi Hamid, thanks for your comment! Sometimes this may be due to a number of different factors. For example, were you running anything graphically or CPU intensive on the same computer that you were creating your webpage? Or have you added other content to your webpage, or have you installed lots of plugins, or perhaps the server on which your webpage is hosted may have a high ping. Are you able to provide a link to your webpage so I can have a look?

    • @hamidasadi5571
      @hamidasadi5571 3 ปีที่แล้ว

      Making Websites Easy
      first of all i really thanks for ur replay
      i worked on localhost mamp pro
      on my laptop with this config
      core I5 7th generation
      ram 8
      and one thing is great, your demo work completely and smoothly
      but in my laptop on local host mountain move with bad lag

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@hamidasadi5571 The parallax effect in the video shouldn't be too difficult for modern GPUs to handle though which is a bit bizarre in your case. Particularly using MAMP which should provide a much smoother feel. Are the mountain and birds the only layers to move with lag? How about the other layers?

    • @hamidasadi5571
      @hamidasadi5571 3 ปีที่แล้ว

      @@MakingWebsitesEasy yes, the mountain and birds are problem and move with lag, other layer work clear and good move

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hmm that’s really weird that the others are ok but the mountain and birds are not. Have you tried to do it again from scratch just to see if it happens again? What is the scroll effect direction of the mountain and birds? Is it in the same direction as the other layers?

  • @kubamaral
    @kubamaral 4 หลายเดือนก่อน

    Can you update these links?

  • @rachittripathi2618
    @rachittripathi2618 4 ปีที่แล้ว +1

    From where do you get these images.... I keep looking everywhere but i just dont get it
    please help me from where can i get these kind of images..... Thanks in advance

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว +1

      Hi Rachit, thanks for the question! The images you see were created using an application called Inkscape. I created them myself from a few inspirational sources, mainly from the game called Firewatch.
      You can use the identical images I used in the video, you’ll find them linked in the video description. I’m currently working on a video showing how I created them, so that you can do it yourself as well. So look out for that video.
      If you are after vector images available online or would like inspiration yourself, check out pixabay.com. And search the vector image library, they’re amazing!

    • @rachittripathi2618
      @rachittripathi2618 4 ปีที่แล้ว

      Waiting for your video sir... By the way... Your video explanation technique is superb

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว

      Thank you brother, that means a lot! Yes, please look out for the video in the near future.

    • @rachittripathi2618
      @rachittripathi2618 4 ปีที่แล้ว

      Hi Alex.... Sorry to bother you again... My second section just does not shows up.... Please let me know how can I make it visible..... I tried changing z index to 1 but it still does not help

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว

      Hi Rachit, not a problem, not bothering me at all! Have you published your page? Can you please provide a link so that I can investigate?

  • @mdriadulislam9174
    @mdriadulislam9174 3 ปีที่แล้ว

    using elementor pro or free version?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for the comment mate! You will need Elementor Pro to achieve this effect. Sorry it wasn’t clear in the video.

  • @dannydanny2288
    @dannydanny2288 3 ปีที่แล้ว

    Hi, does it feel lag or take much longer time to load the website ..?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      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.

    • @dannydanny2288
      @dannydanny2288 3 ปีที่แล้ว

      @@MakingWebsitesEasy thanks mate

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Not a problem!

  • @saadnaseer1775
    @saadnaseer1775 3 ปีที่แล้ว

    Nice, love you ❤️😍

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thanks for the comment Hector! Love you too! 😂🤣

  • @zainali-gl2kv
    @zainali-gl2kv 3 ปีที่แล้ว +1

    nice
    #songsuniverse

  • @basleroygaming
    @basleroygaming 3 ปีที่แล้ว

    It is not really working, it looks good on 1080p monitor but not on my 1440p monitor. And I cant set to responsive for different resolutions. Do you have a solution for this? Thanks!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you for your comment! Hmmm I would've thought that it'd scale up since it's the same aspect ratio. Did you set the image size to "Full" for each of the images?

    • @basleroygaming
      @basleroygaming 3 ปีที่แล้ว

      @@MakingWebsitesEasy Yes I did, now I am just making my images wider in photoshop. I dont know if that is the best option

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      I’ll experiment with the 1440p resolution and see how it responds. How did it go with resizing the images? This is probably not the ideal solution though since it defeats the purpose of being responsive.

    • @basleroygaming
      @basleroygaming 3 ปีที่แล้ว +1

      @@MakingWebsitesEasy It works, but if someone has a 4k monitor I think it wont look right😅

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      @@basleroygaming Thanks for the heads up. I'm glad you were still able to figure something out in the meantime. Might still be something that Elementor need to sort out going forward.

  • @battleconflict.
    @battleconflict. 4 ปีที่แล้ว

    How can make these image designs to get a parallax effect ?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว +1

      Hey BattleConflict, great question. I didn't include the process of creating the images in the video because that's another video in itself. I will be uploading a video tutorial in the near future on how I created those images though, so look out for that.

    • @JoeGator23
      @JoeGator23 4 ปีที่แล้ว

      @@MakingWebsitesEasy Great job, man. You've got it going on in the design department- Thanks for the video!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว +1

      @JoeGator23 you are welcome! Thank you for the kind words, I’m glad you enjoyed the video!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Hey guys, just letting you know, my new video outlining how I created the images just dropped! Hope you like it! th-cam.com/video/E0_ifCCguHE/w-d-xo.html

    • @battleconflict.
      @battleconflict. 3 ปีที่แล้ว

      @@MakingWebsitesEasy Awesome will check it def!

  • @sarthakladhwe6460
    @sarthakladhwe6460 3 ปีที่แล้ว

    Wait. You need Elementor Pro for this? Unfortunately, I spent hours creating my own design and I didn't know that I will need Elementor Pro.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Yes you definitely need Elementor Pro to unlock the ability to add Motion Effects. On top of this, it comes with a whole bunch of other useful features not available in the free version. The way I justify the cost is with the fact that the parallax effect can now be easily created without any coding required, plus the bonus of other cool elements too!

    • @sarthakladhwe6460
      @sarthakladhwe6460 3 ปีที่แล้ว

      @@MakingWebsitesEasy That's true! Will consider purchasing it. Great tutorial btw!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@sarthakladhwe6460 Thank you! Very kind of you sir!

    • @national-sportswear
      @national-sportswear 3 ปีที่แล้ว

      I did same thing.... video was very informative... but you left out the most important part at the beginning "You Need PRO" because "SCROLL" effect is not available in free version. I'm with Sarthak... No one wants to put hours of time into creating beautiful content, only to find out it is useless. You need to let your viewers know this important stuff, because not everyone is going to take your content or the easy road. Cheers! Otherwise, for people with pro verison, good video.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks so much for the comment! I agree with you, it was my mistake, apologies for missing out on that detail. I will make sure to mention the fact that Elementor pro is required in future videos. I appreciate the input, and I’m glad you found some positivity from the video regardless 🙏🙏

  • @partikchandra1112
    @partikchandra1112 3 ปีที่แล้ว

    The hero section is becoming messed up when previewing for mobile and tablet

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi Partik, thanks for the comment. Yes, you will have to update the custom positioning both for mobile and tablet to make it responsive. I chose not to include this in my video, however I will make sure I include adding responsiveness to my future videos.

    • @shaolin60
      @shaolin60 3 ปีที่แล้ว

      @@MakingWebsitesEasy Do you know how to change image size related to viewport? You know 2000px for mobile... ^) thanks for tutorial, i thought to use custome html and css before

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for your comment! Do you mean being able to make image sizes responsive? If so, you won’t be able to change the size explicitly with an exact pixel width, however you can affect its width responsively under the style tab using the “width” and “max width” properties. Just make sure you select the mobile icon before making changes. Is this what you’re looking for?

    • @shaolin60
      @shaolin60 3 ปีที่แล้ว

      @@MakingWebsitesEasy I mena that situation when mbile view download image 2000px wide is affect loading time. For this case may be better is to create another section for mobile/tableb with hafl image size like 1024px. Thanks for answer

  • @SIVASHANMUGAVADIVEL
    @SIVASHANMUGAVADIVEL 3 ปีที่แล้ว +1

    Help Me... I have facing a problem , the sun is interacting to the next section how can i fix that problem. If i drag down the sun interacting to the next section of the background image and it is visible to the next section background, if i change the next section of the background also the same problem.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi thanks for the comment! Hmm do you have a link to your webpage that’s exhibiting this behaviour so I can have a look?

    • @roadstories007
      @roadstories007 3 ปีที่แล้ว

      @@MakingWebsitesEasy I have the same issue. Driving me crazy. Going to have to abandon the parallax idea.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@roadstories007 Please don't abandon, let me try to help you. Have you got a link to your page so I can have a look? There's usually an explanation to why you are experiencing that.

    • @roadstories007
      @roadstories007 3 ปีที่แล้ว

      @@MakingWebsitesEasy abr19.com/wp20/home/
      For some reason, the layers continue down lower than the next 2 sections so I had to z-index them to cover up.
      I've continued to work on it and fix a few of my issues. BTW your video is very good and helped me a lot.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@roadstories007 thank you for the kind words, I'm happy that it has helped you.
      With regards to your problem, I believe it may be due to fact that your images are quite short, which only gives you a little room to breathe when adding vertical scroll effects to get the parallax effect happening. If you recreate your images to be taller, it will provide more room for your vertical scroll effect to happen. Does this make sense?

  • @pcgamers200
    @pcgamers200 2 ปีที่แล้ว

    How can get images like that can you please tell us because I am searching for this but I cannot get it..

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว +1

      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.

    • @pcgamers200
      @pcgamers200 2 ปีที่แล้ว

      @@MakingWebsitesEasy Thank You

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว +1

      Sorry I just edited my comment. I meant to say that “there are NOT many services….”. Apologies if there was some confusion there.

    • @pcgamers200
      @pcgamers200 2 ปีที่แล้ว

      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

    • @pcgamers200
      @pcgamers200 2 ปีที่แล้ว

      @@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...

  • @nayanbhanushali7740
    @nayanbhanushali7740 3 ปีที่แล้ว

    how can i create this mages ?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for the comment! Within the next week, I’ll be releasing a video showing how I created the images, so look out for it!

  • @buddyhigh
    @buddyhigh 3 ปีที่แล้ว

    this sound funny but I have recently created a very poor WooCommerce store and want to start over. Can I ask for your help to get to the stage you are at 1:14. I am really struggling to get a blank canvas

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for you comment! Of course I can help! So where are you at right now? I'll try to help you step by step.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      You have to make sure that when you create your page, you need to set the template to "Elementor Canvas" before you hit "Edit with Elementor". Can you confirm that you have done this?

    • @buddyhigh
      @buddyhigh 3 ปีที่แล้ว

      @@MakingWebsitesEasy so this are the steps im taking.
      dashboard
      add page
      elementor canvas
      transparent header.
      I have left the page open and will post and wit for your reply. because if I press edit with elementor it creates a page with header and footer and a section to add widget, template or block

    • @buddyhigh
      @buddyhigh 3 ปีที่แล้ว

      im actually at the point of 19.24 in the video, its then how to get the blank hero is where im having problems

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@buddyhigh I believe the header and footer should only be present if you select "Elementor Full Width" as the template. "Elementor Canvas" should provide a blank slate. What version of Elementor are you using?

  • @mayankgoel8015
    @mayankgoel8015 3 ปีที่แล้ว

    I have followed all the steps but still column is showing padding on left and right

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for the comment! Hmm if you've set zero left/right padding for the column that contains the images as well as setting full width for the section, then I'm not quite sure what's happened. Do you have a link to your website so I can have a quick look?

  • @amphibianverse2195
    @amphibianverse2195 2 ปีที่แล้ว

    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.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว +1

      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. 🙏

    • @amphibianverse2195
      @amphibianverse2195 2 ปีที่แล้ว

      @@MakingWebsitesEasy Okay. Thanks.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  2 ปีที่แล้ว

      Not a problem!

  • @rumanzahid6671
    @rumanzahid6671 3 ปีที่แล้ว

    Sir Meri website k images kisi or k computer m show ni hote plz help me m imgs ksy insert kru Jo sbk computer m show hon

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thank you for your comment. I don’t completely understand what you are trying to say but from the context I am assuming you are wanting to know how to create the images in the video? Is that correct? If so, please look out for a video on this, as I will be releasing one that shows how I created the images.

  • @karthiprem
    @karthiprem 3 ปีที่แล้ว

    When i do it for desktop then view it in my phone it looks messed up

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for the comment Sam! You will have to tweak the position of each layer for both mobile and tablet as well, to make it responsive. You can do this pretty easily within the Elementor editor. Please let me know if you need guidance on where you can start.

    • @karthiprem
      @karthiprem 3 ปีที่แล้ว

      @@MakingWebsitesEasy wow thank you for the instant reply! Will try and let you know ❤ great vid btw

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      @@karthiprem you're welcome. Thank you, I'm glad you enjoyed it! Please do, I'm keen to hear of your results!

    • @karthiprem
      @karthiprem 3 ปีที่แล้ว

      @@MakingWebsitesEasy bruhh! It worked thanks! All i did was positioning all layers in all three devices (desktop, tablet, phone) before adding the motion effects and it works like a charm although the hardest part was editing the layers in photoshop and checking in my site if it works out or not. But now i can work on other stuffs in my sites. Thanks to you!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@karthiprem Fantastic! I love hearing success stories! Well done for getting it to work, you are very welcome!

  • @tothetrees760
    @tothetrees760 3 ปีที่แล้ว

    How good does this site look on Mobile?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Thanks for the comment! It definitely works on mobile, but I think Elementor still have a few things to work on. The parallax effect is still there, but it’s not quite as smooth. Did you take a look on your device?

    • @tothetrees760
      @tothetrees760 3 ปีที่แล้ว

      @@MakingWebsitesEasy took a look think it works awesome. I have been using Elementor for a few months, will show you my version of this. Thankbyou so much for awesome walk through!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      You are very much welcome, glad you liked the video. Yes please, show me what you come up with! Would love to see your end result!

  • @rachittripathi2618
    @rachittripathi2618 3 ปีที่แล้ว

    Hi there... Hope you remember..... There is a website simplychocolate.dk in which there is a background that moves slowly. can you please tell me how it is being done.... I need it urgently.... Thanks in advance

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      Hi Rachit, of course I remember you! Let me take a look at the website and see if I can figure it out. I’ll try to help you as best I can.

    • @rachittripathi2618
      @rachittripathi2618 3 ปีที่แล้ว

      @@MakingWebsitesEasy thank you so much.....I'll wait for your reply

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      I had a look at the website. I believe they are using a jquery library called BlockUI. Perhaps check if there’s a WP plugin you could use

    • @rachittripathi2618
      @rachittripathi2618 3 ปีที่แล้ว

      @@MakingWebsitesEasy Thank you sir.... Thank you so much

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว +1

      You are most welcome! I hope that helps.

  • @mohandsaidsadmi9796
    @mohandsaidsadmi9796 4 ปีที่แล้ว

    You've to demonstrate how to create the first section, need some small details to make things works, tuto not for beginners!

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  4 ปีที่แล้ว +1

      Hi mohand, I felt the creation of the images (which is what I’m assuming you are referring to) was out of the scope of this video, but I included them with the link in the description.
      However, I will be covering exactly how I created them in a future video, so please look out for that.

  • @tothetrees760
    @tothetrees760 3 ปีที่แล้ว

    How do you start with a blank page?

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Thanks for your comment! Could you please expand on what you mean by blank page? Doesn’t the video start off with a blank page? Sorry if I’ve misunderstood your question.

    • @tothetrees760
      @tothetrees760 3 ปีที่แล้ว

      @@MakingWebsitesEasy No matter what I do unless I use blank slate I cannot delete the default Word Press Menu and title including # ie: #Elementor68. After deleting clicking newpage immediately comes back. Also when I click new page the page is generated imediately without the in dashboard ability to edit? Sorry to bother you. I thought I had a great idea for a parallax site but can't seem to get past the first step.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@tothetrees760 It is never a bother, I'm always happy to help. In saying that though, I think I may understand your problem now, but not entirely.
      Are you selecting "Elementor Canvas" as the template when you create the new page? That is, under "Page Attributes" under the Document tab on the right hand side.
      Can you give me a link to a page that you are seeing this issue on?

    • @tothetrees760
      @tothetrees760 3 ปีที่แล้ว

      @@MakingWebsitesEasy
      I sort of gave up hope and thought I would try different template but same thing happens always have a default Home ans Menu even if I follow steps to delete ahead of time, no matter what theme or plugin I use. I purchased Elemntor for the year etc.

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      @@tothetrees760 If you are creating a page using the Elementor Canvas template, your page should not display a menu or a title link. Can you confirm your selected template for the new page?

  • @ageshero
    @ageshero 3 ปีที่แล้ว

    I looked at the demo site, it doesnt look as cool, is it just me? lol

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Hi Jean-Luc, thanks for your comment! Hmm sorry to hear that. Can you describe how it looks different for you? Perhaps I can attempt to fix it. Thank you 🙏

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

  • @realchad9040
    @realchad9040 3 ปีที่แล้ว

    Where can I find photos to make such effects? please help

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      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!

    • @realchad9040
      @realchad9040 3 ปีที่แล้ว

      @@MakingWebsitesEasy thank you very much

    • @MakingWebsitesEasy
      @MakingWebsitesEasy  3 ปีที่แล้ว

      Not a problem! You’re very welcome!