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

[@nataliejohnson1287]

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

[@LocalCreative]

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]

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]

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

[@ConorBailey]

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

[@kelmifwebmaster]

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]

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

[@mikolots]

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

[@LocalCreative]

Glad it was helpful! Thanks for watching!

[@hhdesignstudio108]

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

[@LocalCreative]

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

[@annawest9574]

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]

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

[@seeworthyconsulting]

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!

[@LocalCreative]

Great tip!

[@cycle9241]

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]

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

[@jessicacroll5774]

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

[@LocalCreative]

Glad to hear it worked well for you!

[@EdidiongDavid-su5rl]

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

[@LocalCreative]

Thanks, will do!

[@hussainsheikhani5594]

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

[@LocalCreative]

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

[@monikabrian]

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

[@LocalCreative]

You're very welcome! Glad you enjoyed it!

[@hollybecker5975]

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

[@LocalCreative]

So glad to hear it! :D

[@havenwords]

Super helpful! Thank you!

[@LocalCreative]

So glad! You're welcome :)

[@EdwinBrito]

Great video, thanks for sharing 😊

[@LocalCreative]

Thank you for leaving a kind comment!

[@pippyandlily]

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]

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.

[@mridhu21]

Incredibly helpful! Thank you :)

[@LocalCreative]

Thanks for commenting! I appreciate the feedback!

[@lydiawilliamskeller1193]

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

[@LocalCreative]

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]

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]

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

[@jenetsyamaris]

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]

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]

@@LocalCreative thank you!

[@hollybecker5975]

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

[@LocalCreative]

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

[@intercommradio7372]

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

[@LocalCreative]

Glad you found it helpful :)

[@minliu3773]

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]

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!

[@nitinepc]

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

[@LocalCreative]

Thanks!! :D Appreciate it!

[@Leatricethelyricist]

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]

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

[@Leatricethelyricist]

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

[@kaycampbell364]

Do a how to make n sell show it template please

[@LocalCreative]

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

[@inderpreetsingh8585]

You are amazing

[@LocalCreative]

Hehe thank you!!

[@numan1837]

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

[@LocalCreative]

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

[@numan1837]

@@LocalCreative thank you 😊

[@smz1311]

Go full page

[@LocalCreative]

Love that tool!

[@kaycampbell364]

God bless you

[@LocalCreative]

Thanks!

[@YitangCui]

You re amzaing

[@LocalCreative]

Thanks!

[@fundifferent1]

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

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