How to Create a Scrolling Website Mockup for Your Web Design Portfolio (Using Canva for Free)

Поділитися
Вставка
  • Опубліковано 2 лют 2025

КОМЕНТАРІ • 68

  • @nataliejohnson1287
    @nataliejohnson1287 2 роки тому +8

    I've been looking for this knowledge for weeks with no luck. Thank you so much for sharing this!

    • @LocalCreative
      @LocalCreative  2 роки тому +1

      You're very welcome :) Thanks for letting me know! I plan to make another version of this video with how to do this in photoshop for screens at different angles. Make sure to subscribe to stay tuned!

  • @kaytaylermarketing
    @kaytaylermarketing Рік тому +4

    YOU'RE TELLING ME I'VE BEEN CROPPING AND PASTING COUNTLESS SCREENSHOTS AND I COULD HAVE DONE IT IN ONE BUTTON CLICK THIS WHOLE TIME?!! You're a lifesaver and I feel silly🤦‍♀

    • @LocalCreative
      @LocalCreative  Рік тому

      Hahaha now you know! Glad you found it helpful :D

  • @kelmifwebmaster
    @kelmifwebmaster 3 роки тому +4

    Thank you so much for making this video. This is so helpful. I had seen this on other web designers' sites and always wondered how to do it. Now I know. As a Starting agency, I'm always looking for creative ways to show my work and this will really help our content pop! Again thank you and blessings!

    • @LocalCreative
      @LocalCreative  2 роки тому

      You are so welcome! Glad you found it helpful :) It's always fun to find creative ways to share your work.

  • @mikolots
    @mikolots 2 роки тому +2

    I searched for this after seeing the scrolling mockup on another portfolio and found this! Very helpful and nicely presented!

    • @LocalCreative
      @LocalCreative  2 роки тому +1

      Glad it was helpful! Thanks for watching!

  • @ConorBailey
    @ConorBailey 3 місяці тому

    Great video! Thanks for sharing these tips! Using these techniques for an agency website i'm building.

  • @hhdesignstudio108
    @hhdesignstudio108 Рік тому

    Love this! Please more of these for web designers on how to showcase on our own websites! thank you so much!!!

    • @LocalCreative
      @LocalCreative  Рік тому

      Great idea! Thanks for sharing. I will add this to my list.

  • @annawest9574
    @annawest9574 2 роки тому +1

    Thank you for this video. I've been looking and looking for something like this and I'm glad I finally found your vid! Very helpful and appreciated.

    • @LocalCreative
      @LocalCreative  2 роки тому

      You're very welcome! Thanks for taking the time to let me know :D

  • @cycle9241
    @cycle9241 2 роки тому +2

    Bravo! I love this. What a great and creative way to show off your work for your site visitors. I'll definitely be putting this to great use. Thank you! 😀👍

    • @LocalCreative
      @LocalCreative  Рік тому

      You're so welcome! Glad you found it helpful.

  • @hussainsheikhani5594
    @hussainsheikhani5594 9 місяців тому +1

    while scrolling there is a mouse cursor
    how to remove that as well?

    • @LocalCreative
      @LocalCreative  3 місяці тому

      You just want to move your mouse out of the way while recording. You can scroll with your keyboard instead if you prefer.

  • @EdidiongDavid-su5rl
    @EdidiongDavid-su5rl 2 роки тому

    Super helpful, no holds barred.
    Great stuff! Keep it going.

  • @jessicacroll5774
    @jessicacroll5774 2 роки тому

    Thank you for this video. I tried several chrome extensions before finding this video. Your solution worked well for me :)

  • @monikabrian
    @monikabrian 2 роки тому +1

    This is a great and very useful video. Thank you!

    • @LocalCreative
      @LocalCreative  2 роки тому

      You're very welcome! Glad you enjoyed it!

  • @pippyandlily
    @pippyandlily 6 місяців тому

    Thank you for this video. Question, when I recorded my website page, I couldn't download on Loom as it wasn't an option. I don't want to subscribe for $180 annually. Anyway around this to download the video? thanks!

    • @LocalCreative
      @LocalCreative  3 місяці тому

      I'm not 100% sure. Loom may have changed their pricing plans. I did find that sometimes I had to wait a few minutes to download a newly recorded video.

  • @seeworthyconsulting
    @seeworthyconsulting 10 місяців тому

    Thanks so much for this! Adding a tip to wait a few seconds after the countdown on Loom before you start scrolling. There seems to be a bit of a delay. It's easy to trim the video later!

  • @hollybecker5975
    @hollybecker5975 2 роки тому

    This is so cool! I love this idea for my website.

  • @Livy_fan
    @Livy_fan Рік тому

    Super helpful! Thank you!

  • @EdwinBrito
    @EdwinBrito Рік тому

    Great video, thanks for sharing 😊

  • @jenetsyamaris
    @jenetsyamaris 2 роки тому

    Thank you for this video! I currently don’t have a computer/laptop and was wondering if you know of any alternatives to get desktop view on a tablet or mobile?👀

    • @LocalCreative
      @LocalCreative  2 роки тому +1

      If you have an Apple phone or ipad I know you can record your screen in the settings. You can go to "Settings" and then "Control Center", then tap the "Add" button next to Screen Recording. Hope that helps!

    • @jenetsyamaris
      @jenetsyamaris 2 роки тому

      @@LocalCreative thank you!

  • @lydiawilliamskeller1193
    @lydiawilliamskeller1193 2 роки тому

    Do you have a solution that will also capture the animations in the web design?

    • @LocalCreative
      @LocalCreative  2 роки тому

      If you record with loom instead of doing a full page screenshot that works great! I also have another technique for this that I really like. I'll put that on my list of videos to create.

  • @SusanneGeert
    @SusanneGeert Рік тому

    Such a great and helpful tutorial 👌I have a question: Why do you use the 1080x1080 format for Instagram for this? Could you just as well use the 1350x1080 and just make sure that the laptop part is within the 1080 square format? Thanks in advance ;-) Best from Susanne

    • @LocalCreative
      @LocalCreative  Рік тому

      You could make it any size. :) I just like the square for ease of use.

  • @hollybecker5975
    @hollybecker5975 2 роки тому

    Is the Loom recording a mp4? I can't seem to upload my recording to Canva

    • @LocalCreative
      @LocalCreative  2 роки тому

      Yes! Are you on a Canva free or pro plan? Your video may be too long if you're having issues. Hope that helps!

  • @mridhu21
    @mridhu21 2 роки тому

    Incredibly helpful! Thank you :)

    • @LocalCreative
      @LocalCreative  2 роки тому +1

      Thanks for commenting! I appreciate the feedback!

  • @minliu3773
    @minliu3773 2 роки тому

    Thanks for the tutorial, its very helpful.
    May I know where do you get the nice laptop mock-up element in your first picture? I don’t find it in Canva Pro :(

    • @LocalCreative
      @LocalCreative  2 роки тому

      I actually don't remember where I got that one specifically, but you can find lots of mockup options on Creative Market. Hope that helps!

  • @intercommradio7372
    @intercommradio7372 8 місяців тому

    👏👏👏👏 YAY - no more second guessing lol thank you.

  • @numan1837
    @numan1837 2 роки тому

    How do I do this on a normal website without WordPress ?

    • @LocalCreative
      @LocalCreative  2 роки тому +1

      You can do this on any website as long as you can upload gifs as images. You just need canva!

    • @numan1837
      @numan1837 2 роки тому

      @@LocalCreative thank you 😊

  • @nitinepc
    @nitinepc Рік тому

    You are absolutely A*W*E*S*O*M*E..!!👏🏻

  • @kaycampbell364
    @kaycampbell364 2 роки тому

    Do a how to make n sell show it template please

    • @LocalCreative
      @LocalCreative  2 роки тому

      Great idea! I'll add that one to my list :)

  • @inderpreetsingh8585
    @inderpreetsingh8585 Рік тому

    You are amazing

  • @Leatricethelyricist
    @Leatricethelyricist 3 роки тому

    i have to create an ad. i just shot some footage, now i have i add some still images, voice over, and more. I'm teaching my self how to do commercials. i was wondering how i was going to add to ad. and now i see, i can capture our website and while my daughter is doing the voiceover, i can have throlls capture thing scroll. thank you....i don't have the language for it yet but i will soon. thanks again...

    • @LocalCreative
      @LocalCreative  3 роки тому +1

      You're so welcome! Glad you found it helpful. Good luck with your ad. :)

    • @Leatricethelyricist
      @Leatricethelyricist 3 роки тому

      @@LocalCreative do u want to see the ad...tell me what you think

  • @smz1311
    @smz1311 2 роки тому

    Go full page

  • @kaycampbell364
    @kaycampbell364 2 роки тому +1

    God bless you

  • @YitangCui
    @YitangCui Рік тому

    You re amzaing

  • @fundifferent1
    @fundifferent1 Рік тому

    Why does EVERY result for "how to create a mockup" show you how to PRESENT your mockups instead. Is it for clickbait? 👎👎

    • @LocalCreative
      @LocalCreative  Рік тому

      Thanks for the feedback. If you watch the entire video, I show you how I capture the image and create a mockup in Canva.