Online Course Website Template: How to Design Your Course Layout, Pages, and Navigation for Easy Learning

online course templates for easy learning

When it comes to online learning, things like mobile responsiveness and easy course management really matter.

38% of website visitors will simply stop using a website if it's unattractive or difficult to navigate (source).

That's a chilling statistic for your membership site.

Although there are many WordPress themes filled with attractive, pre-designed layouts, these are designed with blogs and business sites in mind… not membership sites or online courses.

A membership site has a unique set of UX design requirements, from multiple navigation menus to page layouts designed for elearning course content.

You might be thinking that your Learning Management System (or WordPress LMS plugin) is going to handle the layout and design of your courses. But you'd be wrong, because most LMS tools focus on delivering course content and NOT on the website template.

online course website templates

Any education site can leverage a Learning Management System with an LMS theme, or you can use any number of different WordPress theme solution.

The good news is that you don't need an expensive education WordPress theme to create an attractive membership site. A flexible theme that allows you to create your own templates will work fine.

This allows you to work with a designer to come up with a custom look and feel for your course with an emphasis on user-friendliness.

What You'll Needed To Build Attractive Online Course Templates

The list of materials you'll need to build and implement website templates for your online courses is pretty short:

1. WordPress Theme With Templates

There are many great themes out there that will allow you to create multiple page layouts (a MUST for your membership site).

However, the user-friendly Divi theme is a proven favorite. In fact, many online education websites use Divi.

online course website templates the divi theme

2. A list of your course materials

Make a list of the course materials you want to include on each page, whether that's videos, PDFs, written content, quizzes, etc.

online course website template

How to Create a Good Template for Your Online Course Pages

A strong course website template for your online course goes beyond a pretty appearance. It must include easy navigation areas, so the user can access the various pages included inside the course and access the main pages of the membership site as a whole.

The Template design should also consider content organization, and whether a user will be able to focus on the course material presented to them. Finally, the Template design should also ensure progress tools (like progress tracking bars or checklists) are prominently displayed on the page, so that they can successfully help to motivate course students.

What if I'm not using the Divi Theme?

This is a general tutorial to illustrate how to design the appearance of your course pages.

Please note that the exact implementation process may look different, depending on which theme you're using in your site. If you are not using Divi, please refer to your own theme's documentation to learn if and how this process can be done.

(If you're having difficulty finding a good option, check out our article here: 5 Things to Look For When Choosing A WordPress Membership Site Theme).

Step 1: Create a mockup

First, make a sketch of how you'd like your course pages to look. Include the following elements:

  • The Main Navigation Menu – this is usually located prominently at the top of the website, giving users quick access to the main pages.
  • The Course Menu – this is a custom menu that allows users to easily navigate through each page of your course. A good location for this is in a sidebar area, taking up no more than 1/4 – 1/3 of the page width.
  • Course Content Area – this is the section where you'll add your text, videos, and images for your online course. If set alongside a course menu sidebar (as in the example below), this course area will take up approximately 2/3 – 3/4 of the page width.
  • Footer Area – this is usually a site-wide region and includes your copyright information and links to important pages.

If you want to include a lot of detailed elements, you might choose to create your mockup in a tool like Photoshop or Canva. Otherwise, a hand-drawing can show the general areas and color schemes you want to use.

Other ideas to consider include: an events calendar page, social media sharing buttons, and any other material design inspiration you've gathered from the web.

In short: by doing the work of planning your online course website template on paper (or digitally!) you're giving yourself a head start in thinking through your course structure and navigation.

Sure, you might end up changing the course layout and moving some elements to different sections of the page, but doing this template design thinking ahead of time means less re-work later.

Are you offering an elaborate course with multiple media types?

If so, you may wish to draw out multiple page mockups. For example, an online course lesson that includes a video lesson, checklist, downloadable PDF, and a quiz might be separated into two pages:

  • Course content page – housing your video lesson, checklist, and downloadable PDF
  • A quiz page – so that distractions are minimal while taking the quiz questions
  • Homework submission page – if you're having students submit homework you might have a short description of the assignment followed by the submission form
  • Training overview page – show the student progress, remind them where they left off and encourage them to keep going
  • Multiple course dashboard page – if you're planning multiple courses, having a dashboard page helps students find what they're registered for
Course Page Layout Ideas

Need ideas? Here are four different course page layouts, designed by some of our AccessAlly Certified Partners.

Step 2: Build the framework once, then save as a template

The Divi theme has a built-in template feature. This makes it possible to build a design once, then reuse it multiple times across your website.

To do this, simply open up a page and create a design on the page based on the mockup you created in Step 1. Label each element, but don't add page-specific content yet, since this will be saved as a template.

Once your design is set up the way you want it (complete with background colors), you can click on the “Save to Library” option.

Choose a name for this layout that's easily recognizable, and click “Save.”
training course design template

At this point, you have your course design template ready to go. Once your course pages are created, move on to step 3.

Step 3: Apply the template to each course page

Once your course pages have been created, it's time to apply the template.

This must be done manually, by editing each page, switching to the Divi Builder, and clicking on the “Load from Library” option.

Here, you can select the layout that you created for your course pages, and click “Load.”

online course website template

This will apply the template to your course page, so that the design you created in the previous step will be recreated identically.

Step 4: Add your content to each page

In this step, you will go through each page of your course and add the right content – links, written material, embedded videos, etc.

As you edit each page of your course, check each section to make sure that everything's been included:

  • Course Menu – Do you have the correct course menu selected? Do all of the links work properly?
  • Content Area – Has all of your course content (including videos, audio, etc.) been added to the page? Are the links working?
  • Main Menu – Is the Main Menu accessible from this page?
Online Course Set Up Tip:
This is a good time to double check that you have the permissions set up properly for each of these course pages.

online course website template

Step 5: Ask a user to test it out

Finally, have someone test it out to make sure the design is easy to navigate.

You have two options:

  1. Someone trained in UX design who knows what to look for (like this guy!)
  2. One of your ideal clients, because it will give you an idea of how your site appears for the end user.

Testing the site design is an important step whether you came up with the design or had a professional do it.

When it comes to building an education website or online training center, there's no better feedback than what your students can provide. Be sure to include them in future iterations of your online course's template improvements.

Online Course Layout Templates

That, in a nutshell, is how to create your own online course template in WordPress using the Divi theme.

It's a fairly straightforward process that allows you to create your own look and feel for your online course without having to mess with a lot of custom code.

Maybe you don't use the Divi theme, but you can take the same concept and apply it to your own membership theme.
Online Course Website Templates

5 Comments

  1. Vibeke on March 7, 2018 at 10:59 am

    This was really helpful for me! Thank you!



    • Donna Swart on April 2, 2018 at 12:13 pm

      very helpful for me too! I love seeing examples that help me open my mind to different ideas other than my current one that’s stuck in my head…thanks!



      • ambitionally on April 2, 2018 at 1:59 pm

        So glad to hear this was helpful for you too, Donna! :)



  2. Neale on May 16, 2018 at 11:09 am

    Hi where are the predesigned templates for online courses as stated above?

    Thanks



    • ambitionally on May 17, 2018 at 9:35 am

      Hi Neale! The templates are included with our AccessAlly plugin purchase, you’ll find the details for signing up for that here.



© 2014- Nathalie Lussier Media Inc. dba AccessAlly™. All rights reserved.