Build & Sell Online Courses with WordPress (Using Free Plugins) LearnPress & Elementor

hey how's it going Alex here from idea spot and in today's WordPress tutorial you're going to learn how to build and sell an online course using WordPress we'll be using a free theme a free page builder and a free course plug-in so all free tools and we're going to be doing this completely from scratch by the end of the tutorial you'll have a nice clean well-designed course website people will be able to come join your course they'll better buy the course using PayPal you can look at other courses a nice clean course layout grid like this and existing users will be able to come back and login through this nice customized login screen and we're going to be doing all of this using free plugins so if that sounds interesting keep watching [Music] now this tutorial does start completely from scratch so it is a bit longer but I have divided the video into sections using the timeline so feel free to jump around but the sections that interest you basically we start with our hosting and our domain then we set up WordPress then we install our theme and templates so we're going to be using the free version of Astra and the free version of the element or page builder then we install our course plugin we're going to be using the free version of a lion press then we add our content our quizzes and videos and do a little bit more customization so that's basically the overview our first step will be setting up our WordPress hosting and domain name now for this I recommend SiteGround check out that link in the description because you do get a very big discount when you first sign up so let's go ahead and get started when you click that link in the description it will take you here where you can choose your WordPress hosting plan at SiteGround now by far the best value one is this grow big plan their bestseller now that gives you unlimited websites so I'll probably go with this one if I wanted to build more than one website but if you really just need one website then the startup plan will do fine but for this demonstration let's go with the grow big plan so let's click get plan the next step is to choose your domain now this is the name of your website for example idea spot demo com let's try that if you already have a domain you can use that if you choose that option there but let's just try registering a new day and click proceed this bits pretty boring we just have to put in our details and our payment information so let's go ahead and do that there anything we really need to pay attention to here here's the data center so by default it's on the USA and now the USA is probably the best choice if you're looking at a general english-speaking audience but if your business is specifically targeting a certain location you can choose something that's closest to your audience but in most cases USA will be a good choice finally we've got the period the period needs to be at least 12 months to get that full discount but if you want that discount over a longer period you can spend a bit more upfront and get the discount over 24 or 36 months but for this demo let's just go for 12 months now domain privacy and sight scanner at both optional you definitely don't need the site scanner you can just use the free plugin like wordfence or security check out my earlier videos where I actually do that and domain privacy I think it depends on your project whether you need that feature whether you want to keep those details private or not but for this demonstration I'm just gonna leave that on ticked and finally you need to agree to the terms and conditions you don't need to agree to receive the newsletter and then go ahead and click pay now after that's all done you'll get a success message and you can proceed to the customer area the first time you log in you'll get an option here to setup your site you can also get there through the websites either way is fine let's click setup site now we're gonna start our new website you can actually migrate a website over from your existing hosting if you're transferring over to site ground but in this case let's start a new website and click select now we're going to be using WordPress you can also use WooCommerce and WordPress if you know you're going to be building a online store for example but let's go with WordPress you can always add WooCommerce later it's totally not a deal-breaker if you just choose WordPress for now now what we need to do is put an email address and a good strong password for our WordPress admin so let's go ahead and do that I'd recommend using a different password from the one that you use elsewhere and go ahead and click continue again it's gonna offer to try and sell you this site scanner you don't need to add that just go ahead and click finish it's gonna say creating your site this will take a couple of minutes so be patient now we'll get a success message you're all set we can go ahead and manage our site down here so here we are in our dashboard the first thing I like to do is the security so let's look at the SSL manager and we do get free SSL on-site grant so we select our domain and select our certificate I like to go for there let's encrypt wild card you can go for let's encrypt as well but wild card lets you add subdomains as well in the future if you want to use that feature so let's click get that'll take a minute to process and then you'll get the success message saying let's encrypt is installed let's go to https enforce now and let's enforce the HTTPS you'll get a success message and then we are good to go let's head over to WordPress and install and manage we can head down to our site that we installed earlier and we can go to our admin panel that's giving offer us a little set up tutorial we can just hit exit here and here we are in our WordPress dashboard now SiteGround has given up this little site Greyhound style setup I like to disable this plug-in just to have a normal standard WordPress setup so I go to plugins install plugins and they've got this thing called WordPress data we can go ahead and deactivate that one the next thing I like to do is go to settings and general and let's just change our address to HTTP and HTTPS so that makes sure that all our new files that we add are going to be secured with SSL as well so let's scroll down and click Save Changes because we just changed the address of our sites gonna ask us to log back in so log back in with the password and username you chose when you set up WordPress and click login there we go and update that in chrome and now we can go ahead and install our theme so let's go to appearance and themes and we're going to add a new theme a theme we're going to go for here is called Astro we're just gonna use the free version of Astro so let's search for Astro click on that and click install once that's installed we activate Astro will let us get started with some starter templates which are really great for when you're building your first website so let's click activate on that then we're gonna go for element or as our page builder now we can look at these starter sites and filter by free to choose a free starter site this is called Astro templates and they give you a really nice based to start from when you're building your website now the guys at Astra always making new starter templates for us to use so this new one called mountain is a really beautiful the multi-purpose template so let's try this one for a hard demonstration and let's import the complete site and go ahead and click import here then we have to wait a few minutes to import all the templates after a while it's gonna say import is successful we can go ahead and view the site now we can go ahead and start customizing our site so the first thing I might do is change our logo and have a look at the naming and just the basic site identities let's click customize so here we are in our theme customizer let's go with a header and let's go to site identity now this is where we can change our logo let's go ahead and remove this mountain logo so I click remove on retina and remove on logo now we can go ahead and select our new logo here we can just drop in our logo so I'm just gonna go ahead and do that okay now I'm just gonna drop my logo in here there's my idea spot logo let's select that one and we don't want to crop it and there we go and let's do the same thing for the retina logo as well let's select that one and same image and let's go ahead and make that logo a bit smaller shall we so we can change the width of the logo here just by dragging the slider I think now looking like around 75 looks to be about right for this logo and let's go to publish if you don't have a logo it's really easy to get a free one just head over to canva.com and there's loads of logo templates you can customize for your own purpose and these look really really nice that's how I actually made this one so very simple and very easy to do next thing we can do is change the name of our website so I'm just going to call it idea spot and the tagline can be idea spot tech courses or maybe easy peasy tech courses there we go let's hit publish so that's the basics of editing our logo our name let's go back to this actual front page and work on our header and this background image so let's close out of this one we can actually edit all this stuff using Elementor so let's click that one and the element or page builder is going to load up now the first thing we might do is change this mountain background into something more suitable for a course website so let's go ahead and click the section and I'll click got it on that one and we won't change the style of the section and that's where we'll find our background image so this is where we can choose our image we can choose anything from the media library or we can upload things into the media library the other cool option is free images from pixabay so you can get free stock photos let's say we wanted to search for something course-related so I might type study in here and we can find some cool looking pictures to use for our course I might use this a bit later but I think for this demonstration my favorite way to get free stock images is from pixels com so I just searched for a study and these are some really cool looking stock photos related to studying so I think this one the girl and the pencil and the laptop might be pretty cool for our website let's have a look at the size nineteen twenty by twelve eighty that'll be perfect for a background image and you don't want to get that original size it's a way too big for a website large works perfectly for what we want to do so let's go ahead and download that one and head back to our element or tab here and we're gonna upload that file that we just downloaded so I'll just drag that one in there and upload that there we go and let's insert that one there we go that looks pretty good now the thing with using white text on a bit ship background is that sometimes the white text can be a little bit difficult to read I always like to make these backgrounds a little bit darker to make the text more readable so let's go to the background overlay you can see that there's this gradient that they've used this blue to greenish aqua color and we can actually change the opacity of that overlay so if we drag it over there it gets dark if we drag it over there it gets lighter so you can see it's really hard to read now but if we drag it over here it gets easier so let's just move it to where we're happy with the readability I think around 70 let's go for 75 a nice clean number there we go I think that looks pretty good and that's a click update okay now changing this to text is super easy all you have to do is click on it and start editing so I'm gonna call this idea spot tech courses so let's say the idea spot and all right tech courses here courses and write a little bit of a description here let's register today for for our easy beginner tech courses what I might do with these buttons years I could link that to the about page I could link this one to the registration page a bit later so let's click that one and I'm gonna rename it instead of calling it services let's call it a register there we go let's click update ok so our front page is starting to take shape let's have a look and see how we're doing on the actual page so we can see we've got our logo menu see we haven't done any work on the menu we can do that a bit later and we've got our basic buttons and background image all set up so scrolling down you can see there's still some more demo content that we can edit using the exact same techniques we used before but I think now we're at the stage where we can actually start adding our course plugin so let's get into that alright so from here let's head back to our dashboard and we're going to go plugins and add new now we're going to add our learning management system plugin so I'll just start by closing out some of those notification boxes just you can say no thanks to these options up there now the LMS plug-in that we're gonna use today is called learn press so I'm gonna plug that in here learn press and search for learn press and there we go we've got a loan press sitting right there let's install that if you've watched any of my earlier videos you'll know I really like learn press I also like tutor LMS has a great free version and if you have the budget learn - is really cool as well but I think learn press is probably the quickest one to set up we don't have to go through a full WooCommerce setup and you get a pretty good result with learn press so for today I think let's install learn press and click activate so as soon as learned presses are activated you'll get the option here to run the setup wizard so let's go ahead and do that here we are in our setup wizard let's click run by default it's in US Dollars and you can customize this as you like I'm going to leave it as default I recommend doing most of your business in US dollars if you're working on an english website with an international audience let's hit continue now the static pages it says we can generate the pages automatically just by clicking here or you could name them yourself and create them but let's do it automatically and then click continue and now with payment we can use PayPal it gives you PayPal in the free version of learn press as a payment gateway so that's really cool let's go ahead and set this up so we want to enable PayPal we want to pop in our paypal email address make sure you've got a paypal email address using a business account works best go ahead and click sandbox mode and put a paypal email in fear sandbox mode as well this allows you to actually test the payment system to make sure it's all working as intended before you go live so once you've done that let's go ahead and click continue now here we're going to enable emails because learn press sends emails throughout the process where people register and enroll in classes and things you get administrator notifications so we want to enable those and click continue now we're almost done with the wizard if you're just playing around and want to see what this can really do you can install a sample course and that will let you look around otherwise we can start with a blank course by clicking and creating your course so let's go ahead and do that and it's giving us a notification that our profile page and check out page haven't been stood up yet and we can click here to set them up automatically so go ahead and do that if you have the chance okay now here we are at the add new course screen of learn press we can close that little notification so we don't have to worry about getting it in newsletters and now we're ready to start creating our new course but I'm going to go through a few settings of learn press and word press before we start doing this so let's cover a few of these details first first thing you want to do is make sure you've got registrations enabled so go to your settings in WordPress and this is under general settings so you want to be able to make sure anyone can register to your WordPress site because learn press your students become members of your WordPress site so you want to make sure that is enabled that is often disabled by default on WordPress and the new default were always a subscriber so make sure those are set up properly scroll down and hit Save Changes the next thing you want to check is your family settings because learn press works really well with post name and first name works well with most blogs to be honest so if you haven't set your blog as a post name in WordPress go ahead and do that if you have your WordPress site set up using something else you may want to set up a fresh site to do learn press and I actually recommend if you're running a online course then I think set up a fresh WordPress website anyway because you're going to be using student users you're going to be having maybe other instructors and the actual LMS is going to interact with your WordPress theme so it's just better to have a nice fresh clean install to do this kind of job anyway let's click Save Changes if you haven't saved those already and then let's head back to learn press and we are going to look at the settings so most of these settings can probably be left as default but let's just go through a few of these things so logout redirect when people log out let's just send them back to the home page let's go ahead and click Save on that one now let's check out courses I like all of these as they are the only thing I might change he is the single course permalink I'd like to have that set as course but apart from that I think it's all pretty good click Save next let's look at profile so by default the profile page is called LP profile let's go ahead and edit that make it a bit cleaner let's call it maybe course profile so I'm gonna call it course profile and the permalink we can just call that course profile here you know it looks a bit neater there we go let's head back to our - the other thing I like to change he has enabled the login form if the users not logged in and enabled a register form if the user is not logged in and that will obviously just do those things on the profile page so let's save those settings now let's get payments again the default name is LP check out I think it's just done that because it might cause a conflict with WooCommerce if you just call it checkout so I might quit course checkout you're free to just call it whatever you like but just make sure if you're running WooCommerce that it doesn't clash with your WooCommerce checkout page so I'm going to call that course check out and put course check out there as well so let's hit update there we go now after reloading this we can see that course checkout is there now instead of LP checkout now besides that everything else can pretty much stay as is enable guest checkout you can try it I didn't really like the guest checkout because after someone buys the course as a guest then you have to go back in and then create a username and password profile for them I'd rather just enable the registration in the checkout let them settle that themselves and have that all automatically done so I think that's all pretty good by default there the other thing we can do is make sure the payment by PayPal thing is ticked there and let's go ahead and save this settings there we go let's just check PayPal here we did that during the actual wizard but for some reason we've lost our settings there so I'm not sure why that happened but we can fill those in again so just plug your paypal email sandbox mode paypal email save settings there we go let's look at pages we can leave that as is emails all these things can be pretty much left as is by default you've got your admin email and your admin username so you can customize that if you like if someone else is going to be doing the course administration you can change to their profile in that position let's have a quick look at advanced all of these things are fine and I think we're pretty much good to go so let's go back to our courses there we go so we haven't added any courses yet and we can click add new to start adding courses so let's do that and here we are at the add new course screen okay so for this example let's just say we're making a wordpress training course and we'll just put our title in there and the first text area is where you just put a little bit of an introduction about the course so let's just put a little bit of info in there about the course and click publish and now let's go ahead and look at the curriculum and some of these course settings the curriculum is the structure of your course so in learn press this means you've got sections and sections are made up of lessons and quizzes so let's make a section we're going to call it section 1 and press ENTER and in this section we can make a lesson or a quiz so if we click that we can create a lesson if we click the clock we can create a quiz so let's start by creating a lesson and that's call it lesson 1 and he enter there we've got a lesson 1 we can edit that with the little pencil thing there and let's make a quiz as well and let's call that quiz 1 so there we go let's hit update and we should see our lesson 1 and our quiz 1 so let's go ahead and start editing our lesson 1 so let's click edit and we can start editing our lesson let's start by putting in a little bit of a lesson in content and then we can also add media to our lesson so with that button we can add pictures and we can actually add videos as well so adding media we can add media from our media library so I might just try adding this girl in there and go ahead and insert that in I might actually have a larger size let's let's make it a bit bigger there we go maybe that's a little bit big let's just make it a nice size and then let's Center it okay now let's click update now you can also add video to these lessons as well so if you were to add media and you can insert from a URL so you can actually link to say an unlisted YouTube video or a Vimeo file on Vimeo comm and you could host your lessons by posting videos as well so that can be a really great way of presenting your course so I think we'll get to that later in the video let's just continue on setting up learn press and make sure everything's working properly and then let's get to the video content towards the later stage of this tutorial it's going to go ahead and click update make sure you click update regularly just to make sure your lessons and quizzes and things are all set up properly in the database there are a few things we can cover on the lesson and we can actually make the lesson a certain length of time or you can just set it to zero to have an unlimited amount of time and review lesson means that the student can view the lesson without taking the course so maybe you might want to make the first lesson a preview lesson and that might help you actually get more students enrolled if they can preview the first lesson but I'm going to leave that on tick for now I'm gonna ante that allow comments as well so otherwise you'd have the comment box at the bottom of the lesson that might be useful if you've got a paid class and you want people to be able to leave comments but otherwise just leave that on ticked so then I'm going to update that so let's go back to our courses there's our WordPress training training course let's go back to editing editing that course and there we go there are a few things we didn't cover actually in the course settings so let's just cover that quickly now so the course has a duration by default a student has ten weeks to complete the course you can change that to a whatever timeframe you'd like let's just change it to 52 weeks giving the student a full year to complete the course if they want you can limit the number of students that can be enrolled and the number of times people can retake the course by default that's zero let's give the students one chance to retake the course the rest of this we can leave as is back and click update now there are a few more options we can look at here as well assessment by default the assessment is done via lesson so students just have to complete the lessons to complete the course you can change that and say I have to pass the quiz to pass the course or you could choose some of these other options here as well so I'm just going to leave that as evaluated via lessons but you're free to set that according to your own preferences now pricing I think for the first example let's do a free course and then later on in the video let's show you how the actual pricing works and no requirement to enroll if you tick that that will make your cost public so that might be a good way of promoting your courses by offering like a short free course that doesn't require anyone to enroll but let's uncheck that and at least if it's a free course at least we will have to sign up with their name and email so at least get some contact information from your prospective clients so let's leave that on tick for this example now review logs and author can be left as is the last thing yes let's turn off the allow comments there as well so I think we're pretty good to go let's go ahead and click update any other thing was this looks a little bit plain we may as well just add another image here as well so let's go back to our add media let's grab something from our media library shall we let's try grabbing some free stock images for this example so I'm gonna type study in there and go ahead click enter see what we get so let's go with maybe this little workshop it looks pretty good and then let's go ahead and insert this into our media library click Save and insert that will download the image into your media library now we can insert that into our post I'm gonna make that a little bit smaller and Center it no so that looks a bit better now let's click update now we've pretty much covered most of these settings one other thing that's good practice to do is set a featured image for your course let's go ahead and choose that girl from the heading as our featured image let's go ahead and click update that's so when if we have multiple courses and we want to display them as a grid for example they could all have their own featured image so that's all set up and ready to go we can actually preview and see how this looks so far so here we go there's our featured image this is the WordPress training course we've got some breadcrumbs in the student count I'm going to show you how to remove those with CSS a little bit later and those is the introduction and this little image that we put in there before and if we click curriculum or you can see we've got a one lesson in one quiz these are locked because we're not enrolled yet and in the instructor tab just has your profile picture and your username there so let's go back I'm gonna show you how you can turn that off if you want a bit later as well and we can customize this a little bit more I actually think this looks better without the featured image it look a bit more clean if the title was actually at the top a featured image we can still use it on grids and things but we might turn it off on the actual course page so let's go back to our course and go back and let's actually disable the featured image there let's go ahead and click update now when we reload our course page let's see how that looks so that looks a little bit cleaner like I said I'm gonna remove those couple of things late as the breadcrumbs in the student account and let's just clean this up make it a bit more minimalist but I like how it's all progressing so far okay let's see about removing those things and we can also do something work on our footer as well because we haven't touched that yet either so let's go to our theme customizer up there I'm gonna open that in a new tab it's wait for that to load up first thing I'm gonna do is remove those breadcrumbs and that student account so let's go to additional CSS I'm just gonna paste in some CSS that I made to remove those things I'm gonna share those in the description that'll I'll just put a link there we can go to my blog and you can get that bit of code for your theme and paste that empty of the additional CSS that'll clean up the page a little bit more but you can remove the breadcrumb with that section display the students you can turn the to student count off with that one and you can remove the instructor tab with that one there so let's go ahead and click publish now looking at our footer in most cases your theme will control the footer through the footer witches and footer bar but in this case it looks like the foot has actually been designed in Elementor so we can go ahead and edit those element or blocks let's have a look at that now so to do that let's go back to our site and you can hover over edit with Elementor and get to your footer through there you can also get there through your dashboard if you go to your appearance and header and footer blocks there in your dashboard either way we'll get you there you've got a site footer under element or there we can go ahead and hit it with Elementor so let's go and load that one up so here we are enough footer it's just like editing anything else in Elementor I think for this tutorial just as simplifier I'm just gonna delete that whole block and just have a nice simple full of copyright by ideas spot it doesn't need to say powered by ideas but I think that's all good let's just leave it like that nice and simple I might send her it to be honest that might be a little bit cleaner there we go yeah update let's head back to our course page and see how that's turned out I'm gonna reload this so we've got our breadcrumbs and student counts all gone the instructor Kent instructor tab is gone and down the bottom of just got a nice clean footer so I think sometimes less is more a nice simple website he is less distracting easy to use a better experience in a lot of cases so I'm quite happy with how things are going so we've got our course page and we've got one lesson done we started setting up a quiz but we haven't actually added any questions so let's keep working on our quiz so let's get back to our course let's go to quizzes and let's go ahead and look at this quiz let's edit the quiz there we go now this is the same concept as before we can add a little introduction to our quiz but then we have to add questions to our quiz so let's create a new question so let's call this question is WordPress awesome and then we can add a new we can say true or false multiple choice or single choice true or false is obviously true or false single choice means there'll be a list of choices and you have to choose the correct one multi choice means there's a list of questions and answers and you can choose multiple answers so let's call it this one a true or false question and it's worse press awesome I would say that's true one mark for the question you can put a little bit of information in there about the question a bit of content let's put in a little bit of content for the question there we go and some explanation for the question and maybe even a hint for the question as well if someone wants to click the hint so we can fill that in with a bit of filler content just for this demo and so that all looks pretty good we can now create another question let's say have you subscribed to ideas spot yet see what I did there let's make this a single choice question and with three options we can say yes second one can be already am and the third option will be not yet but definitely subscribe if this has been useful and click like as well I really enjoyed making these tutorials and I hope you like watching them anyway so besides that we can fill in these areas here with the hints and the background and things for these questions so each question have their own question content explanation and hints so that looks all good now let's go ahead and let's update that so there we go we've got two questions we've got a bit of a introduction there so the quiz looks all pretty good let's have a look at the actual quiz options here actually while we're here so you can show the list of questions while you're doing them as ordered so leave that ticked I think is good you can review the questions after completing the quiz I think that's worth allowing the student to review the questions show the correct answer I think yeah may as well you can show it to them then or you could go through with them later up to you duration if you want the quiz to be unlimited time you can set it to zero otherwise you could make it a limit a time limit on the quiz let's make them do the quiz for 120 minutes that should be plenty of time to answer two little questions anyway you could you could deduct points if they get things wrong and set the passing grade so 80% to pass is the default you can make it a hundred percent or whatever you like and they can retake the test or you could set it to zero and they can't retake the test so let's let people retake the test one time for example finally these ones you can actually check the answer during the test if you wanted to let me check the answer while they're doing it maybe that was just like for a practice exam perhaps so you could set it to zero which disables it obviously which is the default you could make them unlimited checks with a minus one so you could always check the answer or maybe you could let them check the answer maybe four times during the quiz so you could set it to four I think leave me in 0 it works pretty well in most cases and the same with hints you could have unlimited hints with minus 1 no hints with 0 or you have a limited hence Berkeley so let's say that's a five for hints for example I might just try up and let's have a look at how the hints function actually works in practice so let's go ahead and click update there we go so I think that's the basis of setting up a course with a quiz so this is these are all the skills you really need to use this plugin so let's go ahead and look at our course and let's do a quick run-through and see how it all works in practice so let's go ahead and view that course and there we go our WordPress training course we've got our overview our curriculum it's free to enroll at the moment let's go ahead and enroll see what that's like I'm already logged in so you can go straight into the class and let's start with lesson one so here we are in lesson 1 the student can just go ahead and read it when they finished reading click complete do you want to complete lesson 1 okay then we're on to the quiz I've noticed that these headings are all lowercase I think that's the theme related we can have a look at that after the quiz I think but I'd like to fix that up I think let's go ahead and click start so we can read about the quiz the time starts ticking so we remember we set two hours for our quiz is WordPress awesome it is awesome that's true we can add hints there like we heat it in a setup so you can read the explanation and the hint and there we go and we can go to our next question have you subscribed to idea spot yet I hope you have and even though we can go ahead and click yes and then we can go ahead and click complete do you want to complete the quiz there we go and we've got a hundred percent so I look pretty good if we didn't get a hundred percent we could redo the quiz we've got a one redo and we can set how many readers you want in those settings of course as we did before but there we go now we click the finish cost you want to finish and we're all done we have finished the course WordPress training cost we can actually retake the course you can allow them a certain number of retakes if they want and that's really all there is to it but I really think there's lower case headings are bugging me so I might just fix that up right now so let's go to our customizer load up our theme customizer so I'm using Astra and now this is going to be under global typography and headings we've got Montserrat family headings and by default they are lowercase so let's just say we want no text transform on those headings so I'd like them to be whatever I thought would be good h1 they've set them as capitalized headings and then the other ones just inherit from the top one so I think that's okay let's just head publish on that and see if it's a little bit nicer if I were to go back to our actual quiz and reload what actually does that looks a bit better so the eye is a capital hi now this e is a capital C so I quite like that a bit more so we've seen how a free course works let's look at how a paid course might work so let's go back to our courses so back in our - let's hit courses we could actually just duplicate the course we already made and let's edit that course and make it a paid course I'm gonna click duplicate and then we'll get our wordpress training course copy so rather than call it copy let's call it WordPress training course Pro that sounds pretty good people will definitely pay money for the pro version so let's hit publish now all we have to do to make this a paid course is go down to our pricing so let's make it pricing let's just make it for this example this lets us charge I don't know maybe just 10 cents and that's all we really need to do go ahead and click update there we go so training course prior let's open that in an incognito window and see how that works at the moment now I used incognito so I'm not logged in so someone looking at this web page for the first time what would it look like what would the actual sales thing look like so there we go we've got a 10-second course and we can click via this course so when we buy this course we can see that we've got a chance to login if you're a returning customer or register if you are not yet a customer now I think we can do a little bit better with this page I'd like the login and the register options to be a bit clearer for the user so this flow is a little bit more intuitive so let's work on this I'm customizing this a little bit so to customize that all we'd want to do is go to our theme customizer I'm gonna do this with custom CSS so let's open that customizer up in a new tab and then we're gonna go to additional CSS that's the CSS we've put in before to customize the course page now I want to customize that checkout page now what I've done is made some custom CSS to make those login and register links pop out a little bit more and make the interface a little bit more intuitive so I'm gonna pop that in there I will share that in the description so you can go and get that code as well but let's just hit publish now back on our checkout page let's reload and see what that looks like now so that looks a lot more intuitive I think if I was coming here for the first time it's a lot more obvious that I need to click register given that I've got a nice teal colored button there so quite like that you'll notice that in that code I set the register button to be extra-large and I set the login one to be large I just thought it'd be better to emphasize the registration for new users but feel free to play around with those styles however you like but that's how I thought it looked good obviously if you're not using this teal color on your website I've said it to teal you can choose any color you want in that session as well you can use an HTML code and pick any color Under the Sun so totally up to you so anyway back to our registration we can go ahead and register a new person for the class the new user would just type in their new username so maybe I could be Lisa Simpson and I'll just put the email address in here so just pop an email address and the password in there and click register so now we'll be at our course checkout we're logged in we can pay with PayPal we can go ahead and place our order they will process and it will ask us to log into PayPal so that is basically all there is to it all they do is log into their PayPal account and pay for their course now because we're you just using a PayPal sandbox to test with we can put our PayPal sandbox email in there and we can test this without actually doing a transaction if you've never done this before if you've got a PayPal business you can just go to developer PayPal comm slash developer slash accounts and you can make a sandbox accounts so I've gotten had it and done that already but I'm not going to show you the full process of doing that in this tutorial but I just want to show you how this actually works on the learn press website so that's just a PayPal sandbox email are generated let's go ahead and click Next and now we just have to put our PayPal sandbox password in there we go click logon and that will let us complete our transaction we can just go ahead and click pay now there we go and then we can return to the sellers website there we go and our order has been received so Lu and press will automatically email the student and you can also click the link there and access your course or you can go through the say the menu of your website can be set up to access the course as well I'm going to setup the menu a little bit later as well so you can access the courses through there but here we are now that we've paid for the course we can go ahead and start our lessons do our quizzes whatever we want so that's how a paid course works I think now what we'll do here set up that header menu now that we've mentioned it and let's make a page for all of our courses so people can easily get back to their courses and maybe let's make this button here a login button so students can come back and login to their courses so let's go ahead and get started on that so back on our dashboard let's go to pages and we can see all the pages that we've got on our website so far and learn press actually generates a page called courses if we go ahead and view that we can see that our courses are here our featured images are the thumbnails and we've got a little bit of detail about each course we can see that Astra uses an archives header for this heading so we could have it you couldn't want to customize that and I also want to change my username because I never set up a proper display name for my username when I made this website so let's look at that right now so back in our dashboard let's go to users and all users and I dear Spock class is there let's go to edit and our nickname is going to be idea spot and I wanted to publicly display the name as ideas but I think that'll look a lot better on that course page there we go if I go back to those courses let's reload that there we go so we've got ideas but as the they're that the pro cost the 10-cent pro cost and the free course is right there now let's go ahead and try and customize that heading so to customize this heading I do have to go ahead and override the theme in CSS I actually had to search Stack Overflow to find this code but probably not in there I just made it courses looks a little bit cleaner so I'm a lot more happy with that course page and every time you make a new course it's automatically gonna be added to this page just like you'd add blog posts to a blog all we have to do is don't forget to hit publish and let's go back to our main menu so now what I'd like to do is customize this top menu and I'd like to put the courses on that menu so let's go to menus and a navigation menu so there we go we've got home about services and contact now I would like to customize this a bit so I'm going to add items but I want to do is remove that one services and I do want to add courses there so that looks a lot better let's hit publish now that will take us to our courses page so we can see all of our courses now this works good if you've got lots of courses because it's got three columns and if you're looking at it on a mobile it's got one column a tablet I think it's got two and on a desktop it's got three but if you don't have that many courses maybe don't bother using this course set up you could probably just make your own course page design in element or and just show you that your you've only got one or two courses for example you could design this however you want it to look I might actually do that on the main page a bit later so stay tuned for that but let's work on customizing this header a little bit more the other thing I might do is change that take action and make it a login button so after people have bought things they know where to come back to login to that course so let's go back here and let's go and find that option so in Astra this will be under header and primary menu there we go there's take action I'm gonna call this one login and hit publish and I need to find the link to send this to I think it needs to just go to the profile page so let's figure out where that is so that should be under learn press settings and pages and if we look at the pages that it generates I think there's one called cost profile that should be the correct one let's view that so it cost profile if you're logged in it'll show your cost profile if you're not logged in it should show your actual login page so there we go I'm logged in as Lisa Simpson on this one let's log it out there we go so let's have a look there we go so we could make the login page take us to here where people can log in or register if they haven't registered already so let's use that link and let's go back to our customizer this is the link we want slash course profile so let's publish that one there we go now the other alternative instead of linking to the course profile through that log in thing what we could do is design a totally custom login page in Elementor and link to that and that might look good as well but I'm gonna save that later on in the video so keep watching now this will probably look better if they had a different featured image so let's fix that up right now shall we let's go back to our dashboard and let's go to learn press courses and let's edit the prior version and change the actual featured image to something else let's get these people there there we go and as I paid that one I'm given that it was three columns let's just make three courses why does that cause us there we go and let's duplicate that one and so fully in a wordpress course let's make this one ay-yi ecommerce ecommerce course ecommerce cost pro that sounds pretty cool there we go and change the image let's grab a free image and let's look at so maybe commerce see if there's a good picture there we go not that one with the stocks rising up how about that I'll select that save an insert and there we go let's hit update cool now let's have a look at how this web page is actually shaping up now so I'm gonna go ahead and view this site that's open a new incognito window have a look at it as a fresh user so there we go we could log in there that allows us to login or register if we haven't registered already we can go back to our home which is it looks like that I might actually link that to the registration or maybe I could link it to my blogging course maybe and courses takes you to our course page where we can see our three different courses that we've got so all looking pretty cool this one I see that the aspect ratio is a little bit different I might fix that up to make them all even but if you use the similar size image for each one you shouldn't get that issue if you did want to fix up the aspect ratio on that image I'll show you how to do that right now so let's go to - and let's open that course so that was in our learn press courses and I think it was WordPress training course so let's edit that one there's our featured image and all I want to do is edit that image now I'm pretty sure the other images in nine twenty by ten eighty and this is 1280 s so we could just change that to nine twenty by ten eighty to do that we just put in our new ratio so we have to hit crop first and then put in the new size there that'll give us our new crop factor and we can choose which part of the image we want to show in that ratio let's just keep it there and then let's hit crop and it'll save we can click Save there and then we just set that as our featured image there we go now when we look at our course page and reload it we can see all the images nicely lined up so that looks a lot better and if someone wanted to go ahead and purchase a course they could go ahead and click one and go ahead there to buy the course and new customers can register they can register they're set up a username and a password let's do that now say we want the part Simpson and an idea spot class plus part at gmail.com and just make up a quick password for this one and click register there we go and we'll take you to your checkout where you can place your order with PayPal and then you go through that PayPal process I'm going to go ahead and pay again there we go pay for the course okay now there we go right now we can return to the sellers website and we can either use that link there we can go back to our courses here and access our course that we just bought instead of which one did we actually buy we bought it for and there we are this is the one we bought so you will be able to access that the ones that you've bought you can access the actual course and if you haven't bought the course you'll only be able to access that front page with the buyer option so that's how that all works now let's go back to our home page and let's do a little bit more work on this home page let's load back on our main page let's view that site again as the admin and let's edit that on Elementor so let's just say we were really focusing on having one course so let's say we wanted to focus on that ecommerce course so let's go ahead and get the link for that ecommerce page so that was this one here ecommerce course pro and instead of registering let's go and make this join and let's link it to the e-commerce course page that we got previously and let's call this econ econ courses there we go let's update that and so say you only have one course rather than having a full course grid with those three columns let's just focus on the main splash page and then we can go ahead and they can send them straight to the course and I think that might be a better situation for some people who are just really just focusing on the one course so let's go ahead and view that page there we go and then we could go ahead and join the course there it would send you to your e-commerce course page and then you could buy the course like that so that's another way of doing it a little bit cleaner a little bit more streamlined so if you're just focusing on one course you could do things like that otherwise you can use that course grid that we went through before so totally up to you I think this website is working pretty good you've seen how everything works I think the last thing we have to cover is how to add video to your courses so let's try adding some video to our lessons so let's head back to our dashboard and learn bressant courses and let's edit that ecommerce so we want to edit one of the lessons that we made so I'm good a lesson one there and click Edit and load up our lesson editor so let's try adding a video to this lesson so there are three ways I'm going to show you to start with so there are self-hosted video and YouTube and Vimeo so I'll show you how to do all these three and later and I'll show you how to do that Dropbox hosted video as well so stay tuned for that so let's go through these so the most straightforward method itself hosting your video what you do is go to add media and you can upload files you can upload a short video to your website now in my case I'm limited to 128 megabytes maximum upload file so if you're on shared hosting you'll probably have some kind of maximum upload limit so that's really going to restrict the amount of video you can put onto your site but it might be ok all you need is a one or two minute video you could get away with that but if you're on shared hosting I really don't recommend hosting or trying to host long videos on your website but that's quite straightforward to do you can pop a video in like that now the next method is YouTube so it's same thing go to add media but in this case we're going to insert it from a URL so all you have to do is pop in a youtube link there and it will embed your YouTube video so you can pop that YouTube video you'd like that so that can work reasonably well if especially if you're using unlisted our YouTube videos you can pop them in your course I think this is a good way to embed if you're working on a free course if you're working on a paid course and you really want to secure video now YouTube's not really going to be that secure because people can still share those links and they can still add the links to playlists and things so it's not the most secure way but I think for a free course it's probably a decent approach to adding video to your course next up we've got Vimeo it's a really similar process we just go to add media and we insert the URL into our Paige and there we go Vimeo file in there too so give me a little bit more clean and if people are viewing this on a mobile device they're much less likely to have the Vimeo app then they would have the YouTube app if they have the YouTube app and they're viewing on mobile it's going to take them off your website and put them onto their YouTube app so you may actually end up losing traffic to your a blog or website through YouTube so I think if you were trying to promote your page and get free traffic that can be okay if you're using YouTube but if you really are wanting to do a professional course then I probably wouldn't be using YouTube you'd want to look at Vimeo you could start with the free version and then have a look at the pro version if you need more space and better privacy so let's go ahead and click update and have a look at how these actually look in practice on the lesson before we do that I'll show you a plug-in that's really helpful in this situation it's called RV advanced video embedder it gives you lots of options for embedding your videos in the course so I've already installed and activated that one you to search for RV advanced in your search bar instill and active and then go back to our lesson here and particularly with YouTube videos this is really helpful because when you play a YouTube video what happens at the end of the video is it's gonna play suggestions and if you're using this RV plug-in you can leave it a totally blank you can to get a much cleaner experience for your viewers if you're using that Harvey plug-in also with the Vimeo files it does clean up the header there makes it look a little bit more simple it doesn't get rid of the logo which is a shame if you get the Vimeo Pro you can actually get rid of that logo and you can implement privacy controls which is probably the best way if you're doing a paid course you want to be really professional I would recommend that $7 plus plan you get 250 gigabytes a year to upload and that you can do a lot of courses with that you get power complete control over your privacy of your courses as well so that would be a good way to keep things restricted to paying members now finally the cool thing that you can do with avi is actually stream Dropbox files so you can upload a file onto Dropbox and paste your link in there by default it's got that little bit at the end of your link the DL equals zero we can delete that off delete the question mine we just want the mp4 file and we're gonna wrap that with a shortcode and we can type Harvey URL equals the URL with quotes around it and then close that bracket off now we hit update so that should all work pretty good in the editor you will still see this shortcode but in the actual course if we have a look at that course we can go down and we can see enough to reload this one so the Dropbox video appears there we go a Dropbox now this looks perfect there's no branding there's no links to other videos it's all completely private and it's only available to whoever you share that link with it's not completely unlimited on Dropbox I think the free version you can share the video up to twenty five gigabytes birthday but that's still quite a generous allowance so if you're just getting set up this might be a good way to get a few videos onto your website with good performance and without costing you anything but I think later on if you've managed to sell a few courses on your website probably upgrade to that Vimeo Plus plan that gives you full privacy control so that's probably the best way to get big storage allowance and basically unlimited file transfers to your students so that's incredibly good value so back to our lesson I think probably the best option was actually the Dropbox one so I might actually delete out these other ones delete YouTube I do think YouTube is the best if you're running free courses and you want free traffic because YouTube it will generate traffic by itself as well so YouTube is pretty cool in that regard but if you're using a paying course definitely you don't want that YouTube branding and you don't want visitors leaving the course and finding other courses related to your course on YouTube but just it's not a good way to do things so I'm just gonna leave that link to Dropbox on our video there now let's go ahead and click update so before we wrap this up there was just one thing I kind of wanted to work on because on our main page if we could log in I wasn't entirely happy with this being our login actually let's look at the on the incognito page because that is the view that new user would get if they tried to login so you get this page I don't think the design of this is particularly good you could style it yourself with CSS but that's gonna be a lot of work if I go back home let's actually make a nice login and registration page using Elementor so let's get started on that so back on our dashboard let's go to pages and let's add a new page and I want to call this one course login and we'll go ahead and publish there we go and that's in Elementor let's wait for Elementor to load up here now to add a login to a page and Elementor if you're using the pro version you can just use the element that's built in but if you're using the free version I'll show you a plug-in they can actually do it for free so let's try that let's go to add plugins and such a one called login with Ajax and then you install and activate that one and this is super easy to use it makes a shortcode that's just called lwa so all you do is go back to your Elementor page and pop in a short code with lwa on it so short code let's drop that in there and let's put that el-wafa on them so that's your shortcode and it will show you your profile so let's actually let's do that a little bit more interestingly so I'm just going to delete out this bit there now what I'll do is I'll open the main page and Elementor I'm going to copy the same heading section and use up for our login page so let's copy that go back to our login page let's paste it in there so we can copy the same style I will delete the actual middle part out of this section now we can go ahead and put our shortcode in here so let's grab a shortcode widget drag that in this one is called LW a so let's login with Ajax we apply and the update so our by default doesn't look too amazing let's actually give that a little bit more style so let's let's change the background color for a start let's make a white background on there give it a bit of transparency I kind of want to give that some some padding around as well so let's give it say 50 padding and I think that'll look better I think actually when you load the page for real it is centered so let's have a look what it looks like for real so this is basically how would look for a new user so that definitely looks way cleaner then what learned for us gives us by default so that didn't take us too long to set that up I might actually put a little bit of information here to make it a bit more intuitive and maybe make the background a bit more closer to white because I think this looks a little bit washed out so let's go ahead and do that it's the back in Elementor let's look at that section and style and background type so that was white and I want to make it more opaque just a little bit of background popping throughs okay I think that's better it's your update and then that's also open to support maybe you're heading on here as well making me like that there we go so let's just call this login yeah - to access courses update again let's see what this would look like - eh I use off the website and who had just found your website so here we are that does look pretty clean now I'm pretty happy with this so I think rather than linking it to other login page they look like that I'm much more happy with this when you use this link and let's go to our theme customizer and change that button ok back in our theme customizer I think we needed to go to header and we were looking at primary menu there we go the button links to course profile let's change that link change it to your course login the one we just built and let's go ahead and publish that now that that's published users will get a much nicer login screen so let's have a look at what that actually looks like so now back on our main page if we go to login they'll be sent a year so it's a much nicer setup so let's test logging in with one of our students so I'll go in as Lisa Simpson the one I set up earlier and it will redirect and here we are we're still in our profile page so what we want to do is actually redirect on login we want to redirect people to the courses when they login so I'll show you how to do that and the other thing I don't really like is you get the admin bar for the user so I don't really need that for students you only really need that for yourself as the admin so I'm gonna show you how to turn off that admin bar so let's work on that but first let's do that login redirection so when students log in we really want them to send them to the courses page so let's go and copy that courses link I've got mine - courses let's go to dashboard and let's go to our log in with Ajax so that's under settings and log in with Ajax there we go so generally you want the global login redirected like that to go to the courses except if you're an admin I'd like that to go to WP admin so I'll just copy the WEP admin link there and then everyone will go to courses except for the administrator so I think that's okay same with logout I think with logout we just want to send people just to the home page when people log out so let's just set that up and click Save Changes the other thing we wanted to do was turn off the admin bar for the students so let's work on that so let's go to plugins and add new now you can do it with a very simple plug-in it's just called a hard admin bar and the one I checked was this one here with 30,000 active installs there's a few that would do it all of them are basically the same it's just a couple lines of code and I'm just gonna go ahead and install and activate that one hard admin bar and now when we log in we shouldn't get the admin bar for the students if you don't want to use a plug-in for this you can actually go to the learn press documentation and they show you how to hide the toolbar from all users except for admin by just editing the functions PHP file but you need to be using a child theme to do that and then you need to add that code to the functions PHP so for most of you I think a simple plug-in will be quicker but if you're one of those people who hates adding extra plugins then go ahead and use this method so anyway let's check if everything's working as intended now so let's go to login let's log in as student there and go ahead and login now this should take us to our course page and then we don't have any admin bar and we can also probably access the course that we've bought earlier so that all works perfectly I think we're ready to wrap things up let's go back to our home page and let's just do a quick summary of what we've done so we've made up a nice front page people can go if you want to focus on a specific course they can go ahead and click join and for that case we put the e-commerce pro course on there you can go ahead and click buy you go through the checkout you can register for a new user set up a username and password and then it takes you through PayPal you can also set up that course page which makes that nice little grid layer that shows all your courses whether they're paid or free doesn't matter and also we made this nice login function for people who bought of course they come back they say that nice obvious button they can log back in and access their courses so all looks pretty good I'm pretty happy hopefully it's been useful hopefully you can set up a nice course and maybe make a few dollars teaching your knowledge to your students thanks for watching hope it's been helpful and I will see you next time

Channel: IdeaSpot

Views: 63,473

Keywords: how to create an online course with wordpress, how to create an online course wordpress, creating online courses a step by step guide, how to make an online course website, how to create an ecourse with wordpress, make an online course, learnpress tutorial, wordpress lms, how to create an online course

Id: jjT0Y6uG7vM

Length: 66min 49sec (4009 seconds)

Published: Thu Jun 04 2020