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

No video

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

Рет қаралды 30,834

Күн бұрын

Grab my free training for web designers: localcreative....
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....
Click here for a FREE trial of Canva Pro: localcreative....
Try out my favorite screen recording tool: localcreative....
// 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....
Circle for Hosting My Online Community: localcreative....
HoneyBook for Client Management (50% Off): localcreative....
Showit for Web Design (Get 1 Month Free): localcreative....
Squarespace for Web Design (Code: PARTNER10) localcreative....
Podia for Selling Digital Products & Courses: localcreative....
Canva for Graphic Design: localcreative....
Planoly for Scheduling Social Posts: localcreative....
Loom for Screen Recording: localcreative....
// MY KZfaq VIDEO SETUP
All the gear I use to make these videos: a.co/9spYRsB
Descript for Video Editing: localcreative....
Ecamm Live for Recording to My Computer: localcreative....
// FOLLOW ALONG
Website: localcreative.co/
Instagram: / localcreative.co
Facebook Page: / localcreativeco
Facebook Group: localcreative.c...
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/w...](uppbeat.io/t/w...)
License code: 7GUDLDHRJYC6QT2C

Пікірлер: 65

@nataliejohnson1287 2 жыл бұрын

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

@LocalCreative 2 жыл бұрын

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!

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

@kelmifwebmaster 2 жыл бұрын

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 2 жыл бұрын

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

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

@hhdesignstudio108 10 ай бұрын

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

@LocalCreative 7 ай бұрын

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

@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

@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 4 ай бұрын

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 4 ай бұрын

Great tip!

@EdidiongDavid-su5rl Жыл бұрын

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

@LocalCreative Жыл бұрын

Thanks, will do!

@monikabrian Жыл бұрын

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

@LocalCreative Жыл бұрын

You're very welcome! Glad you enjoyed it!

@jessicacroll5774 2 жыл бұрын

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!

@hollybecker5975 Жыл бұрын

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

@LocalCreative Жыл бұрын

So glad to hear it! :D

@havenwords 11 ай бұрын

Super helpful! Thank you!

@LocalCreative 10 ай бұрын

So glad! You're welcome :)

@EdwinBrito Жыл бұрын

Great video, thanks for sharing 😊

@LocalCreative Жыл бұрын

Thank you for leaving a kind comment!

@intercommradio7372 2 ай бұрын

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

@LocalCreative 2 ай бұрын

Glad you found it helpful :)

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

@mridhu21 2 жыл бұрын

Incredibly helpful! Thank you :)

@LocalCreative Жыл бұрын

Thanks for commenting! I appreciate the feedback!

@hussainsheikhani5594 3 ай бұрын

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

@nitinepc Жыл бұрын

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

@LocalCreative Жыл бұрын

Thanks!! :D Appreciate it!

@inderpreetsingh8585 Жыл бұрын

You are amazing

@LocalCreative Жыл бұрын

Hehe thank you!!

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

@kaycampbell364 2 жыл бұрын

God bless you

@LocalCreative Жыл бұрын

Thanks!

@SusanneGeert 10 ай бұрын

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 7 ай бұрын

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

@user-ib8du1tq3v Жыл бұрын

You re amzaing

@LocalCreative Жыл бұрын

Thanks!

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

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

@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 2 жыл бұрын

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 2 жыл бұрын

@@LocalCreative thank you!

@kaycampbell364 2 жыл бұрын

Do a how to make n sell show it template please

@LocalCreative 2 жыл бұрын

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

@Leatricethelyricist 2 жыл бұрын

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 2 жыл бұрын

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

@Leatricethelyricist 2 жыл бұрын

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