In this blog post we're going to discuss how we built an online course website with LearnDash, Elementor and WordPress in under one week.

We're going to go behind the scenes of the website and discuss the plugins, themes, custom coding and development work that went into creating it. From this post, we hope to give you a good idea of what it takes to build a website to offer online courses to your audience.

Especially in the coronavirus era, many people are looking to monetize their knowledge by selling online courses. Some companies are obligated to begin offering content online, like training videos, employee education, student education, and more. 

Our agency has gotten many requests to do a post on how to do this yourself, and also began several new projects building course delivery websites. 

We recently launched a new platform called ElementorQA, which is a forum to ask and answer Elementor page builder questions. We're big fans and supporters of Elementor, as it enables our clients to edit their pages and blog posts after completing their project engagement with us. The usability and flexibility behind the platform is amazing, and the development team just keeps making it better.

It's because of this that many people are looking to build their own websites with Elementor. We wanted to leverage our 3 years of experience in doing this and create online courses to teach those who were interested how to build an online website with Elementor and WordPress.

To do that, we wanted to offer courses through our own dedicated portal. So a few weeks ago, we built a WordPress website that we could offer online courses through. We documented the build process, and are now creating  this blog post to tell you how we did it.

First, you can see the final website at courses.elementorqa.com. If you're interested, feel free to join, as will be offering a lot more courses in the future (currently there’s only 1).

Now, let's get into how we built a website to offer online courses using LearnDash, Elementor, and WordPress in tandem.

Hosting

For this project, hosting was especially important because we needed something that offered our website the power to run quickly and smoothly. Running Elementor with with LearnDash requires a fair amount of memory, so we couldn't just throw this on shared hosting and call it a day.

We decided to partition a new, 2GB (memory) server with DigitalOcean (managed by Cloudways) that will offer the website all of the memory that it needs. The website isn't going to be a large one size-wise - this is because we're hosting our course videos on Vimeo Pro. 

The only thing that this website does is lock the videos behind a registration platform, and also act as a clip index (we'll discuss this below). Really the only thing being  stored  on the server are the text descriptions that come with the course, and the embed codes for the YouTube and Vimeo videos. 

Even so, our 2GB server came with 50 gigabytes of high-speed SSD memory. This affords us the option to host videos ourselves, if we would ever choose to do that.

Elementor recommends 256MB of memory, but we find that running it with at least 1 gigabyte of RAM results in the fastest experience. LearnDash requires a PHP memory limit of 128 MB or greater.

The website login system will also require a fair bit of memory, and a speedy database, so going overkill with our web hosting will allow this process to run quickly and smoothly.

Instead of running the website directly through DigitalOcean, we decided to use Cloudways, one of our favorite web hosts to do this for us. This is because we didn't want to manage the hosting set up, and Cloudways offers easy installations, one click SSL, security sweeps and more.

If you're interested in Cloudways, a service that allows you to host your website on one of five major cloud hosting providers ( think AWS, Vultr, Google Compute Engine), and the offers the ability to install WordPress in 3 clicks, they offer 3 day free trial (you don't even have to enter your billing information). If you use our code “ISOTROPIC”, you'll get 30% off your first billing cycle.

The Base Setup

We really wanted to experiment with the OceanWP theme, which many people talk about and use. Our typical workflow uses the Hello Elementor theme, and a lot of custom coding.

We chose to use the OceanWP with the paid plug-ins for this courses website because we heard that it played well with LearnDash, wanted to test it out, and hoped to speed up our workflow with the pre-built header and footer system (and styling).

We built our pages using Elementor Pro, as this courses website was offering education on how to build stunning websites with Elementor. We wanted this website to be an example of something that you could create using Elementor.

The homepage was created with the basic elements offered in Elementor Pro. The only functionality that didn't ship with the base version of Elementor Pro what's the registration form, which was embedded from a Theme My Login short code (we talk about this later in this post). We needed to style it with custom CSS to match our theme.

The course aspect of the website was managed by LearnDash. LearnDash is a learning management system that allows you to create courses, lessons, and topics from the WordPress backend, and then publish them to your audience. You can lock the courses behind a registration, subscription paywall, and more.

We tracked clicks, views, pop-ups, conversions and more using Matomo Analytics. 

The final element of this website was a custom post type called “clips”. To advertise this course, we're going to cut it up into individual segments. Each segment is going to relate to a specific topic regarding either WordPress or Elementor.

To publicize this course, our social media marketing team is going to link people with questions (Facebook, Reddit, ElementorQA) to our clips, which will provide an answer in video format.

To add the custom post type, we used our favorite plugin called CPT UI, and Advanced Custom Fields. We styled the individual post template using the Elementor pro theme builder.

We created this template to look different from the main website, as we wanted to offer those who we linked to an educational experience where they could focus on the content at hand. On the right side bar, we had links to socially share this video clip, enroll in the main course, and explore our community.

We also included the note-taking functionality ( bottom right) that comes with a LearnDash add-on, to facilitate the learning, Retention,  and features for our visitor / users. 

The backend for publishing these individual clips is fairly simple, and uses the Gutenberg editor. To embed the actual YouTube video, we use the YouTube Embed Gutenberg block. We also set up an if this then that recipe which will publish a new WordPress post every time we publish a video clip on YouTube. This all improves the workflow for our social media marketing team, all they need to do is link to the videos that are already on our website.

To increase the conversions of repeat visitors to our Clips archive, we incorporated a feature that acts somewhat like a paywall. If a user who is not logged into the website views three or more clips, this pop-up will display:

The user who is not registered on the platform will no longer be able to access the clips after viewing 3. This will increase conversions, and make a membership with ElementorQA (which is free)  much more appealing. 

