How to Create an Online Course, LMS & Educational Website using WordPress, WPLMS 4 and Elementor

[Music] hello viewers welcome back to my channel from this video onwards i am actually going to start off with a video series where i would be discussing about how to create wordpress websites from scratch i will show you step by step with the help of various plugins themes as well as templates available how you can make your own wordpress website you can create it for your clients you can create it for yourself sell it be it any e-commerce website be it any learning management system website a simple blog whatever it may be i'm going to show you how to create such websites from scratch i am a freelance website designer and i like to explore new things there are many uh there are various websites and various channels on youtube which provides such tutorials i have got a huge inspiration from such tutorials such videos and such channels i will also leave the credits and the back links to those youtube channels who have always inspired me to create my own content based on the same niche so keeping that in mind i am starting my particular playlist with this video on how to create a learning management system from scratch with the use of a theme which is called as wp lms wp lms is one of the top sellers when it comes to learning management systems for wordpress as wp lms is providing a huge set of applications huge set of functionalities and features it becomes the number one choice for any education uh needs be it any academy any institution or any college who wishes to provide uh learning management systems online they can opt for this particular uh theme i have one of my own websites let me show it to you it's called flipschooling.com which is completely designed based on wp lms only i use it to sell courses so basically this is a particular website this is the particular interface of that website it's really in intuitive it's really interactive as you can see there are n number of courses available on this particular website you can use it to sell courses or you can use it inside your organization as a learning management system as well so this is a paid plugin which costs around 75 but it gives you a lot of features and along with that it also provides you six months support from this particular developer so i i actually have this particular uh plugin so that's why i'm able to explain the various functionalities and features of this particular plugin right now on youtube there are multiple videos where they have designed websites based on wplms which was actually based on the version 3.x but now uh on 10th december the latest version of wplms has been released which is version 4.0 and there are a huge number of changes in the existing version and the new latest version so the website you can see over here is designed based on the older version but the one i'm going to show you in this tutorial will be based on the latest version of wp lms so this is all about the introduction of wplms let me show you the features what this particular website gives you for example this particular plugin provides you the option to create your own courses as similar to websites such as skillshare udemy and many other online course websites from where you can enroll to a particular course complete the course within some particular amount of time get the certificate and get certified from that particular website similarly you can add your questions in the form of quizzes you can add your videos you can upload your youtube videos as lectures to the courses similarly you can add attachments you can add some sort of drip course feature drip course is nothing but for example you want a particular course to be displayed only after one of the previous courses have been completed this feature is very useful if you want to check whether your students are completing your assignments on time or not once your students have completed the assignments then only the next set of features or next set of courses will be available for the student to perform similarly you can create the courses from front end this is one of the best features i have seen over here there are n number of other plugins available and number of other themes available which provide the similar sort of feature but the course creation from an instructor's point of view from the front end is missing in all those learning management systems available that is what i feel makes this particular plugin a standout option as compared to the other ones because this gives you an option to create courses from the front end as well you must be having a knowledge that whenever you're allowing the users to interact with the back end you're actually opening some back door entries for attacks to happen i'm also an ethical hacker so i know how important security is from any uh website's point of view so if you allow the instructors to gain access to the back end they may end up doing something to your website so to avoid that we need adding courses from the front end which is very much available in this particular plugin in this particular theme there are other themes also available for example learn press learn dash there is one one theme available eduma all of these uh are similar to this particular theme only some of them are having the options of adding courses from the front end but they are available as an add-on package for additional payment so this is what i find useful in this particular theme that it is giving it included inside the package only similarly the next thing is you can create your certificates you can create your badges whenever a student completes the course the badges will be displayed similarly you can add your own uh add-ons for example drive feature you can upload your files on the drive and allow the students to access their drive so there are n number of features available over here let me show you the quick demo of my website which we are actually going to design in this particular video series this is the front section we have already seen it uh it basically is like the introduction to what this website is all about you are asking uh the students to start a free trial they can click over here once they click here they are redirected to the registration page so this is how the registration page looks like it's basic registration the registration is done and after the registration is done from the students and the admin will receive the request and after the admins approval the particular student will be accepted a similar thing goes with if you are instructor you will have to apply as an instructor and the admin has to accept it from the backend so that this is just an added layer of security just to avoid any uh spams or any bots to access your website next up we are having this beautiful section here there is a counter of how many courses are available how many instructors are there how many students have enrolled to your website and how many categories are there these are all these values can be added from the uh from the backend or you can say with the help of some page builders we are going to see what exactly is a page builder we are going to make use of a very beautiful plugin which is called as elementor uh you must be having the knowledge about what exactly elementor is all about and we are going to make use of elementor pro plugin don't worry i will mostly focus upon the free features of elementor but there are few areas or few sections where we would be needing elementor pro features also but don't worry towards the next section i will tell you how to get elementor pro without shelling a lot of money next up this is how this is how the client testimonials page will look like you must have seen n number of websites where they upload client testimonials this is something like that right so this is uh completely static you can change the values from the back end with the help of the elementor pro this is how it is right next up all those instructors which are available in your website you can highlight top three or top four five six whatever you wish top instructors on the home page students will obviously have a look at the instructor before enrolling to the courses so if you are having top class instructors on your particular domain on your particular website you can add those instructors over here next up we are having this enroll to the course page this is a very beautiful looking page i have added a video at the background and it's basically a counter or you can say it's a countdown which says that in 7 days 21 hours 42 minutes and 4 seconds this feature is going to disappear you can change the back end as per your wish and whoever wants to apply as an instructor they can either click this become an instructor button or they can simply fill this form and get enrolled as an instructor the next section is all about the popular courses right now these are all dummy courses that i have created for the sake of this demo all the courses which are available will be shown over here with a small button beneath you can have you can have something like more courses or you can have different pages where multiple pages will link to multiple courses right so to end this particular section over here we are having this little footer the footer is all about some extra information you would like to provide your customers or to your students you can add those details over here and followed by a small subscription form or basically this is a newsletter i will show you how to create a newsletter with the help of a free plugin mailchimp right at the end towards the footer this is all about the copyright information by the way this is my website learnityourway.com i will be showing you how to create this particular website you are having right now in front of you from scratch in the upcoming sections to end this particular demo let me show you how the instructor's homepage looks like right so let me quickly show it to you so let me quickly login and show you to you how this thing looks like so this is an instructor's homepage this is how the instructor's dashboard looks like i have four courses i have zero assignments i have five students in my courses and i can send announcements to those courses from this particular area similarly on the left hand side you can see what various what are the various courses i am teaching click on courses and you will see these are the courses that i am teaching similarly i can manage those courses from here so as explained earlier i can create courses from the front end this is the most useful feature as you can see right now so right now i can create the courses from the front end without even interacting with the backend so this is one of the most secured features similarly i can manage the quizzes if any similarly assignments i can also manage the students who are enrolled to my courses as you can see these are the students i can simply drag and drop the various courses i'm having and i will get the list of students i can also download those uh list of students as a csv file if you open it this is how it looks the status of that student whether he or she has started the particular course or not so this is very simple and very interactive similarly this is a section where all my activities are being stored so this is one of the most required uh feature that have been implemented in this wplms 4.0 it is basically an audit section where you will come to know what are the various activities that you have performed in case you you have deleted certain section from your course you will come to know which were the sections that you had deleted by mistake or uh by your own intent similarly next is your profile you can change your gravatar you can change your avatar from here you can change your personal details by simply going into the edit section next up is a shop this entire website is based on one of the most proliferant plugins available that is woocommerce woocommerce makes the entire job of e-commerce very easy you don't need to shell out excess money to hire a programmer to install it install a payment gateway woocommerce does it all if you are having just a little knowledge about what exactly wordpress is you can do it on your own similarly the commissions that you earn are being listed over here so these are all dummy figures as you can see this is the graph of the course which i have sold and these are the various commissions that i have obtained from those courses similarly next session is about zoom meetings i can create my own zoom meeting and share the link with my students so the students will be able to attend my live sessions also similarly forums you can create your own forums you can ask questions you can allow students to answer those questions and whatnot so this is how your dashboard looks like and we are going to design the exact same thing over here so stay tuned it's going to be an enjoyable ride where you will learn to design your own wordpress website from scratch okay so let's get started uh first of all i would discuss about the various plugins and the various themes that we are going to need majorly for creating this website here is a list of all the major plugins and themes that we are going to need the very first and the primary theme which we are going to require for this website is wp lms theme it is a paid plugin which is approximately 5000 international rupees uh approx 75 but i would say if you are really serious about this website it's this is absolutely worth it secondly you are going to need elementor plug-in either free or pro both will work but in the case of the pro plugin there are a lot of features which will add more functionality to your website so if you can afford go with the elementor pro or otherwise elementor free would also be fine the third plugin is post duplicator i will show you what is the exact role of this particular plugin as the names signifies to multiply or replicate the various posts available you can use this plugin fourth is woocommerce because all the payments and the payment gateway integrations will be done with the help of woocommerce only fifth is mailchimp using this plugin we can create a mail list or a newsletter sort of a subscription based uh new mail list through which you can send mails to your entire mailing list in one go in one shot last one is woocommerce autocomplete now sometimes uh whatever what happens is after a payment is done your course has to be uh activated manually by the admin from the packet but suppose your organization is uh increasing in size and more and more customers are more and more students and customers are enrolling to your website then it becomes really difficult for the admin to look into each and every transactions manually from the backend so in such a case this particular plugin comes really handy again all these last four plugins are completely free the first two are paid first one is absolutely a paid plugin second one can be replaced with the free version also but i would suggest go with the elementor pro if you can afford it so let me show you what exactly is the plan of elementor block so let me show you what exactly are the packages of elementor pro have a look over here this is the price chart of elementor pro they charge around 49 dollars per year it roughly estimates to around three thousand four hundred or three thousand three hundred rupees per year so if you're planning to go for only a single site this is the price you have to pay for accessing elementor pro now the question you may ask is all these plugins might be available somewhere in the public domain for free then why to pay for them because they are already under the gpl license if you are not aware of the gpl license let me show it to you what gpl license conveys is any product under the gpa license is a free product and it can be shared it can be modified it can be even sold by individuals or organizations it clearly mentions that any product under the gpa license version one two or three you can resell it you can share it whatever you want to do you can modify it according to your needs according to an individuals or organization's needs but the catches the amount that is shown over here is for the support that they are continuously going to provide you in the form of updates and technical support as you can see updates for one year and support for one year similarly they might have been they might also be having some other functionalities other premium features which will not be there in the case of a free gpa licensed plugin so it's around 49 per year i would recommend go for it because you will be getting continuous one year updates from elementor elementor pro in short and you would be able to access all the features all the templates inbuilt libraries that elementor pro has in built i would suggest go for it if you can otherwise you can stick with the elementor free version also that will also suffice our particular website in front of us well don't worry if this particular price over here or this or this seems very huge don't worry at all i have elementor pro gpl version with me the only thing is these uh developers charge you for the support and the updates for uh one for one particular year so what exactly uh happens is if you have the gpl plugin with you you can use it with as many websites as you wish but the only thing is you will need to download the updates manually and upload them on your web server at a particular interval what i am doing is i am having elementor pro plugin with me so if you want to have the elementor pro plugin at a much cheaper rate with monthly updates whenever there would be updates i would be uploading them on the same link so you can have this plugin if you wish i'm not asking you for 500 rupees or thousand rupees or anything of that sort you can simply name your price if you wish you can even enter zero yeah you heard it correct you can download the product for free by simply entering zero over here add to cart and just placing your order as you can see just go to the cart go to checkout i have to log in first once you are logged in you can get the product place your order and that will be downloaded you can download it for free as you can see it over here i am simply asking for the uh suggested price because uh of all the efforts that i am putting into creating this tutorial for you it's entirely up to you if you wish you can add any amount between 0 to 1000 and download the product so that's it about elementor pro uh wplms is also available as a gpa licensed product but what happens is wp lms requires an activation key for setting it up on a website so if even if if i provide you the gpl license the blue plms plug-in you won't be able to upload it on the site because the newer version of wplms 4.0 requires an activation key to be entered on the website so i no so you have to buy it from their official website i would provide the link over here in the description box kindly go to the website it's around 75 dollars for a lifetime and you will get support for one year i already have wp lms on my dashboard as you can see i've already bought it around seven to eight months back so my support has expired six months support has expired but i would be uh getting all the latest updates from wplms whenever there is any update so what happens is you have to download the license certificate along with the installable wordpress file these two files are very important because the license certificate will consist of your purchase code activation code which you have to enter while installing or setting up your wordpress website second this is your actual plugin that is installable wordpress file only let me download it and show it to you how it looks it is around 5.7 mb in size this is the theme in fact no i'm continuously calling it as plug-in because i just mix up with plug-in and themes so this is a theme which is basically used to create your website this is how the theme looks like it has a number of features and number of add-ons and along with that as you know we are going to make use of elementor pro and many other uh plugins and themes just to support the website creation so that's it about this introduction let let us get started with how to host your website and then start creating your website from scratch so let's start talking about the hosting as you know that whenever you want your website to be viewed by the entire world you need some sort of a service which is called as hosting you would be using some resources of the hosting provider for example the server you would be hosting your website on that server and that web address or web url can be accessed from the entire globe but on the contrary if you are designing your website developing your website using a local host you can make use of zam server wamp server or lamp server just for testing purposes you can do so in fact i have also designed my website using xampp and then i will be showing you how to create the exact same replica of the website using a live hosting service i am using hostinger.in as my hosting service provider as you can see this website this one and along with that this website also that is learnityourway.com my main domain all of these websites are hosted on hostinger.com why so let me tell you first of all price the uh the price they are providing is very cheap as compared to the existing service providers and along with that the services i am getting from it this is all my personal experience i am not promoting any one particular any one particular hosting provider i am simply sharing my experience what i have garnered so far so this is uh the list of services they are providing i have opted the second uh package because i also work as a freelancer so i require a lot of websites inside a single hosting package uh the first one if you see it is 59 rupees per month so it is uh it is providing you only one website hosting and around 10 gb ssd storage so if you are new to website development and you want a personal website then you can go for this particular plan but if you wish to extend your uh reach further if you wish to create websites for your clients as freelance web developers you can opt for the second package or the third package i have opted for the second one because this is satisfying my needs my requirements from a web hosting service so i'm getting around 20 gb of ssd storage 100 websites i can create i can also create 100 sub domains for free i'm getting free ssl for all the domains all the sub domains also unlimited bandwidth and along with that cloudflare also as you can see cloudflare is also provided cloudflare is basically protecting your servers from dos ddos attacks so this is what i am using right now it is entirely up to you if you are favorable towards any other hosting provider then you can obviously go with that this is what i use and i would be showing the tutorial with the help of this hosting hosting doesn't matter the entire internal structure is completely independent of whichever hosting you are going to use right so this is the hosting i'm using what you can do is after you uh create your account after you do the payment uh this is somewhat this is what it will look like this is my website learningtoby.com and this is my domain also so what happens is you simply go to the hosting provider and this is the dashboard you will see over here before starting with any wordpress website you require a database so what you need to do is be it any sub domain or domain whatever it may be you need to have a web separate database for that particular website in my case i want a sub domain why so because i already have a domain learn it your way dot com and i have around 100 free sub domains at my disposal so i will be creating a particular sub domain for this particular site learning to away.com if you are working only with a single site then your domain name is self-sufficient you don't require any sub domains for my case i'm using a sub domain so it would be uh lms.learning2a.com i already have created a subdomain let me show you how to create one domain you simply go to your edge panel in this domain section click on sub domains and you will see a list of subdomains that you are currently having i already have one sub domain lms let me search it for you yeah here it is lms.learnityourway.com and in your case it will be your domain so you don't need to create a subdomain but for those who are wishing to create separate subdomains for each of their websites you can simply enter the name of the subdomain over here and click create now the next stage is setting up ssl ssl is very important because as you can see i have uh ssl setup on my website on all my sub domains it is already secured with aes so what happens is any information which is flowing through this website is protected using ssl security so if you are creating a sub domain immediately you won't get ssl installed similarly if you are just starting with your website hosting you won't get your ssl pre-installed you have to go to your ssl uh service over here or in short you can see that whenever i went to ssl i got the list of subdomains or domains which are already protected using ssl what you need to do is you simply need to go to your home go to your hosting and then scroll down to something like this ssl when you go inside this you will see a list of domains and sub domains that you are having which of them are having ssl installed and which of them are still having ssl pending once it loads it will look something like this all the subdomains are listed over here so what you can do is you can simply go to your particular domain over here you can select it from here for example learning your way dot com if you are if you are having multiple websites all those websites will be shown over here i'm having a single website learnityourway.com but all of all these are subdomains of that main website right so what happens is if you are installing a ssl certificate on your main website then also you would require ssl certificates for all your sub domains that you can do from here because all the uh sub domains will have their own hosting separate hosting so you will be requiring ssl for all of them so what you can do is you can simply select your domain or sub domain from this drop down list click on it and click on install it's as simple as that so just setting up your ssl is very much required because it will ensure that your data is secured on the internet so we are done with setting up ssl we are done with setting up hosting and the next thing is now creating databases what you need to do is again you go to your home go to your hosting and scroll down to something like this as mysql databases now click on this mysql database and you will see a list of databases you're already having in my case i'm having some five databases but as i have already explained that we will require a separate database for our new sub domain so what happens is uh be it a sub domain or a domain you would require a database separately for that so what i can do is i will simply give a name to my database now as i'm working on an lms website i will keep it simple the database name could be lms i will also keep the username same as lms only and you can give any password you wish i have already entered a password click create and the corresponding database will be created why database is important because everything you store on the website every data every piece of data tables your images etc all of them will be stored inside your database so this is how the database looks like now let me show you two scenarios if you are having only a single website the next thing is you would require the installation of wordpress now it depends on your hosting provider in my case hostinger is already providing wordpress installation so what you can do is in your hosting you can see there is something like this wordpress i am talking this from a single website point of view first and then i will talk about how to install uh wordpress separately on a subdomain so what happens is when you go inside your single uh website dashboard you will see something like this wordpress and there will be an option to install wordpress in my case wordpress is already installed so i am not uh doing anything here you can see you will see an option of installing wordpress if you're running a single website on your hosting you simply need to click on install just follow the steps next next next and you will be having your wordpress installed on your website within few minutes on the contrary if you are having a sub domain the process is slightly lengthier but again it's very simple let me show you how to do it first of all go inside your hosting scroll down to files now if you are not using hostinger if you are using anything else the overall architecture remains same instead of files it might be file manager or something like that but it will be similar only go inside your file manager and you will see a dashboard uh something like this this is basically your file structure or your directory from where you can access your wordpress files or your website files you simply need to go to the domains folder this is your main domain go inside it go inside public html and find the sub domain that you have created in my case the subdomain is lms all of these folders you can see are separate websites over here so these are the various subdomains and these are the various websites i am planning to include in my video tutorials so let's go into lms and as you can see these files are created by default you can simply delete them without any issue now what you need to do is you need to download wordpress simply type wordpress download and you will get something like this go to wordpress.org and over here click on download wordpress 5.6 this is the latest one it will be downloaded in a zip folder format and this is how the file will look like what you need to do is you simply need to go back to your hosting that is over here the file manager and click on upload click on upload files select the file that you have just now downloaded on your desktop search the file that is wordpress 5.6 open it and upload it depending upon your internet speed will take some time it is 15.8 mb in size so it's almost done as this is my first video in this series so i am going really slow i am teaching each and every step each and every point over here because from the next videos i am not going to show you the entire process again and again you can simply refer this video okay so once you have uploaded the zip file your next task is to unzip or extract all the files from this particular uh compressed file so what you need to do is you simply need to click on extract and give it any name for example wordpress you can even keep it as it is and press extract i will also show you the exact structure of your website okay the extraction is complete now what happens is if you go to your site my site name is lms lms.learnityourway.com if you enter this you will see the wordpress file structure this is not at all required because what it is showing you is this is the exact same same structure you saw over here wordpress and wordpress 5.6.0 as you can see so now my wordpress website is somewhere present inside this folder so what i need to do is i need to press wordpress and then it will go inside the main folder again you will have to press again you have to type wordpress over here and then the page will load up this is not at all needed because you won't be able to remember such a huge url so what is required is you go back over here just check the contents of this folder of the files which you have just now extracted these are the files and this is where the actual website folder begins or the website directory begins so what you need to do is you need to select all these files and move them to the actual location that is inside this lms you don't want this wordpress one more wordpress you want all the files to be present directly in this lms folder so you simply click on this change and select lms and click on this lower left side select this okay and then click on move so now you can see that all the files will now be moved directly inside the lms folder now we don't need this wordpress folder because it is empty now so what you can do is you can simply and safely delete this wordpress folder so now we have copied all the wordpress files on our website next step is now you can go back to your website that is lms.learningtoyourbay.com when you press enter wordpress installation wizard should pop up and this is what is needed now you simply need to create your wordpress installation you will be needing three things that is your database name database username and password so we already have created our database now you simply need to go back to your hosting provider in our case it was hosting a go to the database section and the database which we had created just now copy the credentials for example mysql database copy this name go over here and paste it over here similarly you have to copy the database username also you have to copy it and paste it over here last thing is your password simply enter that and press submit so once you're done this is how the message is being displayed all right run the installation once you click run the installation it will ask you or prompt you for your website title i'm just keeping it simple i'm just keeping it as lms you can obviously change it later on also no no issues with that my username i would like to keep it as this this is my password obviously you can't see it and secondly i'm also giving my email id and press install wordpress once this is done you will have to login once in your admin panel and this is how your admin panel will look like or your dashboard will look like so now we are done with installing wordpress on our server and now we can start creating our wordpress website lms based wordpress website from scratch which will look exactly similar to this one so stay tuned the very first thing that we are going to do with this website is we are going to install a plugin which is called as woocommerce now what exactly woocommerce is all about woocommerce is basically a plugin which makes all the e-commerce related activities streamlined so to install that you need to go into this plugins section click on add new and then you will be able to search for a plugin that is woocommerce so simply type in woocommerce and the very first plugin that is by automatic you have to install that once it is installed you simply need to click on activate to activate the plugin after activating the plugin you will be able to see this setup wizard what you need to do is you simply need to type in your address for example you can type in mumbai and then your country india and then go to maharashtra after this you simply can keep it mumbai only and this is my pin code after this there's an option if you are setting this up for a client or you are setting it up for yourself you can choose anything you wish and click continue in the next page it will ask you in which industry does this store operate whatever is your website is all about you can select that in our case it is education and learning so i will select this and press enter how you are actually going to sell your products it would be downloads because we are not selling any physical products so it would be downloads and next click continue how many products do you plan to display these are all just for survey purpose you can select any value it doesn't matter currently selling elsewhere no so it will give you some options for the time being i don't need these options so i will keep them off and then click on continue once it is done it will show you some themes you can select any of the themes right now we are not going to select any of the themes we are not going to buy any of the themes which they provide i will stick with the current active theme of uh wordpress by default that is 2021 now okay we'll set up the wplms theme later on they will also try to sell you a jetpack plugin but we don't require jetpack for our website so i will simply click on no thanks after it is done your initial woocommerce setup will be done and we will keep it aside for the time being we'll come back to it at a later point in the video at this junction let us set up our theme that is going to be wp lms so the first thing we need to do is we need to go to this particular section appearance and click on themes what you need to do is you are going to upload your theme which you have purchased from wplms so you have to click on add new and click on upload theme you will be given the option to choose your file i have the file on my desktop over here so i will simply drag it and put it over here and click on install now after a minute or two you will see that the theme is installed successfully if you have a correct folder correct file then it should not give you any errors uh the most general error that happens over here is we actually get confused written plugin and theme like i was uh initially in the video i was speaking about plugins and interchangeably using the words plugins and themes this is actually a theme sometimes what we do is we instead of uploading the file through the appearance theme section we upload it from this section plugins and end up having errors so kindly avoid that so after we are done with this you can go and click on activate this will activate your wp lms theme once you click the activate button this is what you should see this is uh the installation wizard just select any one of these options so for the time being i am selecting this university or you can change it later on it doesn't matter in the next step it will give you some options to download the pre-built templates there are many templates available over here you can select them but my intention is to teach you from scratch how you can build your own website if you are building it from scratch it gives you the total freedom of how you want your site to look like so for that purpose i will skip this particular step uh on the next page you will see the various plugins you are going to require i will select all those which are free for example all these are free so i have selected them you see that there is also an option of conferencing through zoom so you can take your live lectures also using this system and click continue uh now what happens is as i had told you earlier that wp lms is also belonging to the gpl version 3 license but still it requires an activation key or a purchase code so you have to enter your purchase code and then you will be able to proceed further so i have my purchase code i have entered it proceed to next as you can see all of the services which i had ticked in the previous page they will be installed and activated now so don't skip this step it is very important you press continue these are very important plugins from the website's point of view so let it download and don't skip this process otherwise you will have to install them manually so right now we have installed all these plugins and press continue okay this is the page where it is asking you that you can import some demo content but as i have already explained that i am going to show you from scratch how we can design our own website so i will skip this for the time being and finally it will ask me for some default colors primary colors i would like to keep i would continue so let's click on this view your website this is how our website looks like nothing close to what it actually should look like but don't worry we are going to design it from scratch so it will take some time now if you want to uh see your dashboard you can go to your dashboard and see if any errors have occurred or not obviously over here as it is very evident you can see that our website is still not secure but why is it happening we have ssl security for our website right so why is it saying that your store does not appear to be using a secure connection the thing is by default uh wordpress sticks with the http version only so what you need to do is you need to go to settings click on general and over here at this location wordpress address instead of http make it https and repeat the same over here as well and then one more important thing is change your time zone because uh you're part of a utc plus five and a half hours time zone select that otherwise all the times on your website will will look somewhat five and a half hours behind so select that and save the changes after done you it will be uh prompting you to login once again and you need to log in using the credentials that you have provided after you have logged in now you can see that the prompt which was earlier telling you that you need to have a secure connection it's it's not there right now because you have now switched to a secure website now what we need to do is we need to do some basic settings in the lms plugin so click on this lms over here and go to settings once you are inside settings we are going to see how our course will behave what are the various uh settings we need to make in our courses what are the various ways in which students can enroll to our courses how the instructors are going to create their courses these settings can be changed from here so the very first thing you need to do is uh you need to go over here student login redirect and instructor login redirect this is basically once i login into the website i should directly go to the dashboard the same applies for student as well as for the instructor similarly it's up to you but if you wish you can allow only one session per user so for example if i have logged in with one id i can't log in with the same id because there will would be only one session active for that user this is good from security point of view to avoid multiple logins from the same user similarly next up uh this is very important enable message to instructor in course page enable it and enable enable course content button in the instructor profile what this does is it allows the instructor to create the course from the front end that is what i had discussed in the very beginning while uh introducing you to the wp lms that it allows the instructors to create the course from the front end itself so we don't need to worry about the admin uh admin panel being exposed to the instructors that won't happen over here next up display woocommerce account and profile enable that if you are having a terms and conditions page you can select that page from here right now we are not having it we'll see how we can create a terms and conditions page and add it later on similarly enable student menus yeah we also want enable instructor menus we wanted next up is assign free courses to students on account activation it depends on you for me i am not keeping it enabled so i will keep it as it is just make sure everything over here is everyone next you can uh do this thing hide members section in single course what it does is uh if i am if i am an user of your website i would be able to see all those members i don't want it i want to keep the members privacy secured so i will hide all the member sections in the course page the count will be visible but the details about each member won't be visible similarly i can show the curriculum or the syllabus of that particular course just beneath it right next up something over here yeah you can show the course badge and certificate in pop-up on course details okay next up enable course duration ah sorry next up this is a login pop-up for example if you want your courses to be only enrolled only available to students who are having accounts on your website then you can force them to log in and then only they can move ahead similarly enable course duration from the start course this is uh basically for timed courses where a particular course has to be completed within uh four weeks five weeks similar to what course era does so you can have something like that also next is course timeline in accordion style uh let me show it to you if i go to any particular course suppose this is a course introduction to machine learning okay and if i click on this this introduction section is having uh two subsections so once i click on this plus button it is falling uh beneath that introduction only so this is what we call as an accordion style fashion so i would keep that over here show curriculum in accordance style and next up uh what you can do is uh next everything can be kept as it is i guess this is more than enough if anything is required we can come back later on and next up is enable uh front end cause relation no we don't want this because once a course is there on the portal we would not want it to be deleted otherwise all the students who have paid for it may feel cheated so keep this as it is no issues with it and that's it just save the settings and come to the dashboard so we are done with the basic lms settings over here uh and next up what we are going to do is there are few more settings that needs to be done otherwise we may face some issues later on so what you need to do is simply search for vibe over here yeah this ybp and go to settings over here there are two buttons for example when user logs in wordpress he is also logged into ybp just select these two buttons this will make sure that whenever you are logged into the website you are remaining on that website your session is maintained unless you log out of that website otherwise on every page you will have to log in again and again this is very important so that needs to be done similarly uh the same thing global login this also needs to be ticked and at the end you can simply go and save the settings so we have done two type of settings so uh right now we have set up the lms settings and we have set up the vibe settings now what we need to do is we are having a website for courses right so we need to create some courses we need to create some registration forms through which the users may login into our website so let's see how to handle the new user signups and registrations for that you simply need to visit your website it will open up like this copy the url and open this in a new incognito window why i'm doing so i am doing this just to make sure to see how the website looks to a visitor because as i was already logged in as an admin i may not be able to access the registration page that's why i have opened it inside an incognito window okay so after the url simply type slash register as we can see there is already a registration page which has been created for you by wp lms theme so we don't need to create one more page from scratch the registration page is already there what you can do is you can add or delete certain fields if they are not required for example this external links field is not required so i can delete that so what you can do is you can go back to your admin panel over here go to lms sorry go to the users over here yeah and go to uh this profile fields once you are inside the profile fields here you can see these are the same tabs or same forms which are visible to the end user so what you can do is you can add or delete certain features from it as i was saying that this external links is not required so i can simply delete this from here it's instantaneously deleted so if you go back to the incognito window and refresh this page you will see that the external links have been deleted clear so now what we need to do is we can add a certain field for example as you know uh websites such as udemy skillshare etc allow the users the instructors to sign up from their websites so we can add a new field over here for example signing up as and then you can add two options and options can be added with the help of a drop down box so you can select drop down select box and over here you can type the first option as student keep it by default and add the second option as instructor just make sure that this particular option is required or compulsory so requirement is required and save it okay as you have done this you can go back and check in this incognito window this should pop up signing up as and it is required so you can select either a student or an instructor here so this is how we can create the profile field next up is we would require certain courses we need to create a course as well as an instructor so what i'm going to do is i will create an account an instructor account so for that what i will do is i will randomly type in my email id as my username i can keep the same i can even add one name over there but i would like to keep my username as my email id only to make things clear okay next up i need to add some password i can add any password of my choice okay i will add the same password i can copy it from here okay the copy option is not available so what you can do is you can add the password manually okay and give your name gender then your birthday i'm selecting any random value from here okay select your country and then sign up as an instructor first of all i'm showing you what an instructor dashboard looks like so select instructor click on complete sign up once this is done you will receive an email on your account you have to go there verify it and then you have to come back as you can see this is how the email from the website looks like thanks for registering and it is going directly to inbox it is not going to the spam section so what you need to do is you can simply click on this link over here or i can copy it copy the link address go to the incognito mode and paste it over here once this is done i need to click on activate and then my account will be activated now you may ask the question that what if a student registers as an instructor for that what happens is all the control is with the admin only even if you have signed up as an instructor during the registration phase still the admin needs to approve you from the backend so for that purpose you need to go to the users panel over here and you will be able to see all the users over here what you need to do is now this is a new user registration from this email so i need to go inside that user as you can see by default the site role given to you as student this needs to be changed how it can be done let me show you first of all go to the edit section and check whether the particular person has applied for a student or as a instructor as you can see the person has selected the person had selected instructor as the sign up account so we now know that this particular person wants to register as an instructor so what i can do is i can simply go to the user section once again what i can do is i can again go back to the users section and i can select this particular instructor over here by checking this box and change the role to an instructor and click on change so from now onwards this person with this particular email id will be considered as an instructor as you can see it from here right so this is how we can add an instructor to the website everything is done from the front end the only thing is the activation and the verification part has to be done by the admin this has to be done otherwise the control will be left to the instructors anyone can sign in anyone can sign up as an instructor and create courses of their choice just for quality assurance and quality check this has to be done right so we have set up our registration pages and now what we need to do is we need to create some courses how to create a course before that i will start showing you how to set up our basic home page once our basic home page is done we can start creating our courses courses categories etc etc etc right so now we are going to start with the most interesting part that is creating our home page for that what we can do is we can simply go to the pages section over here and as you can see there are many pages available these pages are created by woocommerce as well as by wp lms so we are not going to make any changes over there we are going to create our own home page so uh just click add new and create a home page what you can do is you can simply give a title as home and publish it you can view this page right click over there open a new tab this is how your web page will look like but as you can see the url is somewhat different it is not pointing to your actual uh home home page it is learnityourway.com home we don't want that we we would simply like this to open up whenever we type in just this much lms.learnityourway.com so for that to happen what you need to do is you need to go to your settings section that is over here settings and go to reading once you're inside reading you need to make some changes over here as you can see your home page is not set to any particular page you need to set it how just click on this a static page and select the newly created page that is home as your home page and then save it once you do this you can refresh this page and now you can see the extra slug this is what we call as a slug is removed and this is how your home page will look like we are going to start designing this homepage with the help of the elementor plugin and will try to make it look as similar to this as possible this is our end goal and this is where we are present at the moment so from here to here it will take some time and some determination so let's get started so we are going to require a plugin called elementor so for that simply go to your plugin section go to add new and enter elementor this is the plugin we are interested in that is elementor website builder it must have been provided along with the wplms if it is not there uh what you can do is you can simply install it in my case it is provided along with a wp lms uh only uh thing is i need to update it this is the free version i'm talking about and if you want the pro version of elementor you can obviously go to my website and download it as i have already mentioned to you in the very beginning so this is updated so let's go back to the plugin section and upload the pro version of elementor again click on add new upload plugin and choose the plugin in my case i'm having the plugin on my desktop so select it and install it this will install the elementor pro on top of the existing elementor free version activate the plugin and start using it so we are done installing elementor and elementor pro now what we need to do is as already explained we are going to start with the designing of home page so what we need to do is you can click on this home page and just refresh it and you will see an option of edit page you can click on edit page and this is how it will look now you have the option of edit with elementor click on it and now the basic default page builder will be selected as elementor this is how the page looks like this is a blank canvas and now you have to bring in your creativity and start editing this particular page we are going to start with the very first section over here that is this beautiful section uh i am having a very good collection of images i will share it with you along with the various other contents in the description section you can click on the various links and download the content for free so let's start with the very first section over here this is the first section as you can see the menu is like this it automatically uh rolls back when i slide the page when i scroll the page so we need to have a menu something like this so for that to happen what we can do is we simply need to uh open this webpage and customize it so what happens is first of all refresh this page once and then click on customize this is the default customizer for any wordpress webpage as you can see there are two different sections over here we don't want this as well as this we want only one of the top menus so what you can do is you can go to the header section over here and select this sleek one as your main home page and click on publish now you can see that the top layer is now not visible i'm talking about this top layer so this is removed so if you select the sleek one this will look better now we also want the menu to scroll whenever i just scroll my web page so for that to happen what you can do is you can simply go back to your dashboard go back to this wp lms section and select this option header when you are inside the header there will be multiple options we won't look into it now we will be looking into it later but for the time being just select this option fixed top header on scroll you can change it from static to fixed on scroll and save the changes once this is done you will now be able to scroll the header whenever there is a content beneath it same like this okay so now let's go back to it and refresh my page this is how my page will look now the top thing is gone uh we need to set up the menus obviously we will do that later but for the time being let's get started with designing this beautiful looking section for that to happen what you need to do is in elementor there is an option to add a row because we are creating a section so each section will be treated separately so as you can see in this section there is only a single row and we have few animations beneath so what we can do is we can click on this add new section and click on the very first option that is add a row it is nothing but it is having one row and one column over here you can see that it is having one row and two columns and likewise so this is what we are going to select and as you can see there is something written over here so we need some sort of a text box or a text so what you can do is you can simply click on this what you can do is you can simply click on this heading drag it and drop it over here now whatever you will type over here that will be automatically displayed what i will do is to keep the video short i will simply copy it from this section and i will paste it over here right now what we can do is as you can see it is uh present in different colors what you can do is first of all we are going to change the styling i want this to be an h1 header simple html then i will go to the style option and i can change the styling from here i will uh basically keep it black by default and later on i will be adding the styles you can make the text look bolder just go to the typography and you can increase the weight by from 600 to 700 or 800 whatever you wish you can select this you can then keep on changing the weight according to your wish i will keep it 700 and then let me change the font size also you can play around i will prefer something around 60 64. so this is my font now you can also change with the type of the font what you can do is again you can go to typography and you can select any font you wish so let's select this font salsa and here it is it looks good right so what we can do next is we can simply close this yeah what we can do next is we can give some colors to it but there is a limitation because this is a single section so we can't have different colors for each of the fonts by default but we can do that with some little css styling what we can do is just go to content and i want uh this part to be colored separately or differently what i will do is i will select this part okay if it is visible i will select this part i will add an html tag span between this and this so i want this much part to be under uh i want this much part to be inside an html tag span what it does is it you know it allows you to add some different styling to only this much part okay next what we will do is we will add a style inline styling we are doing it's nothing but it's simple css so what we are doing is we are simply adding inline styling to it and i'm writing color as the tag and then you can give any color for the time being let me uh give it a red color and then we can change it later on so now you can see how it has got the color over here is different so what is the color over here this color i can simply get by looking into the content section yeah this is the code for that color simply copy the code it's in hexadecimal go back and instead of this red you can enter this and as you can see the color has changed so this is how you can simply drag and drop and create your own sections one thing i can notice over here is this is the demo website as you can see it is from one end to the other end so it is occupying the entire width of the section but in this case as you can see the entire width is not occupied so what we can do is we can simply click on this section over here at this hamburger section this will select the entire uh section what you can do is click on it and on the left hand side click on this stretch section button so as a result the entire section will be stretched the height should be fit to screen column position stretch vertical alignment middle overflow hidden this should work yeah as you can see this looks somewhat like this what could be the issue the issue is very simple what you need to do is you simply need to go to this other section the customize section as you can see uh the layout has to be changed what you can do is by default the layout the theme is uh utilizing the uh central section of the page only i want the content to be spread entirely using all the 100 width so i have to use this content and then publish it now if you go back to your elementor and refresh this page this is how it will look now you can see it is utilizing all the uh 100 width over here and now you need to make some changes to the font section just select it and make it central or center aligned now uh what i feel is it is it is using up a lot of space so what i can do is i can again click on this section go to the height and set a minimum height and then i can change the height according to uh what is perfect for this page now i think so this is looking good just update the page and refresh it so this is how it is looking right now slowly slowly we are reaching there now uh let's add the background image uh similar to this one i have downloaded these images from texels.com i have an entire video on uh how to download copyright free contents from the various sources available on the internet you can just check that link and download the copyright free images and use it on your website so for the time being i i am simply using these images you can see that this is the image which is uh required so upload all the images in your media folder file media library first then it will be easier for you and faster for you to upload them directly onto the home now what you need to do is first of all select this entire section go to style go to background and over here select this classic option you will see an option to add an image choose the image that is this one and select insert this looks nice next up uh we are almost done with the first section we can see that there is there are a few more texts which can be added so simply copy those text over here and go to this section and add one header uh you can it can be either a heading or a text editor simply pick this heading and place it over here and whatever you have copied you can directly paste it over here okay this is how it will look now you can align it to the center you can keep on playing with the color uh let me see yeah white looks fine white is visible or black no white is fine white is visible so we can play around with the font style i guess we had used salsa earlier we can stick with it let's see how it looks or otherwise we can use any other font yeah yeah it looks fine we can increase the size if needed yeah it looks good let me change the weight of it 700 800 it's looking fine this is cool okay so this is how the website would look let me update the site first and open it in a new page see this is how it will look and if you uh are careful enough you can see that whenever i'm scrolling my page the menu is also scrolling along with it so this is what we actually had wanted right so it is taking shape it is looking nice now what we need to do is as you can see in the demo website we are having a button and these three small sections over there so to have the button it's very simple again go back to your elementor click on the refresh button and then simply drag this button and place it over here yeah so now we need to do some styling to the button to make it look similar to this what we can do is we can change the color of the button we can add all the colors we want we can change the uh content of the button by clicking on it and then uh going to this particular section yeah instead of this click here we want something like this what is it present over there start a free trial so we can write start a free trial fine now we need to give some colors to the button let's go to style background color can be changed if i want this color only the previous color i simply need to copy the code of that color and go to the button go to the background color paste the code over here and as you can see the color now looks very bright and it matches with the main theme of the website i am not following the exact same pattern that i have used over here i may be doing slight changes to it just to uh get a beautiful output i will basically try to get a beautiful output and in fact a better output than this so i am just trying out multiple combinations so this is how it will look like and now we can give some border radius to it so simply click on it select this border radius button and you can add some radius as you can see the borders are now getting curved right similarly you can add a border to it the color can be changed from here okay now we can see that when i'm moving on top of the butter button there is no hover effect i can add some hover effect also how i can do so just click on this hover button you can change the color of the button you can change the background color to uh somewhat white i can invert the colors this time when i'm not hovering about the button it looks somewhat like this but when i'm hovering above it it is turning into white now you can see this right now what i want is i want the uh text color to get replaced by the pinkish color over here so again copy this code go to style go to button in hover in text color i need to place this code now the color code now what happens is they are now inverted this is how it looks when i'm not on top of the button but when i move my mouse on top of it it gets inverted isn't it cool right so now i need to move the mouse in the center sorry the button in the center so this is how it looks i can increase the button size if i wish let me go with this size over here it can be a medium size button i can increase the font size also go to style go to typography and simply increase the font this looks cool so now we are almost done with the first section the only thing remaining is the three small sections over here these three frames or we can say these three uh flip boxes so what i can do is first of all let me refresh this page this is how it looks right now okay so now i am going to add those three sections over there what i want is i first of all need a three columned structure so i would be adding it from here then i will go over here and type flip you can make use of this flip box and those who are not having elementor pro can i guess replace this with something icon box yeah icon box or icon grid yeah they can replace it with an icon box but uh they uh but you won't be able to get this effect using an icon box so i recommend you getting elementor pro because it adds a lot of functionality and features to your website so i would be using this flip box over here what i will do is i will simply drag it and paste it inside it i can make a copy a duplicate and drag and drop this is so simple you simply need to drag and drop and make the changes accordingly so this is how it is looking right now what i can do is i can simply go to this page copy the content for example this is your heading what i will do is i will copy the content over here select this uh flip box first there are two sections the front section back section and the settings so in the front section let me paste this wordpress lms and again get the content also copy it and paste it over here so we are done with the formatting now the only thing left is the color so as you can see how we can change the color and the border radius i will show you first of all click this wordpress lms go to the background and change the color now over here the color is somewhat like this it is orange it is the same pink color with some transparency added and when it gets flipped its color reverses or we can say it is becoming transparent so that is what we're going to follow over here uh the front side is having the same color as this color so again copy the color code it is a very handy color code we are going to reuse it again and again so whenever i'm in the front section go to background instead of this background color select this classic one go to color and paste it now it is looking somewhat like this but it is not transparent so we will be adding the opacity over here as you can see this is the opacity of the particular color so this is how it will look like but you will be uh noticing a certain thing that over here over here all the three boxes are well inside the first section but whatever we are designing right now all the three boxes are not inside the third section inside the first section don't worry we are going to change that also one more thing left is whenever i am flipping this this background should turn into white so the front part has the back part has to be changed go to back go to background select this color go to color option go to white and add the transparency that you wish obviously this is not going to be visible because the background is white also because the background is also white so what i will do is now i will move this entire uh second row inside the first section so what i'm doing is i'm inserting all the three sections all the three flip boxes inside the first section how to do so it's very simple if you remember the margin thing we had done previously the same thing we have to do but before that i need to increase the height of the first section as well because it should accommodate all the three flip boxes for that go to the first section select it and go to the height section and select fit to screen now it looks good right now what you need to do is now select this second section go to advanced and play around with the margin so i am going to change the top margin only i am not changing the bottom one because it will affect the lower sections also so this is how it goes this is how it looks right this looks good fine now i need to increase the height somewhat so what i can do is i can select the first section over here play around with its margin cool and then i can increase the height of this section as well i can increase it by going into minimum height and then increasing its height now it looks nice but still i need some padding because there is a as you can see that there is a very little gap between the buttons and these flex boxes or flip boxes so what i can do is i can add a little padding to it so go to this section and add a little bit of padding from all the sides now this looks pretty well and nearly equal to what we were having over here right okay you can reduce the top padding if you wish or the top uh padding if you wish because we don't want the top padding we are only bothered with the lowest padding over here so what we can do is i can increase the bottom padding without affecting the other sections this is why elementor comes really handy because we can play around with various settings and now as you can see this is looking pretty well the only thing left is the coloring of this particular flip boxes so what i can do is i can simply go over here and go to the back section copy whatever color i had selected over here go to these two flip boxes and paste it the similar fashion go to background background type go to color and paste it this is what you need to do on this side as well simply need to go over here go to uh back to background to colors and paste it now the only thing i feel should happen over here is the font color because as you can see as the background is now getting transparent you are not able to view the text properly so what we can do is we can change the content color of the back panel by simply going to this style option and going to the back and changing the color over here text color you can keep the text as black this is perfect similarly the description also we want the color to be black as you can see this is not properly visible you can add the buttons but i don't think buttons are required so i would be removing them the button is visible in the back panel so i would simply remove it from here and it will save a lot of space so i will simply go to the back panel click here and remove it i am still uh left with giving some border radius to them so what i can do is i can click on any of these flip boxes go to style go to this section over here border type give them solid borders same with this give them some solid borders repeat it for all the three and next you can give them the radius by going into the settings tab and you can change the radius from here as you can see i will select something around 60 repeat the same thing for these two sections also go to the content section go to settings and change the border radius to 60 repeat the same for the second one as well go to settings go to border radius and 60. so this is how it looks now pretty cool and now the size is pretty much the same isn't it isn't it cool isn't it beautiful so this is how we can create the first section using elementor i hope you enjoyed uh creating a first section uh let uh let me get back to the demo web page and then we can start with the second section the second section is pretty simple what you need to do is you simply need to copy it go back to your main section click on drag widget and create a row once your row is done simply add a heading and paste the content over here after pasting it this is uh how it should look like learn anywhere learn anytime now we know how to give different colors to different sections so what you can do is you can add a span over here and enclose it and close the anywhere and anytime text within those spans [Music] you can add a little with a little bit darkness over here a little bit contrast over here yeah this is looking nice now the next thing which is left is your uh you should add some padding or some margin to it margin is fine now add some padding what padding does is it stretches the entire section according to what looks better according to you right fine so now click on update and this is how your second section will look like so we have completed our first section and also the second section over here i guess this looks pretty fine pretty nice isn't it so whenever you're sliding your page whenever you're scrolling your page upwards this is how the menu is also scrolling along with it so we are obviously going to work on the menu later on for the time being we have completed two sections so let's get back to the third section how it looks the third section is basically let me reload it the third section is basically having some countdowns or we can say some counters which are basically uh the number of courses available in your site the number of instructors available in your site and the various categories of courses available so we can simply do that with the help of the elementor pro plugin just count the number of rows number of columns we are having four columns over here so what we need to do is go to elementor home and click on this the four sections right correct we need to give some padding to it we need to give some margin to it so this will look nice again stretch the section now we need to add counters for that go to elementor and type counter okay just drag it and drop it you can duplicate it three times simply drag and it's done now according to the web page we have to make the changes first one is all about courses second one is instructors students and categories so you simply need to make the changes over here courses instructors categories or whatever it was students and categories so we need to type students over here and the fourth one is categories it's really that simple with the help of elementor pro the work reduces to nearly half of what would be required if we were doing it manually right so now you can play around with the uh with the actual content over here instead of 100 i can have uh sorry again it got changed instead of this uh 99 i can have suppose uh 120 courses right so it is nothing but 120 courses and the countdown will go like this similarly instructors i can have around for 120 courses i can have 70 instructors or somewhat around 70 75 because some instructors may be common in in the courses similarly students for 120 courses i can think of around what you can say around uh 1500 students okay somewhat like that and categories i can keep capturing there are 120 courses so i can uh write somewhere around 40 categories okay and sorry somewhere around 40 categories so it got replaced by mistake so it might be somewhere around 40 categories fine this is done only thing left is the color so i need to again add the color over here go to style instead of this color i have my own color that is this one if you remember i need to copy it in notepad somewhere because i'm going to need it again and again so copy it over here fine so this is the color that we are going to use throughout our our website so over here instead of this blue color i will select this particular color do it for the rest of the sections also now slowly slowly our website is uh turning into a real website okay done so this is how it is looking you can add a little bit of padding from the top so what you can do select this particular section add a little bit of padding from the top first of all unlink all the values and add some padding fine it is looking good now as you can see there is padding over here clear so the next section is all about the categories for this to happen we need to make some categories first how to do so it's very simple first of all update this website don't lose any uh work due to any uh issues just keep on updating or publishing the website from time and again this is how your site looks right now so for the next section we need to add the categories we can do so it's very simple we simply need to go to our website over here and go to something uh for example in the lms section there is one option such as course category go to course category now prepare at least six categories for this demo purpose for this demo sake what you can do is i can have six categories exactly similar to this i can have the six categories like ai ml digital marketing cyber security website development photography and programming languages so what i can do is first is ai and ml i can insert the image also how to do so click on upload add image and select this particular image add new course category so we have now created one of the categories over here next up it could be digital marketing again select the image from here digital marketing is something like this seo okay add new course category so two courses have been added the same fashion you have to repeat it for the remaining courses so uh i just paused the video and i have created all these six categories now we can go back to our elementor home page so let's start with the next section what we can do over here is we can add one uh feature which is called as categories or i guess vibe categories course category carousel yeah it is course category corosal you can drag it and paste it in a new row because we are creating a new section right so it is nothing but a course category corosal you can simply drag it and paste it over here so this is how a course category corrosive looks like but we have to make some uh changes to it first of all uh drag this section to be a stretched section okay next up we we don't want uh it to look like a slideshow so what we can do is we can give full width to it next up this is your carousel i don't want to show the title so click uh across over here over there order by anything you wish the slider controls i don't want the slider controls right because i don't want this to look like a slider auto slide no carousel block width what i actually want is i want uh three courses to be displayed in one row so i have selected this three over there okay and maximum number of blocks in one screen maximum number could be two or three two is fine number of blocks in one slide one number of rows it could be two so this is how the course categories looks like now what you can do is you can add a little bit of padding to it so click on the section go to advanced and you can add a little padding so that the images look proper okay i don't want uh excessive padding so keep it as simple as this okay and update now uh there might be chances that few of the images might look elongated or stretched it actually depends upon the size of the images all the images should be of the same resolution so i guess this particular image might be having a slightly longer height slightly more height so that can be done by simply cropping the images and making sure that all the images are at the same resolution that is a very minor thing that can be done so this is your website this is how it looks right now if i refresh it after adding the padding it looks something like this it is quite a good looking website at this point of time you can add padding in between these also if you wish but i guess that can be done later on so this is how it looks it's looking pretty nice i suppose so we are done with the four sections the first one the introductory section then the second one only the static one third the counters one and fourth the various categories okay so i suppose there needs to be little uh width over here i can keep it boxed if i wish i can keep it box so that yeah boxed will look better yeah this will look much better the overflow can be hidden the only the thing uh is you need to crop this image and it will look pretty much better fine so just update it and have a look how it looks now yeah it is looking much much better than the previous one right so there are a few things here and there you can play around with and you can create your own stunning website so now we have covered these sections a few things here and there are still left so let me go back to my demo website and i will be able to show you what else is left so this is our demo website we have completed this much section now we can uh add the testimonials over here for that what you need to do is you simply uh need to add one more row go to elementor okay and add this row i guess the padding or bottom padding is too much so i can remove the bottom padding or the content width column gap fit to screen yeah minimum height the minimum height can be reduced yeah correct so now we can add one row over here this row is actually a heading row because we are simply adding the headings over here as you can see client testimonials simply copy that go over here add a heading and paste it just make a habit of keeping all the font sizes uh same throughout the entire webpage what you can do is it was 64 i guess yeah i will stick to 64 and then the style was salsa select it color has to be black and the second part has to be pink in color or the or the default pink color so what i can do is again i need to add the span over here and then add style is equal to color and then pitch in the color the color is this copy it and paste it over here close it close the span and that's it but just make a habit of closing all the tags which you have opened just update it make it center aligned and that's it next what you need to do is you need to add some testimonial blocks over here as you can see there is a block it is uh so what you have to do is you don't need to write it or construct it from scratch elementor pro or elementor for that matter provides a lot of features what you can do is you can simply go to this particular folder over here click it and go to the blogs section you will be able to search few testimonials over here click on testimonials and for the simplicity sake i would be selecting only the uh free versions available so that even the people who are not having the element of pro can work out with it so i will select something like this suppose this one yeah this is what i had used let me check it yeah this is what i had used you can insert it you need to log into elementor.com you can do that it's a free sign up you can simply log in over there connect your site with the elementor interface elementor website and you would be able to insert the template over here as you can see it has been inserted simply go to the section stretch this section it should look something like this and now you can play around with with these two blocks separately as you can see i have added some borders some padding differences over there so what you can do is you can simply go to the section over here you can click on this section you can uh make the width smaller if you wish yeah this looks nice same thing goes with this you can make the width smaller now go to style you can add some border i can give a border of white color but i want the border for this particular uh section over here so i will be selecting this entire section and then i will give a border to it the border color could be white and increase the width of the border keep it three same goes with this select the entire section over here go to style go to border uh increase the border width to three and give it a color black now sorry white so it will be prominent same way you can add some radius to it simply refer this website i have added some lower radius and some lower left and some top right radius to both of these sections so we have to give them individually go here select this entire section go to style go to border border radius now i want radius only for the left section so i would give something like this just before doing this make sure that you have unlinked this similar to the margin and padding thing and now you can give some radius to it keep it simple keep it shorter i guess 120 130 would be fine yeah repeat the same process but this time it should be the top right corner again go to border unlink everything top right means this and give a heading of give a radius of 130 so this is how it looks update it and check how your website looks like just refresh the page and this is how your testimonials look like isn't it similar this is very uh very simple to do such things with the help of elementor and it actually reduces your work so a few things are remaining for example our instructors to create this our instructors section what you need to do is you need to first of all go to the backend first uh over here in back end click on users and click on all users you will come to this particular page where all the users are displayed now first of all find out the instructors i have this instructor over here only a single instructor uh just note down the user id the user id is two so why is it required i will show you now just get back to the uh elementor page over here first of all i need to add a row because we are adding a section stretch this section first of all then insert this heading i want our instructors written inside this heading so i'm copying the previous header and i'm pasting it over here so that the formatting is maintained only i need to change the style the color to black typography has to be changed to 64. what i feel is 64 is a a little bigger so i will reduce it from 64 to somewhere around 52 yeah i have already changed it to 52 52 will look nice on it and also change the font which is salsa fine so this is looking pretty fine now uh go back to content and make it central line similarly you can add some padding to it because we need some gap between the upper section and this section so go to advanced and add some padding first of all unlink them and add some top padding i guess 12 is fine okay now it's looking nice now what you need to do is you need to add an add-on or a widget from here which is nothing but it's called as members so select members and drop in this member corosal over here now this member carousel will display all the members over here but remember one thing i had asked you to note down the user id right so what uh so how to display that particular user id it's very simple there's an option over here enter specific member id so enter two and two belongs to this particular user that is this instructor similarly if you are having multiple users you can uh you can display them by adding commas in between for example you wish to add the admin also and as the admin belongs to the user id1 that can be done like this so how many users you wish you can add them using this simple technique that's why i went to this particular back end and showed you how you can make use of this user ids fine so once this is done you simply need to click on update now as my user as my instructor is not having any profile picture associated with it so it is coming out to be a blank image we'll see how to add the profile pictures and update the instructor dashboard towards the later end of this video so for the time being this particular section is also done we are simply left with this beautiful looking contact me section or you can see the instructor registration section for this what we need to do is we simply need to make a section over here in elementor and divide it into two columns but as you can see the column width is uneven this is approximately taking 30 to 40 percent and the remaining is occupied by this so what we can do is we can go to elementor select this first of all make it a stretched section select this particular column okay and column width you can keep it as 60 so the remaining column width will be occupied by the second column now what uh is exactly present over here is it's having a beautiful looking video running in the background so what we can do is you can add any video of your choice but it should actually contrast with whatever font is in front of it so that's why i have selected a dark video running in the background so you can go to youtube i have already selected one video you can copy any copyright free videos for that purpose just copy the link of this particular video go back to elementor select this particular row go to style in background instead of the images we need a video this time so simply paste the video link over here first of all go to layout and adjust the height accordingly you can fit to screen or you can set minimum height this is how it will look now the remaining thing is you need to add this section it is simple it you simply need to add text over here so what you need to do is you simply need to drag and drop the text sections and paste this content over here to save time what i will do is i will paste this go to content copy this and paste it over here and make the changes accordingly the changes are enroll in course apply for instructor so i will simply copy it now enroll in course and apply for instructor okay now you can change the colors and etc other remaining things over here and keep it white for visibility purpose fine apply for instructor and the next portion is hurry up before the timer expires so you can copy this and add one more text section over here and keep it white you can reduce the size a little bit so that it looks like a subtitle to this previous text you can increase the size of this for that matter yeah now it's looking fine the only thing left is there is one counter over here or you can say a countdown so what you can do is you can search for a widget that is countdown and you can drag and drop it over here this looks fine but we need to make some changes so instead of this countdown search for something such as countdown and drag and drop this vibe countdown over here right so now select any date for example today's 30th december let's select a date for example 5th december and timing suppose 12 pm and enter it yeah it is not visible because i have not said that size over here my mistake my bad so first of all select the size of the widget this looks nice next you can increase the height of this intersection because in the original website it is occupying the full space so what you can do is you can increase it to fit to screen and this looks really brilliant similarly on the second part that is the second column we need to add one form as you can see there is one form over here and it is very simple you can add a similar looking form just by doing this thing just go to your dashboard go to lms go to settings and there is this section registration forms go over there and create a new form give it a name for example registration form and add the form now you can play around with the various sections you wish over here you can see username email password and name right so you can add those fields over here you simply need to pick uh all those options which you want username and password are by default going to come over there so you can have name and email save the form fields simply select this entire section copy it this is a short code you're going to need it later just copy it go back to elementor pro what you do need to do next is you simply need to add one text editor copy it and drop it over here so in this section simply paste the shortcode that you have copied over there and press enter or click on submit update and what you will see is this is your entire page that is visible to you but there are few things which you don't want for example these many features let me first of all check how it looks it is occupying the entire space over here now we have username we have email we have password we don't want this email field because we already have this email so go back here and make the changes drop this email we don't want it save the form fields and it should be reflected over here now the email tab is not present over here the only thing we need to do next is change the layout to a boxed layout as we saw earlier the box layout looks really brilliant select it update it and it will look something like this now this looks pretty much better okay the only thing that is uh drawing my attention is the text of the video i don't want any text in the background so what i can do is i can simply first of all let me just refresh this page once okay go to this section yeah what i want is i don't want this text as you can see the text is present in the very beginning of the video so what you can do is go to style go to this video and start time you can change the start time to somewhere around 30 seconds or so and have a look once now you can see that there is no text present over here okay again let me change the layout i think the previous one was better that is 60 40 make it 60 and update it we need to keep on doing certain things here and there we need to keep on trial and error and then only you will get some perfect answers now this is looking pretty well enroll in a course apply for instructor a little margin or little padding towards the end would be better so let me select this to advanced and i can give a little padding from the right end i can try with the margin also yeah margin is also looking better and then update it okay so now it is looking really good the only thing is i can change the background color okay so what i can do is i can go to this second section the second column over here select it go to style go to background and give a color our favorite color this one is pretty fine go to the color section enter the color over here and that's it let's see how it looks update it and go back to this section refresh it this is how it looks but i am not sure i am not pretty sure with this it is not looking exactly like this so i need to add a little bit of margin little bit of padding here and there to make it look like that i can add a little bit of margins from this end and reduce it to 30 or 35 30 is fine let's add a little margin a little padding yeah now it is looking better what i can do is i can change the color of the questions or the headers or the basic questions over here so what i can do is i can go to style change the text color to black and this is pretty much it it is looking better right so if i refresh this page this is how it looks now it is much much better than what it used to look before so we are almost at the end of designing this web page let me check what else is remaining i guess we are having this popular courses left it is very simple what you need to do is go to the elementor section first of all add one row make sure this row is stretched fully and then go to this section search for an option called as vibe grid yeah this is the one just pick it up and drop it over here now what exactly you uh want is you uh want to display your courses so it would be recently published course types show grid title no i don't want great titles featured style could be this course three yeah this is looking good course four or course five you can just play around i guess course two and course three are looking good yeah this is course three grid mason uh masonry layout no i don't want that four columns in full i want three columns in full width okay next next total number of blocks in the grid i can have three blocks so three courses can be visible uh the only thing is again stretch this section this is now looking good only thing is the post type has to be courses because now i want my courses to be visible and not my other posts so this is uh the first course which is visible wordpress tips and tricks and let me check what was the course type in the demo website and then i can change it accordingly so in this website i guess uh the course was course five okay so let's uh select this course five and we can keep on changing it later on so course 5 was selected ok we are we are not having any thumbnail for that course that is why it is not visible i will add some thumbnails and then we will check it out and i guess that's it update the page fine so let me go back to the course from the lms section let me go back to my back end and let me go back to these courses yeah this is the course if i wish to have a thumbnail for it featured image yeah so i would be selecting this one for example so if i select this this will be the featured image for that course and now the image should be visible over here if i refresh this page let's see how it looks and as you can see this is our course so i guess the heading is missing we can add the heading we can simply go to the heading and add one heading over here our popular courses that's it very simple okay and uh what you can do is you can add the colors so let me keep it a two word heading so that the colors will match accordingly i will keep it black and secondly the second color obviously is our pink color i will keep the font as salsa and the size is 52 fine uh just keep it center aligned and then add our css let this pan style is equal to color and then copy this color these are few things which are to be repeated throughout and then end this span tag fine so we are done with this now the image should be visible just reload this page and it would be able to see the image the featured image of that course so reload this page popular courses should be visible over here yeah and this is the first course that is available now let me show you uh one thing i missed actually during this entire video actually it becomes a little trickier for us to create such long videos you might end up forgetting something here or there so what you need to do is you need to add one plugin for example let me go back this is a free plugin obviously uh go to plugins and add a plugin which is called as post duplicator post duplicator this one what it does is obviously the name signifies it duplicates the post or creates copies of multiple posts so for this demo purpose i would be uh copying all the courses which are already available and i would be dividing them into various categories so just to keep our work simple we can simply copy the various courses available activate that and go to the courses page okay the plugin is activated so now go to all courses and the very next thing is you can now simply click on this duplicate course and the course will be created you can go to the wordpress tips and tricks this is the duplicate one you can change the name for example ethical hacking from scratch obviously you need to change the image also but i am not doing it right now i'm just doing it for demo purpose ethical hacking from scratch right and you can change the category from here as cyber security clear and then select update obviously the website url also will get changed because uh this time this is ethical hacking and not wordpress so change that also otherwise it will point to the same post again and again so now it has got change to ethical hacking updated once again so go back to the courses page reload it and now you can see the change similarly if you reload this page you should be able to see the second course also let me add one more course just for the balance purpose to make the website look better again duplicate the course and this time it could be machine learning from scratch make changes over here also add machine learning press ok and update it go back to this page reload it this is how it should look i just forgot to change the category so you can change the category over here is it fine so we are now having these courses over here and the various categories also should be displayed somewhere above here yeah these are the categories so if i go to website development i should be able to see this course wordpress tips and tricks if i uh go to this website that is this category that is cyber security i should be able to see ethical hacking from scratch and if i uh go to this category that is program that is this ai ml i should be able to see this from scratch right so this is how we can add these many things with the help of few free plugins so i guess we have reached the end of this uh designing phase we are still left with the footers so i would simply uh start with the footer this time let me show you this website that is the demo website it is having something over here at the bottom which is the footer one and followed by the copyright section so it is very simple to create a footer what you need to do is simply copy this text first okay now go back to your home page dashboard go back to appearances and go to widgets inside widgets you can see something like this top footer sidebar so what you can do is we can search for something like a text so search for a text over here a text widget if you can see it yeah this text widget you can now click on it and assign it to the top footer sidebar click on this and you can see that it has now been attached to this now i can write something as a heading for example if you see this it is wordpress lms you can copy the same thing over here just to create a semblance just to keep a parity paste the entire content over there and save let me check whether it is done or not simply refresh this page yes you can see this is the first section of your footer so i guess this uh content again is not needed this wordpress element so save it and refresh the page you are done with the first footer element in the same fashion you need to work around with the second footer element but this time it is categories or what you can say course categories so repeat the same thing this time search for a categories widget or a course categories yeah we can see a course categories widget over here again send it to top footer sidebar add widget now it gets added over here now you can do some changes for example order by name etc etc descending order and press done so quickly let's refresh the page and it should be visible yes there are three categories visible over here because we have courses in the three categories only i have only created three courses so those categories courses are sorted according to the categories next up we are having a section such as latest courses so what you can do is you can search for you can search for a widget recent posts okay or recent courses if you find something like that uh try to find something like resync recent post recent comments recent viewed products what you can do is you can select this as recent posts and again send it to top footer sidebar this may act like a blog so you can uh give the heading as recent posts only so you can also uh send some blog articles along with the courses so number of posts to show maximum five save it and done and the last thing left is this section that is subscription form for that to happen you need to have a plugin called as mailchimp so first of all let me refresh this and show it to you how it looks okay it is pretty well till now now for the last section you need a plugin called as mailchimp let me show it to you go to your plugins section add a plugin what mailchimp does is mailchimp basically creates your newsletter or a mailing list so that whenever you uh wish to send some mails to your subscribers you can do that with ease so this is the plugin which you need to install mailchimp for wordpress let it install activate that and then we will come back okay so we have activated the mailchimp plugin it should be visible somewhere over here yeah this is the mailchimp plugin go to mailchimp click on this mailchimp tab now what we need to do is uh similar to what uh the payment gateways look like we need some sort of an api key now this is all free don't worry so how to get the api key there is a link which will point you to the mailchimp website this is the mailchimp website you can create your free account over there using any account for example gmail or any other email service and once you are done with the account you simply need to click your profile go to account and there you will see extras go to the extras click on api keys and you will see your api key over here just copy the api key and come back to your dashboard and paste that api key over here and save changes once you're done with this you are almost complete with your process the only thing remaining is you need to create some forms so to create a form what you need to do is uh you need to click on the mailchimp plugin over here and go to form give the form a title for example subscription and press enter so this is how your form will look like i only need the email address of my customers or or my students so i will simply keep it as simple as this looks like copy the short code from here the short code is uh present over here just copy the short code and now what you need to do is now go to the widgets section that is appearance and widgets you have already copied the shortcode again try to find the text bar the text widget this is where the text widget should be yeah the text widget is present over here again are directed to the top folder sidebar so what we are doing is we are simply now sending the mailchimp shortcode over here and you can give a heading as subscribe subscribers or subscribe to us clear then press save and done now quickly reload the page and let's see how it looks like this is how we wanted it to look like it's very brilliant right so now we have almost set up this footer uh one that is a top footer we don't need the bottom footer as you can see this is uh this is how your demo website looks like so we don't want the bottom footer so what that purpose what you can do is you already have this customized uh page ready you can again go to the customize section and go to the footer and you can have a single footer sidebar and that's it if you enable it and reload the page you will see that this particular bottom footer will be vanished as you can see it has vanished now it's time to add some colors to the footer we would like the footer to look something like this so we can keep it white right so what we can do is we can again go to customize footer background color and then set it to be somewhere around uh white okay publish it and let's see how it looks like because it is now white so the photo won't be visible because the text is all white so we need to change the text color also for that to happen you need to change the footer text color from white to black or what you can do is you can set the color to our favorite pink color over here and set it to this now publish go to our page reload it and this should look like this obviously the categories are links so they are not visible uh so let me check what was present over here recent posts are also links so they are not visible so it's better to keep it black so along with you i am also learning it side by side i have created this page a number of times but still i am learning few things whenever i'm creating it once again so that is what learning is all about you keep on learning there is no particular age for learning right so publish it and uh then reload it once again and this is i guess there is some issue photo background color photo heading color okay the headings i have i forgot to change the color of the headings now it should be visible yeah now it is visible and you can see it is quite prominent uh rest only this much part is left we can add the copyright things over here so for that to happen you need to go to wp lms that is over here and go to footer section over here you can scroll down to this copyright text over here and you can write anything you wish for example copyright owned by you can add your website over here let me add my website it is learnityourway.com and the same i wish to be displayed as a text also so copy it and paste it over here i guess i messed up the link okay let me add the link once again okay this is fine now all rights reserved fine so let's save the changes and reload the page and you will have something like this okay now it's a few minor things remaining for example the logo and all so again for that to happen go back to your wplms go to your header section you can add your logo over here for example uh let me browse and upload my logo yeah this is the logo copy it that is uploaded and selected so that's it upload logo for mobile the same logo so you can use the same logo browse for it and upload it similarly uh you can do some changes over here but first of all save it and then load your page and see how it looks like now you can see uh somewhere i saw that yeah here the logo has changed but when i scroll it the logo remains the same so there is some some default logo still present over here we need to remove that over here yeah alternate logo so browse it and select this one again and save it now let's see yeah now you can see whenever i'm browsing scrolling then also the logo remains the same the stop bar is going to create some sort of nuisance because it blocks the view and on top of that whenever the ad whenever the students or the instructors log to your website this top bar is visible to them also so in short they can get access to your backend so to avoid that we need to do certain changes what you need to do is you need to go to this buddy press option and hide the admin wp admin bar for everyone okay so the students or you can keep it for the admin the students and instructors won't be able to see the admin bar similarly wp admin area access to the administrators only and now save it okay if i change it to everyone even i won't be able to see it but that will be a problem for the admin so i'm for i'm keeping it for the time being so this is how you can hide the admin panel so right now we have done almost everything in the website just we need to change the uh footer color over here so what we can do is at present the footer is black so i can change the footer color go to the footer and the logo has to be changed again over here also so go to browse select your logo and save it now there are there are some cosmetic changes over here so go to customize and you can change the footer color for example as you can see once reload the page and then you can start working on the footer as well as header colors so what you can do is the logo is not visible because the footer is black and the logo is also black so you can go to the footer section over here and select the bottom footer background color you can now select our favorite color because now pink will look pretty good over here and paste it so as you can see it is looking quite brilliant similarly you need to change the header section also the header color also in the demo website i have kept the header as white we can stick with that because black on top of white will look brilliant so header top fixed background color could be kept as white publish it and let's check how it looks as you can see it is white now when i scroll it it becomes white so i would like to keep it white throughout and the footer also has changed so let's uh keep it white throughout so for that to happen the header background color also needs to be changed to white so let's select this and keep it white publish it the only thing now uh creating a problem is this menu and this writing over here so we need to change that to a black color for example header text this needs to be black in color similarly the menu can be changed to black color but right now we don't have any menus set up so what happens is we need to create a menu first and then only the menu will be displayed over here so for that to happen let's see what we can do simply go to your dashboard that is go to your lms settings and go to appearance and menus create a new menu from here okay give it a name for example new menu and create menu now if you check this particular website we are having in front of us the menu consists of home all courses become an instructor and log out so what you can do is you can go to your menu first of all home web page you can add just click on view all simply add home then next is all courses so you can select this all courses page and the next link is become an instructor for inserting the become an instructor thing over here you need to create a custom link or you can go with this register page let me add them to the menu so at this moment home all courses and register is visible but we would like this to be shown as become an instructor so i can simply write as become an instructor let's see how it looks save the menu and refresh the page i'm duplicating the page over here kindly refresh it and this is how it will look like yeah i have not set the menu where it should be displayed so for that to happen you need to select the location where this menu should be displayed so click on main menu top menu mobile menu wherever menu is possible select the same top menu for instructor stop menu for students in fact i don't need the top menu i would require the main menu main menu for students main menu for instructor and this should be all and the footer menu also save it and quickly refresh the page and as you can see home is visible all courses is visible become an instructor is visible and this will uh actually go to the registration page but as i'm already logged in this is not visible so let me quickly go back to the incognito mode let me log out and then click on this become an instructor as you can see it is redirecting me to the registration page so all these pages are set up only thing left is we require one more button for example this logout button so what i can do is i can simply go to this woocommerce endpoint and select this logout button it will be added here now one more thing left is if you see all courses consist of all the categories but in this case we don't have categories mentioned over here this category is totally different because what we see over here is course category so for that to be displayed over here we need to do a certain change simply scroll up go to screen options and then tick course categories it is by default not visible so just check where course category is present yeah here it is and tick it or check it and hence now you can see that course categories are visible you can select all the course categories add to the menu and simply drag them just beneath all courses it just creates a child node so all courses is the parent node and these are the child nodes now save the menu go back to your website refresh it and you should be able to see all the course menus yes fine so i can see that we have completed almost everything uh present on the dashboard testimonials are also uh sorry this should be uh our instructors need to make a change over here and then this section and then this popular courses section and finally the footer so let's quickly make this change edit with elementor this is actually our instructors right so we need to make a change over here this is our instructors fine so this is done now what else is left any idea we have almost completed all the website we have created the footer we have added the headers we have added the menu bars also two things are left in fact three things first is we need to add the payment gateway the most important thing because if you wish to sell your courses to your students or to any of the clients you need some sort of payment gateway and for that if you remember we had initially set up the woocommerce again we need to go there we need to set up our payment method so for that click on set of payments by default paypal is present if you are having a paypal account then you simply need to add your credentials over here and it will be linked if you are having your stripe account you can do so or otherwise if you wish uh to make payments using uh upi what you can do is you can add a plugin for example go to plugins section add new if you want to keep it simple you can use this upi for woocommerce this is one more plugin i have been using it you can install it and you can use this plugin for accepting payments let me show you how exactly you're going to accept the payments activate that okay first of all go to woocommerce section go to setup payments set up your woocommerce stripe account by default you should be having a stripe account and then then only you would be able to accept payments from the stripe account right you need to connect your stripe account it will ask you for your login credentials connect using the stripe account right so for that to happen what you need to do is you need to go to settings go to payments and inside payments you will see that now the upi qr code and stripe account is selected so simply drag them over here because these would be my payment of choice so if you are having a stripe account you can simply go to your this particular section and you should uh copy paste your publishable api keys api keys are very simple you simply need to go to stripe account and there would be an option to select create api keys and once you get those api keys you need to paste it over here and you will link this account with your stripe account that's it so we are done with the payment gateway setup also what else is remaining one thing left is designing the sidebar because if you see over here if i click on this all courses tab it looks somewhat like this it is not at all appealing so we need to make changes over here how we can do so simply go to customize inside customize go to layouts and inside layout there is an option of directory layout select content from the directory layout and now you will be able to see a brilliant looking sidebar on the left hand side which basically consists of multiple filters and based on the result of the filters the courses will be filtered out and shown to you so that's how we can add brilliant looking sidebars to the website so we have almost come to an end the only thing left is a dashboard what about the dashboard of the instructor if you see over here this is how the dashboard of the instructor looks like let me login and show it to you right so this is how the dashboard of the instructor looks like it is having an empty dashboard so we need to add something to it so for that purpose what we can do is we can simply go back to our widgets section and over here there is one option known as instructor sidebar so what we can do is we can populate this instructor sidebar with some dashboard items so you need to search for some dashboard instructor stats over here dashboard instructor modules or dashboard instructor stats something of that sort yeah this is uh i guess yeah dashboard instructor statistics i want this to be displayed on the instructor sidebar so simply select that add the widget to the sidebar and this is how it will look like now what sort of statistics you wish you can keep the size of the statistics to be 1 4 and save it now what happens is this is the sidebar this is the title for the statistics window okay now let me refresh it and show you how it looks like these are the statistics of the instructor this is basically how many courses are sold what is the average of that particular course and so on similarly we can add something uh more to it for example instructor simple stats dashboard dashboard instructor simple stats yeah you can select this and this will go to the instructor panel instructor side board over here so what you can see is you can add a number of statistics for example number of students number of badges number of assignments i can select one such thing as number of courses and the size could be one half save it on top of the previous statistics bar and let's refresh this and see how it looks like so as you can see this is how it looks like so it tries to accommodate all the various statistics and all the various widgets under that particular area so it tries to accommodate all the widgets in that available area so uh this is not looking nice so i can remove this so basically depending upon what looks nice on the dashboard you can add that i am deleting this instructor statistics because as you can see there are already some stats mentioned over here for example manage courses manage students how many students have enrolled to it you will automatically get all the details from this particular section so you don't need that elaborate statistics on the dashboard right so you can have something like this for example how many courses you are instructing something which will give a basic summary so again go for uh dashboard simple statistics dashboard instructor simple stats again use it and add one more widget to it this could be your uh what you can say number of questions or number of units this could be your earnings for example woocommerce earnings and save now let's see how it looks if i refresh this this is how it will look like pre-courses instructing and total commission earned on this note i can proudly say that we have come to the conclusion of this particular website tutorial on how to create lms websites in wordpress from scratch we have seen how to use paid as well as free plugins and themes to create such stunning websites i hope this tutorial was helpful for you and you have learnt something out of it because it requires a lot of efforts to come out with these sort of tutorials because we need to speak for continuously three to four hours and then keep on editing those videos it takes a lot of time so if you have not yet visited my website kindly go and check my website you can download the elementor pro plugin and if you are also interested in purchasing this complete website from me you can visit my website it's mentioned in the description box you can purchase it from there and make necessary changes according to our projects so thanks a lot for uh staying with me for so long i hope i was able to make you learn something out of it and i hope in the future you will be creating such stunning websites for you and for your clients as well if you have any comments any suggestions you can kindly drop them in the comment section and if you have not yet subscribed yet to the channel kindly do so share it with your friends your colleagues and make this channel popular thanks a lot that is the motivation which will help me bring out more content in the future as well stay tuned god bless you [Music] you

Channel: Sridhar Iyer

Views: 3,767

Keywords: How to Create an Online Course, How to create a LMS Website like Udemy, How to create a LMS website using WordPress, WordPress Website, How to create an online LMS Website, How To Create An Online Course LMS Website With Wordpres, Sell Courses, create e-learning website, how to create lms website in wordpress, build lms from scratch, LMS, lms, wordPress, sridhar, sridhar iyer, Sridhar, Sridhar Iyer, Learnityourway.com, wordPress LMS

Id: t4isM4qeF6Y

Length: 157min 29sec (9449 seconds)

Published: Wed Dec 30 2020