How to Create a Scrolling Website Mockup Using Canva | Make a Video Website Mockup for Any Device!
Vložit
- čas přidán 5. 09. 2024
- Want to learn how to create a scrolling website mockup for any device? (desktop, laptop, phone, etc) -- In this video, I'm walking you through the step-by-step process of creating a video website mockup using Canva.
No fancy software or Photoshop is needed for this one!
Scrolling website mockups are perfect for displaying your web design projects & showcasing your portfolio in a way that's quick, easy, AND eye-catching. PLUS you can also use these GIFs or videos in your emails and on your social media accounts to spice things up!
🎉 A total win-win 🎉
RESOURCES MENTIONED:
➡️ Canva: www.mariahmaga...
➡️ Unsplash: unsplash.com/
➡️ Styled Stock Society: www.styledstoc...
➡️ Loom Chrome Extension: chrome.google....
-------------------------------------------
-------------------------------------------
👍 Give this video a thumbs up & don’t forget to subscribe to the channel:
www.youtube.co...
🔥 🔍 Download the FREE Roadmap to Successful SEO: www.mariahmaga...
LET'S CONNECT ON INSTAGRAM 🎉 / mariahmagazineco
► ABOUT ME: I'm Mariah. I help online business owners mix strategy + energetics so their visibility & marketing strategies are practical, sustainable, AND successful. On this channel, I create videos around DIY SEO and digital marketing, along with tech tutorials for websites and running an online business.
Find out more at www.mariahmaga...
⚡️✨ Thanks so much for watching ✨⚡️
(( Affiliate Disclaimer: This video and/or description may include affiliate links, in which if you purchase from a link, I may receive a small commission at no additional cost to you. Thanks for supporting my channel! ))
// MY FAVE TOOLS & RESOURCES 💖 //
Squarespace: www.mariahmaga...
GoLive Creative Squarespace Templates -- (Use Code MARIAHMAGAZINE for 10% off): www.mariahmaga...
TubeBuddy: www.mariahmaga...
Canva Pro: www.mariahmaga...
Dubsado: www.mariahmaga...
Kajabi: www.mariahmaga...
Tailwind for Pinterest: www.mariahmaga...
Keywords Everywhere Chrome Extension (SEO): www.mariahmaga...
SEMRush (SEO): www.mariahmaga...
Convertkit: www.mariahmaga...
The BEST social media sharing plugin for WP: www.mariahmaga...
// FILMING SETUP & EQUIPMENT 🎥 //
Webcam: amzn.to/3DP03Wt
Microphone: amzn.to/3zj2Ir0
Microphone Arm Stand: amzn.to/3oE4lL4
Standing Desk Converter: amzn.to/3vnnpB6
// DIGITAL PRODUCTS & DOWNLOADS⚡️ //
👉 DIY SEO Course: www.mariahmaga...
👉 Website Traffic Building Bundle: www.mariahmaga...
👉 Quick & Effective SEO Keyword Research eBook - (USE CODE “SEOLOVE10” for $10 OFF): www.mariahmaga...
👉 Crafting Successful SEO Titles & Meta Descriptions - (USE CODE “SEOLOVE10” for $10 OFF): www.mariahmaga...
// WAYS TO WORK WITH ME //
🔥 Let’s improve your SEO: www.mariahmaga...
🧲 Marketing Breakthrough Session: www.mariahmaga...
Are you loving these Canva tutorials? Let me know below so I can create more for you!
Thank you so much for this! I found a Chrome extension called Scroll Capture that you can set up to record an auto scroll of any site. It's super smooth and you can adjust the speed of the scroll.
Ooooh I haven’t heard of that. I’m gonna have to check it out. Thanks for the recommendation 💖
Cool, thanks for the tip, going to check it out now🙂
Mariah...This tutorial was excellent! Was struggling to decide the best way to show a before and after on a site redesign and the old homepage was LONG...creating a video to place inside a mockup and allowing it to scroll through was the perfect way to get the gist of the old site in a compact space. Thank you!
Yesssss! 🙌 so glad it was helpful
This was excellent for my current project and for a future design mockup. Thorough and easy to follow.
Awesome, I love to hear it! Glad it was helpful ✨
This was a very helpful video! I appreciate you taking the time to explain the small nuances that are normally shared in tutorials. Just subscribed!
Aw yay, thank you so much for that feedback. I appreciate it! Thanks for subscribing ✨🥰
This is so perfect, I wanted to figure out how to promote my website in the middle of my CZcams videos.
With this video, I can make a couple of small 30 second clips to add to my videos promoting my website.
I’m going to check out the rest of your CZcams channel to see if there are more examples!
Thank you so much for putting out this amazing video
Aw thank you, I’m so glad it was helpful. And yes using for that is a GREAT idea!
I was searching for something like this. Thank you so much for your video. Really appreciate it.
Yay! So glad it was helpful 🙌💃
This is great, I needed to learn this! Also gave me a great idea to show ase other features on my platform
Yay, love to hear it! ✨
thanks that was a great tutorial!
Thank you!
Helpful
Yesssss love to hear it!
Thank you, so much!!
Please keep adding more videos, your video was very helpful!
Aw thank you so much Lizabeth! That feedback just made my night 🥰
Mariah, love the video, and very helpful. Even so, I have Canva Pro, but your video looks like the old version of the software. At the same time, I did use the loom with a minor issue finding the controls for a few things. Thank you, Shane, of Simplified Web Designs.
Awesome, so glad it was helpful & you got it figured out! And yeah I’m not surprised that things may have changed since I recorded & posted this. Technology and software changes so often, which is cool, and always annoying for tutorial creation on my end lol
Very Good , Very useful for me. Thank You
Love to hear it! 🙌✨💃
This was really great thank you
Whoop whooop, so glad it was helpful! ✨
Thanks very much Mrs ❤❤❤
You're welcome 😊
Excellent. Thank you!
You’re welcome!
This is so helpful and easy to follow! Thank you
Yay, I’m so glad. Thank you for your kind comment!
EXCELLENT,,, THANK YOU! 🌹🌹🌹
Awesome, I’m glad it was helpful! ☺️
Thanks a lot!
You’re welcome!
Thanks a lot.
You're welcome!
Lovely
Glad it was helpful! ✨
Thanks!!!!!!❤
So glad it was helpful. Thank you for your kind comment ✨
Thank you so much 🥰
You’re welcome 😊
I have watched two hours' worth of content on CZcams and your video is great, you answered my question plus added more bonus material. Thank you so much. gave you a subscribe and like. In canva there are video's templates with a green screen as the screen in the lab top. Is the green screen and added feature or just to let us know to replace the screen? I could not find anything online about this. Thanks
Aw yay, I’m so glad the video was helpful 🥰 from what I’m understanding of your question, I’m pretty sure the “green screen” type thing is just to show you to put an image or video in there. Off the top of my head, I think they’re referred to as frames, in which you can swap out whatever is IN the frame. Hopefully that helps!
I want to learn mock up for clothing website
I haven’t done those before! I’m not sure if Canva has templates for them or not. Might be able to find a generator via Google search!
How to zoom on the video while typing on the form?
I think you’ll need some kind of extra video editing tool for that.
What should be the browser shape or resolution, so that video can perfectly fit inside the mockup?
Lol great question. Haven’t quite figured that out. I just test and tweak but I’m sure you could figure out the ratio of the mock-up and use that accordingly
For this, would we require paid plan of canva?
Off the top of my head, I think this is possible with a free account but I could be wrong.
Mariah... do you have a better way to change the size of the video to fit a mobile image to load video on it?
The only thing that comes to mind is recording the mobile device scrolling video on an actual phone. I know iPhone can easily screen record. Idk about other phones. Hopefully that helps!
@@MariahMagazine Today... it looks like I have to put Canva into the mobile version under the preview tab and record it from there will test it to see if it works and let you know... Shane Keep in touch!
@@adventureinourjourney2360 Perfect! Glad you’re figuring it out. Sometimes it requires some testing & tweaking
when i added my video in grid it is not showing full website???
how can i fix that
Sometimes you have to mess with the ratio in order to get it to fit perfectly. I mention that toward the end of the video!
mine doesn't have screen only option
Loom? You might have to adjust some settings. Or reach out to their support team! I know sometimes they have glitches
@@MariahMagazine no i was just told the options to do what you are doing in the video aren't available on the free plan, you have to pay for it
@@sherylmorrison8587 hmmmm they must have recently updated that. You use Zoom to take a video of the screen!
What if I don't want scroll in my website
You can take a simple screenshot of your website on desktop. Google “screenshot keyboard shortcut” for Mac or Windows and you’ll be able to snap a pic in a hurry. There’s also a Screenshot Google Chrome extension. So many options!
Why you are so peaty?
very helpful. thank you!
Glad it was helpful! 🥰 thanks for your kind comment