How to Create a Mockup for Your Online Course

by Jul 9, 2020Marketing Printables

Sharing is caring!

Are you at the point in your blogging adventure where you have created an online course? If yes, congrats to you! That is an amazing accomplishment.

Whether your course is a simple freebie workshop or a full-blown class with multiple modules, it is important to market your course the best way possible. You put a lot of effort to make so now you need to get it out there.

The best way is with an opt-in or landing page. And to go with it, I always recommend some form of a mockup.

 A mockup is a great way to show off your product. I especially recommend these with any printable that you have created.

But with an online course, it is a little different. You don’t typically have a lot of printable pages associated with it, and even if you do that is not the main point of your product.

You want to showcase that this is an online course and you want a visual aid to grab people’s attention. So how do we do that?

how to create a mockup for an online course
how to create a mockup for an online course

Now I am sure right now that might sound a lot more complicated than it is but I promise you that once you know how to do it, the process will only take you about 5 minutes.

The desktop frame mockup is extremely common and I wouldn’t be surprised if you have seen it all across the web. In fact, many of the bloggers I follow and have purchased online courses that use this style of mockup.

Now before we can start creating our mockup, there is one specific program you need to have. And that is…

Canva! The graphic design program perfect for any skill level.

The good news is that you can use the free version of Canva to create this mockup. And the even better news is that you don’t have to have any graphic designing skills to do it.

If you don’t know what Canva is then let me tell you all about it really quick. If you do, then feel free to move on to the next heading.

Canva is one of my all-time favorite programs that I use and it is also a very popular program for bloggers in general. So if you don’t have it, then click here to create a Canva account.

Canva is a website where you can create graphic designs. They are perfect for a beginner who does not have much experience making their own graphics. You can create anything from a simple holiday card to a more complex infographic.

While there are some limitations in Canva, overall you have the ability to design anything you can think of. Especially, when you compare it to other graphic design programs like Photoshop.

Canva has three plans to choose from Free, Pro, and Enterprise. Now unless you are working with multiple people, you don’t need to worry about the Enterprise plan.

how to create a mockup for an online course
The two plans bloggers can choose from are the Free and Pro plans.

I personally LOVE CanvaPro and it is one of my must-have tools. I use it from creating printables to my Pinterest pins.

Now while the CanvaPro plan is one I will always recommend, but if you are unsure if you want to spend the money yet I can definitely tell you that the Free plan is just as amazing. 

In fact, you don’t even have to purchase the Pro plan if you don’t want to. Just know that there are some limitations like you only get 2 folders to sort your designs and you are unable to save a PNG file with a transparent background.

With the Free plan, you can create your online course cover and the mockup frame that will go with your opt-in form.

So let’s get into how to make your online course mockup.

I personally LOVE CanvaPro and it is one of my must-have tools. I use it from creating printables to my Pinterest pins.

Click the link if you want to know my Top 10 Reasons Why Every Blogger Should You Canva. I will tell you all the nifty features Canva has that will make your blogging life way easier.

Now while the CanvaPro plan is one I will always recommend, I can definitely tell you that the Free plan is just as amazing.  In fact, you don’t even have to purchase the Pro plan if you don’t want to.

With the Free plan, you can create your online course cover and the mockup frame that will go with your opt-in form.

So let’s get into how to make your online course mockup.

printables kickstart toolkit

How to make a mockup for an online course.

There are technically two steps you will need to do to make this mockup. Before we get into the steps, let’s take a quick moment to make sure you have everything you will need.

  • Brand Colors
  • Online Course Title
  • General Idea of Course Cover Page

Step #1: Create Your Cover Page in Canva

I recommend using these dimensions for your cover page 1920 pixels by 1080 pixels or you can just choose the Desktop Wallpaper from the suggested designs. From there create your design.

how to create a mockup for an online course

 If you don’t know what to create, take a quick moment, and look to other bloggers for inspiration. The key thing I have always noted is that most bloggers have a simple design.

That simple design is usually connected to a landing page. If you don’t know what a landing page is, the basic concept is that it is a webpage made to market a product.

On your landing page, you can go into a lot more details about what someone will get out of your course and include testimonials of people who found value in it.

Within your landing page, you will have an opt-in form for your readers to sign-up.

Okay back to creating your cover page. There are quite a few styles you can choose.

  • Overlay
  • Color Blocks
  • An image from your online course

Overlay mockup from the website Melyssa Griffin.

how to create mockup for online course

Excerpt mockup from the website Do You Even Blog.

how to create a mockup for an online course

Color block mockup from the website Start a Mom Blog.

how to create a mockup for an online course

You can always start simple for your mockup and then once you feel more confident using Canva, you can always update the image.

Once you are happy with the way your cover page looks, download it as a PNG. 

To download, complete these 3 steps:

  1. Click the download icon in the top-right corner.
  2. Change the file type to PNG.
  3. Click the Download button and save it to a folder.

Now that you have a cover page, we can make a mockup.

how to create a mockup for an online course

Now that you have a cover page, let’s get into making the mockup.

Step #2: Create Your Mockup Image in Canva

You can make your mockup image in 6 super easy steps!

  1. Open a new Canva design and use the dimensions 2,000 X 2,000 pixels.
  2. Go to the Frames section in the Elements tab.
  3. Select the desktop or laptop frame.
  4. Upload your cover page image.
  5. Drag your cover page image to the center of the desktop frame and your image should appear within.
  6. Download your mockup as a PNG file.
how to create a mockup for an online course

And you have successfully created an online course mockup image!

Congrats on making your first mockup image. Now you can grab your reader’s attention and start building an email list! Hopefully converting them into reoccurring paying subscribers!

Before you go…I have a quick question for you.

Did this help you create a great mockup?

Tell me about it in the comments below. Also, feel free to share an image of your mockup! I would love to see it.

Happy Days –

the printables blog

Sharing is caring!