![How to Create a Website Mockup Design with Canva and Mockuphone This post will walk you through how to create a website mockup design using MockUpPhone and Canva for when you launch a new website, create a new course, page or blog post. @sammunozconsulting www.makingwebsitemagic.com](https://makingwebsitemagic.com/wp-content/uploads/2021/06/How-to-Create-a-Website-Mockup-Design-with-Canva-and-Mockuphone.png)
How to Create a Website Mockup Design with Canva & MockUPhone
Whether you’re launching a brand new website for yourself (or a client!), want to show off a new opt in, or even to just talk about your website pages in general – creating a website mockup is such a great shareable graphic. This tutorial will walk you through how to create a website mockup design with the free tools Canva & MockUPhone!
We know everyone learns differently – if you prefer video, please watch the video tutorial below! If you’re more of a step-by-step person, we’ve written out the steps under the video.
Watch the Tutorial:
How to Create a Website Mockup Design with Canva & MockUPhone – Step by Step:
- Go to mockuphone.com → Select device from device list
- For this tutorial we will use iPhone 7 plus gold Note: whichever mockup you select, it will tell you the dimensions you need
- Upload 1242 x 2208px image
- Go to Canva.com
- Create design → Custom dimensions 1242 x 2208px
- Shrink web browser of website you want to mockup to mobile size
- Take a screen shot
- Drop screen shot into canva.com
- Resize image as needed
- Download file
- Drop downloaded file into mockuphone.com
- Download my mockups
- Check email and download from email
- Create new image in canva.com (I do 2000 x 2000px)
- Now get creative!!!
![SMC Stars - BLack](https://makingwebsitemagic.com/wp-content/uploads/2021/05/SMC-Stars-BLack.png)
Get Nerdy about Business, Websites & Tech with Us!
The Making Website Magic Community (hosted on Mighty Networks!) is a place where women web designersand developers can meet, mingle and make meaningful connections with industry collaborators. See you inside!
![Sam Munoz - MWM Headshot](https://makingwebsitemagic.com/wp-content/uploads/2021/05/Sam-Munoz-MWM-Headshot.jpg)
Article by
Sam Munoz
Sam is the CEO and lead web developer of Sam Munoz Consulting, LLC. Through years of coding, development & design experience - she is all about simplicity, minimalism & making websites that align with her client's business models & goals.
Keep Learning & Reading
How to Add a Top Call to Action Bar in WordPress
A top call to action bar can be a great way to easily direct visitors to convert. Learn how to add a Top Bar Call to Action in Wordpress
How to Position a Background Image in Divi
Ensure the background image you use on your site shows up the way you want it to! Learn how to position a background image in Divi.
How to Add reCAPTCHA to the Divi Contact Form Module
Stop spam in its tracks! Learn how to add reCAPTCHA to the Divi Contact Form module.