How to Create a Scrolling Website Mockup for Your Web Design Portfolio (Using Canva for Free)
HTML-код
- Опубликовано: 26 июл 2024
- Grab my free training for web designers: localcreative.co/designers
Creating a scrolling website mockup for your web design portfolio is a quick and easy way to spice up your social media and catch your ideal client’s eye. Plus, with Canva, you can do it for free!
Here’s how to design your own mockups in just three steps!
Read this full blog post and get all the details about this video here:
localcreative.co/blog/scrolli...
Click here for a FREE trial of Canva Pro: localcreative.co/canva
Try out my favorite screen recording tool: localcreative.co/loom
// CHAPTERS
00:00 Showing Off Your Work
00:52 What Tools Do We Need?
01:14 Getting Started in Canva
01:58 How to Take A Full Webpage Screenshot
04:28 Adding Your Screenshot to Canva
08:41 Adding Curved Text in Canva
11:14 Create a Video/Gif Website Mockup
12:52 My Favorite Screen Recording Tool
14:44 Creating Your Scrolling Gif in Canva
19:40 Create a Web Design Mockup from a Screenshot
21:03 Best Practices
// FAVORITE TOOLS
ConvertKit for Email Marketing: localcreative.co/convertkit
Circle for Hosting My Online Community: localcreative.co/circle
HoneyBook for Client Management (50% Off): localcreative.co/honeybook
Showit for Web Design (Get 1 Month Free): localcreative.co/showit
Squarespace for Web Design (Code: PARTNER10) localcreative.co/squarespace
Podia for Selling Digital Products & Courses: localcreative.co/podia
Canva for Graphic Design: localcreative.co/canva
Planoly for Scheduling Social Posts: localcreative.co/planoly
Loom for Screen Recording: localcreative.co/loom
// MY RUclips VIDEO SETUP
All the gear I use to make these videos: a.co/9spYRsB
Descript for Video Editing: localcreative.co/edit
Ecamm Live for Recording to My Computer: localcreative.co/ecamm
// FOLLOW ALONG
Website: localcreative.co/
Instagram: / localcreative.co
Facebook Page: / localcreativeco
Facebook Group: localcreative.co/group
Clubhouse: @galenmoon
I may receive a small commission if you sign up for any of these tools/apps using the links here, but I only share because I personally use and highly recommend these products.
// SHOP OUR COURSES AND WORKSHOPS
bit.ly/3s5jKEv
Music from Uppbeat (free for Creators!):
[uppbeat.io/t/walz/name](uppbeat.io/t/walz/name)
License code: 7GUDLDHRJYC6QT2C 
Наука
I've been looking for this knowledge for weeks with no luck. Thank you so much for sharing this!
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!
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.
You're very welcome! Thanks for taking the time to let me know :D
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!
You are so welcome! Glad you found it helpful :) It's always fun to find creative ways to share your work.
I searched for this after seeing the scrolling mockup on another portfolio and found this! Very helpful and nicely presented!
Glad it was helpful! Thanks for watching!
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! 😀👍
You're so welcome! Glad you found it helpful.
Super helpful, no holds barred.
Great stuff! Keep it going.
Thanks, will do!
Love this! Please more of these for web designers on how to showcase on our own websites! thank you so much!!!
Great idea! Thanks for sharing. I will add this to my list.
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🤦♀
Hahaha now you know! Glad you found it helpful :D
This is a great and very useful video. Thank you!
You're very welcome! Glad you enjoyed it!
This is so cool! I love this idea for my website.
So glad to hear it! :D
Incredibly helpful! Thank you :)
Thanks for commenting! I appreciate the feedback!
Super helpful! Thank you!
So glad! You're welcome :)
Great video, thanks for sharing 😊
Thank you for leaving a kind comment!
Thank you for this video. I tried several chrome extensions before finding this video. Your solution worked well for me :)
Glad to hear it worked well for you!
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 :(
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!
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!
Great tip!
👏👏👏👏 YAY - no more second guessing lol thank you.
Glad you found it helpful :)
You are amazing
Hehe thank you!!
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!
while scrolling there is a mouse cursor
how to remove that as well?
You are absolutely A*W*E*S*O*M*E..!!👏🏻
Thanks!! :D Appreciate it!
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?👀
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!
@@LocalCreative thank you!
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
You could make it any size. :) I just like the square for ease of use.
Do a how to make n sell show it template please
Great idea! I'll add that one to my list :)
God bless you
Thanks!
Do you have a solution that will also capture the animations in the web design?
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.
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...
You're so welcome! Glad you found it helpful. Good luck with your ad. :)
@@LocalCreative do u want to see the ad...tell me what you think
Is the Loom recording a mp4? I can't seem to upload my recording to Canva
Yes! Are you on a Canva free or pro plan? Your video may be too long if you're having issues. Hope that helps!
You re amzaing
Thanks!
How do I do this on a normal website without WordPress ?
You can do this on any website as long as you can upload gifs as images. You just need canva!
@@LocalCreative thank you 😊
Go full page
Love that tool!
Why does EVERY result for "how to create a mockup" show you how to PRESENT your mockups instead. Is it for clickbait? 👎👎
Thanks for the feedback. If you watch the entire video, I show you how I capture the image and create a mockup in Canva.