Users do have the opportunity to close this pop up, by clicking on the overlay,  but unless they register for our platform, the pop-up will continue to show every time they view a new or existing clip ( after the initial quota of 3).

The Courses

There really wasn't much front end building that went into creating the course. 

Really all we did was install LearnDash, and build the course on the back end. We kept the styling from the OceanWP theme standard, and the only thing we changed the font and the login button color to our primary color.

We display the course content to users who are not logged in, but to access the course, uses will need to login or register to our website.

Clicking on the login button will direct them to a custom login page (discussed in detail in the next section) because we have Theme My Login installed.

All the content was edited through Guttenberg, using the course, lesson, or topic builder included in Learndash. 

To arrange the individual lessons within the course, we used the LearnDash Builder. This is a really simple drag-and-drop interface, that allows you to move courses around, search for individual lessons and topics, and more.

Because this is a video course, we aren't going to be adding any quizzes. Each individual topic consists of a video, and a text description. The video is hosted on Vimeo Pro, and only people with the link can view the video.

This means that our videos will not be accessible unless you register for our LearnDash course, where each Vimeo video is embedded into the individual topic. This is really simple to do with the Gutenberg block editor.

You can also make the course a paid one, and collect a one-time fee (or a subscription) using Stripe, PayPal or a bunch of other payment processors.

We included a LearnDash add-on called LearnDash Notes in our website, on both the public clips interface, and the membership courses.  There is no setup involved with this, all we needed to do is install the notes add-on, and check off which custom post types we wanted this to apply to.

On the frontend, this addon will allow both visitors and members to take detailed notes, and save them on the site. The base styling for this CSS add-on was pretty on point, so we didn't have to do anything regarding that.

Login/Registration

The login and registration aspect of any online course website is absolutely paramount to get correct. This is because you're offering a membership to your users, whether it's free or paid.  Your users want to have a premium experience, and that starts with the login / registration process. 

We built the main website to act as a funnel to the registration form. We had multiple locations in which we placed our registration form, which is created through Theme My Login, and embedded onto the page via short code.

To streamline the process, we allowed users to set their own passwords during the first step of registration. The default WordPress setup makes users confirm their email address via a link sent to them, and then set the password. 

While this may make the log in a bit more secure, we decided to disable this and have users set the password in the first step, which would make our registration form convert more (it wouldn’t be confusing). 

Following the single-step registration, new users are funneled through a registration confirmation page, which is what the image above shows.  It alerts them that they are automatically signed into another website in our network, and that they can now access their course. Clicking the "access the course now" button directs them to the LearnDash individual course page.

Because we have Theme My Login in place, everything related to wp-login.php redirects to custom pages that we’ve designed on the front end. This gives the login experience a cleaner look, and shows our users that we care about the appearance of our website. 

Especially because we're targeting people who are familiar with WordPress, we didn't want to send them through the default WordPress registration and login forms. 

For users who already are registered, we set up a simple, but well-designed login page. We also created a pop-up login (using the Elementor Pro popup builder), which makes the whole process easier and quicker. 

Most login links will call the pop up (pictured above), which will redirect you directly to the course when you sign in. 

There's some login links that are hard coded into buttons in LearnDash, so we also focused on making a great static login page as well. 

This login page is built with Theme My Login shortcodes, and Elementor. Many of the LearnDash functionalities will redirect to a login link, but we think that the majority of the users will be clicking on that link looking to register for the course.

On the login page, we included both a login and registration form, but made the registration form bigger, and easily accessible.

We routed the login and registration redirects using Peter's Login Redirect. In most cases, those who are logging in or registering will be directly pushed to the master course.

The final thing we did to our login system is incorporate a plug-in that would allow us to share the logins across our two websites related to this brand. 

We have a main website, ElementorQA.com, which is a forum for Elementor questions and answers. This website, our courses offering, is served from a subdomain: courses.elementorqa.com.  Because it's the same brand, we wanted to share logins across the website,  meaning that if you were logged into the courses, you would automatically be logged into the forum.

We did this by incorporating a paid plug-in called Share Logins Across Multiple Sites. This plug-in does exactly what its title says it does, and it does it very well.

There are a couple ways that you can share logins across multiple  WordPress websites, but they are either require an expensive subscription to an SSO service, or an insecure DIY set up.  This plug-in is the happy medium between the two, and it encrypts all the traffic sent between the two websites for security. 

We opted for the premium version because it allowed us to update users, delete users, and more (all automatically) across the two websites.

Website Performance

As always we strive to create the highest-performing website possible, and achieve the highest Google PageSpeed score. OceanWP shipped with a couple font files that were slow loading and not used in the website, so we used a plug-in called Asset Clean Up to disable these font files from loading site-wide.

Cloudways comes with its own varnish cache interface called Breeze, so we used Breeze for our cashing solution for this website. If we're not on Cloudways, we’ll recommend WProcket.

The only set up that went into the cache is basically checking off every option it had to give. Surprisingly, merging and minifying all the JavaScript and CSS didn't break LearnDash, Elementor Pro pop-ups, or any other functionality in the front end of the website.

Conclusion

I hope this gave you a good overview of how we build our courses website with Elementor, LearnDash, and WordPress. It was a fairly simple process that just required a lot of building and thought. There wasn't much custom coding or custom functionality that went into this website, and you should be able to do it yourself. Especially if you use the Elementor page builder to build the actual website, and a theme that pre styles learndash, you'll have an online courses website up and running in no time.

If you don't want to take the time to build this website, we would be happy to do it for you, or consult with you on how best to offer your content online.  Feel free to reach out to the Isotropic Agency.