How to Create a Scrolling Website Mockup Using Canva | Make a Video Website Mockup for Any Device!
Вставка
- Опубліковано 31 жов 2022
- 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.mariahmagazine.com/canva
➡️ Unsplash: unsplash.com/
➡️ Styled Stock Society: www.styledstocksociety.com/?a...
➡️ Loom Chrome Extension: chrome.google.com/webstore/de...
-------------------------------------------
-------------------------------------------
👍 Give this video a thumbs up & don’t forget to subscribe to the channel:
ua-cam.com/users/MariahMagaz...
🔥 🔍 Download the FREE Roadmap to Successful SEO: www.mariahmagazine.com/roadmap/
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.mariahmagazine.com/
⚡️✨ 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.mariahmagazine.com/square...
GoLive Creative Squarespace Templates -- (Use Code MARIAHMAGAZINE for 10% off): www.mariahmagazine.com/golive
TubeBuddy: www.mariahmagazine.com/tubebuddy
Canva Pro: www.mariahmagazine.com/canva
Dubsado: www.mariahmagazine.com/dubsado
Kajabi: www.mariahmagazine.com/kajabi
Tailwind for Pinterest: www.mariahmagazine.com/tailwind
Keywords Everywhere Chrome Extension (SEO): www.mariahmagazine.com/kw
SEMRush (SEO): www.mariahmagazine.com/semrush
Convertkit: www.mariahmagazine.com/conver...
The BEST social media sharing plugin for WP: www.mariahmagazine.com/social...
// 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.mariahmagazine.com/diy-se...
👉 Website Traffic Building Bundle: www.mariahmagazine.com/wtbb
👉 Quick & Effective SEO Keyword Research eBook - (USE CODE “SEOLOVE10” for $10 OFF): www.mariahmagazine.com/seokey...
👉 Crafting Successful SEO Titles & Meta Descriptions - (USE CODE “SEOLOVE10” for $10 OFF): www.mariahmagazine.com/seotamd
// WAYS TO WORK WITH ME //
🔥 Let’s improve your SEO: www.mariahmagazine.com/seo/
🧲 Marketing Breakthrough Session: www.mariahmagazine.com/inutit... - Навчання та стиль
Are you loving these Canva tutorials? Let me know below so I can create more for you!
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
I was searching for something like this. Thank you so much for your video. Really appreciate it.
Yay! So 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 ✨🥰
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🙂
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 🥰
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 is so perfect, I wanted to figure out how to promote my website in the middle of my UA-cam 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 UA-cam 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!
This is so helpful and easy to follow! Thank you
Yay, I’m so glad. Thank you for your kind comment!
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! ✨
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
thanks that was a great tutorial!
Thank you!
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! ✨
Excellent. Thank you!
You’re welcome!
EXCELLENT,,, THANK YOU! 🌹🌹🌹
Awesome, I’m glad it was helpful! ☺️
Thanks a lot!
You’re welcome!
Thank you so much 🥰
You’re welcome 😊
I have watched two hours' worth of content on UA-cam 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!
Thanks!!!!!!❤
So glad it was helpful. Thank you for your kind comment ✨
Thanks a lot.
You're welcome!
Lovely
Glad it was helpful! ✨
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
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
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!
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!
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.
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!
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!
Why you are so peaty?