How to Create a Website Mockup Design with Canva & MockUpPhone

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 & MockUpPhone!

We know everyone learns differently – if you prefer video, please watch the video tutorial above! If you’re more of a step-by-step person, we’ve written out the steps below.

  1. Go to β†’ Select device from device list
  2. For this tutorial we will use iPhone 7 plus gold Note: whichever mockup you select, it will tell you the dimensions you need
  3. Upload 1242 x 2208px image
  4. Go to
  5. Create design β†’ Custom dimensions 1242 x 2208px
  6. Shrink web browser of website you want to mockup to mobile size
  7. Take a screen shot
  8. Drop screen shot into
  9. Resize image as needed
  10. Download file
  11. Drop downloaded file into
  12. Download my mockups
  13. Check email and download from email
  14. Create new image in (I do 2000 x 2000px)
  15. Now get creative!!!

Do you get visitors to your website, but never book any clients? πŸ₯Ί 😭

Follow this guide to get your website to convert.

πŸ‘‡Sign up below!

Community is kind of a big deal when it comes to learning tech & growing a business, wouldn't you agree? I love Instagram for connecting with potential clients, students & the tech community at large. Get techie with me on the 'gram.

Instagram With Me!

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes. All trademarks and name brands are the property of their respective owners.

Pin It on Pinterest

Share This