Create An Online Course With WordPress Free (Full LifterLMS Tutorial)

today i want to show you how to create an online course website with wordpress just like what pat flynn has for his power up podcast as you can see smart passive income is a very successful blog and pat flynn has hosted this power up podcasting course on a subdomain which is courses.smartpassiveincome.com the main website is just smartpassiveincome.com so on the course this landing page looks awesome here's the hero section of the course an introduction of the course as well as an introduction of the course instructor to build trust the main takeaways from the course the course syllabus the benefits of joining this course some testimonials faqs and call to action if you want to create any successful course you need to follow the structure of the page we have just seen because this is a tested and proven copywriting structure for sales pages if you just take the time and analyze any successful courses you will realize the similarities in the structure of the sales pages anyway let's not talk about copywriting let's talk about how to set up a course sales page just like what pavlin has and we also talk about everything that goes behind the online course let's go [Music] hey this is jack and this is your first time watching a video from my channel i share a lot of wordpress tutorials and online business content mainly focused on helping you create beautiful and fast loading websites for you or your clients so feel free to subscribe to the channel and hit the bell notification so you won't miss any of my videos now here's the plan for this entire video i will first explain to you what are the pros and cons for hosting an online course on a subdomain and then i will show you how to create a subdomain to host your course and then we will set up a free course and design it to look like this we have everything that pat flynn has this is for you to collect emails in case you are not ready to sell your course yet next we will style the lesson pages and make them look like this looks cool right there's a sticky sidebar here and all the course content we will also make the student dashboard look like this then we will turn that free course into a paid course and finally we'll talk about how to connect the course hosted on a subdomain to your main website i will go through every single detail of the course creation process without leaving anything out if these all sound awesome to you can you do me a little favor and smash that thumbs up button let's go now i honestly believe that if you have a main website where you get a lot of traffic you should not host your online course on your main website because firstly your online course may slow down your website secondly there is a risk of your online course breaking your website and thirdly in case you want to switch your course platform to another in the future it is much harder if it is on the main site and that's why hosting an online course separate from your main website is more beneficial so let's get on with creating a subdomain now my site is hosted on a2 hosting because it is the fastest and the cheapest hosting plan based on my research and analysis you can check out the playlist at the top right to see how i derive at a2 hosting if you like anyway a2 hosting uses cpanel which is very common for wordpress sites if your host is not using cpanel you may want to contact them to see how you can create a subdomain i think all the processors should be similar you don't need to purchase a separate domain from a domain registrar meaning you don't need to buy a domain name courses.jackchild.com normally all web posts will allow you to create subdomains for free and it is very simple so in cpanel all you need to do is to find these sub domains under the domain category enter the subdomain you want in this case it is courses select your main domain and the domain for your courses will be courses.yourmainsite.com let's create that and then let's install wordpress on this subdomain which leads me to another benefit of having a subdomain which is you can have a completely different design and layout from your main site you can have different themes and plugins and they will not affect your main site anyway on cpanel under the software section you can click on this softaculous app to install wordpress let's click on install select the sub domain put in all this information and click install and we are done let's give it a while for the sub domain to propagate maybe a couple of hours and you will see a completely blank wordpress site with the default wordpress theme installed and now let's install the theme and plugins we need now to get started we have to log into the backend of the website and from here we want to install a free theme that i recommend let's go to appearance and themes and then we want to click on add new let's search for a team called cadence and this is the team i recommend to go with lifted lms because they integrate well together so let's install this and let's activate this and now we can remove all the other teams for housekeeping because we don't want our website to be cluttered with all these unnecessary themes and plugins so let's click on team details and let's delete this let's do the same for the rest and we are done cadence is the only team that is installed on this website next we want to install some plugins so let's go to plugins and add new and firstly let's search for cadence as well and we want to install this cadence blocks plugin because it will give us a lot of design options when we are designing our course landing page so let's activate this and we are done next is the star of this tutorial which is lifter lms so let's search for a plugin called lifter lms and let's install this this is a powerful free plugin and you can basically create an entire course using this free plugin but the only downside to this is that you can only create a free course if you are using the free plugin if you are trying to sell a course you gotta get their premium add-ons which i will go through later on in this video but what you basically need is this universal bundle that includes the e-commerce add-ons that allows you to accept payments from stripe and paypal as well as the integration with email marketing services as well as the form add-ons to customize your enrollment forms and everything so we'll first go through what we can do with the free plugin and we'll try to max it out and then in the later part of this video we'll go to the premium add-ons to enhance the student experience with your course so let's head back to the wordpress dashboard and activate lifter lms and now this is a very important step because this setup wizard will help you set up pages that you need for your course and if you don't go through this wizard you have to set up those pages manually which is not recommended in my opinion now just in case you accidentally click on the skip setup and you're directed to the wordpress dashboard let me now show you how to get back into the wizard all you need to do is to go to lifterlms under status let's click on tools and utilities and over here we have this setup wizard you want to click on this return to setup wizard and you'll be back here so now let's get on with this let's get started and these are the pages that will automatically be created after you have gone through this wizard we have the course catalog in case you want to create more than one course they will have a page that consolidates all your courses and then they will create a membership catalog in case you want to bundle your courses together and sell it as a membership and then there's a checkout page and a student dashboard so these are all the pages that it will create let's save and continue now over here it depends on where your target audience is if it is in the us you select us and if it is any part of the world just select whatever and let's continue with this the main currency you use is really up to you as well i'll leave it as it is but you can change to whatever you please and over here this is very important you want to enable offline payments because when you set up the course with lifterlms the program will constantly search for a payment gateway even if you're setting up a free course so you want to enable this offline payments to give another option to lift the lms in case the online payment gateways has not been set up so you want to check this and let's save and continue now lift the lms is constantly growing and improving so if you want to grant access for lifted lms to collect non-sensitive data to your website you can click on allow and they will give you a coupon for you to get the premium add-ons at a cheaper price otherwise you'll click on no thanks so it is really up to you but for this example i'll click on no thanks but i recommend that you click on allow and we are basically done now what i recommend is to start a course from scratch because most of the time if you import some templates and you try to make some edits to it it is much harder for you to edit than to start from scratch in my opinion so we'll start from scratch and i will show you step by step on how to create a beautiful looking course that people want to buy so let's start from scratch and we are done it immediately creates a draft course for you and you can start to create the course from scratch now before we set up the course content there is another thing we need to do let's go back to the wordpress dashboard and let's go to settings and permalinks what we want to do is to select this post name so that when you create a post or a course the link for the post or the course will just be the url plus the post name because by default it is this day and name and it is hard for people to remember so we want to select this post name and let's save changes and now we are ready to create the course materials so let's go now let's give this course a title so for example if i want to create a course that teaches page speed optimization i'll name this course as page speed optimization you can go creative this is really up to you i'm just showing you an example i could probably name this as php king course or page speed evangelist course or something like that but anyway let's publish this blank course first and then i'll show you how the course page looks like right now let's open up in another tab and here we go it looks awful honestly but don't worry about that we will style this page in a while now let's first add the course content let's head back to the course and then what we want to do is to close this off and then under the course tab we want to launch the course builder now every course will have a section and lessons so for example if you are reading a book they will have a content page right where they will show you the topics and stuff section is basically the topic and then under a topic you can add lessons to it so let's add a section and then for this section i'll call it introduction to page speed insights and then within this section i want to add a new lesson for lesson one i want to name it as overview add a new lesson we'll name this as first contentful paint so basically what i recommend you do is to lay out the course structure first before you add the content to it and that's exactly what i'm doing right now let's add another lesson let's name this as image optimization and then next let's add a new section for this section i'll put as case study 1 this is for a case study i've done and then in this i will put a new lesson i'll put in the name of the case study and maybe i'll just remove this so it looks nicer and then i'll create a new section for this i'll put case study 2. under this i'll add a new lesson this is for styles and bags this is another case study i've done and let's create another section so as you can see to create an entire course structure is very simple all you need to do is to add sections add new lessons renaming them and that's basically it and we are basically done let's take this course structure as an example i could have expanded more on this added more sections into this course but just to keep it short i'll do it this way so we have section one which is the introduction there are three lessons section two is a case study one with one lesson the same goes for the others now let's add content to the lessons under the overview if i want to add a video lesson all we need to do is to click on this settings and over here we can add a video url for example if you have hosted the videos in vmio which is the video hosting solution that i recommend if you do not want others to easily steal your video content i highly recommend that you go with vimeo because with hosting solutions like wistia you can easily download videos when you have access to the page so that's my take on video hosting in this example i'm just going to embed a video from youtube i'll paste in a video link like this and then if i want to change the permalink of the course you can click on this and you can basically rename the url of this lesson but i'll just leave it as it is if you have an audio file you can just paste your audio url here and for example if i want this lesson to be a preview lesson i'll just turn this as a free lesson so people can view this lesson even if they are not enrolled to the course if you see some of the courses for example in teachable or coursera they will always have some preview lessons for you before you decide to buy the course and this toggle will basically make this lesson free for preview now since this is a preview lesson i do not want to have a drip method here so what this does is that you can restrict the visibility of this lesson for example if you don't want somebody who just enrolled to view the entire course you can show the lessons one by one by restricting for example on a specific date you will release this lesson or maybe you can define the number of days you will display this lesson after the course enrollment but for now i'll leave it as it is the first lesson is a video lesson and for example if i want to create a text lesson i can do so by hovering to this lesson and i'll click on this to open up the wordpress editor now as you can see this is the wordpress editor you can add content to this page just by hitting enter and you can add a block here i already have something copied so i'll just paste it here and i'll update this lesson and this is how the lesson page looks like we can style this in a while but now let's just move forward let's refresh this and we can see that this lesson too it is a text content lesson one is a video lesson and it is a free lesson for preview lesson three is going to be a text lesson as well so i'll just click on this and then to add content hit enter and i'll paste in some text here so cool this lesson is done let's update this go back to the course builder refresh it expand this and here we go and let's say for the first day of enrollment i only want to show lesson 1 and i want to hide lesson 2 let's edit lesson under the drip method let's select this after 1 day of the course enrollment this lesson 2 will be displayed and as for lesson 3 we want to display this on the second day of the enrollment now you can also add another restriction for this lesson to be shown you can toggle this prerequisite on and what this basically means is that if for example lesson 1 overview is not completed or if lesson two is not completed lesson three would not show even if the drip method is displayed after two days so if after two days this lesson two is not marked as completed lesson three will not show so these are the two conditions for this lesson to be shown as you can see you can really create a very complex course even when you're using a free plugin okay cool now before we move forward i want to add the content for this three case studies let me expand this section add a video url let's do the same for the rest and we are done now what if i want to add a quiz here and i want the student to pass the quiz before they can move on to section two three and four to do that let's go to lesson three of section one let's click on this lesson settings and then over here you can click on this quiz let's create a new quiz let's name this quiz as page speed knowledge quiz and then for this it's basically a short description of the quiz i'll just put it as this and before we perform this setting let's add question i'll put the first question as a multiple choice the first question will be this and i'll put in the choices let's say the first is below 1.8 seconds choice b is between 1.8 seconds to 3 seconds and to add a new choice just click on this and add the third choice if you want to add a description to this question you can just toggle this if you want to add an image or video just toggle this but to keep it simple i'll leave it as it is and if you want to aid your student in case they got this question wrong you can toggle this result clarification on and then you can just give some explanation as to why option a is the right answer for example option a is the right answer because google is looking for the fastest loading speed for a page it's so obvious right but you get the idea this is just an explanation in case somebody got the wrong answer and then you want to help them to study next let's add another question for this i'll put it as a true or false question i'll ask them the best image format for web is web and then they'll select true or false i can expand this result clarification as well and i'll explain jpg or png is good but webp is typically smaller in size and it loads faster on web browsers okay so we're done with this the next thing is we want to clarify the passing percentage let's say i want my students to pass this with flying colors i want them to pass at a hundred percent grade because there are only two questions it's either above 50 or 100 but if you have more questions it's really up to you to define and then i don't want to limit the attempts and i don't want to add a time limit to it but it's really up to you i will show the correct answers and that's basically it let's save changes and then as we go back to the lesson we can see that we require passing grade on quiz before you can mark this lesson as complete so that's what we are going for now what if i want to restrict these three sections to display only if they pass lesson three of section one all we need to do is to edit this lesson under prerequisite toggle this on select lesson three for case study two as well let's expand this under prerequisite select lesson three of section one the same goes for this and now only if you pass this lesson you have completed the quiz and everything these three sections will show that's the whole idea of it now let's test the flow of the lessons let's head back to the dashboard open up in a new tab and under lifted lms sorry under courses let's click on lessons let's go to the first lesson and as you can see this is the video let's mark this as complete we go to the next lesson let's mark this as complete as well and now as we scroll down we need to take this quiz so this is the description of the quiz as you can see we'll start the quiz let us fill this test okay let's select a wrong answer and then another wrong answer and complete the quiz and now we can see i failed this test and for me to know what is wrong with my selection i'll click on this and you'll see i've selected this answer but the correct answer is this because under lesson three and under the quiz i've targeted this show correct answer if i toggle this off this correct answer would not show and then over here this is the clarification we have provided this is for question two and now let's retake this quiz this time around let's select the correct answer and there we go the next lesson button has now appeared and we have all these cool tabs that appear we can go to the next lesson mark as complete this as well and this and we are done with the entire course so that's how you add materials to your course you can restrict the display of the course and you can add a quiz to each of the questions as well i hope this is easy for you to understand and if you find this helpful i hope you can do me a little favor and smash that thumbs up button now let's move on to design this ugly looking course page and turn it into an awesome looking cost sales page that looks like pat flynn's power up podcast let's go alright right now we want to edit this ugly looking course page what we want to do is to edit course make sure that you're logged into your website to see this top bar and a good thing about lifter lms is that all these blocks are gutenberg blocks which means that they can be removed and they can be added back later on so for example i don't like this design i will just remove it i will remove this as well the course information i'll just keep this here and i'll remove the rest and if we view the course right now this is almost like a blank page and it's just showing the course syllabus here now i don't want this page header to appear so what i need to do is to click on this course settings and under course title i will disable it let's update refresh and the course title is gone and before we touch anything on the page now it's time for us to touch what is outside of the page which are the logo the menu items as well as the footer these are under the theme settings so to customize whatever that is outside of the page what we need to do is to click on this customize let me open this up in another tab and there are so many tabs right now i need to close the rest and i'll just leave this tree open now the reason why i recommend that you install the cadence team is because it is integrated with lifted lms and it has all these settings here but right now that's not our focus our focus is to edit the header menu so let's go to header and as you can see right here under the main row we have a logo here that is represented by this jack charles causes and the primary navigation that is represented by all this stuff over here so i want to edit this logo under the logo i will click on this gear for the settings and the settings for the logo will appear on the left now let's select a logo now select files i'll select this white logo click on select skip cropping and the logo is right here but we can't see it because the background is white and the logo is white so it kind of blended with each other and what we need to do is to change the background color of the header so under the header let's go to design header background let's change this color to this which matches my main site and as you can see the logo is now visible but it is a little big so let's edit this let's click on this gear under general the logo max width we want to toggle this to something smaller i think 60 pixels is good and the next thing is we do not want this title because right now we have a logo and title and we've selected this layout we only want this logo here so i will just click on logo and there we go next i don't need all these menu items here what i need is just two buttons and to remove this let me just delete it by clicking on this cross next let's head back under the header we want to drag a button over here to the main row and as you can see there is a button right here to edit this button let's click on this gear the button label i will just put it as enroll noun i'll leave the url for now i'll get back to this as for the button visibility i want it to be shown to everybody and as for the design we can turn the button size to large but i prefer to keep it as medium and as for the colors i like to change this to white which is the text color here and as for the background colors i like to turn it to this color and this is how it looks like and as we hover i want this color as well but i want it to be a little lighter so it looks like this maybe darker will be better cool we are basically done with the header let's publish this and now we want to change the background color to white so that it blends with the content to do that let's head back back again let's go to general and under colors the side background we want to turn this to white as you can see once we click on that the background the site is blended with the content background we're basically done let's publish this and now it's time for us to edit the stuff on the page let's head back to edit course and now we want to add some designing blocks let's click on this plus to add a blog let's search for something called row layout let's select this as you can see you can select all these layouts here for me i'll select this two equal column layouts and then i want to turn this to full width so i'll click on this and then i'll select full width and as you can see the width of this block has now taken the full width of the page now to access the setting of this block what we need to do is to click on this settings and under the block we have selected this row layout and if you want to make sure you have selected the row layout you can click on this as well and it will show you the layers of the page right now there are two sections nested under the row layout block we just want a background to be full width so i'll click on structure settings i will toggle this on and as you can see the content of this block is now refrained to the size of the content the size of the content is basically from this white space here to here okay cool the next thing we want to do is to edit the background of this block so under the background settings sorry we want to open this background overlay settings i want to make this a little special i'll click on gradient the first color i'll put in my brand color and as for the second color i'll put in the same color but i want to make it a little darker the overlay opacity which means the transparency of this overlay right now this is 30 we want to make it 100 so this overlay will take over the background color the second color we want to make it a little lighter so maybe something like this and what we want to do now is to add the course title so over here let's add block let's browse all and these are the blocks we can add to this page i will select this event heading i'll put this as page speed optimization course the heading color i want to turn this to white i'm not sure why there is this biggest letter here i'm sure there is a little bug and as for the font size i want to turn this to 55 or actually 65 will be 60 will be more appropriate let's update this and let's see how it looks right now so luckily the biggest letter is not here we have the heading here which is a little big so let's make it a little smaller maybe 55. and as for the typography i would select poppins which is the phone i used for all my sites next i want to add a text here so i'll just click on the space i'll turn this text to white and make this a little bigger let's say this is 30 or maybe 25 pixels and the next thing is i want to add a button right below this text so i will add a block browse all search for advanced button right here and i'll turn this button color to something orange or yellowish that looks like this this looks good but there's a border color which i do not want over here we can turn this transparent by clicking on this and bring it to zero and you'll see the border gone the button size i want to make it large i want to align this button to the left as for the text color i want to turn this to white type in the text as enroll now and to make this button a little bigger let's click on this settings the top and bottom padding i'll put it as maybe 20. padding is basically the spaces within this element so if you want to adjust the top and bottom padding as you toggle this it will change the size of the top and bottom and if you want to adjust the left and right padding just adjust this as you can see the spaces within the element will adjust i'll put the left and right as 60 pixels and as for the top and bottom i put it as 20 and that looks good now i want to add some padding or some spaces right after this button how do we do that let's open this layer view let's select this row layout and then under the padding and margin for the bottom padding which control the spaces between the bottom of this row layout and the last element which is the button so let's increase this to maybe 60 and you can see there are more spaces here and as you hover to the space you can see that the cursor has changed you can click and drag it and it will expand the space let's do the same thing at the top currently there is a 25 pixels of padding at the top let's change this to a hundred and there'll be more spaces right here cool let's update this and let's refresh this page and you can see right now it looks like this there is this white space over here which we do not want and to shift this entire block up let's head back to the edit course select the row layout we gotta adjust the margin margin basically controls the spaces out of this element so let's say what is out of this element is the top spaces and the bottom spaces so to shift this entire section up we need to have a negative figure so let's say maybe 50 the entire block has shifted up let's update this refresh this page and right now you can see the gap is closing but it is not enough so let's maybe make this 80. let's try this again a little bit more maybe 120 and as you can see the gap has closed but let's find a sweet spot let's say if this is 100 how does it look would it have some white spaces here yes there is 110 i think 120 is the sweet spot cool this is done let's add a video right here so this video can be an introduction video or a sales video to promote your course i don't have one prepared so i'm gonna embed one of my videos to this section i'll click on this to add blog browse all let's search for youtube if you have hosted your sales video on vimeo you can click on this and embed a vimeo video but for this example i'll just embed a youtube video put in the link and embed and here we go let's update this and see how it looks like right now i think this looks good the only thing is the color of this button doesn't match this so let's change this let's make sure we have the color code let's copy this go to the team customizer head over to the header under the button design change the background color to yellow and as we hover we make this a little darker so it looks like this let's publish this and refresh and our hero section of the course looks decent in my opinion the next thing we want to do is to add a wavy border here and to do that let's head back to edit course let's add another blog right after this block here let's click on this list view and then let's hover to this section where we can add a block let's select row layout if you don't see this here you can either browse or or you can search row and this will appear let's click on this and because this row layout is right after a paragraph and this paragraph is something that we do not want let's click on this and let's delete this block and this is shifted up cool now let's select this one column row layout we want to make this full width and as for the structure settings i want to restrict the content with to what we have defined in the theme and then to make that wavy border let's click on dividers let's select top because the border is right at the top of this row layout let's select a divider let's say it is this and as for the divider color i need to know the color of this background so i will click on this row layout and under the background overlay settings which we have just set the second color is the color of the gradient background which is right here i'll copy this color code head over to this row layout section and what we are trying to achieve here is to have a border that blends with the background color of the above section so on the dividers we want to change the divider color to this for the top and here we go and because we want to shift the content of this block down let's add some spaces here by clicking and dragging the space i think 160 pixels works just fine let's update this let's see how this looks like i think this looks cool let's blend it well the next thing is we want to add some text here to introduce the course so let's head back to edit course over here we want to add blog we want to add a heading here let's click on this this big ass text has appeared again but anyway i'll just add the text now it's tedious to always change the font style so what i will do is to change the entire font style of the team let's head to the theme customizer let's go to general and typography under this base form i want to click on this and i'll search for pop-ins and as we click on this all the fonts on the page will change let's publish this head back to the course update this so that all the changes will be saved and let's refresh this page cool now this is the font style i want i want to make this title a little bigger so i'll just put this as 55 maybe 45 put in the text make this bow and a little bigger maybe 25 pixels or maybe 20. next i will paste in some text which is the introduction to this course hit enter and i'll paste the text in here and we're basically done with this section let's update refresh and i think this looks good the next thing is we want to add a mid your course instructor section let's head back to edit course hit enter so that we can add a new block here let's browse all i'll select row layout the same thing a one column row make this full width and i think this is wrong let me expand this this view and i'll explain to you now over here we have all these layers nested under row layout the same thing goes for this row layout we want this row layout to be an independent block not a block that is nested under this row layout so we need to delete this and then we need to click on add block and row layout and make sure that this row layout is an independent just like the row layout at the top so let's select this one column row make this full width adjust the structure settings to the theme content width and let's adjust the background settings under the background color we want something gray but a light gray like this but i want to add some spacers after this text so i will select the row layout above and i'll add some spaces to the bottom maybe 100 pixels cool now as for this row layout i want to add some spaces at the top as well so i'll just click and drag to maybe 100 pixels as well and then let's add a header let's select advanced heading meet your course instructor turn the font size to 45 and i'll paste in some text after this now i want to add an image of myself so i'll click on this hit enter and i'll add an image block so let's search for image let's upload and i'll select this this is a little too big so i'll turn this to maybe 50 or maybe 75 i'll align this to the right and i think this looks good let's update this and let's see it live on a page i think this is good let's add some spaces at the bottom let's head back open up the list view select this row layout and then under the padding and margin we want to add bottom padding you can change the number here or you can just hover to get this cursor click and drag it down let's update this and the next thing is you want to add what you will learn from this course but before that let's add some cool dividers so since this row layout is selected we'll expand this dividers and since this is the bottom let's select this bottom and we'll change the divider to this for example maybe this looks good so we'll select this and we need to add some more spaces maybe 150 is good let's update this refresh and i think this looks cool next let's head back to the edit course right after this row layout we want to add another block so let's add a block create another row layout select this make this full width and as for the structure settings let's toggle this on and let's add a heading and let's make this 45 to make it consistent add in some text right after and now some main key takeaways from this course so i'll hit enter and i'll add a blog and browse all and i'll select this icon list let me show you how it works right now we have icon here let's put in some text let's say this is an introduction to page speed insights and for the text let's increase the font size to maybe 30 and as for the icon let's select this individual list item and right now this is the icon let's deselect this and let's find something suitable let's search for maybe meter and i think this is suitable let's click on this and because the size of the icon is a little small let's increase this to maybe 30 to make it consistent with the size of the text next i'll paste in some text right after the icon list and then i will add another icon list but i do not want to restart everything so i'll just click on this and then i want to duplicate it and now i want to bring this down by clicking on this and as you can see this is brought down let's change this heading to this and let's change the icon to something suitable so let's say this and then i'll add some text right after and then i will add another text here let's say this is one to know more explore the full list of lessons boldness make this a little bigger let's say this is 25 and let's update this and see how it looks i think this looks good this is the text that links to this which is good and the next thing over here we want to add some cost benefits here so let's head back right after this let's add a new block row layout select this you see everything is quite standard once you know how to design a page full width structure settings and then let's add a divider let's say this is at the top and let's change the divider color add some padding to the top sorry this divider doesn't look nice let's make the divider color white and what we want to do is to make the background color of this to blue and it will look like this let's add a heading how this chord sets you up for success change the heading color to white make it a little bigger add in some text let's add an image search for image i'll select this centralize this add some more text add a call to action button let's copy this make sure this is a paragraph block so that we can right click and paste it here let's add some spaces here by clicking and dragging it to maybe 150 let's update and see how it looks like i think we need more spaces here but other than that i think this looks good so let's head back click and drag to maybe 200 pixels i think this looks good and the next thing we want to do is to add some testimonials here and bear with me we are almost done with this page design let's head back add another section roll layout select this open up the list view and make sure this row layout is independent which it is let's select this as full width add a divider at the top we want to select maybe this and for the divider color we want it to be this and this looks good add more spacing adjust the structure and let's add a heading don't take my word for it let someone else speak for the course let's paste in some text and next we want to add a video right here the good thing about the wordpress editor is that once you paste a youtube url automatically embeds the video right here and the video is up let's add a code here add block search for search for quote put in some text let's adjust the size of this and this looks good let's hit enter add in some more text enter again we want to put the name of the reviewer let's align this to the right bonus adjust the size update and let's see how it looks like this is a little small so let's adjust this to 45 and what else i think this looks good we want to add some more testimonials so within this block let's hit enter let's nest another row layout and this time around we want to add two columns we want to add a video here but let's select paragraph so that we can paste the video url let's do the same here and i'm lazy to add a new row layout i want to put two more videos here so i'll just select the row layout layer you can expand this as well to select this and let's duplicate this and we have two new videos all we need to do is to click on this video and then we want to edit and let's change the link of the url and another video is embedded let's do the same for this and we are done now let's add a separator here let's click on this and as you hover you'll see this add block browse all we have a spacer and divider here as you can see it is right here but we want to make this a little thicker so let's select this layer and let's go over the divider height let's change this to 2 pixels so now this is a little thicker and we want to adjust the width of this let's change this to maybe 60 and you can see the divider is a little narrower now i want to put another spacer right below this video testimonials so i will select this duplicate and then i will shift this down and here we go let's add some text and a call to action let's head up and let's copy this scroll down and let's paste this here easy peasy next we want to add some faq right below so let's add another block roll layout select this make sure this is an independent layer make it full wave adjust the structure settings change the background color add some spacing some spacing above this as well and now over here let's add the heading let's put this as frequently asked questions change the font size to 45 and let's add an accordion let's add block browse all select accordion as you can see these are the layouts we can select i'll choose this i'll add a title let's say this is how long does it take to complete the course and the answer is this let's add another let's say how long will i have access to the course and this is the answer and to add another item let's click on this can i pay with paypal this is the answer let's add another item to you offer money back guarantee yes we do and finally what if i need additional help this is the answer and now let's see how it looks like on the live page this looks good and as for this it needs more adjustments so we need more spaces between these questions we can have a transparent background for these and maybe the title of the question should be a little bigger so let's head back select the accordion layer let's expand the list view and let's select the accordion here now over on the right these are all the settings of the accordion let's say for the title color which is this this is not what we want we want it to be black on the normal but for the title background we want it to be transparent and as we hover we want a background color to be this and as for the text color we want it to be white so this is how it looks next as for the active the background color let's turn this to transparent and as for the active title color let's make it black let's try this out let's see how it looks so this is open by default and as we hover this is how it looks like so now let's adjust the text we can change the trigger icon to all these but i chose to leave it as it is we can adjust this to the left let's see how it looks i think this is good and as for the title spacing that's what we need for the top padding we want to put it maybe 40 and for the bottom padding we want to put this as 40 as well let's see how it looks i think this is much better but i want all these to be closed instead of having this open by default so what we want to do is that right at the top we want to toggle this on so that we will start all pins collapsed and it will look like this so we are basically done let's add some spaces here under this row layout let's add some space by clicking and dragging it to 150. cool let's add a final call to action section and we're basically done let's add a row layout select this full width toggle this on add some spaces at the top add a heading change the font size add some text and add a button click on this row layout i think this button is out of this block but we want to put this button within that block so let's copy and remove this block click on this which is within the block and hit enter it will create another paragraph block nested under the row layout let's paste the button here select the row layouts add some spacing at the bottom and we are basically done let's refresh this and as you can see this is the course page don't you think this course page looks much better than the one we have by default let me know in the comment section what you think about this and finally we need to link this buttons up for site visitors to actually enroll to this course so what we need to do is to add another block but this time around we will select a block from lifter lms which is this lifted lms pricing table let's click on this and as you can see we have this section here which we didn't use on this page let's update and refresh and what we want to do is to click on this and we want to copy this link so that we can place that url over here on the buttons of this page so let's head back now we don't need this section anymore click on the button paste the url and hit save let's do the same for the other buttons hit submit and this button as well and finally the button on the header let's click on this paste in the url published refresh and now let's see let's view as visitor and now what i want to do i really like this course so let's enroll now and here we go if i'm logged out i can add all this information and enroll now the next thing we want to do is to edit this page we don't want this here and then after that we'll edit the lesson pages so let's go now this page has this header title here the title of this page is purchased but basically this is the checkout page of your course even though your course is free right now you'll still go through this page as you can see you will fill out all the information and you'll click on enroll now but if this is a paid course they'll have all the payment processors here so what we want to do is to remove this purchase here because this doesn't make sense when this is a free course and to do that make sure you're logged into the website and you want to click on this customize here i'll open it up in a new tab and then this is basically a page so we'll go to page layout and over here if you do not want to show the page title which is this you can toggle this off and this will be gone it's that simple and if you find the width of the page content too white you can narrow it down by clicking this and this looks a little nicer in my opinion so this is really up to you let's publish this and we are done with this page now now let's edit the lesson pages let's head back to the wordpress dashboard and then under courses we want to select lessons we'll just view either one of these lessons let's say this lesson and as you can see currently it looks like this doesn't look fantastic so let's customize this under the team customizer let's go to lefter lms and lessons layout and what we want to do is to have a sidebar on the left and right now you'll see there is this space here this is meant for the sidebar but right now the sidebar is completely blank because we haven't add items to it so let's publish this first to save this change and then let's head back to the wordpress backend we want to go to appearance and we want to click on widgets and as you can see there is this course sidebar which will appear on a course page which we didn't want because i've started my course page just like a landing page or sales page so we don't want to add anything here what we want to do is to add items to this lesson sidebar let's click on add block browse all scroll down to where it says widgets and you will see this course progress here let's select this let's add a title let's say this is your progress and then let's add another block let's browse all and let's select this course syllabus cool let's update this and as we head back to the customizer and let's refresh this page we will see the sidebar items here but i'm not seeing the progress bar so over here let's select this progress bar i want to uncheck this and refresh and here we go next to style this sidebar let's say that i want the background of the sidebar to be this blue here so what we can do is to go to general and under sidebar and under design the sidebar background we can turn this to blue and then for the widget content we can turn this white as well as the widget title which is this the link colors i want to turn this white as well and as i hover i want to make it a little darker so this looks good i'm not sure why this is not turning white but we can check by clicking on this edit widget let's try to publish this let's see how it looks like let's go to courses lessons and let's view this so on the live page it looks like this actually let's remove this title i'm not sure why the color doesn't change so let's go to the widget and remove this update this and let's see how it looks like right now okay this is gone now let's make this lesson special we want the entire site over here to have this background color or maybe follow this so let's head back to the customizer right here let's head back under lift the lms let's click on lesson layout under design the side background i want to select this color as you can see now the background blends with the sidebar this is kind of like a cheat code instead of adjusting the spaces within the sidebar to make it look good you can just blend the background and it will look like an app now i want to change the color of this tick icons so let's head back back again let's go to general and colors and under the link colors i want to turn this into yellow and it looks like this now what if i want to make this sidebar sticky so let's say if i scroll down i want this sidebar to stick if this is long form content this sidebar will follow the scroll so to do that let's head back under general we have the sidebar here let's click on this and we want to toggle this enable sticky sidebar and now as you can see if you scroll down if it is a long form content this sidebar will stick let's publish this visit one of the lessons and let's see how far we have come let's refresh this page and here we go does this look nice to you in my opinion yes let's try to check out other pages i think this looks good let's try to take the quiz and now it's time to edit this which is the quiz page now this page now this is really simple to customize this page let's click on customize and then over at lift the lms under quiz layout we want our sidebar to be on the left to make it consistent so let's click on this and to turn the background color to match the color of the sidebar let's turn all the pages to this color and i know what you are thinking does it affect all the other pages and the answer is yes and that's why you want to separate your course using a sub domain so let's head back under general and colors the side background let's turn it to this color and there we go this is done let's publish this refresh this page and this looks good let's continue with the next lesson i think this looks good as well and i think all the lessons look good now let's double check on the course page just to make sure that all the adjustments does not affect the cost sales page so let's head back under courses let's view the course page okay the course page looks like this i think this is affected this is not but this is this is as well and now let's fix this so let's click on edit course this is actually a very simple fix let's scroll down and as we select this row layout and let's go to background settings the background color we want to turn it white let's do the same for this the background color turn it white this as well apparently this is not nested under this row layout so let's copy this hit enter let's paste it here so the syllabus will appear within the row layouts and the background takes the color from the row layout and we can remove this so now this looks good scroll down further over here background settings let's turn this white this as well updates and i think everything is in place except for this let's adjust this let's edit this course and then under the course settings and under content style by default this is boxed so the content is actually boxed and what we want to do is to unbox it let's update this and then let's refresh this page and you'll see this looks much better without any additional styling so cool the calls page is done the lesson pages are adjusted the quiz page is styled and all that is left is to style the student dashboard so now let's customize that page all right now let's see how the student dashboard look like i think i've opened up too many tabs so i'll just close them off and then let's head back to the wordpress dashboard under pages we have the dashboard here created when we were going through the setup wizard so let's open this up and this is how it looks like firstly we got a couple of things that we don't need the first is my memberships because if you're selling just one course and you're not packaging multiple courses to sell a membership we don't need this we don't need my achievements as well notifications redeem a voucher so let's remove those tabs first let's head back to the wordpress dashboard under lifter lms under settings let's go to accounts and over here to remove those tabs all we need to do is to delete them like this and let's save changes and as we refresh this page those tabs are gone now let's create something amazing here i want to add some buttons at the top one for the dashboard one for courses and one for each of these tabs here so what i want to do is to go to the top bar make sure you're logged in and let's right click on this and edit the page now as simplistic as this is all this information are actually displayed using this short code here now what i want to do now is to add a block and i want to add a row layout select a one column row layout and make this full width i want to turn the background color of this row layout to white so i'll click on this setting make sure that the block is selected and over at the background settings i want to turn this background color to white and then under the structure settings i want to put the content max width to be maybe 1 300 pixels next what i want to do is to add another block and i want to nest another row layer on top of that i want to select four columns let's open up the list view under the first section i want to click on this browse all and i want to add an info box and over here you can see there are six layout presets to choose from i'll select this let's go through the settings one by one under container settings the container border which is over here is too white i want to make it a little thinner so i'll say 2 pixels i think this looks good the container border radius which is the curve over here the higher the number the more curve there is so i don't want this to be so curvy i'll just put it as 10 and you'll see that the corner is not as curvy as before now as for the container border i want to turn it to black the container padding i'll leave it as it is and let's go to the media settings which is this icon here this icon is a little too big reduce the size to let's say 25 or 30. i think 30 is good and the line width will put it as 2 as well the icon border return it to 0 and you'll see the border gone the icon color i'll leave it as it is for now the padding i'll put it as 10 and we are done next the title settings which is this the title color i want to make it black the font size i want to make it maybe 25 and i think we are done let's change the text let's say this is my dashboard and for the text we'll put it as welcome to your account area now the heading i think is a little too big let's reduce this down to maybe 20. i think this is good and for the text i want to reduce the size as well to maybe 16 and as for the icon let's change it to something else so over here under the media settings the media type it is icon you can actually change it to an image a number or whatever but let's keep it as an icon let's remove this and let's search for maybe home and we'll find something like this i think this is more appropriate and we're basically done with this i think this looks good so what we want to do is to duplicate this info box to other columns so let's click on this info box make sure that our info box is selected let's copy this over at the next column let's add a block select paragraph so that we can right click and paste let's do the same for the rest and we are done next we want to change this to my courses view all your courses here and this is my certificates view or certificates achieved and over here let's make this as account details edit your account information let's change the icon under media settings remove this let's search for book let's select this and as for certificates let's change this to let's search for cert and we'll select this and for the account details let's search for person and we have this cool now what we want to do is to select this row layout do not select this we want to select the one within the main row layout and what we want to do is to click on this and duplicate and we have four more other boxes here now we basically have seven tabs so we have an extra here so what we want to do is to remove the last info box and now this is my grades view your task grades this is your orders view your orders and this is log out securely log out of this website cool let's change the icons for my grades i'll search for grade and i'll select this for your orders under the media settings let's search for order and we have this here and then as for the log out let's search for log and we have this here so cool now let's update this and let's see how it looks like over on the dashboard so this is how it looks like let's bring this up to the top so over on the editor let's click on this row layout make sure that this is selected and let's move this up and as you can see this will be at the top and now we want to do the same thing let's head back here go to page settings content style we want to unbox it so as we update and refresh this entire section becomes white which is what we want now next what we want to do is to remove all these tabs here and before that we want to link all this to the buttons over here so that when we click on these buttons the information will be displayed here so let's say if i click on courses it will say that i'm not enrolled into any courses i'll click on my grades and notice over here some information will be displayed and that's what we are trying to do here now take note of the links that is appearing at the bottom left of this page as i hover over to these tabs as you can see this is the link for the dashboard this is a link for my courses and so on so what i want to do is to copy this link by right clicking it and copy link let's head back to the wordpress editor under my dashboard we can paste the link here hit submit next we want to copy the link of my courses head back to the wordpress editor click on my courses and paste the link here hit submit and i'll fast forward the process to complete the rest now we are done let's update this and refresh this page now as i click on my dashboard the information of my dashboard will appear my courses my certificates account details my grades this is done now what we want to do is to remove these tabs here and before that let's head to the customizer and let's head over to lifterlms under user dashboard for the navigation layout we want to select above and as you can see the information here has expanded if you put it either to the left or to the right the information will be squeezed down here and that's not what we want so let's click on above and then the next thing you want to do is to select additional css next you want to paste in this code here and as you can see the tabs are now gone if you want to copy this code i've left a link in the description so you don't need to type it out word for word and that's basically done let's publish this and then let's head back to the dashboard refresh this and let's see if we click on my dashboard this will appear my courses my certificates don't worry about all this later on i will enroll myself into the courses and you'll see some information here and if i want to edit my accounts we can do so here my grades orders and now let's log out now the thing here is that even if i log out all these boxes are still visible so we gotta change that let's lock myself back in let's refresh this page now what we want to do is to select this row layout as you can see let me open up the list view i will select this row layout so that all these info boxes will be selected and next we want to open up this visibility settings and we want to hide this section from the logged out users let's update this refresh the dashboard let's try to log out and here we go all the boxes are now gone now there are several things you want to do now the first is if we click on this logo it will bring us back to the home page of this website this is the url so that's not what we want if you're selling just one course you want to redirect this url to the course sales page and that's what we're going to do let's log back in and what we want to do is to install an additional plugin so let's add new let's search for 301 redirect and this is the plugin we want to install let's click on install now and activate the next thing is we want to find out the url of the course sales page so let's go to courses and over at this course if you hover to view there is this link at the bottom and what we want to do is to right click copy link head over to settings and you see this 301 redirects here let's ignore this and over here this is the url we wanted to redirect to the course sales page let's save this and let's test this out let's copy this link which is the home url basically let's open up a new tab and paste it here and now it redirects to the cost sales page and everywhere on this site if they click on the logo it will bring us back to the course sales page and that's what we want now the next thing is i want to hide this enroll now button if the student has logged into the course so let's go over to customize let's open it up in a new tab and then let's go to header click on the button and we want to select logged out only for the button visibility let's publish this to save the changes and the next thing is we want to add a menu item called my dashboard here so let's head back to the wordpress dashboard let's go to appearance and menus now let's create a menu let's say this is the main menu we want to put this as the primary menu let's create it and next we want to click on the screen options and we want to check this lifter lms so that all the pages from lifted lms will be listed here what we want to do is to select dashboard and add to menu and as we save this let's go to the page refresh this it is not here yet because we haven't added that item so over on the theme customizer let's select header primary navigation let's click and drag it right beside the button not sure why it doesn't go there but anyway let's click on this and let's add the navigation here switch this over and we have a dashboard here now to change the color of this menu item let's click on this and under design we want to change this navigation color to something like this and this looks good let's publish this and let's close this off and as you can see right now you see a dashboard here if we click on this it will bring you to the dashboard but let's say we log out from this course we will now see the enroll button and if we head back to the main page we'll see these two items now what if i have not enrolled in this course and i click on this dashboard we will be prompted to login so we are basically safe nobody can access to the course if they don't enrol to it so now we are basically done with the entire course we are done with the course sales page the dashboard the logins the lesson pages and everything the only thing that is left right now is to turn this course into a paid course and for this we need to get the universe bundle because it includes the e-commerce add-ons which are these few add-ons here if you want to accept payment by credit cards you will need this extension if you want to accept the payment by paypal you need this extension you can also integrate with the payments from woocommerce as well you can purchase these extensions individually they will cost 120 per year for each of the extension and that's not worth it if you get the universe bundle you'll not only have the e-commerce add-ons you will also have integrations with your email marketing provider and integrations with form builders so that you can customize enrollment forms and stuff we have the design add-ons as well for example the achievement badge and certification backgrounds and many more so that's why i recommend the universe bundle if you want to sell a course this price here is much cheaper than third-party learning platforms like learn worlds teachable kajabi thinkific and others with live to lms they don't charge a fee when you sell a course whereas those third-party lms they will charge you a fee on top of the monthly fee you paid to them so this universe bundle is definitely worth it and now let's sell your course okay now let's install this stripe extension to do that you have to sign up to lift the lms and they will provide you with an activation key and what you need to do is to paste the activation key right here so i will do that and once you have activated the license key you'll now be able to see this install button here on these add-ons so what i want to do is to go to the stripe extension and install this let's click on apply and then we want to click on activate click on apply again and this is now installed next under lift the lms we want to click on settings and then let's head over to checkout as we scroll down further we will now see we have a striped payment gateway now let's click on that enable stripe and as you scroll down you need to get this publishable key and a secret key from stripe so if you log into your stripe account if you don't have a stripe account just go to stripe.com to create an account you probably got to verify some personal details and then you'll be able to use stripe this is rather a simple process so once you're in the stripe dashboard what you need to do is to click on this developers button and right here there is this api keys we want to copy this publishable key here you'll click to copy head back to your site and paste the publishable key here and then next you want to copy the secret key if you don't see a secret key here you can just create one and they will show you the key and right after that you want to go back to your site and paste the secret key here let's save changes and now let's test the checkout page but before that we have to make the course that we have just created as a paid course so let's head over to courses and then let's edit this let's scroll down all the way to the bottom under the access plans let's uncheck this box and now let's say the price of this course is 199 and it's a one-time payment lifetime access not on sale and available to anyone if you select members only it means that you are selling this course to your existing members so done let's update this and then as we view the course and we click on enroll right now you can see there is this option to pay by credit card so this is from stripe so cool we are done with stripe it's such a simple process now let's integrate with paypal let's head back to the wordpress dashboard over here it says you need to force ssl this is usually done through your web server so i will not go through that now let's add paypal on the lifter lms click on add-ons and more scroll down till we see paypal right here let's install this apply scroll down further activate this apply and cool we are done let's head back to settings let's do the same thing let's go to checkout scroll down we have the paypal payment gateway now let's click on this enable paypal now we have all this information to be added here now what we want to do is to open up a new tab and visit this link https developer.paypal.com we'll click on login so this is your usual paypal account every paypal account will have access to the developers account so let me log into this once you're logged in you want to create a sandbox account which is right here next you want to click on create account if you don't already have a sandbox account and since you're selling a course you're not a buyer you're a business select your country for me it's singapore and let's create so you have successfully created a sandbox account what you want to do is to hover to this and you want to click on view edit account and then next you want to click on api credentials and you want to copy all this information and paste it over here under the paypal sandbox api credentials so we've done that now we need the live api credentials so now you have to log into your usual paypal account not the developers account this sandbox is actually for you to test the payment gateway and this live api will allow you to collect real payment to your paypal account so you need to log into your usual paypal account and you want to hover to your profile click on account settings and you will see this page what we want to do is to select this api access let's click on update and as we scroll down under this api integration we want to click on manage api credentials and over here you can see we have the username password and signature that matches this so all you need to do is to copy whatever that is here as you click on show and paste it here so let me add that information and i'll skip this part and we'll go directly to testing the checkout so under the checkout page previously we had stripe and manual payment now let's refresh this and we'll see the paypal option here if you want to remove this manual payment just head back to your lifterlms settings under checkout scroll down click on manual disable this save changes and refresh this page and the manual payment is gone so cool we are basically done and we are ready to sell this course now to link this course to your main website it's actually a very simple task all we need to do is to copy this link which is the link to your course sales page open up your main site and you want to add a new menu item here that says course and then you want to place that link there and if you want to allow for login maybe place a button here that says login and the link you want to put is this dashboard link and that's basically it i'm not going to go through the process because i'm not selling this course and definitely do not want this course on my live page because it will cause some confusion so i'm just sharing with you the process of how i would do it if i'm selling a course feel free to be creative with this that's how you create an awesome looking online course with wordpress using lifted lms if you want to get lifted lms universe bundle i hope you can use this link to make the purchase it will really help my channel out what i really like about this setup is that you have total control over the design look and feel of your course and the best part is you do not have to worry about the transaction fees when you sold a course the profit belongs to you 100 this is unlike those third-party learning management system where you have to pay a certain percentage on top of the monthly fee you pay to them anyway what do you think about the course i've created are you happy with what you have learned today let me know in the comment section also please do me a little favor and smash that thumbs up button if you haven't done so and subscribe to the channel and hit the bell notification do check out these videos as well i wish you all the best stay cool and stay safe [Music] wow

Channel: Jack Cao

Views: 853

Keywords: lifterlms tutorial, how to create an online course with wordpress, how to create an online course wordpress, lifterlms review, lifterlms setup, create and sell online courses, creating online courses a step by step guide, how to create an ecourse with wordpress, how to make an online course website with wordpress, how to create an online course wordpress free, how to create an online course step by step, lifterlms demo, lifterlms wordpress, wordpress lms course builder, lifterlms

Id: CirK0YzPrkc

Length: 80min 52sec (4852 seconds)

Published: Mon Dec 13 2021