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 or online courses.
Although there are many WordPress themes filled with attractive, pre-designed layouts, these themes are designed with blogs and business websites in mind… they aren’t always best for online course or membership sites.
A membership site has a unique set of UX design requirements, from multiple navigation menus to unique page layouts designed for e-learning course content.
You might be thinking that your Membership plugin or learning management system is going to handle the layout and design of your courses. But you’d be wrong. Most learning management system tools focus on the delivery of your online course content and course features such as progress tracking, quizzes, certificates, and assignments. It is NOT responsible for the layout and design of your course pages.
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 LMS or membership web template will work fine.
Paired with a page builder such as Beaver Builder, Elementor, or Divi will create a solid foundation that won’t require a lot of coding skills to create a custom design.
You can even work with a designer to come up with a custom look and feel for your course with an emphasis on user-friendliness.
Any education site can leverage a learning management system with an LMS theme. Most LMS plugins can use any number of different WordPress theme solutions.
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 LMS or membership web template will work fine.
Paired with a page builder such as Beaver Builder, Elementor, or Divi you can create a solid foundation that won’t require a lot of coding skills to create an easy-to-use, well-designed membership site or online courses.
You can even hire a membership site designer or developer to come up with a custom design and user experience for your online courses with an emphasis on user-friendliness.
How To Build Attractive Online Course Website Templates
How to build an online course: The list of tools you’ll need in your tech stack to build and implement website templates for your online courses is pretty short:
1. WordPress Theme with Templates
There are many great WordPress themes out there that will allow you to create multiple page layouts and membership page templates (a MUST for your membership site).
However, the user-friendly Divi theme is a proven favorite. In fact, many online education websites use Divi. We even have Divi course creation templates available for AccessAlly.
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, audio files, quizzes, etc. This will help you when it’s time to create your online course.
3. A WordPress Membership Plugin or LMS
Some of the content you’ll include on your membership site or online course pages will be controlled by your membership management plugin or learning management system.
Get clear on what content will be manually entered into your pages and what content will be controlled by shortcodes so you know how the styling for this content will occur and how much flexibility you’ll have.
Learn more about design flexibility for the industry’s most popular LMS platforms and plugins to find the right fit for your business.
How to Create a Good Template for Your Online Course and Training Pages
A strong online course website template 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 for your learning management system 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 LMS theme you’re using on 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.
You may also consider using a page builder such as Elementor or Beaver Builder to create the layout and design for your courses.
(If you’re having difficulty finding a good online course WordPress theme, 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 the pages for your courses 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 courses. 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 courses. 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 course 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 in your course design 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 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 layout for your courses 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
Step 2: Build your online course framework templates
The Divi theme has a built-in templates feature. This makes it possible to build online course designs once, then reuse them multiple times for all of the courses on 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 course layout that’s easily recognizable, and click “Save.”
At this point, you have your course design template ready to go. Once your pages are created for your courses, 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.”
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 courses, 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?
This is a good time to double-check that you have the permissions set up properly for each of the pages within your courses.
Step 5: Ask a user to test it out
Finally, have someone test it out to make sure the online course design is easy to navigate.
You have two options:
- Someone trained in UX design who knows what to look for (like this guy!)
- 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 for your courses 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. Make sure to read this for mobile responsive screen size recommendations.
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.
If you don’t use the Divi theme, you can still follow this process and apply it using a page builder like Beaver Builder or Elementor.
