How to Create Online Course, LMS, Educational Website 2024 (using WordPress, Elementor & Tutor LMS)

in 2020 75% of all undergrad students in the United States were enrolled in at least one online course creating and selling online courses is a booming Market internationally the e-learning market was worth 17 billion in 2015 190 billion in 2018 and is expected to exceed 39 billion by 2029 so if you want to create any course or make your living by that this is the best time of this century and there is no boundary you can create courses in any topic if you're good at cooking create a course about it if you're good at content writing create a course about it similarly you can create courses related to Fitness art parenting Beauty fashion coding foreign languages or anything you are good at and in this tutorial I will show you everything from scratch step by step so just after finishing this tutorial you can launch your cor sing website instantly let's now have a look at what's inside of this amazing master class first I will show you how you can host your courses on your own website so you don't have to depend on any other website or Marketplace also we will install SSL so the website would be super secure for the design features and functionalities of this website I have taken inspiration from world's top e-learning websites like UD and skillshare I will show you how to create this whole website by using a free theme a free page builder and all Elms related free plugins this website will have all the features and functionalities that a professional LMS website must have in fact it has some amazing features that even paid themes and plugins don't offer now let's talk about some core features first of all you can create here both free and paid courses the courses will have different types of chapters and lessons and they will be in different formats like audio a lectures video lectures articles podcasts and quizzes also you can add all the informations about the course like course metadata author name materials requirements tags audience course details and for sure you can add a course preview video so students can pre decide if this course is a perfect fit for them right after enrolling students can access the course I will show you how to host the listen videos on different platforms you can host these videos on your own web hosting or you can host it on third party providers like Vimeo or Amazon web storage some of them are free some of them are paid I will show you all available options students can track their progress they can read any attached text with each of the lessons they can read articles inside of the course you can create different types of quizzes like multiple choice sing single Choice fill in the blanks true or false quizes you can set passing marks and exam duration for the students whether they course creator student or admin they will have their own dashboard from there they can see their enrolled courses completed courses wishlisted courses everything I will show you how to integrate your website with the e-commerce function itties to sell paid courses so people can easily buy courses using their PayPal and credit card I will show you how to add Coupon course to offer discounts on the courses how to set up card pages and check out Pages I'll also show you how to make it a Marketplace so not only you other instructors can create courses into your website and you can also earn commission on every single sale made so if you want only you can create the courses or if you want you can allow other instructors to create courses on your website instructors will have their own exclusive dashboard with options like course editing price changing adding new lessons or chapters and of course withdrawing their own money instructors can receive that money into their bank or PayPal account we're not finished yet right after completing the features and functionalities I will show you how to design the website like a professional we will be creating everything just by drag and drop by using a free page builder step by step you don't need any coding nor design skills in the homepage we will have this beautiful header with logo search option this beautiful navigation menu and this awesome user Mega menu then we will create this amazing Banner area I will show you how to create this kind of video popup just close it then we will create this featured courses area here we can create course archives with course details Sals course ratings course duration then here add to wish list option also with the price and add to card option then we will create these animated couns next we will have course category area so people can go to the specific category pages to find that specific category courses then we will create this amazing call to action area by clicking on this become an instructor button instructors can register themsel as an instructor we will also create this decent folder we will create other Pages as well about page instructors page for list page contact page I will show you how to create and set up the contact form as well I will also show you how to create a blog post and customize the blog page also I will of course show you how to make our website 100% responsive for mobile and tablet devices nowadays around 70% of people browse websites through their phone so it's super important can you believe we will be creating all of this just by using free resources I'm really excited if you're excited like me please give this video a big thumbs up this is the only thing I want from you just have a look if you like this video then from YouTube's left bir you can go to like videos and find this video easily later all right we will be creating this awesome course selling website in easy five steps first I will show you how to guess your own domain name and web hosting I will also provide you a 78% discount link then how to install WordPress then how to install a free theme and a free page builder then how to set up tutor LMS and ucommerce options finally we will start creating our amazing website step by step also I will be adding a time stamp in the description so you can always jump into the necessary part you need let's now start with step number one which is to get your domain name and web hosting so first of all what is a domain name domain name is basically your website address like Facebook has facebook.com Amazon has amazon.com we have Jim Fahad digital.com similarly for your website you need an address that will be your websitename.com and what is web hosting web hosting is the storage space for your website all the images text you will have in your website all will be stored on your own web hosting as you are owning your own web hosting so there wouldn't be any limitation you can run ads you can upload any text or images you can upload any theme or Plugin you want you are the in charge of your own website now how to get your own web hosting with a free domain name so first just click on the very first link in the description below this video or you can just go to Jim Fahad digital.com slm myy host and this will take you a special discounted hostinger page so why hostinger in my opinion hostinger is the most affordable and also the fastest web hosting provider available just have a look into all their trust pilot reviews people are super happy with their hosting speed affordable pricing and customer support now from here you can change that language if you want maybe you speak Spanish or Portuguese or Hindi you can select your language from here one thing I also do want to say is that this page changes quite often in fact they probably change it once a month so if this Banner or this whole interface looks different than this one don't worry Don't Panic this happens quite often it's the same website let's now scroll down a bit here you will find all the different plans by the way here we can see three plans but sometimes you may see four plans here just don't panic because you can create your website with any of these plans but as as you just starting out I recommend taking this premium or this business plan with both of these plans you can create up to 100 websites for example today you are creating a portfolio website tomorrow you want to create a Business website and the next week you may want to create an e-commerce website so you don't need to purchase hosting each time you can create all the websites within the same web hosting plan so here with this Premium plan you will get 100 GB SS storage with the business plan you will get 200gb nvme storage and with all of these plans you will get all the features like unlimited free SSL so all of your websites would be encrypted and super secure unlimited bandwidth so there wouldn't be any limit how many website visitors you will have free email you can create hundreds of professional email addresses like info@ yourwebsite.com or admin yourwebsite.com like this then free domain yes like I said you will get a domain name for free you will also get tons of Wordpress features like one click WordPress installation free automatic website migration so if you want to move your existing website from another hosting provider to hostinger they will transfer it on behalf of you how cool is that now let's talk about security personally I'm very serious about website security and hostinger just nailed it with all the features like Cloud flare protected name servers malary scanner and all these I have had very bad experiences with other web hosting providers we have got so many malare attacks and we had to pay the hosting providers additionally to use their other security tools but here in hosting gear you are getting all the security tools for free all right let's now select a plan and like I said you can take any of these plans based on your needs so for now I'm taking the Premium plan you can upgrade it later anytime so click here on add to card all right let's just go ahead and scroll down right here you are going to see different pricing options now this is referring to how long do you want to host with hostinger so we have 1 month 12 months 24 months and then we also have 48 months first of all I don't recommend going with this one month plan because you see it's almost $12 a month which is super expensive we don't want that my recommendation would be go with 48 months so for the first 4 years you just need to pay $2.99 per month that will save you in total $432 and then after those four years you start to pay only $6.99 per month which is still super affordable for a web hosting plan that can hold up to 100 websites but if you if you want to start with 2 years or one year you can click over here and then in your first year you just pay $2.99 per month and you are still going to create up to 100 websites and after that first year you start to pay $9.99 per month so the longer the first period the more discount you will get when you renew the plan so if you have the budget and you want to get the most discount possible you can go for the 48 months plan and after those 48 months you start to pay around you know $66.99 per month instead of $9.99 but wait there is more if you just click here on continue here you need to create your account but you see all these fields are optional you just need to select your country otherwise I'm skipping this form because we can add this information later after creating our account so let's scroll down here you just need to push your email address here I'm writing my email address make sure to put your best email address because they will create your Hosting account with this email address let's now click on continue and here like I said I have got more surprises for you so here you see it says have a coupon code just click there and here if you fill in with my special coupon code which is jfd 10 and you click on apply you will now get a total 78% discount canot believe we are getting super fast web hosting with a free domain name for the full year only for $32 what an amazing deal right here at the left side you can see different payment options so you can pay using your credit card PayPal Google pay alip pay or even you can use your cryptocurrency also you may see more different local payment options based on your country so here let's just scroll down here I'm putting my credit card information now click on submit secure payment then it will redirect us to the control panel let's set a very strong password here let's retype the password let's confirm it then you can see an interface like this but let's say for some reason if you just got logged out you can again just go to hosting.com from the top right corner click on login then here you just need to put your email address and the password you have just set that will take you inside of the hosting a dashboard and here you see it's asking to verify our email address and it's very important so now I'm going inside of my email inbox and here you need to click on this verify email button so it's now verified from this interface you see it says premium web hosting just click on this setup button you can see the same setup interface face what we have seen at the very beginning here from here click on start now let's SK skip this by clicking here as we want to create a new website so from here it says create a new website just click on select we will be using Wordpress to create our website so from here let's select WordPress here put your email address and set a very strong password I'm giving mine let's click on continue I don't want to add any plugins so I'm deselecting them all let's now scroll down click on continue we also don't need any theme from here so you scroll down and click on ES skip if you already have your domain name you just want to transfer it in hostinger then you can select this option but now as you have got a free domain with hostinger so here I'm selecting this option it says claim a free domain so click on select first of all from here you can select any extension like. online. link. shop but I'm selecting com extension because websites look more professional and legiate but you can select any extension you want and then within this field you need to write your desired domain name you can put your name or your business name it should be your website address so take some moment think about it and put that domain name here I'm typing here gy toots and let's now click on this search it says domain is available that's awesome let's now click on continue now we need to fill up some details for my domain registration so here I'm selecting my country Bangladesh and I'm selecting personal then click on Next Step here I'm quickly putting my name and contact details and now click on finish registration now click on finish setup and then just wait a little here WordPress will be installed on this brand new domain name you see the percentage here we are almost ready to go so we have successfully completed our domain registration now first just have a look inside of our control panel so from here click on manage site I know it may look overwhelming but it's super easy actually you don't need to do a lot of things here within this C panel just do a few things let's go inside WordPress dashboard so click on WordPress overview here and from this place just make sure this Force https option is turned on then click on this edit website button it will redirect us within our brand new WordPress admin panel all right so we are now inside WordPress admin panel or WordPress dashboard I will make you familiar with all these options like posts media Pages appearance plugin users all these actually these are super easy and most of them are self-explanatory but now before doing any other thing the first thing I want to do I want to clean up my WordPress dashboard because personally I love to work in a clean environment so here we can see a notification let's just close it and let's now minimize all of these and you can do another thing from top you can just open this screen options and from here one by one you can just deselect all of them and click on screen options again right now it looks much cleaner but I want to clean up my dashboard more so from left side overover on plugins now let's go to installed plugins if you wonder what is a WordPress plugin WordPress plug-in is extra app or extra add-on like thing which extends the functionality of your website so here we can see some plugins actually we haven't installed it they came with default WordPress installation so we don't need this plugins with this particular website so we can delete them I'm selecting one by one or you can select all of them together by checking it now from bulk action first I just want to deactivate them so I'm selecting deactivate now click on apply and then I'm selecting all the plugins from here again now from bulk action this time click on delete and click on apply the browser popup says I'm sure or not yes I'm sure so just click on okay so here our all unnecessary plugin has been deleted now from left side over on pages let's go to all pages here also we can see a dummy page it says privacy policy actually we will be needing this page later so let's just keep it also from post let's go to all posts here we can see another dami block post for the moment let's just keep it okay now I want to show you how to change your password okay so to change your password from left side hover on users from there just click on profile so here you can see lots of options so these are admin color scheme if you want you can change it to light or modern or blue actually it doesn't matter because only you can see it as you can see the admin color scheme has been changed here so I'm just keeping it to default let's now scroll down down from here if you want you can change it to your native language I'm just keeping it English let's now scroll down and here from this place you can change your name so my first name would be Jim my last name would be Fahad and here this is the space for nickname so I'm just writing here Jim space Fahad also this is the display name publicly as so basically this name will be shown on any blog post so if you write in blog as the author your this name will be shown so I'm just selecting here Jim Fahad then if you want you can change your email address from here also in this place you can write something about yourself and here from this place you can change your WordPress profile picture actually I have already another tutorial about this so I will just put that tutorial Link in the description okay so now here under account management here you see new password so just click on new password if you want you can use this password but this is not easily rememberable for me so I'm just first clicking on hide and here I'm just typing my password so here you see it says medium but I'm okay with it let's just scroll down and click on update profile now I want to show you some basic settings so from here just hover on settings and let's go to General so here is the site title and tagline option so here in the site title I'm just writing my business name you should write here your own business name and then after the title here is the tagline option so here instead of just putting some fun word you can use some good word which represents your business because if you put here some keyword it will help you to rank on search engine so here I'm just writing best digital marketing learning platform online because my goal is to sell marketing related courses online so here I'm just putting this tagline then let's scroll down from here I'm just enabling this option anyone can register so anyone can register who want to buy our course and from here make sure the new user default role is subscriber by default is subscriber so just keep it subscriber and then if you want you can play with this you can change the date format but I'm just keeping all the default and clicking on Save changes then next I want to do a very important settings so from under settings this time click on Perma links so here you see by default it set as custom structure or sometimes you may see it set as Plaine but I personally recommend to set it as post name so I'm selecting post name because if you have a look here if you set it as plain you see your other Pages or post Pages URL would be look like this kind of bizer so your website name then forward slash and you see this kind of bizer number but if you set it as post name you see your other Pages URL would be more human readable and it's good for search engine optimization all right so you have selected post name now let's scroll down and click on Save changes now here I want to make you understand with two terms so whatever we are doing here this is the back end or WordPress dashboard only we can access this portion because we are the admin of this website but let's say if you want to see I mean if you want to preview the real website what the whole world can see so from the left top side you can just hover on your site name from there let's click on visit site I'm opening it from a new tab so this is basically the front end of our website the whole world can see this portion of our website also here at the top you can see a black bar only we can see it because we are now logged in and we are the admin of our website so this is the front end and here this dashboard or this is the back end of our website only we the admins can see this portion of the website so right now if I go to the front end of our website here the look and field you are seeing right now it's basically coming from WordPress theme so if I if if I just go to the WordPress dashboard and now from left side over on appearance from there let's click on themes so like I said themes are the basically look and feel of your website here we can see some themes actually these came with default WordPress installation so at this moment this 2023 theme is active that's why we can see this look and feel but from this place if we just activate this one it says 20 2 1 so click on activate so right now 2021 is activated if I go to front end and refresh the page you see the look and feel of our website has been changed so it's basically coming from this area but instead of these I mean instead of this 2021 or 2023 I want to use another theme so to get that theme you can just go to Jim Fahad digital.com I will put this Pages Link in the description from this page here under important links you see it says get tutor LMS theme and plug-in just click there so it will redirect you to themeum website so from here just click on themes and here from this page I actually want to use this theme it's free you see it says free so it name is tuto starter so from here I'm just clicking on view details and click here on download free so here basically we have downloaded this ZIP file so now we can just go back inside our WordPress dashboard now from here we need to insert this theme within our WordPress admin panel so from here we just need to click on add new this button and from this place click on upload theme and you know we have just downloaded this ZIP file so I'm dragging this ZIP zip file here now from this place we just need to select that zip file what we have just downloaded so click on choose file so this is the zip file selected click on open now let's click on install now and then from this place click on activate all right so at this moment you see tuto starter theme has been activated so it says active here now we need to install some plugins but first here at the top it says this theme recommends the following plugins so here just click on begin installing plugin okay so click here and it's suggesting us to install this tutor M plug-in so from this place just click on install so it's installed properly because from now left side if I go to plugins to install plugins we can see here tutor M and also you can see the activate button but later we will activate all the plugins together so for the moment just keep it like it and next I want to use the main plugin for this website which is tutor LMS plugin okay so to get it you can again go back to theum website and from this website if you just click on tutor LMS then from this right side just click on pricing actually they has their basic free version also they have their pro version you can see are pricing here also if you want to take it for Lifetime you can select lifetime from this place also if you want to check what you will get with these pro versions you can just scroll down and you can you can compare all the features what you will get with the paid one what you will get with the free one but the most interesting thing is whatever you have seen in the intro of this video we can do everything just by using this free version so let's just get it and from here I'm clicking on get now so this time we have downloaded this tutor. ZIP file okay so we can now go back inside of our WordPress website now from plugins click on add new then from here click on upload plugin and you know we have just downloaded this tutor zip file so from here click on choose file let's select this tutor. ZIP file click on open and then click on install now so it's installed properly but we don't activate it this time because like I said we will be activating all the plugins later so just go to install plugins just check if everything is here so we have got tutor LMS and tutor M and now we need another interesting not actually interesting we need another necessary plugin because without this plugin we cannot design our website which is our page builder plugin so to get that you can again go to gimf digital.com from there under important links this time click on get Elementor free version because Elementor also has a pro version but we will be using Elementor free just click there and you see it takes us to Elementor Pro purchase page but like I said we will be only using Elementor free version so from here I just want to create a free Elementor account okay so to do it just click on login and from this place I want to create an account so click on create an account so from this place just put your email and password then click on create my account so an Elementor free account will be created for you as I already have my Elementor free account so I'm not recreating here anything so just create the free account here and come back within our WordPress dashboard then again from plugins click on add new you can click add new from here or from here at the top just click on add new and this time here from this directory search bar I'm just searching for El mentor and here is the plugin you see it has got five plus I mean 5 million plus Active installation so I'm clicking on install now and I will activate it later before that I want to install some other plugins so so from here I want to install another important plugin which is our ucommerce plugin because other than ucommerce we cannot make the payments so from here let's install this plugin it says you see ucommerce by automatic so click on install now so it's installed and then the next plugin would be tutor LMS and then El Mentor addon this plug-in is ALS also by fium so click on install now and then the next plugin is ele kit so here elements kit I'm searching for it here you go elements kit Elementor Addam it's by wpm just click on install now and then the very last plugin for the moment that is met form so we will be creating our contact form by using this plugin so this one it's made form Elementor contact form Builder it's also by wpm just click on install now so if we now go to plugins to install plugins you see we can see here all these plugins in this place now if you want you can just activate them one by one by clicking there or you can just select all of them together from here you can just check it and then from bulk action click on activate and then click on apply so first of all it take us to the tutor LMS setup so let's just scroll down and here we can start the setup so I'm clicking on let's start and like I said in the intro we want to create a Marketplace but let's say if you don't want to create a Marketplace if you just want to sell the courses of your own then you can select this individual option and if you select this Marketplace option then you can sell here also other instructor can sell here like I said you can keep your commission and they will get paid from this place so if you want to make it a Marketplace just select Marketplace and then click on next now from here I want to make people to create their instructor profile also the student profile so I'm just enabling both of them and let's keep the paral link the way it is so from here click on next we can keep all these settings default and actually you you can change all the setup later as well so this says par how many course preview you want to show so if you want you can keep three or four or two I'm just keeping all the default also per page how many course you want to display so by default it's 12 you can increase or decrease the number from this place but for the moment I'm just keeping it default click on next so here the option for new sign up yeah I want to accept the new sign up also I'm turning on the earning option because other instructor can also earn from this website so I'm enabling it click on next and here the first option for guest checkout so I don't want to turn on the guest checkout because if I allow guest checkout people can purchase the courses without even creating any account on our website but I don't want that I want to keep track on them so I of course want them to create their account here first they then they can purchase any course from this website and then here's the option for commission rate so let's say if one instructor create any course and they appload it in this website they will get 80% and as you are the admin of this website you can keep your 20% commission okay so if you want to increase or decrease that you can do that for example I want to give the instructors 90% so from here I'm just increasing it to 90% so for every purchase from this website the instructor will get 90% And I as the admin of this website I will get 10% commission and let's say if I'm the instructor of the course so I will get the whole 100% because at the same time I'm the admin of this website I'm also instructor of that course all right and then from here I want to enable all this payment option so let's select bank transfer e check PayPal and then click on finish setup so we have made the basic tutoial Elm setup I will also check the other settings from this place but before that I just want to make sure we have installed and activated other plugins properly because we cannot see some things here at the left side so we need to check from left side hover on plugins and actually I'm hovering here nothing is appearing here okay just click on plugins and here just um making sure all the plugins are activated yes here you see these three plugins has not activated so from here you can just activate them one by one like I'm activating this one and then let's activate torate sometimes it happens so always check just go to plugins go to installed plugins from here check all these plugins are installed and activated properly okay and we just need to activate one more plugin which is very important it's ucommerce plugin click on activate so after activating ucommerce it takes us to this place actually we can set up all this later so I just want to skip the onboarding setup from here so from top right corner I'm clicking on skip guided setup and here it actually Force us to give our location okay no problem here I'm just giving United States so here it is United States California click on go to my store all right so so it takes us here but we can actually set up all the ucommerce settings later for the moment I want to make all the settings for the tutor LMS plugin okay so from left side overover on tutor LMS and then let's go to settings so first of all um inside this General Tab and here now before making any changes from this place I just want to say if you don't understand any settings at this moment just don't worry Don't panic because we actually come back here again and again because if sometimes we feel we need to change this setting we will again come back here in this place so don't worry just follow what I'm doing here so I'm keeping the dashboard page as dashboard so just keep it default and then from terms and condition page okay now here before doing anything I want to do another thing so from left side this time let's go to pages to all pages so this time actually before explaining all these settings I want to show you another thing so it would be very clear to you okay so from here if I just overover on pages and from there let's go to all pages I'm opening it in a new tab so here you see before installing all those plugins we have just seen this page that's privacy policy but after installing all the plugins we can see these Pages because all these pages are came with the plugins like here we can see shop page this shop actually came with ucommerce plugin here we can see check out also we can see my account all these are came with ucommerce plugin also here we can see dashboard then we can see instructor registration then here we can see student registration all these Pages came with the tutor LMS plug-in so from here I'm just showing you one example like here this student registration page has came with the tutor LMS plugin so from here if I just open it by clicking on view so I'm opening it from a new tab just have a look here so it's the student registration page as I'm logged in here so it says you are already logged in but let's say I'm just copying this link and if I open it from a new incognito tab or let's say for the moment if I just log out so you can also get familiar how to login and log out so from this place if I click on log out and here if I paste the URL it says our website name then forward SL student registration just hit enter you see it's the form for registering as a student so we don't need to create these pages from scratch because the plugin gave us this p Pages all right now let's go back into our WordPress dashboard by the way as you have logged out so we need to log in again so here we just need to provide our username and password click on login oops I have just put here my username actually we need to give here the username we have created I mean when we have installed this WordPress so that was gim tos.com and here I'm giving my password now click on login now click on login okay so all I wanted to say we don't need to do the hard work because the plugins has done all these Pages for ourself okay so for now I just want to publish this privacy policy page because you see it's on draft so from here we can just click on quick edit and from draft status I'm just making it to published and click on update all right now privacy policy page has been published now we can just go back to our tutor LMS settings so from tutor LMS this time go to settings and here we are now under this General tab so we are keeping the dashboard page as dashboard and here is the terms and conditions page so we have just enabled the privacy policy page so we can select that page as our terms and condition page so from here I'm selecting privacy policy and yep I want to enable the marketplace from here and let's scroll down now from here it says allow instructors to publish courses no I don't want to enable this option because if I enable this options the other instructor can publish their course without my approval but I don't want that so whenever in any other instructor create their course they will send me uh so when any other instructor will create a course they will send me an approval request and I need to manually approve that then their course will be published in our website so I'm not turning on this website and also become an instructor button yes I want to enable this option so by clicking on this button people can become an instructor or they can register here in our website side as an instructor all right so right after making the changes from Top click on Save changes and then I'm going within this course tab now from under course tab we can keep all the default settings from this place let's scroll down keep everything default just from here this option is for course retaking yes I want to enable the course retake option so let's say we will have quizzes or other tasks if anybody can't make the passing number I mean if anyone fails on that particular quiz or any other thing they can retake that course also you can see later for example if we go our previously made website you see while you do any course you can see these options like your are 12% you have completed 12% of the course actually you will get the option to reset all this progress report and you can start over from the very beginning okay so I'm just turning on this course retake option and then I'm turning this option on so it says publish course review on admin's approval so like I said without my approval they cannot publish a new course but on their existing course if they just want to add any new chapter or if you just want to edit something and republish it they can do it from here then also I want to turn on this WP editor for lesson this option and here automatically load next course content so when you are at the very last of that particular video or course then the next course will be automatically loaded so I'm enabling this option then also enable listen comment of course I want to enable the listen comment option and then here when time expires so actually this is for quizzes so I'm selecting this Auto submit option and then let's scroll down and here let's just keep everything like the way it is and here the preferred video source so here actually I'm just enabling all these options later I will show you how to insert all kind of videos like HTML 5 videos YouTube videos VI videos I will show you all the options so for the moment just click on Save changes now let's go inside monetization so here select e Comm Merce engine and we will be using ucommerce as our e-commerce engine so I'm selecting eCommerce and here this is the option for automatically complete oom Merce orders of course I want that because let's say if you sell any physical product so if anyone orders any physical product for example t-shirt from your website then you need to check you have that in your stock and then you need to manually complete that order because you have to have that t-shirt in your stock but here as it's a virtual product so you don't need to manually check anything you want to autocomplete the order so I'm enabling this option of course and then of course we want to enable the revenue sharing option so we have discussed it earlier so just enable it and here like I said the instructor will get 90% And I will get 10% as I'm the admin so this is my commission and and then let's scroll down here you can set minimum withdrawal amount so by default it's 80 if you want you can set it as 100 so let's say if someone if any instructor create any course which pric is $50 so if they sell it for only for example one time so they will earn $50 but they cannot withdraw that money because the minimum threshold we have set as $100 so for a 50 $50 course they need to sell it on I mean they need to sell it minimum two times so they will have $100 but technically they have to sell it three time because I have 10% commission within it okay so actually I just want to pay them the minimum so here instead of 100 I'm just giving here $50 and here you can set minimum days before balance is available so by default it's seven okay let me explain this option let's say if you give any money back guarantee okay so let's say if you give 7day money back guarantee you should hold the payment for first 7 days because if anyone refund that you can give back money to that student okay so if you have any money back option I mean if you give 7 Day money back guarantee you can put seven here if you give 30day money back guarantee you should put here 30 days but as it's a digital product and if you don't want to give any money back guarantee you can just put here zero or maybe just one then here withdrawal method I'm selecting all e check also PayPal and here bank transfer okay so from here click on Save changes then now let's go inside design so here we can keep it three we can also enable course filters so people can filter it by Price or any other activity so I'm just enabling it and I think we can keep everything default also this is the layout so if you create any page for example if I create any page and there as instructor my name Jim Fahad will be shown so for example from here this course as the instructor of this course here Jim Fahad name is showing so if anyone clicks on this gim Fahad link so which layout do you want to display so you can select any of these from this place let's say I'm selecting cover and let's scroll down also if you want you can select this layout from this place I'm just keeping everything default also from here you can enable or disable any options so let's say if we create any course and if you don't want to show these options these requirements and material includes so you can just go here you see it says requirement and material you can just disable them from this place but I just want to keep all the default option also you see the author option is turned off I don't know why is that I'm just turning on the author option as well okay so from Top click on Save changes and now go inside this Advanced Tab and here all the settings are looking fine to me so just keep it the way it is all right so our tutor LMS setup is done now we will create a course and you know by using tutor LMS you can create both free and paid courses I will show you both how to create free course and how to create paid course actually they are almost similar when you don't give any price so your price is zero that is a free course and if you set any price for example $50 or $60 that would be a paid course okay so let's now create a course but first I just want to preview one of the courses I have created before so like here it says Instagram marketing this course here we can see a preview of the course and then here we can see all the levels or information about this course then here's the course author name here is the material included here is the requirements text audience then here at the left side we can see the details about this course just click on show more so you can see the more details about this course here is what you will learn here is course content so we will create everything from scratch okay so let's start it to create a new course from tutor LMS just click on courses and then from Top click on add new now we need to give a title of this course so actually I just want to recreate this course so I'm just copying this whole course name and I'm pasting the course title here then here within this field we will be putting the course details so from here this is the course details okay so we don't need to copy this about course I just want to copy this details text so just like this from this place I mean just copy it from here and I'm pasting it within this field okay so if you under this text editor is super basic so if you can just type on google doc it's similar like that okay so just uh I'm giving you an example so hit I'm hitting here enter so for example this is the oops the best course for learning Instagram marketing okay so here you can write anything the way you write on google doc or Microsoft Word and then let's say if you want to make anything bold okay you can just select that and from here if you just click on this bold icon it will be bold then if you want to make this learning text to italic you can just click on italic it will be instantly italic also you can toggle it so click here let's say if you want to make any color I mean any words color or sentence color any other thing so from here I just want to make this Instagram to red color so from here just open this color option and I'm making it to okay just for the moment I'm making it red so it's now looking R so similarly you can create any bullet point so I'm just giving you example so from here I'm just writing1 and let's select it and I'm making it a bullet point so you can make it numbered list or bullet list so I'm making it numbered list you see it's now becoming 0.1 if I hit enter so it's now number two so go I mean so you can just go on okay so I just want to remove this text you understand it I believe basically this is the area here you can talk about your whole course now let's scroll down scroll down a bit more and you see here I'm the author as in this website only one author is registered so I can only see my name if other instructor register in this website we can see more author's name in this drop-down so I'm selecting my name then here under course settings here you can see maximum students so let's say if you create a course only for 100 people so you can select the maximum number to 100 so 100 people only can register right after that people cannot enroll on the on this course so if you want if you need in any case you can do it so here is the option and I just want to keep it to zero so keeping it zero means there is no limit on student enrollment so you can just keep it zero here difficulty level for this particular course you can select the difficulty level if it's for intermediate you can keep it if it's for only beginners you can set it as beginners I'm just keeping it as all levels now here of course I don't want to make it public course because people of course need to register on our website no matter if it's free or paid if it's paid people need to pay but if it's a free free course and here this is the public course option of course I don't want to enable it because no matter if it's a free course or paid course people at least need to register in our website so I don't want to enable it Q&A uh yep I want to enable the question and answer option so I'm enabling it by the way if you confused the settings we are making right now this is the settings only for this particular course for other course you can select other option okay so let's scroll down and like I said this one is a free course so I'm selecting free and then before adding course element let's go to the right side here have a look you can add category okay as this one is Instagram marketing course so let's click on add new category and I want to include it inside digital marketing so here I'm just typing digital marketing let's now click on add new category so it's added here let's say if you want to create more courses under digital marketing category later you don't need to recreate the category you can later just select this from here on the right side okay so let's now scroll down you can here add as many as tags you want I'm adding the tag marketing and oops not marketing it would be marketing also um just putting here comma to separate the tags I'm adding here Instagram okay so these two Texs are fine click on ADD and rest other options are fine for me also you can add a featured image for your course so just click on set featured image and here I will upload an image but before that I want to just tell you that you can just go to Jim Fahad digital.com and from here if you click on download the resources I have used in the tutorial you will basically get all the resources so all the videos all the images you will get everything what I'm using to create this whole website so from there from our first course I want to drag and drop this image because you see it's a Instagram image now let's click on set featured image okay so here at the left side let's add some other information about our course so here it says additional data so and here at the top we can see course Builder we will create here I mean in this place within the course Builder you need to add the main element of your course like the course videos course assignments quizzes any articles so you need to add those within this course Builder I will show it at the very last but before that here I'm adding other options here it says what will I learn so if I go to the course what we have previously made you see here underneath the course details we can see what you will learn so first I'm just copying this first point from this place let's go inside here and I'm pasting the line and if you want to make the different bullet points for this area just have a look here so if you want to make this kind of different bullet points you need to keep them in a different line okay so here I'm just copying the second one go inside here and here you shouldn't write here instantly after that you first of all you need to hit enter to make it separated from the previous one now paste the second one so similarly here I'm just copying the third one here hit enter paste the third one from here I'm copying the fourth one let's just paste it here and here I'm copying the fifth one and hit enter I'm pasting the fifth one so basically with this Instagram marketing course what what will I learn in this field you can tell about what they will learn for example in this course they will learn how to get 10,000 follower then how to convert their follower into their customer like that then within this targeted audience field just go here so within the targeted audience you see it's suitable for those who have less than 10,000 Instagram followers so if anyone landed on this page and if they see yep I also have less than 10,000 Instagram followers so this one is perfect for me so here on the reference side if we check here it's audience so you can add Audi and features from here so I'm just copying this audience feature from here I'm pasting it here also the second one I guess you already understand it so if you want to keep it in a different bullet point you just need to hit enter and here's the second second feature of the targeted audience so people who want their Instagram organic growth they should purchase this particular course and people they have less than 10,000 Instagram followers they should purchase this particular course so here you need to Target your audience I mean you need to Target the features of your audiences then here you can manually type the course duration so let's say it's a 7h hour long course so here 0 7 and uh here I'm adding 30 minutes so it would be a 7 hour and 30 minutes long course now here we will be included material includes again if I go to the reference website you see material includes so it's 7 and 1/2 hours on demand video two articles nine downloadable resources all this so I'm just copying all of this from here and let's paste it inside here as they are into separated lines so that would be different bullet points now here this field is for requirements or instructions so here you can include if you I mean if the student requires any prere requirements so you can as as this one is an Instagram marketing course so they should at least have their Instagram account or they should at least understand how web browsing work or how to web browse like that so very classic requirement you should put here from our reference website if we look here is the requirements so we can just copy it and paste them here inside make sure they are into different lines so they are looking like it but we can remove the extra space so they're just in two different lines and then you scroll down here you need to upload the course intro okay so like here in the reference website we can see the intro here so actually within this intro you should convince the students that this course is perfect for them they can preview the video and they can decide if they purchase it or not so to upload that video you know you can upload it in different formats for example the first option here is the HTML 5 MP4 format basically when you are selecting this option you need to upload this video into your own web hosting for for example right now we are using hostinger so this video will be hosted within your own web hosting for the short videos like the intro videos I recommend to use this HTML 5 formatt videos but let's say when you want to upload the real videos of your course on that time you should choose any options from this place I will show that later but for the moment let's upload the HTML 5 video so I'm selecting this one now to upload the video just click on browse files and from here we can upload this course preview. MP4 this file let's drop it here okay so MP4 video has been uploaded now click on upload media and here you can upload the video poster that's basically the thumbnail so I want to use the same image now click on upload image and from here we can select the same image all right so far everything is looking good so at this moment I'm just making it publish so click on publish now to preview this course from here we can see this is the course link or here at the top it says course published here is the view course button I'm opening it from a new tab so here is our course page as we have made it free we can see the free here people can enroll it from here and then here we can see the author name here is the category it's under digital category here is the title here is the review and here we can see the preview video and also here's the thumbnail so if I just play it we can see the video which we have uploaded and then here we can see all the details we have puted and here is the course author name here is the material included requirements tag audience here is the what you will learn also we can see the about course here so click on show more we can see all the course details in this place now we need to do the main thing so we need to upload the course materials which means the course videos course articles course quizzes all this so let's go back to our course I mean within WordPress page builder now from here let's scroll down and here underneath you see within the course Builder click on add new topic now first here I'm pasting a topic name so it would be creating a strong in Instagram profile then within the topic summary field if you want you can add some summary of this topic so I'm pasting some text here and now click on ADD topic now within each topic you can add multiple lessons multiple quizes but before going inside each of these topic I want to create some topics so click on add new topic so here within the second topic I'm just writing Instagram of platform marketing click on ADD topic let's add another new topic so here it would be Instagram content creation process click on ADD topic now the next topic would be Instagram ads so click on ADD topic and then let's add the very last topic here so it would be monetizing Instagram audience Okay click on ADD topic now within the each topic just click here at the first topic within each topic you can add multiple lessons multiple quizzes and I will be on adding lessons and quizzes within this first topic then you can add more lessons and other topics like not topics you can add more lessons and quizzes within other topics here or here so that would be your homework okay let's now okay I'm just minimizing the second and third topic now within this first topic I want to add multiple lessons Okay now click on this lesson and here within this lesson name field you need to write down on the lesson name here I'm just adding how to create an Instagram live room then within each lesson you can add some text or article so here I'm just pasting some text and this is the same Builder you have used to create this course I mean whenever you have written the course details you can I mean you could see this type of text Builder now with each lesson here you will get a f field so you can write down a specific article for this specific lesson so here within this text editor I'm pasting some text here so this is the same editor you have used a few times ago so like you can make anything bold from here you can make anything link so for example if uh right underneath the video you want to write this type of text and you want to link any other thing for example you want to include I mean you want to mention your Facebook group link so you can just write down here for example here is our Facebook group for example and you can link this with your Facebook group so just select it from here click on this link icon and you can insert your Facebook page link for example I'm just typing facebook.com and hit enter so it will be linked with that particular Facebook group just like that let's now scroll down and here is the option for adding feature image but I mean with each of these lessons you don't need to add featured image particularly okay so let's scroll down and from here you can add your main course video okay so this is basically your first topics first video and here you can select your video source so previously we have seen HTML 5 videoos so you need to basically upload the video on your own web hosting and still I'm not recommending this HTML 5 option but let's say if you want to host only three to four courses in that case you can upload that on your own web hosting but if you want to create a whole Marketplace so there would be thousands of videos so you don't want to upload all those on your own web hosting right and you can see here different uploading method so I will show you all these first let's start with the Vimeo option I'm selecting Vio and here you need to paste your vimeo video URL first of all you need to understand how to upload on Vimeo so I'm just going to Google and I'm searching for Vimeo okay let's now go inside vimeo.com basically it's a video hosting platform and they have different pricing plan if I go to their pricing you can see see there are different pricing plans from this place and which best suits with you you can take that plan also if you want to taste their platform you can just create a free trial account so just click there and create a free plan account and I already have a trial account so I'm just clicking here on login so here is my dashboard now if you want to upload any video on vimeo.com just click here on this upload tab now here you can just drag and drop your video so from the folder you have downloaded from my file so here this first video I want to upload here so let's just drag and drop it you see it's uploading just give it some time to upload by the way during uploading you can also change the title from here so I'm just removing this one-1 so just I'm keeping it how to create an Instagram live room click on this check mark just after uploading the video it's optimizing itself just wait a little all right you see the video has been uploaded here now from here just at the top click on this share link button and now from here just click on select rating and here I'm selecting all audiences now let's click on continue so actually it's generated the link for us now from here just click on copy go inside WordPress and here we already have selected Vimeo we just need to paste the video URL here so I'm pasting it here and you see from Vimeo it's automatically get the video duration so it's 5 minute and 7 Seconds very cool all right let's now just click on update lesson so we have successfully added our lesson one now within this same topic this creating a strong instr profile within this same topic I want to add our lesson two so here click again on lesson let's just scroll up because first we need to give it a lesson name now for example the second lesson name would be how to deal with Instagram Shadow ban similar like before you can add some text content with the video content you know if it's relatable let's now scroll down we don't want to add any feature image and this time the video source you may remember previously we have used Vimeo but this time I want to show you how to add external URL okay so I'm selecting external URL because there are lots of resources where you can upload or host your videos there are lots of service like Amazon also has its own service which is called Amazon web services actually it's very popular you can just go to Google and you can just search for a WS which stands for Amazon web services is three so here now from here if we just go to the pricing so I'm clicking here so let's scroll down a bit to get some idea here you see if you have lots of data to upload if you have hundreds or thousands of videos then I recommend to using Amazon web services because you see you can host here 50 terab of space per month and the cost would be 0.023 per GB so like that you can just browse and select any of the packages which suits you best and not only videos you can upload here anything any images uh or other web assets you can host here on Amazon web services so if you don't have any AWS account you can just go to top right corner click on create an AWS account I already have my account so I'm clicking on sign in so I'm signing in here for now let's just log in skip all these all right so here we are now inside Amazon AWS and if you just log in here for the first time you can search different services so you can search here within this search bar S3 so here I'm searching for S3 and within the services this one is the storage service so I'm selecting S3 and now you can create different buckets okay so within each bucket you can upload one single courses videos within another bucket you can upload other courses videos actually it's up to you so you can actually organize the way you want so here I'm just creating a new bucket click on create bucket so here you need to give the bucket name I'm just giving here JF digital and then you can select the region where you want to host it so other than that all the default setup is fine for me so let's scroll down and from here click on create bucket so here is our bucket it says JF digital now let's go inside this bucket then within each bucket you can create multiple folders okay so for example for the first chapter you can create chapter one folder for the second chapter you can create chapter 2 folder like like that so here I'm creating a folder click on create folder and here I'm giving the folder name to chapter 1 001 all right let's now scroll down and click on create folder So within this chapter 001 go inside I want to upload my video okay so click on upload and here you can drop the file so from our computer I want to drop this video video so just drop it here and if you scroll down you see here we can see the video name it size and from here click on upload so it will take a few seconds to upload you can see the progress bar here and it says upload succeeded so from here actually if you just go inside this chapter 001 folder now we can see the video here just click on this video and here we can see all the details about this video so from here you see it says object URL I'm just clicking here on this URL actually not this one just go back so from here at the very top you can see all these links so it says open just click there you see now the video has been opened here on a new browser now from this place you can just go to the browser URL and copy the whole URL from this place right click and click on copy now go inside our WordPress dashboard just to make sure here the video Source external URL has been selected now within the field I'm pasting the link you see here also the playback time is automatically selected it's 4 minute and 59 seconds click on update lesson let's now add our third lesson within the first chapter so click on lesson and you know you just need to add here your lesson name here if you want you can add some lesson content in text format then scroll down here this time I want to use YouTube video actually I recommend this option most and of course it w't be a public YouTube video because if you make it a public YouTube video everyone can see it you just need to make it a unlisted YouTube video and you need to share the video link here so you can just go to YouTube and you can you know you don't need any requirement to create a YouTube channel so you can just use your Gmail and if you go inside youtube.com at the top right you can see this upload icon so click there click on upload video and here you need to drop the video so from here I'm just dropping this video so let's drop this video and as it's a very small video so it don't take so much time so it's already uploaded now it's making it HD version so here you don't need to add any other thing even you don't need to upload your thumbnail so from here you just need to give the video title also this is optional but actually it's not optional because from YouTube It's required so you just need to put the video title and other than that you don't need to do anything or you can do one thing from here you just need to make YouTube sure that this video is not for kids so check here no it's not for kids now also open the age restriction so from here you just need to check no don't restrict my video to viewers over 18 only because it's not a re it's not a age restricted video right and you don't need to do any other thing so from here click on next also click on next then just click on next and here visibility this one is important you shouldn't make it public because if you make it public everyone can see it and here you need to select it as unlisted just select it then click here on save all right now you can get the video link from this place just click on this copy icon go inside our WordPress dashboard and you need to paste the video URL here but here you may notice that playback time is not updated from the video but no worries because you can also manually do that so if we just go to YouTube again and I'm just opening this video from uh new tab here so from here we can see this video is 4 minute and 36 seconds so here we can just write 04 and 36 seconds Okay now click on update lesson all right so within the first chapter we have added three lessons and these three are basically video lessons first uh on the overview video I have shown how to add HTML formated video so that's basically hosted video on your own web hosting then on this lesson one I have shown how to host video on Vimeo on the lesson two I have shown how to host video on external URL in that in this case I have shown how to host on AWS which stands for Amazon web services on the lesson three I have shown how to add YouTube videos and make it unlisted and show it on your website okay so for now just click on update to save our work and if we now go to the course page here let's now refresh the page so we can check the information has been updated all right so now if we scroll down yep we can see here the course content so here we can see other topics but Within These topics we cannot see anything because we only have added topics within the first topic I mean all these videos within this first topic only now you see you cannot see these videos from this place because here we can see the lock symbol because I know it's a free video but still you need to enroll on this particular video okay so and you know I already a member of this website because I'm the admin of this website still I need to enroll here here so if any other user just become a free user of this website they need to enroll here I think that sounds much complicated but let me tell you in a very simple way let's say if you are a just random visitor you have landed this page and if you want to enroll this course first you need to create a student account that might be free so you need to create that free student account to enroll this course and as I have my account here because you see I'm now logged in so I just need to click here on enroll now so I'm clicking on enroll now as it's a free course so I instantly go going in I'm instantly going inside of this course now from here if I just click on start learning so we are now instantly within the course dashboard so here we can see all the videos within the first topic so here is the first video you remember we have hosted in I mean we have hosted it in Vimeo so if we just play it here we can see it from within our own course so it's coming from here if we go to the next lecture so you may remember we have hosted it on AWS Amazon AWS if we go to the third video we have just uploaded this video on YouTube just let it load so you see it's hosted on YouTube and all also it's playing here on YouTube URL in this way I mean in the same way you can add as many as video lessons within each topic also you see you have added some text I mean text content with each of these videos so that text content is appearing here underneath here also you have added some content with the first video as well so here underneath you see you have added the Facebook group link so you can see it here in this place now let's say you can see all these are video Lesson if you want to add any article type lesson how can you do that so from your WordPress dashboard so here's the course just scroll down and let's say within the first topic just expand it here you want to add another lesson but it won't be a video that would be just a reading article okay so click on this lesson now here I'm giving the lesson name how to optimize your Instagram profile perfectly 2023 version then within this text field the lesson content field I'm pasting some text here so so let's first give it a title that's Instagram influencer road map and then within this lesson content within this text field I'm pasting some text like this and you know within this lecture I don't want to insert any video it would be just a I mean it would be just an article okay and within this article if you want to add any image you can do that let's say within this article you can just increase it size okay so within this place let's say in this empty place you want to add an image just put your cursor here now from Top click on ADD media so here I just want to insert this image so select this image click on insert into post so you see the image is also included within this article okay and let's see if you want to make this image bigger just click over this image drag its Corners you see the image is instantly bigger okay now let's scroll down and here you see there is the video Source option for the moment let's just keep it like this and click on update lesson if we now just click on update and then go to preview page and let's refresh this page and here I'm going to this fourth lesson so click on this Instagram influencer road map you see there is no video we can only see the text so this is an article but here I can see a little error which is here this one is a video content so here we can see a video icon also this one with this one we can see video icon that's perfectly fine but with the fourth one it's not a video so we can see the video icon here as well but I don't want that just go inside WordPress again and from here just go inside this first topic and here is the fourth one click on this edit by the way if you want to delete any topic just click on this delete icon but this time I just want to edit so click on this edit icon and and from here so on the video Source you see the HTML 5 format is selected but this time you need to just select it select video Source like this so which means you haven't selected any of them just select the first one select video Source now click on update lesson now from here click on update again and this time if we go to the course page refresh it now have a look with the fourth one we can see an article icon all right now go inside our WordPress dashboard now let's scroll down and here within the first topic here I want to add this time a quiz okay so click on quiz and you can give the quiz a title so here I'm naming it as Instagram isats 2023 quiz then if you want to give the students some context you can write some summary so this quiz is all about Instagram stats so statistics about Instagram and here I'm just giving the students some context Instagram in 2023 is a quickly evolving social platform so this quiz is all about Instagram statistics Okay now click on Save and next now from here let's add a quiz question so click on ADD question so from here actually in the quiz question you can add different types of question so if you just click on this drop- down you see you can add this type of question maybe true false multiple choice fill in the blanks open-ended single Choice like this also there are some more options like image matching short answer matching ordering but you can see the lock icon with this so this last four or five types are premium you need to purchase the pro version of the tuto LMS plugin but other than that this true or false fill in the blanks multiple choice these options are free okay so for the first one I'm selecting the true false question now let's scroll up so here we need to put that true false question so within this place I'm just typing Instagram is the most downloaded app in the world is it true or false like that okay so there are some options over here so if you want to make this question required you you can enable this option so student must have to answer this question so I'm turning on this required option here you can randomize the answers okay so for example if you want to make it randomize for example if you have four options sometimes first option might go to third third option go to first so for different students they will have different options in random I mean in random orders okay so I'm just selecting randomize and here you can also give different points for different question so for this one I'm selecting three points and let's select display points so students can also see the points for this particular question and here if you want you can add some description but I don't want it and as it's a true or false question so you can pre- select if it's a if I mean you need to pre-select what is the right answer because of course this system doesn't know about your question or answer so here the true or false term is Instagram is the most downloaded app in the world yes it's true so from here I'm selecting the right answer is true okay now let's click on add to questions so we have added one question this one is a this one is a true or false type question let's add the next one so click on ADD question so this time I want to add a single Choice question so this one now scroll up here we need to put the question so the question would be which country has the most Instagram users in the world also I want to make I I just want to make its answer to be required Also let's set it randomize and the marks or points for this answer would be three let's click on display points and here you need to add the options okay so click on add an option now here I'm just adding an answer so here first I'm typing USA now scroll down and click on update answer then we need to add second option click on add an option so here I'm typing China let's now click on update answer and then add another option so it's India let's click on update answer and let's add now fourth option so click on add an option and here I'm typing Australia I'm not sure about its spelling it's LR okay I'm just keeping it pardon me if you are from Australia okay so let's scroll down and click on update answer and here the question is which country has the most Instagram users in the world it's a single choice so only one answer would be right and the answer would be India yep right now India has the most Instagram users in the world so from here click on add to question so we have one true or false question one single Choice question let's add another one click on ADD question and this time I want to add a Fillin the blanks question so select it and here first within this field actually here you just need to write fill in the blanks like this and then also I'm making it answer required here I'm making it randomize also for this one let's keep the point one and here display points let's show it and here actually within this field just click on add an option so here we need to add that option click on this place so first of all we need to add the fill in the blanks question here so here the fill in the blanks would be this so it says Instagram has 2 billion active monthly users and I want to hide these two because the students should answer this two okay so here I'm just removing two and you see here in the guideline it says in the place of the I I mean in that place where you want to the students to be completed you just need to copy this Dash within the second bracket and after has here I'm pasting the dash so here will be appear a dash and the answer would be two by the way some student could answer that in letters so you can have different answers so you need to separate them by a pipe symbol so you can just copy the pipe symbol from here so after two I'm writing a pipe symbol and here I'm giving another option two so if they answer the letter two I mean t wo this two or if they answer with the number two this two the both answer would be correct all right now from here click on update answer so it's also added now click on add to questions and let's now add another question click on ADD questions in this case I'm selecting multiple choices so people can select multiple answers if they are correct so I'm selecting multiple choice and here the question would be which platforms are owned by meta for example and here I'm just making the required answer randomize display points and here click on add an option so here first option would be War app you know it's owned by meta click on update answer and here add an option so here I'm just writing Facebook now click on update answer then the third option here I'm writing Tik Tok which is not owned by meta click on update answer and then click on add an option here I'm writing insta gr which is also owned by meta click on update answer all right and here you also need to select the right answer so without the Tik Tok both these WhatsApp Facebook and Instagram are owned by meta so click on add to questions all right so these four questions are fine now click on Save and next so here you can specify the time limit so for this question I want to give them 2 minutes okay so here I'm just writing 2 minutes I don't want to hide the time now from here quick feedback mode so they can retry it if they fail so I'm clicking on retry mode then here attempts allowed so you can actually select the attempts how many times they can try as there are four questions so if you give them four times that wouldn't justify their answer so here I'm just keeping it two or let's keep it three because we need to test it in different scenarios okay let's now scroll down if you want you can set a passing grade so they if if you want you can select 80% passing score if anyone get less than 80% they will fail this quiz so for this one I'm just putting here 75% passing grade and here you can keep it 10 because let's say if you you have hundreds of students okay or if you have thousands of students you can set I mean you can preset 100 questions for all of the students now only any random 10 question would be appear for a single student okay because they only need to answer 10 question from your 100 question so the random 10 question will be appear on any specific any specific student so like you see on the quiz info this tab I have added four questions uh in the same way you can add 100 200 or even, questions and you can select this option from here so if you want to answer the student five questions and you want to make it randomize for I mean if you want to make it randomize you can do it from here so it doesn't matter if I keep here 10 because we only have four questions here so I'm just leaving it and from here click click on Save and next so here if we just have a look you see it's added here also now click on update button and if we now go to the course preview and here we need to refresh you see right after the article here the quiz has been added it says Instagram is stats 2023 so also you can see the time here 2 minutes so let's just click here and and you can preview everything you see we have given this title this summary so they can see it here up front also four questions 2 minutes time and total attempt three the passing gr is 75 they can see everything up front here now just click on start quiz so here you see the timer is now clicking here or ticking here and here your progress and all the information so here the first one fill in the blanks Instagram has 2 billion active monthly users So within this blank I'm just writing two now click on submit next which country has the most Instagram users in the world so it would be India now click on submit next then this question which platforms are owned by meta so without Tik Tok just WhatsApp Instagram and Facebook are owned by meta now click on next the fourth question Instagram is the most downloaded app in the world is it true or false it's true now click on submit quiz so it says pass so I have passed but here I can see one incorrect answer okay so if you want to see which one is the incorrect one just click on this details and here we can see this this question this fill in the blanks is incorrect so this two answer is showing incorrect actually there is a little error here so if we just go inside this course I have actually checked it earlier I have seen the same error so here within the first chapter let's just go inside and go inside the quiz click on edit now click on Save and next and here actually I want to edit this fill in the blanks so click on this vertical three dots click on edit and here actually okay just click on this pencil icon to edit the answer so within this Dash you see they are suggesting to add multiple Answers by this pipe symbol but actually in real scenario they only accept one answer okay so I'm just removing all this so if the student put just two that will be correct other than that all the answers would be incorrect so I'm just I'm just editing this new condition so click on update answer and and then click on add to question so just click save and next and click save and next so from here click on update to save now go to course preview I just want to refresh the page once again and from here I just want to retake this quiz so from here let's just click on Instagram stats 2023 so from here click on start quiz so this one you know this is true now click on submit and next this would be Instagram Facebook and Tik Tok is owned by meta submit and next here I'm just typing two click on submit and next here Instagram has most users in the world so I'm selecting India now click on submit next so this time actually it's showing the same error because here we needed to do one thing after saving this page actually we need to hard reset this page so from here just reenter the page URL here so this time click on Instagram stats now click on start quiz so I don't want to kill any of your time so I'm just quickly answering these and Facebook Instagram WhatsApp submit and next here it would be India submit and next and here it would be to click on submit quiz you see this time it says 100% correct answer so click on details and this time you see all the answers are correct because if you are confused why it happened because we have edited the answer to two from here on the WordPress dashboard but right after updating it we haven't refreshed the page actually sometimes it's good to do some mistakes because we learn a lot from our mistakes you know so the way you have created all these lessons within this chapter you can minimize it or expand it in the same way just go inside WordPress dashboard and here we have added lessons within this first chapter now minimize it in the same way you can add chapters I mean you can add lessons within the chapters so here as well you can add lessons within the different chapters also the quizzes like the way we have created with the first chapter so just go ahead and create all the lessons and quizzes on the other topics so the more you practice you will become more professional okay all right so we have created a free product I mean we have created a free course and now I will show you how to create a paid course but before creating our paid course I want to do some setting on the ucommerce because we will be using o Commerce to create our paid course so first of all we need to do some basic settings so from left just hover on ucommerce then let's click on settings first of all here you need to push your address so here I'm I'm just providing the address also you need to include your city name and here you need to add your country name then here within this field your zip code and then here is some general options for example if you want to sell any course on any specific country you can do that so let's say if you want to sell any course on real estate business on USA okay so you can specify only USA student so from here you can select sell to specific countries and here you can select United States for example but I don't want that I want to sell my course over all countries so I'm selecting sell to all countries okay and we don't need any shipping option because it's uh virtual product and then here yes the default coupon option is enabled let's just keep it like this and then I want to use the US dollar as our currency but if you want you can add different currency but I'm just keeping it as United States dollar and the rest is fine click on Save changes then we don't need to do with this product or shipping tab just go to payments because we need to receive payments from our students right and here we can see some options like ucommerce payments and cash on delivery of course we want we use this cash on delivery so actually I don't want to use any of these and for payment I want to install two other plugins so first of all from left side just hover on plugins let's go to add new so here I'm searching payment plug-in so here we can oops let it load here it says payment plugins for stripe eCommerce it's by payment plugins so he's the author I mean this team is the author so this is a pretty good one so this is for stripe just install it and also another plugin it says payment plugin for PayPal o Commerce it's also by the same author payment plugins so just install it then let's go to installed plugins and now let's activate these two so I'm activating this one this one is for PayPal and actually we will be doing the settings later just close it again from plugins from plugins go to install plugins and here activate this payment plugin for stripe so activate it so yep we have installed and activated those two plugins perfectly now from under ucommerce you can start with PayPal or stripe so I'm just going with PayPal first click on PayPal by payments plugin I'm clicking here and then click on settings actually it's pretty easy so here under API settings make sure you have selected the production by default is production and then you just need to click here on this click to connect button that will here appear here a popup and on that popup you need to login using your business PayPal account it's easy like that so here I'm clicking on click to connect and here within this popup I need to log in on my PayPal business account let's Now log in here now just click on login it should connect automatically now you just need to click on agree and connect so just wait a little bit and you see it says it's connected so you don't need to do any other thing people now can pay you through their PayPal very easy now just scroll down and click on Save changes now right after PayPal we also need to install this stripe by payment plug-in this settings by the way here I need to tell you up front EST stripe is not available on all countries only on some European countries and American countries E stripe is available ISP is basically to accept payments through credit card so if any student want to pay using their credit card they can do that so here click on stripe by payment plugins click on settings and here you know if you want to make it live just instead of this test you need to select live but here first I want to show you how to enable the test mode okay so here you can actually just click on click to connect and as the same like PayPal you can login on the popup but there is another way you can just go to stripe.com by the way if you don't have stripe.com you can just sign up there so you know you can just click here on now and you can sign up there and I'm just logging in on my stripe account so here you see I'm on now test mode because if we go to our ucommerce settings you see this mod is now test so if you want to make this transaction on live website just go to your dashboard I mean just go to your stripe dashboard and you need to disable it and you need to make your live mode so when you test your website just enable the test mode on your stripe dashboard now from here just click on developers and here just go under API keys and you can see two secret Keys here one is a publishable key so you can just copy it just click over there it would be copied go inside eCommerce settings and within the test publishable key just paste the key here and again go inside stripe dashboard here's the secret key so I'm revealing the test key here so from this place copy this key from this place now go inside ucommerce and paste it within the test secret key this field so I'm pasting it here so if you want to test the connection is set or not just click on connection test this button so here you should get a notification yep it says connection test to stripe was successful mod test all right just click on okay so here you can just click on Save changes so you can test now with credit cards and like I said when you want to make the website live just select it as live and then in this place instead of this test publishable can see secret key you need to grab the real keys from here just disable the test mode and make the live mode okay all right so we are done with our payment methods but here I want to tell you another thing let's say if you don't want to actually not don't want to you of course should want to use PayPal and stripe but with these if you want to add additional payment options for your specific region you can do that as well because there are multiple plugins available for that so you can just go to plugins and click on add new so as far as I know resor pay is one of the most popular payment option in India right so here if I just search resor paycommerce just have a look here there are so many plugins available for Reserve pay transactions so similar like PayPal and stripe you can install and activate and use these plugins so just like that okay and now let's go to eCommerce and let's do other settings so click on settings we have done the payments now let's go to account and privacy so here I just want to enable this first two option and From Here Also let's enable this option also allow customers to create an account on my account page of course they can create their account enable but I just want to disable these two options because these two options will create a username and password for the user so I don't want that I want them to give their username and password the by themselves so I'm just disabling these two options so let's scroll down and click on Save changes and lastly I just want to go under this Advan tab so here you just need to check all the pages are set up perfectly but I think this option has been changed just 2 to 3 days ago because it was card page only 3 to 4 days ago so if you see it as cart page or basket page don't get worried this is the same thing the basket and cart is the same thing okay so here's the checkout just make sure this checkout is selected the account page is selected to account and terms and condition I just want to select our policy page you know we have just made it from actually we made it draft to publish so this one privacy policy page and other than that everything looks fine to me just keep the way it is and click on Save changes so our oomer settings has been done and you know our actually plan was to create a paid course so to do it let's go to tutorial Ms to courses and here we already have made a free course actually we can make it a paid course you know so just click over this course so we are inside the course details now here so scroll down and scroll down you see it was a free course but now I want to make it a paid course so this is the difference if you keep it free it would be a free course if you just make it paid it would be a paid course so I'm selecting this time paid to make it a paid course and now you need to select a product from your ucommerce in that way they will be connected so if people purchase that product this course would be bought by that customer now if you just click on select a product you see no product is showing here because we haven't created any product on o Commerce so for the moment just keep it paid and from here I'm clicking on update to save this work and now we need to create cre a product by following the same name of this course okay just let's do it first so you can understand it now from here from the left side you see it says products so we want to create a new product now from here click on add new I'm opening it from a new tab so here we go like I said we need to give this product a name only to make it properly matched I want to use the same name of our course so from here I'm just copying this course name let's just copy it and this on this product as the product name I'm pasting the course name here so we can easily understand which product is for which course so there is no rule this name and this name would be identical it's for our better understand now you don't need to do any other extra thing so you don't need to write any product details because this is not a product selling site this is a course selling site right so we already have added the course material details here so here we just we we are just added the product title and here scroll down here make sure the product data is simple product just check on this virtual option because this is a virtual product it's not a physical product and here make sure you have selected this for tutor this option so I'm selecting this so this tutor and virtual option should be selected and you know you can set the product price from here I'm giving its price to $100 and that's it we don't need to add any other thing but at least we can add the product image so it would be shown on the cart or basket page so from here just click on set product image I want to use the same image we have used for this course so from here let's select this image click on set product image now just just click on publish to publish this product so we have published this product now we can go back to our course page I mean course editing page let's just refresh the page so it will get data from ucommerce so I'm refreshing the page this time after refreshing let's scroll down and here you see it's a paid product and we need to select the product from the drop-down and here we can see the product we have just add added the Instagram marketing so I'm selecting it and then from right top click on update all right so we have created a paid product now I want to check the product from a new incognito window because in this browser we are now logged in so we cannot see the price we already have enrolled on this course so we need to check it from a browser where we are not logged in so I'm just copying this course link from here you can just copy this link or this link so right click over here and copy link address and I'm just going to a new incognito window where I'm not logged in so paste the link and hit enter and here we go here is our paid course so we can see the product I mean the course preview here here is the preview video and here we can see all the course details everything all the course contents here and you see all these are locked because you need to purchase this course this is a paid course so here you can see all of the details and here you need to purchase it by $100 okay so here before purchasing it here from our main browser I want to show you another option how to add coupon codes let's say its price is $100 but if you want to give someone 10% discount how can you do that so from here from o Commerce let's just scroll down here here from left side just hover on marketing and then click on coupons so here I want to add a new coupon code so click on add Coupon and you need to write the coupon code here so I'm just writing jfd 10 and here you can add different type of coupon I mean here is the discount type so if you want to give any fixed discount you can do that so let's say if you want to give $20 discount so no matter how much price is they will only get $20 discount but I want to give them instead a percentage discount and it would be a 10% discount so here I'm writing 10% also here if you want you can add any expiry date so if you put any expiry date here after this date they cannot apply this coupon code it will be expired okay so for the moment just click on publish to publish the coupon code just remember the code is jfd 10 okay so let's go to the incognito window for example here I'm assuming I'm a student I want to purchase this course so from here click on add to basket and it says if I'm already a user of this website I need to log in by using my username and password or if I'm new I can register here so I just want to register I want to create a new account so from here click on register now and let's say my name is John do okay so here I'm giving my name John my last name would be do and username I want to use John do and my email is of course it's a fake email at gmail.com and here I'm setting uh password Also let's retype the password so here as I want to register as a student so just click on register so right now I'm logged in like I said no one can purchase any course without becoming a student of this website or a member of this website so here at the top we can see it says hello jondo so which means I'm now logged in now let's click on add to basket so it's added on my basket here at the top I can also see the card also you can go to the card Page by clicking here click on view card and here we can see this product price and here is the option for adding coupon code and you can remember the coupon code which was jfd 10 I have given this to get 10% discount just check it click on apply and yep I'm getting here 10% discount so $100 10% % is $10 so right now the price is $90 let's now click on proceed to check out now here on the billing details here you need to put your details because you are now putting this data as a customer so here my first name okay I'm not Jim I'm here John my last name would be do and here you can select your country so jondo is from Bangladesh here you need to add Road number also Town District all this information just fill up them really quickly all right so I have filled up all the required field and everything looks fine and now here and here I will be using a dumy card number so here I'm just giving the test card number all right let's now scroll scr down and from here click on I have read and agree to the website and click on complete payment just wait a little and yep it says thank you your order has been received and just have a look if we can access the course instantly or not so from here just click on this course link let's click there and yes right after purchasing we can access the course instantly so from here if I just click on start learning we are now inside of the course panel cool now you know how to create any free course or how to create any paid course now let's go back to our WordPress dashboard and now from here from the tutor LMS if we go to courses here we can see one course is added here because we have made it and in the same way I want to create some more courses and that would be paid courses and and you know to add a new course from Top you just need to click on add new and from here you need to put the course title here's the course detail here you can add course categories the Texs from here you can add featured image and you already know about all these options here you know you how to create any paid course so let's say if you want to create a second paid course in that case you need to select paid and then from here we already have created a paid course for this product so just by matching with the name of this course from from another tab you just need to create another product so just go to all products click on add new so here you need to create another product with the name of the new product you are creating here so it's the same process like the product or course we have created a few moments ago so following the same way I will will be creating some courses also I will be creating some products and I will connect them with the courses so you can do the same this is your homework so I'm adding some other courses really soon and I'm coming back to you all right so I have created all other courses so if we now from tutoral Ms go to courses you see I have created all the courses in the same way we have created this Instagram marketing course now I will of course discuss about how we can make it a Marketplace how instructors can come here and they can create their courses all these but before that I want to create our Pages like our homepage about page contact page and all other pages so first let's create some empty pages so from left side here if we hover on pages let's now click here on add new so this popup is suggesting us but we don't need that because I'm here to show you you how to do everything just close it and first we can see it in a full screen mode so to turn it off just from top right corner click on this three dots and turn off the full screen mode from this place because I love this structure we can see everything I mean all the navigation on the left side okay so first of all I want to create our homepage so here in the title I'm just writing home now from top right corner click on publish and click on publish one more time and and now uh I'm not going to create the page first of all I just want to create empty pages okay so I want to create another page you can click here on add new or you can click here add new page so I'm clicking here let's say we want to create our Blog Page and then click on publish publish one more time let's create another page so click on add new page and it would be our about page so let's publish it then the next page it would be our inst instructor page so I'm naming it instructors let's now publish it as well let's create the new page so that would be mainly the archive for all the courses so here I'm naming it course list let's just publish it and the other page click on the add new page here I want to create our contact page so here I'm just typing contact let's publish it and now I want to do a very simple setting so from here from the settings this time let's go to reading okay before doing this settings I just want to show you why am I doing this so at this moment if I go to the front end of our website you already know how to go to the front end so from Top If I just click on visit site I'm opening it from a new tab just have a look here so by default WordPress shows all the blog post on the homepage but we don't want that we want to create a custom from homepage but we need to tell that to Wordpress like which page we want to use as our homepage because we don't want to use this default blogs at our homepage so we are actually doing this settings from here so your homepage displays I'm selecting a static page and here the homepage would be the home we have just created so here is the one and post page that would be the blog page we have just created this one so let's now click on Save changes this time if I go to the front end of our website and if I just refresh the page yep at least we can understand this is the homepage we are we have just created we can no longer see the blog post on the main URL or the homepage okay let's now go back to Wordpress admin panel so we have created the empty pages first of all I want to create our homepage so from Pages let's go to all pages so here with the about home and other Pages we have just created you know we can see other pages that came with ucommerce plug-in like checkout and we can see instructor registration so we don't need to recreate these Pages we just need to create our home about contact all those pages okay so first of all here I'm just searching for home this one this is the you see it says front page so from here click on edit and you know we will be using Elementor page builder to create our page and you just need to click here on edit with Elementor button but before that just make sure you have turned on the flex container option because this one is very important we will be doing all the layouting and other designing stuff by using Elementor Flex container okay so to turn the flex container on from left side let's just hover on Elementor from there let's click on settings this settings is very important so make sure you are doing it correctly just go under the features Tab and from here this option is for Flex container so from here I'm making it active and let's just scroll down to the bottom and click on Save changes all right we are ready to go and now again just go to pages to all pages and here is the homepage click on edit and now to create the Page by using Elementor page builder we just need to click on this button it says edit with elementer just wait a little bit it will take us inside of the Elementor page builder all right let's close this popup also close everything close the navigator so right now we are inside Elementor page builder here's the fun part begin actually Elementor is super easy and it's almost self-explanatory now let me just make you familiar with this interface so here at the top you can see this is mainly the header actually we will later work with this header and here at the bottom this black area this is the footer but we won't be doing this header and footer by using Elementor because this header and footer is coming from the tuto starter theme so we will customize the header and footer from our theme it's not anything related to Elementor okay and here at the left side everything we can see all these are Elementor elements or Elementor widgets like here we can see heading Widgets or heading Element image wiget or image element here is the text edor video divider button all this also if you scroll down here you can see some Pro elements so like you you have seen already Elementor has a pro version so if you purchase Elementor pro version you can also access these Pro widgets okay but in this tutorial I will only be using Elementor free widgets so I'm just minimizing this and all these widgets you are getting for free okay so here the concept is very simple on the left side everything we can see all these are Elementary Widgets or Elementary elements and here this right area this is our website canvas basically we will be dragging this element from left side to this canvas and then we can make its design like we can make the font size bigger smaller we can add colors like that just let me give you a quick example so let's say I want to insert any heading into our website all I need to do from left side I just need to drag this heading element to our main canvas here we can see instantly the text in this place so let's say I just want want to change this text so from this field I'm just writing Jim Fahad digital you see it's instantly changed here you can change the alignment to right aligned or centered aligned like this and when you take any wiget from left side to the right side you will find the three tabs okay so here we can see the content tab here is the style Tab and here is the advanc tab so if you want to do some styling like color changing or font size increasing or decreasing you need to go under style tab so here if you want to change the color just open this color peer from this place you can change the color like I'm making it black or if you want to make it for example red you can do that from this place okay for the moment I'm just keeping it as black or kind of reddish black all right and then if you want to play with its typography just click on this pencil or pen icon from here you can change the font family okay by default it's robo photo but instead just click there you see there are tons of fonts so for example if you select this font you see the font family has been changed instantly so from here I'm just searching for Poppins this font I like so much so I'm selecting Poppins you see it's instantly changed you can increase the font size or decrease the font size from here just drag this boy to the right side the font will become bigger if you drag it to the left font will become smaller so it's easy like that from from here wet you can make it Bolder by selecting any higher number like this or you can make it like 700 now from here from transform you can make it all upper case or all lower case or you can keep it default also from decoration you can add underline so you can just play with all these options so you can understand it better by yourself now from Top If you just go under Advanced tab here you can do all the spacing step so let's say if you just want to add some space at the top you can do that from this place so from here let's just unlink the padding because you want to add the space only at the top so here at the top I'm adding for example 50 pixel of space so here at the top 50 pixel of space has been added also you can see there are so many options but no worries at all because during the whole website creation you will understand everything very easily okay now let's say if you want to add any paragraph right underneath this heading you just need to click here at the top on this Rubik's Cube icon just click there and from here let's just drag this text editor widget this time here underneath this heading here so you know you can just replace this text with your own text and also if you want to do any styling with this text you can just go under this style tab you will also find the text color changing option that typography option with this wiget as well so first I'm making its alignment to centered and also you know you can change its color to any other color you can make its size bigger or smaller like this then I want to also show you how you can add other elements just click on the Rubik's Cube icon for example here I want to add a button underneath here okay so from here you see it's button by the way if you can't find any widget from this place at the top we can see the Search widget so I'm just searching for button so here the first button widget I'm just dragging here it underneath in this place and you can see the pink line so you can understand it better where it's positioning or where it's where you are dropping it okay so I'm dropping it underneath the paragraph or the text editor here in this place so if you want to change the text of the button you can change that from this place so instead of click here if you wanted to say contact now you can say it and you see it's in ly changed and here the Link Field if you want you can link it with other page of this website or if you want you can link it with any external website okay for example I want to link it with my main website which is Jim Fahad digital.com so now if anyone clicks on this button that will take them to my main website now from here you can adjust the alignment I'm making it to centered also let's do a bit of styling so go here under style Tab and from here you can change the color this color means the background color you see the buttons background color is green so if you want to change it you can do this from this Color Picker so from here let's say if you want to make it red so from here I'm dragging this Color Picker to red color and let's now make it this right and here you can do more interesting thing for example if if you want to add any hover effect how can you do that just go here on this hover Tab and let's say on Hover you want the background color to become black okay so from here color I'm just making the background color to Black so right now in the normal State the background color is red and if I know hover you see the background is becoming black very easy so basically in this way we will be creating our whole website so you are not only learning how to create any courses you are also learning how to design a whole website all right so this is only for the demonstration purpose I'm just deleting it and then I will start designing our homepage step by step so to delete this area we can just click on this x to delete it here first I want to create our Banner area so to create the banner first we need to take a layout okay because on the I mean within the layout we may have left container we may have right container actually you will understand everything just after completing the banner area okay so here first click on this plus icon to select any structure so for the banner I want to select these two container structure so I'm taking this structure and also from here I just want to make the Align items to centered just stick with me you will understand it better by us yourself a few moments later now if you want you can give this Banner a specific height so from here minimum height you can give it in pixel or I'm just giving it in VH VH stands for viewport height okay so if you give it to for example uh here 40 or 50 VH this means this specific Banner will take the 50% of your viewport or your screen okay but I want to make it 100 VH so it will take the 100% height of my screen you see it's taking 100% space of my screen so here everything you can see within this pink Line This Is Our container okay and now with this container I want to add a background image okay so from here let's now go under the style tab from here background type click on this classic or pencil icon and here I want to add the background image so click on this choose image here I want to upload the image so from the folder you have downloaded let's just go inside homepage images and here basically I'm just selecting all the image because we will be needing it later so I'm just uploading all of them together so from here I'm just selecting this mes gradient image now let's click on select and here we can see the background but we need to position it correctly so from here I'm making the position to cender Center but if you want you can make it to top left or other option like bottom right like this but I'm just keeping it to cender Center and here attachment I'm just keeping it to default scroll value repeat value to no repeat and display size I'm just making it to cover so it will cover the whole area of this container then I want to add some space here at the top and bottom also at the left and right okay with this container so make sure you have selected this container so just go under advaned tab here first of all I'm making the padding value I'm just deselecting this padding so let's just unlink it now first at the left and right I'm just adding 20 pixel of padding right now if you don't understand it just stick with me you will understand it a few moments later okay and here at the top so in this place I want to add 100 pixel of padding or space so here I'm adding 100 pixel space at the top now let's first start working with the lift container because you may see we have taken the structure I mean this structure here at the left we have got one container and here at the right side we have got another container so I'm starting with the left container first of all you may see we have some space here within this container actually it's by default this padding is coming so I have selected this container go under its advance Tab and I just I just don't want to this extra spaces so from padding I'm making it to zero so it has no Inner Space at this moment okay so first I want to add a heading here you can just click on this plus icon and here you will find all the available widgets so I'm dragging this heading widget here and instead of this default text I'm just pasting here other content so it says the best online course you will find and now first I want to change the text color so you know go to style tab from here the color code you you can just drag this to change the color also you can put any color code it's called hex code so six digit color code you can put here so the color code would be # 0 C1 436 so it's kind of dark blue or blackish color and here I want to do another thing we already have selected this black color and I want to reuse this color on various places like we may have other headings or other areas where we need to use the same color so from the Color Picker we we don't want to put this color code every time manually that's why I want to make this color as a global color so we can reuse this color again and again okay so to make it a global color just from here click on this plus icon and here I'm just giving it a name we can name it main black for example you can name it anything and then click on create so it's now saved as a global color and now I want to change its font so from here I mean from the typography just click on this pencil icon and from here first the font family I just want to make it to popins font and then font size you can just make it like 50 or let's just keep it 56 then I'm keeping the font weight to 700 and also you see I want to increase the space in between these lines you can do it by using the line height so I'm giving here the line height to 50 or we can increase a bit let's keep it 56 right now it looks perfect now underneath this heading I want to add some paragraph or text so click on the Rubik's Cube icon and from here let's drag this text edor underneath this heading here in this place and you know you can just replace this text with other text so here I'm pasting some text and also let me show you this thing so this is a simple paragraph here let's say if you want to divide them into separate lines you just need to hit enter here in between so they are now in separate lines but here they have became two different paragraphs I don't want that so instead of pressing enter I'm just pressing shift enter so they are just divided into two lines and for this paragraph I think the default color and font size is fine now here underneath I want to take two buttons and I want to wrap these two buttons within a single container So within the main container here we have got this left container and within this left container I want to take another in container okay so from here click on this Rubik's Cube icon and I'm taking this container within this left container right underneath this paragraph here so I'm just dragging this in this place so you just need to make sure this container is inside of the LIF container so because I I know sometime this kind of confusion happens when you drag and drop it sometimes go outside of the container So to avoid those kind of scenario you can actually always use the Navigator so you can understand the structure properly so to open the Navigator you can just right click over anywhere and you can click on this Navigator or it's always here you can just click here on the navigator to open the Navigator so actually this Navigator shows the hierarchy or this structure how this website is made or how we are making it or creating it okay so first of all just let me explain it I'm just minimizing everything so here is the container okay so this is the container we have taken this container so actually we can rename it just double click over here and we can name it Banner container So within the banner container we have this left container and we have this right container so here we can actually rename it to LIF container okay for the moment just minimize it and this container actually it's right now empty so I'm renaming it to right container so now if I go inside left container just open it you see we have added first a heading widget then here is a container oops here is a text editor so first heading then a text editor we we are using a paragraph here by using this text editor and then we have taken another container this is inside of the LIF container okay so this container as it's uh an inner container so we can name it inner container or my goal is to use it as a wrapper container we need to wrap some buttons within this container okay so we can name wrapper container now within this wrapper container we don't have anything at this moment so let's add some button here but first of all actually I just want to remove all the inner spaces from this wrapper container so make sure you have selected the rapper container you can click here from Navigator or you need to click here to select this container go under its Advan Tab and I'm making the padding value to zero and then with this container let's go under layout I want to make their child direction to row okay so from here I'm making the direction to row after creating the buttons I will show you if I make it column what will happen Okay so for the moment I'm just keeping it as row now let's create the buttons now here I'm clicking on this plus icon and let's drag a button so I'm dragging this button widget here and the first button I just wanted to say get started and Link actually we can put any link later for the moment let's just design the banner okay so from here let's do a bit of styling so go under style tab here I want to give this button uh background color so it will be kind of purple color so actually let's select the Color Picker and from here I'm giving the color code hash 9080 FC so so it's kind of I I don't know it might be a purple color or it's a lavender kind of color but for the moment just just make it I I mean just name it as purple okay because we don't want to spend so much time to find out the exact color and also this color I want to make it as a global color so we can reuse the color over the whole website okay so you already know it to make it Global just click on this plus icon and here I'm just naming it as purple and click on create okay so this is now our Global color and here with this button I want to add a border so from here let's make the Border type to solid and I'm giving it one pixel of width and you can set the color from here so if you want you can give it a red color border but I don't want that I actually want to use the same color so as we have already set the purple color as our Global color so instead of clicking on this Color Picker this time we can click on this globe icon so just click there you see here you can see our Global purple color let's select the purple this time so it has got the purple border I want to make their Corners more rounded so I'm adding border radius value to 30 you see the borders are now more rounded let's add some padding padding means the Inner Space of any element okay so here I want to add some Inner Space first of all I'm just un linking it because if you don't unlink it let's say I'm adding here 20 pixel so this 20 pixel padding will be applied on top right bottom and left everywhere so I don't want that I'm just unlinking it first so here at the top and bottom I want to give them 16 pixel of padding and at the right and left I'm giving their 32 pixel of space like this also I want to add some effect on Hover so so from here let's go to hover on Hover the text color on Hover I want to make the text color to our Global black color so main black and the background color so here the background color let's open the color Pier actually I just want to make the background color transparent so to make any color transparent you just need to drag this Bottom bar because it's responsible for opacity so I just want to make its opacity to zero so right now have a look if we okay so to show it properly or okay so from here you can just minimize the LIF bar so I'm minimizing it so you can now you can now see it proper way in the normal State this button is looking like it and when you hover on this button you see the background color is becoming transparent and the text color is now the black color cool let's now open the bar from left side and here before doing any other thing I want to show you another thing because just have a look if I minimize the bar again we can see some space here the left side and right side it's happening for a reason okay so just open this bar and you need to do the settings for all the pages so first of all from left just click on this gear icon go to settings and from there you see the page layout is selected to default so basically this layout is com coming from the theme but we don't want that to create any of the pages we will be using elementors full with layout okay so from the page layout just click on Elementor full width this option let's select it and wait a little it will refresh by itself and now have a look if I now minimize the bar you see it's getting the full width all right let's now open the bar from left side so we were here in this place we were designing this but Buton so we are done with the button now I want to create another button here at the right side but as we have created this button here we don't need to do the same work here because we can easily duplicate this button and then if we need to adjust anything we can do that so to copy or duplicate anything you can just go over this specific widget right click over here you will find all the options like duplicate copy paste all this option and also there is a shortcut way so to enable that shortcut you just need to click on this hamburger icon from here go inside user preferences and here is the option for editing handles okay so just turn it on so you will find some shortcut icons so here for example if I now hover on this icon you see we can see this editing handles like you if you just click here it will be duplicated instantly if you want to delete it you can just hover on here and and if you click on this x this button will instantly be deleted so here I want to duplicate this button so I'm just hovering over here and I'm clicking on this duplicate icon so it's instantly duplicated here and I want to show you now why I have selected their parents or the rapper container value to row like here if I select their parent container this one you see from the Navigator So within the rapper container we have taken these two buttons so I am now selecting the rapper container you may remember remember we have set it direction to row but if I set their if I set their direction to column so this one you see they are now appearing one after another vertically but I don't want that I want them to appear one after another horizontally so if you want to do I mean if you want to appear any element after another horizontally you need to select the direction value to row that's why I have selected the row value all right right so with this course I mean with this button just select this button and here instead of get started I just want it to say browse courses and here with this button I also want to add an icon so from here from this icon click on this icon library and here I'm just searching for a graduation icon this one let's select it and click on insert and also I want to reverse the design so go under style tab here I want to make the text color to our Global black color and background color I just want to make it transparent so from here from the Color Picker let's just make the background to transparent also I don't want this border with this button so from here border type I'm making it to none and also I just want to reduce the space from the left side so from here we can see on the left side instead of 32 pixel I'm just making it to 10 pixel so right now the look perfect so if I minimize it you can see it properly right now it looks perfect all right now before creating any other thing I want to show you how to set Global fonts because let's say if you add more headings or more paragraphs and if you don't want to give the font family manually each time actually you can also set that as a global font family okay so first of all I'm just clicking on this update button to save our work and it's always a good practice to update I mean to click on this update button because for some reason if you don't click on this update button if you just close the browser you will lose all this your hard work so to save our work I'm just clicking on this update button and now like I said I want to add some Global font family so from Top let's click on this hamburger icon then click on this site settings also if you want you can add some Global colors like if I now go inside Global colors you see here we have added main black also the purple color so we haven't added them from this place but you you you have seen we have just clicked on the plus icon and we have created the uh I mean we have created the global colors also you can create Global colors from this place so you can just click on add color and you can for example you can just name it anything red and from here you can set any color to make it as a global color but actually I don't want this red color so I'm deleting it by clicking here yes delete it okay so from here let's go back because y would you like to save the changes you have made yep so click on Save and go back I just want to go inside Global fonts so let's go inside Global fonts also you can preview the global fonts here so here for the primary I just want to change the font family because I don't want to make the sizes globally from this place I'm just changing the font family so here I'm making the primary font family as popins font also the secondary I'm selecting it as Pop oops popins font and then the text I don't want to make it popins so on the text the robot is perfectly fine and on the accent I'm making the popins font AS Global so that's basically it now let's click on this update button to say all this global settings we can now go back so click on this back button and also just click on this x because I want to create our Banner now right underneath this button container I want to add another rapper container so there we can add some counter widget so first of all click on this Rubik's Cube icon and here I'm dragging this container underneath here or actually we can do one thing I'm just putting this container here in this place and we can we can just rename it as wrapper actually we can just type wrapper counter because we will have some counter within this container and actually I want to put this rapper container underneath the I I mean underneath this rapper container so here from the Navigator I'm just dragging it underneath here so this container is underneath here in this place so first of all just select this rapper counter and here I think the rapper counter is kind of confusing so um just renaming it a it as counter wrapper okay like this and now first of all I just want to make their padding to zero so here I'm making its padding value to zero so no space here inside but to make some space at the top I want to add some margin so padding is basically the spaces inside of the wiel wiget and margin is the space outside of the wiget so here at the top I want to add some space so first unlink the margin only at the top I want to add 50 pixel of margin so the space has been created now here just click on this plus icon and like I said here I just want to insert a counter widget so I'm searching for counter here is the counter widget let's drag it inside here so we can add here number and some text so the first one here I wanted to see 940 so 940 then I want to say 940 plus courses if you want to add anything after this number you can add number suffix so here I'm just adding plus icon and the text you can change it from here so I just want it to say online courses now let's do a bit of design with it so go under the style tab here first of all the number color and here you see the this blue color is always getting here so we can actually set this color as the I mean we can set this black color as our Global color so all time we don't need to change this color manually from this place okay so again just click on the hamburger icon click on side settings now let's go inside This Global colors and you see this primary color this blue color is coming from this place so instead of this blue we can actually keep it as our main black color so from here we can just give it the color code which is # 0 C1 1436 all right let's now click on update and here click on this x so now you see is the number is now getting the black color by default all right let's now click on this pencil icon because I want to do a bit more styling here so now let's open the typography of this number because I want to make it size to 46 pixel and you see the Poppins font is coming from Global fonts then here the font weight 600 is fine also for this title let's open the title and here the default color is fine I just want to make the font size to 16 pixel all right now with this counter I want to add some padding so go under Advance tab let's add 40 pixel of padding here and with this counter I want to add a background color so from under Advanced tab let's scroll down open the background and here I'm just giving it white color and then I want to reduce its opacity a bit so from here I'm just keeping it like it just click outside and also I want to make their Corners surounded so from let's just click on border and I'm giving the Border radius value to 14 pixel now everything is looking perfect but its width is kind of bigger so let's just go under the advanced tab open the layout from here I want to give it a custom width so width let's just make it custom and instead of percent first I'm making it in pixel and here I want to give it 200 100 pixel of width or we can increase a bit 220 pixel like this and then at the right side here in this place I want to add another counter widget so from here let's just duplicate it but you see it's now going underneath here so you guessed it right what we need to do we just need to select its parent container this one and from under its layout tab we need to select the direction to row so they are appearing one after another horizontally and now I want to change the text of this counter so click click on this pencil icon and here I wanted to say 17K okay so here I'm writing 17 and here instead of plus I'm just writing K and here I wanted to say active students like this so we are done with this left container now I'm just moving the navigator in this place because I want to do some work on the right container so you can see it properly so first of all let's select the right container I also don't want any space inside so go to Advanced tab click on padding and I'm making it to zero now here within this right container click on this plus icon here I want to add just an image so from here I'm dragging the image widget here inside and let's select the image so this would be the image of this girl so I'm selecting her click on select and here we go it's just loading and yep it looks perfectly fine but let me show you here another thing okay so from style if actually you can give it a custom width so first of all I'm just making it in pixel and let's say if you want to give it any width to for example 300 pixel so right now it's looking like it but I just want to place it at the bottom here I mean at the right bottom in this place so to make it happen you can just go under Advanced tab from here you need to set its align self okay so if you give the Align self to start it will start from left side actually not with this image my mistake so just just click here one more time so it will give its previous value so here you just need to select its parent so its parent is basically the right container this one select it and now from under Advanced tab you if you just make the Align self to start you see the image agage is going at the top of this container it's parent container and this time if we set the Align cell value to end you see it's now going at the bottom in this place so at this moment it's looking perfect but we just need to increase the image size okay so again click over this image go under the images style tab so here we have given the 300 pixel width I just want to increase it to 500 pixel or maybe 510 pixel so right now it looks great and then here I mean at the middle of this right container I also want to show a button with glow effect so if anyone clicks on that button a video popup will appear here okay so now from here click on this Rubik SK icon and here I'm searching for video widget and I want to use this video widget at the top right you see it says EIT that means this widget is coming from elements kit plug-in you may remember at the beginning we have installed so many plugins I mean so many different plugins so this widget is basically coming from elements kit plug-in okay so let's just drag it within the right container so here we can see it and I just want to check if it's inside of this right container so from the Navigator here yes within the right container let's open the right container here is the image and right after that here we have got this video which here okay now first of all I just want to position it at the center in this place so to do it just go under advaned tab from here I want to make its position to Absolute so at this moment here it's at the left top side but I want to keep it at the middle at the center okay so here horizontal orientation I just want to make it offset in percent so here we can can make it 50% but as it has some width that's why instead of 50 I'm just making it 49 or 48% also vertical orientation from Top let's make it in percent Also let's give it 48% so right now it's at the center of this right container now I also want to do some styling with this button so let's go under its content Tab and from here let's go under okay first of all I just want to change this icon so from here instead of this I'm selecting this play icon click on insert and then just have a look if I now click on this button you see the video is appearing here but instead of this video let's just go to YouTube I want to appear this video of mine so I'm just copying this video URL from here let's go inside elementer and here okay just first close this video now just click click on this edit icon and here with this URL to embed by the way instead of YouTube if you want to insert V or selfhosted video you can do that as well so here I just want to paste the YouTube url within this field and now have a look if I now click on this button here my video is appearing so it's very quick I mean it works instantly okay so just close it and now like I said just click here again I want to do some styling because here instead of this red go under style tab I want to make its color to our Global color so open the button style and here the glow color we can see the blue color so I want to change the glow color to white color and also the text color I want to make it as our Global purple color also if we now hover you see on Hover is becoming white so on Hover I want to also so make it as our purple color and this red color I just want to change it to white color so from here where is the option for changing its color I believe here is the option so go to normal and this one background type it should be highlighted here so from here let's just make its color to white yep right now it looks perfect so on Hover also it looks perfect so if you just want if you just don't want to lose your work don't forget to click on this update button to save your work now if I just minimize the bar from left side we can see our beautiful banner what we have just created all right let's now expand the left bar and right after this main banner I want to create our featured container okay so let's click here okay we can move the container here so we can see it properly let's now click on this plus icon and this time I want to take this column based structure the first one I'm selecting it and here first let's add some space so go under Advanced tab unlink the padding here at the left and right I'm adding 20 pixel of padding and at the top I'm adding oops I'm just adding 100 pixel of padding like this and then here I want to add a heading but you know what we can just copy this heading right click over here copy it and within this place right click and click on paste so the heading is pasted here I just want to decrease it size so from under style tab I just want to make it size to 46 pixel instead of 56 and also I want to make it alignment to centered so go to content and change the alignment to centered by the way I just want to rename the container name so our work will be organized so this container we can from this Navigator we can rename it as featured container okay so within the featured container we have got here the heading and here we can just change this text with featured courses and right underneath I want to add some paragraph So let's click on the Rubik's Cube icon from here let's drag the text editor here then here I'm just pasting some paragraphs also I want to make their alignment to centers so from under the style tab let's make it centered now here underneath I want to okay for the moment I'm just closing the Navigator here underneath I want to insert the courses we have created and we can make some courses featured here okay so click on the Rubik's Cube icon and here I'm searching for course list or we can just search by typing list so here we can see course list so let's drag this course list right after this paragraph here in this place so here we can see all the courses is appearing here like this and now I just need to design it a little so first of all actually I'm just minimizing the layout and I'm opening the query let's say if you want to appear here only a specific categories courses so from here category if you just select photography we can only see here photography courses or let's say with photography if you want to just click on this plus if you want to add programming so here you can see only photography and programming related courses like this so you can use this query so here at the top instead of featured courses you can say here photography and programming courses like that so it's up to you so I just want to appear here all the courses so I'm closing all the categories from here and also here we can see the courses which we have added last but I don't want that I want to appear here the courses we have first added okay so here you can actually reorder it but you can make it descending or ascending so by default it's descending so here we can see the last course added here at the first but I just want to make it ascending so we can see the First Co course at the first place here inside all right and here you may see some space here at the right side but actually we can see it only within element of page builder because if I now minimize it you see they are actually same space at the left and right side so don't worry about that extra space okay so let's now open it again and here open the layout and by default the skin is classic but I want to change it to card so from here I'm selecting card and here the column is three so we can see three courses in a column if you want you can change that from from this place courses per page so by default it's six let's keep it like this but here I don't want this next or previous option so actually you can just scroll down and the pagination I just want to make it hide so we cannot see here anything okay so we can only see the six top courses here and also here we can see the course title here's the author name and here is the button as we have enrolled on this course so it says continue learning but other other courses it says add to basket so if you want to purchase it for $40 you can purchase it from this place and also we cannot see any difficulty level here so from here I'm just turning on the difficulty level also I'm turning on the category so now here we can see the categories like photography digital marketing and as we have enabled the difficulty level we can see all levels beginner expert all this here as kind of badge okay now if you want to do some styling with this card now you know you can just go to its styling but let me just experiment with this metadata so if you just turn on this metad data you can see some other options here like two person has enrolled here actually this two person is me and here you can see the total time of the course okay so it's a 7 hour and 30 minutes long course you can see this data here also you can see every data with all other courses like this okay I just want to turn the option on let's now do a bit of styling so go under the style tab here we can keep everything default if you want you can keep the alignment to centered like this and let's now do a styling I mean a bit of styling with the card so open the card and here I want to add a very light border because this border color is kind of sharp in my eyes so here border type let's make it solid I'm giving it withth to one pixel and Border color let's make it #d9 D9 D9 but then I want to make it transparent so like this very light color you see and then I actually want to add some Shadow so from here box Shadow and here I'm making the blad value to 40 and spread value to -10 so if you want to add any negative value just click on this down arrow and not1 it would be -10 so you can see the shadow behind here but I want to make the color really very transparent so maybe something like this all right then I think we can reduce the font size of the title of the courses so from here open the content and here we can see the title option so open the typography and from here I'm just making the font size to 16 pixel so right now it looks decent and then I think we can also change the color of these buttons because our color is kind of this purple color so I want to match the color here as well so from here let's scroll down and open the fooder so here with the fooder background color so we can actually use the global color so from here I'm using purple Color Oops actually it's not the button color is this whole food color so I just want to undo it so from here let's click on this Color Picker again and just click on this clear icon okay so I just want to design the card button so from here card button so here the card button background color in normal State we can keep it the way it is let's just change the text color so the text color would be our purple color also the Border color so from here border type let's make it to solid and here border withd one pixel color we can make it Global purple color so right now it looks perfect but on Hover okay so on Hover we can actually make its background color to the purple color like this but the text color let's just make it to White so right now it's looking like it and when you overover it now looks perfect the very last thing to match with without design we can just increase the Border radius the corners so from here border radius let make it to 30 pixel so right now it looks perfect and now right underneath these courses actually I just want to create a button and I want to link this button with the course archive page so if anyone clicks on that button that will take them to the all courses page okay so you know we can just copy and paste the button so so right click over here copy this button and right underneath here so just move just put your cursor here right click and click on paste so the button is pasted here I just want to make the alignment to centered and I want it to say browse all courses like this and later I will be linking it with our all courses page so for now it looks perfect just minimize the bar from left side side so everything is looking great and later of course we will be adding some margin bottom here so at this moment it looks great let's open the bar from left side and don't forget to click on this update button to save your work all right let's scroll down and I believe you are now familiar with Elementor page builder so right now I will quickly create the other sections or containers so let's scroll down this time I'm click on this plus icon so I'm just clicking here and I want to make it row based so I'm selecting this one and also from here I'm making the justify content value to centered also the Align items value to centered and here this time I want to make the wp value to wrap I will explain it later why am I making it wrap so for the moment just keep it wrap okay also let's give it a background color so from under the style tab from here and instead of background image this time I will be using an color so the color code would be # Eed e AF FF like this and also let's go under Advan tab you know we want to adjust the padding so first we can unlink it left and right we are adding 20 pixel and top and bottom let's add 80 pixel of padding but here you see this button is still inside I mean still it's touching this container so we need to fix it first okay let's open the Navigator and let's just click on this button so we can see it structure okay so it's here if we go to its parent container the featured container and yep actually at the bottom we should add some padding so here if I add 80 pixel of space let's now have a look yep we have got some space here and then underneath we have taken this new container and actually we can rename it as our counter container so here I'm renaming it as counter container and now within this container let's now click on this plus icon we can add some counter here inside but you know we already have created some counter here at the top so actually we can just copy and paste it so right click over here let's copy it and within this place just right click over here and click on paste so it's instantly pasted here but here the background color I want to make it a bit sharp so we need to reduce the opacity just go to its Advanced tab from here open the background and you may remember we have made it transparent but this time I just want to increase the transparency so we can actually I want to make it a bit more whiter like this and now I just want to duplicate them so let's duplicate it and I'm duplicating it one more time let's also duplicate it and I actually will be using this four but I'm just creating another one let's duplicate it just have a look as they are not adjusted within the same row so it comes to the next line by itself why is that because if we okay just for the moment I'm putting the Navigator here okay let's just put it like it we if we just select this container and go to its layout you see we have made the wp value to wrap but if I just deselect the wrap you see they are now trying to adjust within the same row even they are losing their own width because we have given them 220 pixel width but instead of following that width they are trying to adjust it within the same row so if you want to get them their own WID you should make their parent value to W so whenever they cannot adjust within the same row they will transfer to the next line like this so I actually want to use this four so I'm just deleting the fifth one I I I have made the fifth one only to explain how the W work so here the second one you know we can just say it 70 then here suffix K and here we can say it active students and with the third one we can just say it 100 plus instructors then with the fourth one we can just say it for example 20K plus certifications just like this okay let's now create our next container so click on this plus icon again I'm taking this column based structure and let's give it some padding so go under Advanced tab here first I'm giving it 20 pixel of padding now let's unlink it because here at the bottom I'm giving 80 and top I'm giving 100 pixel of padding now within this place from Top we can just copy and paste it so let's just copy it and here we can paste The Heading also this paragraph let's just copy this parag paragraph from here and right underneath here in this place just right click and paste the text here as well now instead of this heading I just want it to say Browse by category Also let's change this text so here I'm just pasting some text now here I want to take a parent container I mean a wrapper container so click on the Rubik's Cube icon let's drag the container underneath here and okay first of all this parent container I just want to rename it as category container and within category container the container we have just taken so we can just rename it as wrapper container okay so here with this wrapper container I'm just making the justify content value to space between I'm explaining it later and here also I'm making it wrap you already know the reason and here let's go to advance tab I'm making the padding value to zero now within this container I want to take some inner containers so we will be using that inner containers as curs okay so just click on this plus icon and here I'm taking the inner container so this one we can actually rename it as card one later we can duplicate this card once after designing this card okay so first of all with this inner card we can just make its content width to full width and here the width I want to give it 23.5% then we want to add some space with this inner oops I mean we can add some Inner Space with this card or container so go under Advanced tab from here add 40 pixel of padding now let's go under style tab because I want to add some border with it so from here let's add solid one pixel border and the Border color would be let's at hash 70 70 70 also we want to make the Border rounded so border radius would be 14 pixel Also let's add some box Shadow from here so same similar like before blare value would be 40 spread value would be -10 and the color I just want to make it very transparent like this all right now with this container or card just click on this plus icon here I want to insert icon box so here I'm searching for icon box let's drag it inside here so first of all let's just change it so here I want to use a business icon we can use this one let's insert it and the first text I just want it to say digital marketing because here actually I just want to insert the categories okay so if a later I will also add here a button so if anyone clicks on that button that will take them to the courses that's under digital marketing okay so like here at the top we can see this course is under digital category also this one so from here they can actually go to the category archive pages okay and here instead of this paragraph I just want it to say for example 17 courses so if you have got 17 courses under digital marketing you can write it here now here right after the icon box I also want to add a button and you know we can just copy the button from here let's copy this button and right underneath this courses text here let's paste the button later I'm designing it so let's start from this icon box so let's click over this icon box first of all go under the style Tab and now from inside the content let's first work with the title so the default color is fine but here I just want to make it font size to let's just make it 20 pixel so right now it looks perfect and now with this button let's just select it so this time go under the style tab I want to change its typography the default popins is fine but okay wait 500 we can just keep it like it but here I don't want any border with it so I'm making it none also I don't want any padding so I'm making all the padding value to zero actually I just want to make the text color to our purple color and background color I don't want to use any background color so from here just make it transparent also on Hover so on Hover we can keep the same color so the text color would be purple but here with this text I actually want to add underlines so people can understand it's clickable okay so to make it just open the typography and from here I'm just making the decoration to underline so it's looking like it now click outside here everything looks fine but I think this border is too sharp so I'm just again selecting card one and from here let's open it actually I just want to make it bit transparent like this so at this moment it's looking like it yep right now it looks perfect so actually we can now just duplicate this card so from here from the Navigator let's right click over card one duplicate it now again duplicate this card one and one last time duplicate this card one and you know they are appearing one after another here vertically but if if we select the raer container and make its parent value to row they are now appearing one after another and from here actually we can rename card two then here oops just we can rename it card three and we can rename it as card 4 and okay for now let's close the navigator you know you can just change all this content by yourself for example I'm just selecting the second one and it's for photography so here I'm writing photography like this and here 17 courses so I'm just writing here nine courses so similarly you can change all these icons all these text by yourself I'm doing it really quickly and coming back to you all right now underneath here we just want to add the very last container of this homepage and it would be the call to action container okay so actually I just want to First copy this Banner idea and then we can adjust it okay so first of all to copy it just put your cursor on the six dots right click over here click on copy now let's scroll down put your cursor within this I mean within this Gray Line right click over here and click on paste so here the banner area has been pasted but now here like I said I want to do some tweak so here the first thing I want to do okay just right click over here click on Navigator so here it's not the banner area anymore it would be call to action area so actually we can oops we can just rename it as CTA container so later we can understand it okay all right so first of all with this CTA container I want to make the content width to full width and I want to make its width not in percentage let's make it in pixel I want to make its width to one I mean 1100 and 40 pixel like this so if you cannot understand it properly if I just minimize the browser you see it's now getting space at the left and right side as we have G as we have given it the fixed 1140 pixel but if we if you look at the banner you see it's full width but it width is 1140 also I will be adding some border radius here and we will be tweaking some content so open the bar from left side to make their Corners rounded just go under style tab from from here let's scroll down open the borders I'm giving 20 pixel of Border radius Also let's go to Advanced tab here okay so here at the top instead of 100 I just want to give it 40 pixel of padding like this and now here I want to do one interesting thing here at the right side we can see an image and at the left side we can see this content but here in this CTA area I just want to Shuffle it which means I just want to make this right container to the left side and left container to the right side okay so here within the C container we can see this is the left and this is the right now I just want to make this left after the right I mean left after right so here in this place so now right container is at the left so we can actually rename it because it's no longer right container it's left container so we can just now make it left and this one we can just now call it right container like here I'm writing right container okay so now let's start with this left container here actually I don't want this video so from here hover and I'm just deleting this widget and instead of this image just click over this image okay we can just move this at the right side so instead of this image here I want to insert this image so click on select and and also I want to reduce its width so I'm just giving its width to 400 pixel and then from this right container here I don't want these two counters so let's just delete the wrapper container from this place so here it looks fine and if you have a look it still looks super big in height because we also need to remove the viewport height 100 what we have given to the banner so select this container go to its layout from here I'm just removing this VH value from this place so right now it looks perfect and from here I just want to change this heading with other heading and also I want to change this button so let's click over this button I just want it to say become an instructor so later if anyone clicks on this button they will go to the instructor registration page so later we will be adding the link here and also with the second button so here we can just say it contact us so later we will be adding here our contact Pages link and here instead of this hat I just want to change this with uh customer support kind of Icon so here we can actually add this one let's click on insert and here here I think we can just decrease the font size because this is the font size for the main Banner so just click over here go to style go to typography instead of 56 we can just match the font size of this heading so we can make it 46 pixel so right now it looks perfect all right now just have a final look if I just minimize it and here we can see it like this later I will be adding some content on the food but we cannot see any space in between this call to action area and this fooder so what you can do you can just select this call to action areas container go to its Advanced tab open the layout unlink the margin and if you add some space at the margin for example 80 pixel and if we now minimize it you see 80 pixel space has been added at the bottom but it's now going to the left side because we have made just go to layout we have made its content width to full width so that's why this margin is not working properly so we can do another thing we can just link it again just make it default the way it was and right after this call to action area we can add uh spacer widget so it will add some space here in between okay so click on the Rubik's SK icon and here if you just search for spacer here is the spacer which so right after this container so I will be pasting it in this place so I'm just dragging this space or widget here in this place and you can add how many space you want in between so instead of default 50 I'm just making it to 80 pixel so at this moment if I minimize the bar you see it's now also centered here the call to action area and underneath we have got here 80 pixel of space all right let's now expand it and and here okay now minimize it again just have a final look from top so Banner area is looking great this feature courses area is looking great this counters is looking great here the category is looking great also call to action area is looking great now okay so we can now open it and let's click on update button to save our work so everything is now looking great on desktop device now we need to check how it's looking on mobile and tablet device deves okay so to make it responsive first from here click on the responsive mode and first I want to check it from tablet device so click on the tablet device here okay so here okay just go to the very top we can start from this Banner area by the way don't worry about this header because we will do the settings or we will customize the header later just focus on this Banner area for the moment so here I think everything is looking great but we need to reduce the space for this Banner just click on the six dots now go under its Advanced Tab and here we don't need this much space on the tablet device so let's unlink it here at the top I'm adding 60 pixel of padding and left and right 20 pixel is fine so on the desktop the padding Top Value will be 100 and and on the mobile because I mean on the tablet device the padding Top Value would be 60 pixel so this value is only for tablet device okay so similarly here I'm just selecting this heading go to its typography so on the desktop the font size 56 pixel is fine but on the tablet device I want to reduce it to 408 pixel like this so here on the tablet it looks great and also with this one let's select the counter wrapper because here I want to reduce the margin top go under Advanced Tab and unlink it at the top I want to only add 30 pixel and with this text I want to make them really smaller so select it and go to style Tab and with the title here so here open the typography I just want to make their font size to 12 pixel so right click over here let's copy it right click over here you shouldn't be click on paste just click on paste style so the Styles will be only pasted here so I'm clicking here you see it's instantly pasted in this place all right so now the banner is looking great the featured courses this area is looking great on tablet let's scroll down everything is looking perfect this area I think we should work on it so here let's select this card container okay go to its layout you may remember we have given it 23.5% so first of all make sure you have set it to percent and here instead of 23.5 we can just make it to 48% so I'm making it 48% and let's do the same with all of these curs just make them percent and make it 48 also with this one let's make it 48% also with this one oops just make it to 48 person so they're now looking nice and then let's scroll down this call to action area we can do a little bit work here so with the LIF container actually we can reduce its width so make it in percentage we can make its width to 40% and the right container we can make it with to oops from here 60% so they're balancing properly and and if you owner I mean if you just think we are changing this WID and it will be applied on desktop no it's not work like that actually we're changing the width only for the tablet device on the desktop if we go back to desktop you see on the desktop everything is same the way it was okay so the change is we are making that's only for the tablet view so let's go back to tablet view so we were here so we have made it width to 60% Also let's go to it Advanced typ because here we can add some space at the left side so here actually just unlink it and at the left side we can add 40 pixel of space so right now it's looking much better other than that everything is looking great so we can now move to the mobile view so from here click on mobile icon on and here okay let's go to the top let's start from the banner area here actually I want to make everything centered okay in the banner so first of all let's select this heading go to content make the alignment to centered also this text let's make it to centered and to make this button centered just select its parent container and only for mobile device I want to make their justify content to centered so they are now horizontally centered same with this one go to layout and make the justify content to Center so they are now horiz I mean they are now horizontally centered also here I think we need some space and we can reduce some space from top so with this one let's go to Advanced tab here we can unlink the mergin at the top I think 30 pixel was fine but here at the bottom we need to add some space so let's add 50 pixel of space here so the banner is now looking great but I think we can reduce the size of this heading just so let's select this heading go to style Tab and from typography we can make it size to 36 pixel and also we need to reduce the line height because in between space is huge so from here first of all I'm selecting pixel and let's make the line height to 40 pixel so it's looking like it I think it looks perfect perfect so actually we can just right click over here copy it because I want to keep I mean I just want to paste the style with all other headings so click on paste style Also let's scroll down all areas are looking great but here with this one just right click over here click on pasty style also with this one right click over here and click on pasty style and we will be adjusting it later but let's go back to the top so all headings are now now perfect on mobile view so here this Banner area is looking great and in this area we can reduce the space so select it from here unlink it at the left and right 20 pixel is fine but here at the top and bottom I'm adding 60 pixel so this area is looking great everything looks perfect so scroll down and here with this area this one is looking great and also we can adjust its padding on mobile so unlink it left and right at 20 pixel and top and bottom let's add 60 pixel so here it's also looking great on mobile and here with this call to action area actually in this area I just want to make this image at the bottom here in this place so to do it first of all let's select it and okay we can open the Navigator so you can see it properly let's just minimize it first and here within the CTA container let's open it here you can see the left container and right container so I want this right container at the top so make sure you have selected the right container and from here you see it's only applicable for mobile icon mobile device that's why you can see the mobile icon here so this right container on mobile device I want to move it to the top so from here Order I'm just moving it to start so now this is at the top and this image is at the bottom okay so with this one we have added some lift padding but in mobile device I don't want that so from here let's unlink it here only at the top and bottom I'm adding 30 pixel of padding and you know what we can actually just select it and we can make the alignment to centered also these buttons we can make their parent justify Contin to centered so right now this card is looking great so if I now minimize it it and let's go to the top first here everything is looking great on the banner this area courses are looking perfect and this area the counters are looking great the category is looking great and this C action area is also looking great so to save all of our hard work just open the bar from left side and click on update button to save our work so we can just go back to I mean we can just close this resp responsive bar by clicking on this x so everything is now looking great on mobile tablet and desktop for sure so now I want to show you how to adjust this header and fer and of course later I will show you how to create other Pages like about page instructor page course list page all other pages but before that I just want to show you how to work with this header and footer okay so first let let's go back to our WordPress dashboard so from here click on this hamburger icon then click on exit it shows okay just click on apply because it doesn't matter just click on leave so now to customize the header and footer we need to go to the theme customizer okay because the header and footer is coming from the theme okay so from left side just hover on upar from there let's go to customize and it will take us to the theme customizer now here we are inside of the theme customizer so first of all like I said I want to customize this header and also if you now have a look if you overover on the name we are getting all this beautiful Mega menu design from the theme so we don't need to worry about that and okay so let's just go inside here it says tutor starter options panel go inside Here and Now go inside header so the very first thing I just just want to select this header instructure it says header with search bar let's select it so we will get a search bar here here is the search bar and then if we scroll down from here you can change the colors so actually I want to match these heading colors with our this I mean with this purple color right so from here the menu link colors I just want to make the color code to Hash 9080 FC which is okay I'm I can just copy this color so you can paste it later so here also on the card color let's just paste the color like this and here also we can see a button it says getting started so if you want to also change this button text any other thing you can change the text from this place I just want to keep it getting started and later I will be adding here the link for student registration okay so for now I'm just keeping it hash later we can add it or you know you can just go to our WordPress dashboard and let's go to pages to all pages and here we can see the student registration page so if I now click the view okay we can just open it from a new tab so this is the page for student registration as we are now logged in so we can see it but if any new user or new student come to this website they can see the sign up form so let's just copy this URL from this place so right click over here copy the link go inside the header customizer and instead of just remove this hash and paste the link here just right click over here and paste the link so now if anyone clicks here on this getting started button that will take them to the student registration area all right so here now we can I I will be adding the logo a few moments later but for the moment let's just go back and here with the typography I want to make the font family to the default popins font okay so here instead of this enter I just want to make the font to Popin font this one so everything will be syn I mean the all the fonts from inside the homepage or other page and all these fonts you see these fonts has become the Poppins font all right so next actually I want to create our navigation menu here and you can create your navigation menu from the customizer so let's go back go back one more time so from here just go inside menus you can create your menu from this place also if you just go to your WordPress dashboard now from here just over on appearance now from here you can just click on menu you can also create your menus from this place as well okay later we can create our footer menus from this place for now just have a look how to create menus from the theme customizer okay so from here just click on create new menu and you should give it a name so I'm just naming it main menu and here I'm making it primary because I want to use it here with the header and here let's now click on next then in the menu just click on ADD items so here in the menu you can add any pages so you can add your about page or Blog Page homepage all the pages if you want you can add any post I mean any blog post or any product or any course you can add anything in the menu but we don't want everything on the menu right so from here actually I just want to add our pages and some custom links so custom links are basically let's say if I put here jimf digital.com and someone clicks on that link that will take them to to the website of mine so if you want you can also put any custom link also if you want to use any drop down in that case you can use the custom link as well I'm showing you that really quickly but first of all let's just add pages so here I want to add first the homepage so here I'm adding home then we can add the course list and then we can add other pages but here I want to show you another thing first so this is the homepage link but let's just open it and here the you if you want you can change the navigation label so instead of home I just want it to say market place so here you see it says Marketplace but if anyone Clicks in this link that will take them to our homepage just like that okay so we can minimize it and here okay just click on add item here I want to make one kind of thing like first of all just go to custom links and here link text I just want to say pages and Ur I just want to give here hash now click on add to menu now let's add more menu options so we can add more pages so from here let's add for example let's add about this one we can add instructors we can add our Blog Page we can add our contact page where is contact page here we go so we have added all these pages but as you see here if we add all the pages they are now going into separated lines so my goal is we can actually add this about instructor all these within the pages so it would be the parent and this would I mean about instructor all these will be the sub menus okay so to do it one thing we can do right after the pages I'm just dragging this about a bit right side so this is now the inner item of this Pages same with the instructor oops not like that like this they should appear at the same level otherwise if I put the instructor here then the instructor will become the child of the about I don't want that I want to make all of them same child level of these pages so let's keep it like this make the blog as the child of page PES also for the contact so right now if I hover on pages we can see all the child items here and as these Pages has some child items so there should have a down Shevon icon actually I think if we just save it and refresh the page it will appear here so don't worry about it and even if it doesn't appear that that's not a big deal actually okay and now I want to show you how to add your logo here because right now it's just showing the name of our site which is Jim F digital instead here I want to add our logo so let's just go back go back one more time let's go inside tutor restarter options panel and go inside header we can add our logo here by the way if you have very high resolution image you can add that here additionally for retina logo so people who are visiting your website from retina displays for example on Mac book or other iMac or other high resolution devices they can see that high resolution image if you want you can add that but for now I'm just adding a logo so this logo will be shown everywhere on Mac or Windows or mobile devices this logo will be shown everywhere okay so just click on select logo now go to upload files and actually from here within the file we can upload these logos this one is the black logo this one is the white logo I'm uploading these two together later we can use it in different places by the way if you wonder how to make your logo I have a tutorial that's around 5 to 6 minutes where I have shown how to create professional logos for free just by using an free online tool so just watch that tutorial I will put that tutoral link in the description okay so from here I'm selecting this black logo now click on select and I don't want to crop the logo so from here click on skip cropping and here you go we can see the logo here now if we minimize the bar so to minimize it click here on height controls so it's looking like it but here I think if I make the logo a bit smaller it would look more greater so let's just open it and here actually I cannot find any option to reduce this logo size I have used a other themes they have provided I mean some of them provide options for increasing or reducing the for size I'm not sure if it's available on the pro version or not but unfortunately I cannot increase or reduce the size of this logo but no worries because I have a hack for you as long as I have with you you don't need to worry about anything so here actually we can apply some custom CSS to increase or decrease this logo okay so let's go back and go back one more time so here in this panel just go to additional CSS and within this field you need to write some CSS code and no worries because I already have written that code for you all you need to do you just need to go to jimah digital.com this website you know you you can get this link from the description so if you just scroll down you see it says header and footer logo CSS so from here just copy the snip it go inside the customizer and paste the CSS snit here in this place so here I have made the maximum width of the logo 160 pixel actually you cannot see the change here but if you just save this page by clicking on publish and refresh it you can see the change so for the moment I'm just clicking on publish and from the front end if we just go to the homepage for example here you see the logo is now becoming smaller but let's say if you want to make the logo really bigger you can just go back to the customizer and from here you see I have commented here this one is responsible for logo width so header logo maximum size so instead of 160 pixel if you just make it to 260 let's click on publish now go to the homepage if we now refresh you see logo is becoming bigger so it's up to to you you can make it bigger or smaller but I I think in my opinion I think 160 pixel looks just fine okay so I'm clicking on publish again now here let me show you another thing just you can just go back and from here if you just go inside side identity actually you can add your Fab icon here so fab icon is basically the little tiny icon like if I go to Gim Fahad digital.com you can see this little tiny icon at the top of this tab this is the Fab icon okay so if you want to add the Fab icon on your website so you need to select the Fab icon from here select site icon so here actually I have one Fab icon here so upload it and always make sure your Fab icon is in square shape so the height and width of the five icon is the same so it could be 300 pixel by 300 or 100 by 100 that kind of ratio I mean okay so click on select no I don't want to crop it so clck click on skip cropping so here at the top we can see the Fab icon now to save our work click on publish so we are done with the header now let's scroll down I want to work with the fooder but before creating the fooder actually in the fooder I want to use some fooder item or fooder menus so I want to create that menus from our WordPress dashboard okay so we can just go back to our WordPress dashboard and like I said we can also create the menus from the WordPress dashboard just go to apparance from here let's go to menus and here you see we can already see the main menu because we already have created it from the theme customizer but now I want to create a new menu so from here click on create a new menu we can give this menu a name so here I'm giving this menu name fooder one and here I'm not selecting anything thing we can select that later when we will use it on fooder so just keep it empty selected and then click on create menu now here first of all let me show you the reference site so here is the reference site my goal is to create a fooder like this so here under the quick links we will have this menu items under resources we will have these and here at the support we will have these items so you already know you can add the pages and also we will add some custom links so later if you create any page for the carrier you can add the page link there okay so let's just make the I mean let's just create these items for the first menu That's about block carrier and pricing okay so here I'm selecting okay just we can go to pages to all pages so first I'm selecting about then from here blog so click on add to menu and we don't have carrier page at this moment or pricing page at this moment but you can just make a it as custom page so from custom link here I'm just putting for the moment hash and here I'm just writing carriers Okay add to menu Also let's add pricing page so hash and here I'm just typing pricing click on add to menu and I just want to reorder it so about would be at the top then block carriers and pricing okay so just click on Save menu oops click on Save menu and then I want to create another menu so here click on create a new menu and I want to name it as fooder 2 so again deselect everything click on create menu and let's now have a look from here so it would be course list instructors members and fqs okay so from here course list I'm selecting instructors and then here membership and fqs so we don't have those page so we can go to custom links click I mean just put here hashtag I'm writing here membership click on add to menu and here we can just type f a cues Okay click on add to menu so course list instructors membership if a CES just find click on Save menu and then I want to create another menu click on create a new menu and it would be our fooder three so deselect everything click on create menu and for the third menu um just writing forums documentation terms and Community okay so here actually all will be custom we can later add those pages if you want I'm just showing you how to add them so here I'm just adding first forums so here it would be forums click on add to menu then here I'm adding documentation and and then click on add to menu and then it would be terms and community so here I'm again adding okay actually we have terms page so here I'm just adding Community click on add to menu with this community link you can add any Community Link like your Facebook or Discord uh page or I mean Discord server so here the here I can go to pages and we can add our policy page so go to all page and here is the privacy policy so click on add to menu and here with the privacy policy I just want to rename it to maybe just policy like this then click on oops just keep it like it minimize it and from here click on Save menu okay so we have added these three items I mean three menus from here now we can go back to our theme customizer actually from here you can just go to here up here to customize or we are already on the customizer tab but now first of all we need to refresh it otherwise we cannot see the newly created fooder menus so here let's scroll down to fooder so in this area just let's click on widgets and here we can see fooder 1 2 3 and four so with the fooder one if we see the reference side within the footer one we will be adding this image paragraph and the is contact information so with the contact 2 three and four we'll be adding the menus okay so here with the F widget to here we will be add we will be using the blocks so just click on gut it and here click on this plus and actually these are the widgets of Gutenberg so here I'm just searching for navigation menu so this one navigation menu and here you can add title so I'm adding the title quick links and menu you need to select the menu from here so it would be our f one menu okay so let's just wait to load it yep we can see it here and right after that we can actually just go back from this place go inside fooder widget 3 so here click on plus and here is the navigation menu so let's select the food two and we can see the title it would be resources so we can just write here sources now let's go back with the footer widget 4 here also the same thing navigation menu and here we can select fter 3 and we can check it would be support so here I'm just writing support all right now at the left side so let's just go back within the footer One fter widget one we can first add some image but here actually we we have got another option so here we you can see a pencil icon so if you just click over there or let me show you the best way you can just go back so from here you if you just go inside tuto restarter options panel from here you can also go inside fooder so from here if you want to add any fooder bottom logo you can add that so here I want to add the white logo because the background color is black in the fer so here I'm adding the white logo click on choose image and here I can see the image by the way you can also control the width of I mean the control the size of this logo from the custom CSS snap eight because from here if we just go back go inside additional CSS I have provided the code up front so here you see it says footer logo maximum size so I have set it as 160 pixel so you can increase or decrease the this white logo or Fooda logo size from this place as well okay so let's go back go inside okay we can now go inside the widgets and let's now go inside fer widget one okay so first of all I want to add some paragraph so click on this plus icon here paragraph select this widget so it's very simple you can just type anything inside here I'm just pasting some text here so I have added some text here then right underneath I want to also add some text so click on this plus icon and here I also want to use the paragraph So within this paragraph here I'm just pasting some text as well so this is actually the same text but I have just made them bold so for example if you want to make anything bold you can just select that word and from here you can click on this B so it will be bolded so it's simple like that so here I have provided our number here is the email address of course this email address is not a real email address all right and here you may see these fter widgets are looking conjested and here is a huge space actually you can fix it just go back go back you can go inside Tut restarter options panel so from here if you just go inside fooder and you see right now this type three this option is selected I'm just selecting type for this layout so right now they looks perfect by the way as we have got this bar at the left side that's why the width is now showing something like tab width so they have divided into two columns but if I just minimize it so it will show us the real view so it's now splitted into four columns all right let's now open it and also like I said I want to add some text here so from here let's scroll down and here it says all right reserved so if you want to change this text with any other thing you can change it so it will appear here in this place now here let's scroll up so we can just go back actually I want to add some text here at the left side so you can also just click on this pencil icon you can see a blue pencil icon so I'm just clicking there I'm not getting any options here okay we can just go back go back actually we can go inside widgets and here it's inside fter social media actually this area for uh I mean this area this area is for adding Social Links like Facebook links so if you want you can add Social Links here but I just want to add some text here so click on this plus icon and I'm adding some paragraph so click on paragraph so here I'm just pasting some text copyright 2015 to 2024 gym TOS okay so we can see the text here now to save all of our work we can just click on this publish button so everything is now looking good great also we can check the responsiveness so from here just click on tab so here you can check the tab mode so if I just click on this hamburger you can check how it will look on tablet device so everything is looking great also you can check the mobile view from here as well so on mobile everything is looking great let's close it so here everything is looking great on mobile device then if we just scroll down and go to the folder you see everything is also looking great on mobile devices as well all right so we can just click on this top left X to get out from this theme customizer all right let's now create our next pages so now from Pages let's now click here on all pages so similar like the homepage we have created by using Elementor page builder now we will create other Pages like our about page instructor page course list page contact page all those pages okay and here I have a good news for you because you may see we have created the whole homepage from scratch step by step by using Elementor page builder but for other Pages you don't need to do that because I have done the hardest part for you so I have pre-created the pages and I will provide you I will provide you the pages as template okay so first of all let's start with the about page and here click on edit and here before going inside of Elementor page builder we need to do one simple settings so from Elementor settings so from here left Elementor now click on settings and this time let's go under advaned Tab and from here it says enable unfiltered file uploads let's now just enable it because like I said I will be providing you some templates those are basically Json formatt files and we are we are giving our website permission to upload that kind of files okay so let's scroll down click on Save changes and now we can go to pages to all pages again and here is our about page click on edit and this time click here on edit with Elementor now here you see this is the header because it's coming from the theme and here this black fooder this is also coming from theme and in between the header and fooder we will be creating our about page and same like the homepage if you want to create step by step by dragging these wigets from left side to right side you can do that but I will be providing the template to you so this time instead of clicking on this plus icon let's click on this folder icon and now let's just click here on this top Arrow icon it's basically import template icon and here you need to upload the Json formatt file and you may remember you have downloaded the file zip file and after unzipping it you will get all these images also within this folder here you will get another inner folder it says templates just go inside this templates folder here you will find some Json formated files okay so as we want to create now our about page so this one is for about page it says about page.js okay so here about page I'm just dropping it here inside of the page it's is actually getting us some warning of course we are safe because this these are not any harmful file okay so I'm just clicking don't show this message again and let's click on continue let's just wait a little so now here under my templates we can see about page and let's now click here on this insert button and here we go so here you see everything is showing perfectly so if you want to change any text you can do that but I think before doing any other thing we need to do one simple settings because if I minimize it you see it's not full width so always make sure if you want to import any page or if you want to start any page from scratch just first of all go to this gear icon from settings just make the page layout to element full width okay now it would be reloaded by itself now just have a look here everything is looking great and you know if you want to change this background image just click over there so also you can click on the six dots now from go under the style Tab and you know you can change the background image from this place and if you want to change anything just click over that you can change that from left side also if you want to change any of these images just click over that image you can change that from the left side so if you want to just tweak anything by yourself you can do that so you know you can change all the button links just click over that button and you can change this hashtag with with the real link and now let's scroll down here we have done the same CTI on our homepage but here if we just click on this button link you see this button link is not right so here I'm just removing this button link I want to link this become an instructor with our instructor registration page so here if I just start to type here instructors you see it's suggesting us some page so I want to link it with this instructor registration this page so I'm selecting this one you see it's now linked with the instructor registration page also with this one let's select this contact button and this one I'm removing the existing link and here if I start typing contact you see it's suggesting as the contact page so I'm just clicking on contact it's now linked with our contact page so it's very simple like that so I want to just keep it like this let's now click on update by the way it's also responsive for mobile and tablet devices now right after the about page let's now go back to our dashboard again go to all pages and here I'm looking for instructor page which we have created so here click on edit then click on edit with elementer and similar like the about page click on this folder icon This Time Again click on this import template icon and this time I just want to insert this instructor page.js file this one now just wait a little so here we can see instructor page let's now insert it and where here we can see the instructor page perfectly if you want to change our Mentor with any other text you can do that and here all the instructor images are looking great so from here you know if you want to change any of these Social Links just click over that and let's say you want to add the Facebook link just click on Facebook and you can insert the Facebook pages URL here Twitter handle link Here YouTube channels link here like that okay so like this oops just click on cancel okay so if you want to add more instructors you know you can just duplicate it so just hover on this child container click on duplicate you see a new instructor card has been added here so I don't want it I'm just deleting it so here is the global call to action area and also if you want you can add the link here you already know how to add the links so I'm happy with the instructor page so click on update to save our work and then in the same way let's just go back and from all pages this time I am looking for here the course list page so here you go it's course list click on edit now click on edit with Elementor so here in this page my goal is to show all the courses within this page okay so just if I just again preview you the homepage so you may remember on the homepage right after this Banner we have created this area okay just let it reload because it should be in the center right for some reason it wasn't loaded properly so I have refreshed the page and right now it looks perfect okay so you may remember on the homepage in this area we have just shown the top six courses here 1 2 3 then 4 5 6 and here like it says browse all courses so after clicking this page actually for this area I want to create our course list page so when anyone clicks on this browse all courses that will take them to this page because in this page we want to display all the courses available in our website okay so first click on this folder icon now let's click on import template and this time from here I just want to import this cour list.js this file here so here we can see it says course list page so let's insert this one here and here we can see our course list page it says all courses by the way if you want to change any text just click over there and you can change it from left side and here this is basically the same thing what we have created on the homepage but the difference is here you see you can see 1 2 3 456 then here we can see the navigation so actually it's not navigation you can say it pagination so if you just click on next you can see the next courses okay so here at the first page we can see 1 2 3 4 5 6 so just click over here anywhere of this place you see we have set course per page to six and then we have also enable the pation to show that's why if I now just click on update to save or work and if I preview it just by clicking on this eyeball icon now have a preview here so here in this page let's scroll down okay here we actually need to do another thing so from here like I always forget to do this thing so from just click on this gear icon and of course we should make the page layout to element full width okay so click on update and this time you see the course list page is showing perfectly and here we can see one to 3 4 5 six courses and if we now click on next in the next page we can see two other courses because we have total eight courses on the first page we can see six and on the second page we can see the remaining two courses all right now we can just go back to our WordPress dashboard here so let's go back click on exit and here we just need to create our last page so click on all pages and here we have our empty contact page this one so click on edit click on edit with elementer and you already familiar with the process so this time we need to click on this folder icon click on this import template icon and from our file we will be uploading contact-page dojason this file here so here is the contact page file so click on insert here is our contact page and here before doing any other thing because I always forget to do that thing so now here in this contact page before doing any other thing because I always forget to do that thing so from here click on this settings icon and page layout I'm just making it to Elementor full width all right so here in this contact page if you want you can change the background image if you want you can change all this text you can replace this address with your own address from this field you can change this email with your own email you can change your phone number you are already familiar with all this so you just need to click over that you can change the element from the left side and here if we scroll down we can see follow us button so we can actually link this with our social handles I mean I want to sync them with our Global color Okay so let's just click over it go under the style tab from here I just want to set their primary color as our purple color so it now matched with the vibe of our website and here the Google Map is looking fine by the way if you want to change your Google map address just click over this Google Map or you can click on this pencil icon and within this location field you need to put your address so your address will be shown here also you can control the zoom so if you want to make this map more zoomed in you can increase the number so instead of 10 if you make it for example 14 you see it's now more zoomed in okay you can also control the height you can increase the height you can decrease the height but I just want to keep it to 500 okay and here you know this is the global call to action area here is our fooder and here you see this right side is looking empty but we w't keeping I I mean we won't be keeping it like this we will be adding a contact form here and I want to show you how to create the contact form from scratch but before that let's just go to our WordPress dashboard actually you can go back to Wordpress dashboard from here so I'm just clicking on dashboard so here is our WordPress dashboard and if I just go to plugins to installed plugins because I just want to show you how we will make our contact form okay so you may remember at the beginning of this tutorial we have installed this plugin it says midform so by using this plugin we will be creating our content form okay so just check again if you have installed and activated this m form properly otherwise you cannot follow along the thing what I'm doing right now okay so let's go inside Elementor and if we just move your cursor here you will find a blue line or you can do another thing you can just open up the Navigator and if you just click on this container okay I'm clicking here on this container and now within this container let's just expand it you see there is a widget it says mid form so I'm clicking on Mid form so here on the left side we will find an OP option it says edit form Okay now click on edit form and now we will be creating a new form so you can name it anything I'm just I'm just naming it to my form and let's select this one create from scratch and then click here on edit form so here within this form Builder first of all I want to take a container so here let's click on this plus icon and I want to take this row Bas structure this one let's select it and here I just want to make this justify content option to space between and here wrap value to wrap also I don't want any additional space under advaned tab let's make the padding value to zero now here within this container click on this plus icon and here I mean when you open this form Builder you will first find all these form input Fields so first of all I want to add first name and last name field so from here I'm dragging this text widget here inside and you will find all the option for this text field so first of all I don't want to show any label so here at the top you can see text but I just want to keep this placeholder which is inside of the input field so I'm just hiding the show level from here then in this place this I mean within the placeholder instead of text I wanted to say first name and now I want to do some styling so go under style tab let's first add some padding okay so first of all I'm just unlinking it and here at the top and bottom I'm adding 14 pixel and at the left and right let's add 20 pixel of padding also I want to add a border here so border type I'm making it to solid let's give it one pixel width and color I want to make it gray color but actually I just want to make it really light so I'm just increasing its transparency so let's keep it like it if I minimize it yep so it looks perfect and now from here you can also style the placeholder text what we can see so basically what we can see here right now is the placeholder and if I type anything inside for example here I'm typing Jim fad so this is the text so here first I want to design this placeholder so from this placeholder I just want to decrease its weight so from typography here I'm making the font weight to 500 so it's looking like it and I'm okay with it so now from here let's go inside of this input again and with the input field here let's select the background type because I want to make the background color completely white okay like this and also I want to add some border radius so from here border radius I'm adding 30 pixel of Border radius so if I minimize it you can see it properly it's looking like it and now let's create other input Fields but before creating other input Fields actually I want to give it a width so from under Advan tab let's give it width to full width 100% okay now we can actually just go to to this Rubik's Cube icon here again and let's take another text edor so I'm I'm just dropping it underneath our existing input field here so actually it goes at the top but I okay so first of all here we can do another thing I just want to paste the style from here so we can just right click over here let's click on copy and with the new field just right click over here and click on pasty style also with this field I don't want this label so I'm just hiding it and this one I just want to drag it after the first one here in this place and the second one this should say the last name like this now right underneath here click on the Rubik's Cube icon and here I will be dropping the email widget here in this place and also let's drag this email underneath this text here and same like before just copy it's style and right click here click on paste style also here I'm hiding the label from this place and I want to make this email field required because if anyone doesn't put their email address how can we contact back to him or her right so from here let's scroll down open the settings and required I want to turn on the required option for the email field okay and right after the email field from here I'm just searching for text area so people will write the description all the text how why they want to contact us all the details here so let's drag this contact I mean text idea field here and let's drag it underneath email also I just want to from here from this one just right click over here copy it within the text area right click and click on p style also I don't want the label so from here I'm hiding the label and instead of text area we can write here write details here like this and right underneath I want to put the submit box otherwise people cannot send this I mean people cannot send their message so from here click on the Rubik's C icon I'm dragging the submit button here underneath again just drag it after the text area here in this place also let's just go to its Advanced tab and I'm making its width to full width and let's now do a bit of styling to match it with our website Vibe so go okay first of all go to content because instead of submit button I just want to say it okay just let's write here send message and here let's keep everything that way it is go to style Tab and here padding value so just unlink it at the top and bottom I'm adding six 16 pixel and left and right I'm giving here 32 pixel of padding now here the background color I want to set our Global purple color and on Hover you know okay but before hover we can actually add some border so from here border type to solid and Border withd one pixel and Border color would be our Global purple color and here border radius we can make it to thir pixel like all other buttons and we don't want this Shadow here so from here from the shadow just open it I'm just making the shadow value everything to zero so we cannot see any shadow in this place okay so again go I mean open the Border everything looks great here open the button because here on Hover so on Hover we just want to change the text color so text color would be purple and background we can make the background color to transparent like all other buttons so it's now looking like it which is really cool okay so now to save this form just click here on this update button and also I want to show you another settings but before that I think we can actually make it look more good because if we can put this first and last name at the same line that would look more good so first of all I'm selecting the first name this one so instead of full width 100% I'm just making it width to custom and let's make its width to 47.5% also the second one go to advance tab here instead custom so it would be 47.5% so they are now one after another horizontally okay then email field and here is the text area field let's now click on this update button and now I want to do some notification settings so whenever anyone fill up this form how will you get notified right so from Top click on the form settings then from here click on notification now first of all enable the notification option and here email subject so I can say it email from gy toots because I only need to understand from where this email is coming so you can write anything to better understand for yourself okay so email to this address would be my email address so here I'm writing my email address which is gimf digital gmail.com and here email from okay so in this field and in this field you need to write the email address of the customer or the student who have filled up the form so how can you get their email address there is a way so first of all whatever we have done just click on Save changes now from this field I mean from this form click on this email field and here with the email field you will find a name it says you you you just don't need to take this placeholder this is another thing just focus on this name it says mf- email so I'm just copying this thing from here again go to form settings and from under notification so I need to paste this within this field here but before here we need to give a third bracket and let's end the third bracket here so we can do in another way so I'm starting the third bracket ending the third bracket within the bracket I'm just writing mf- email okay so let's scroll down click on Save changes so this time after making all the settings click on update and close also from this page click on update to save our work now let's check if the form is working correctly or not so from from here I'm clicking on this iBall icon to check it from uh browser and from here let's say my name is John do for example John then here last name is do and my email is you see it says this field is required because we have made this field required so this email is John do1 234 at gmail.com and here it says for example I want to by python oops python course and then any discount because on your course selling website you'll often get these kind of messages right so from here click on send message and it says thank you firm submitted successfully actually without going to your email address there is another way because if you just go back to your WordPress dashboard and then from from here open the M form just click here on M form and as you are going inside of this place for the first time so you just need to I mean you can just skip this onboarding process click on Next Step Also let's just click Next Step all the time and click on Save changes and now from left if you just click under midform to this entries you can see here you have got one entry and click on view you see Mr do has been sent you the message here is the email address and here is the details I want to buy python course any discount but you know each time to check this kind of email you need to log in into your WordPress dashboard and you need to go inside of your entries and then you need to check it manually if there is any submission or not so that's why I have also shown you how to set up to get that notification on your email because if you just open your email you you will get instant notification whenever anyone submit the form so here Mr do has been sent the message here is his email address here's the details and you can see the subject line email from gim Toots and also if you just click on reply so you can provide your discount code if you have any or you can reply anything here in this place okay so let's go back so we are almost done with all the pages so for now I can just close all the tabs from right side and here I want to show you how to write a blog post okay because of course you want to write some block post to rank your website or your courses okay so first of all from posts from the left side click on all posts so here we can see a dummy block post it's actually came with default WordPress installation so I just want to delete it so click on bin so it's deleted Now to create a new blog post okay these notifications are distracting me so I'm just closing all of them let's now create a new blog post from Top click on add new so here first of all you need to write a title for your blog post so here I'm just typing uh title unlocking the power of online courses 2024 and then within this area you can write anything so it's similar like the classic editor we have used in different places to create our courses or writing the Articles so it's the same thing you can write here anything you can add anything within this place so I believe I don't need to re explain it everything so I'm just pasting some dummy text here in this place so you know you can make anything bold italic or you can add anything in between these places okay so here I want to show you some more options so from right side you can just click on this post to find some post option so you see I'm the author of this post and here you can also Al use the categories by the way this categor is different than the course categories those are different category and these are block category so if you want to categorize the blog post you can do that from this place and also here is the tag option so for example this one is here I'm just writing courses tag and here I'm just typing another business tag you can type that and also you can add featured image okay so this is basically the thumbnail of this block post so from here click on feature Fe image and click on set featured image and let's go to the folder you have downloaded so from here you will find another folder it says blog images so from here I'm just uploading all the images because we will be needing that later so for the first blog post I'm just selecting this image and let's click on set featured image and I think everything looks fine so from top right corner click on this publish button click on publish one more time now the blog has been published now to check it you can just click here on View Post I'm opening it from a new tab so just have a look yep the block post is looking great here you can see the block publishing date here is the block title and here you can see the featured image and here is the block details so we can see everything perfectly and here is the block tags also as we are logged in we can see this edit option but any new user or any other student cannot see this option as we at the admin we can see it and also people can comment from this comment field so let's go back because I want to create some other blog post so to create a new blog post you can click here add a new post or you can just go to posts and from there under click on add new and following the same way I will be adding a title some text I will add text I will add featured image then I will publish it again so in in the same way I will publish five to six more blog post and I don't want to make you bored so I'm doing it really quickly and I'm coming back to you all right so I have added some other blog post and now if I go to here under posts let's now click on all posts here you see all these block posts has been added okay so now we already have seen the single blog post page like here if I view any blog so here is the blog post page but also I want to check how our main blog archive page is looking right so let's go to dashboard now from here let's go to pages to all pages and you may remember we have made our posts page is a Blog Page I mean we made this blog page to our posts page so if we now view this block page so I'm just opening this view link from a new tab so this is basically the link so here on the blog archive page we can see all the blog posts but I think we can customize it a little little because here all these images are looking super big if we can make them one by one horizontally maybe two or three one in a row that would be great so from Top let's now click on customize that will take us to the theme customizer you already familiar with that so from here let's go inside twoo restarter options panel and this time let's go inside blog and from here you see right now it's automatically G is now getting the grid view because default one this view so have a look it was like this but instead of the default layout we are making the grid view so now in a row we can see three block post but here everything looks great but I think on the here blog grid page or the blog archive page we can just put here the title description and the continue reading button we don't need this metadata because it looks kind of busy so let's just scroll up and from here show postm I'm just hiding it so it now looks much cleaner right so here it's refreshed so I like it so from here click on this publish button to save our work and click on this x to get rid of this customizer all right so we are almost done with our full website and of course I will also show you because as I promised so how to create the marketplace or it's already a Marketplace but I just want to show you how to create an instructor account and how they can submit their course and as an author how to accept that course all these things actually those are super easy but before that let's just finally recheck our homepage so here everything looks fine I just here want to show you something it's all related to linking so I'm opening it from uh Elementor tab so here click on edit with Elementor actually not not it's Elementor tab it's Elementor page builder actually it's kind of end of the day I'm feeling like exhausted but like we are at the end of the tutorial so we need to finish it right now so here the thing I want to show you that here everything looks great but let's say if you want to link anything so for example if you want to link this button with any other page you already see it on other pages so you just need to click on this button then from this hashtag you can just start typing the pages name so it will be our all courses page so here I'm just start typing here course or we can yeah yes we can see here course list so this one is a page so it's already suggesting us the pages and posts which contain the word course so here we can link it with the course page so here you see it's just linked with gim tos.com course- list so if anyone clicks on this button now that will take them to our course list page and here you can do another thing like let's say if I click on get started I don't want it to be redirected on any other page but just it will be scrolled down to this section okay you you already see it on many other websites right so to do this kind of stuff first of all the area where you want to go so basically I want to take them in this area so I'm just selecting this container by clicking on the six dots and here go under Advanced tab you just need to give it ID name okay and this ID name would be identical because you cannot use the same ID name everywhere so each ID name is unique so here I want to use the id id name which is featured now I'm just copying this name from here this ID name from here and here with this button so let's select this button from it's here link tab I mean Link Field right after the hash without any space just paste the ID name so it's now hash featured so if now I click on get started button you see it just Scrolls us to the featured courses area let's see it again just click over this button you see it scroll us to this area so let's now click on update to save our work now I want to finish this tutorial with the marketplace options like how to create an instructor account how instructors can create their courses and how they can earn from the market place all this actually these are super easy these are already built in we already have made it I'm just showing you from where you can get the options so first of all how to create an instructor account and as I'm I'm already an instructor of this website so I cannot show you that from this browser because in this browser I'm logged in you see my name here so I'm just taking a new incognito window so we are not logged in here so we can just type here our website name which is Jim tools.com so here on our website first of all here I'm a new user okay so I'm not logged in so here if I click on get started actually from this geted button we can also see a registration form but from here we can register as a student but I want to register as a instructor as an instructor okay so again I'm just going back to our homepage and you know we have added that link on the call to action area here so if I click on become an instructor so so here or actually forgot to add that link here so I have added that on the about page so let's just go to the about page so always add that link on the call to action area so anyone can become an instructor of your website so yep if we just click here that will take us to the uh instructor registration area so click on become an instructor and here I will become an instructor so just assume I'm a new user and I want to become an instructor and in this browser I'm the admin of this website okay so in this browser I'm the admin and in this browser I'm an instructor who want to create their new account here my name for example my name is John and my last name is do my username maybe my username is John do and here um putting a fake email of Mr joho so here I'm just just trying to give it a perfect email address and let's give it some password so after giving the password now here just click on register and instructor okay so I'm clicking there and here okay it says that username already exist so we can just here give it a different name so we cannot create two account by using the same username so that's also a learning curve you know so here we can just giveing two two so that's make it that's making it unique so this time click on register as instructor and you see no one can become an instructor by one click so as a admin I should verify that okay I should accept him or her as an instructor so here it says your application will be reviewed and the results will be sent to you by email and when the admin will approve this instructor they will get an email like uh you have been approved on that I mean on gym TOS website like that so here if I click on go to dashboard so here also on the dashboard it says your application is pending and here is the current date so here as an admin of this website I can just go to tutor LMS from there actually I will also get that as an email but also from here from the tutoral MS if I now go to the instructors here in this area so here you see this one Jim f is my account as I'm the admin and here the new ad actually not admin here new instructor has been added his name is John do and here is the email address and here is the commission rate because he will get the 90% And I will get the 10% and in this area this gy father ID as I'm the author I mean I'm the owner of this website also I'm the course creator so I will get the 90% also the rest 10% will be given to myself so okay so let's now be attentive here with Mr joho so here first as admin I need to approve him so I may mail him personally in this email address like I may ask you several questions because on my website I only accept the real instructors who can create valuable courses right so here let's say I have contacted with him and we have agreed with our terms and then from here I can approve him so I'm just clicking on approved so it says instructor status updated and as soon as I make him approved he will also get an email that you have been approved as an uh instructor on gy tos.com like that so here from Mr joho's account if he refresh it so now that notification has gone and now he can create his course but you may remember we have previously discussed the when any instructor want to publish their course actually they can create the course and when they want to publish the course as a admin I should accept that or I should review that and I will be published that course you may remember that right so here we will see it in Practical so here Mr jondo will try to create a course so let's click on create a new course so of course I don't want to fill up all this I'm just showing you how this thing works so here let's say Mr jondo uh is creating a course related machine learning so here machine learning by John do here's the course name and it's a programming related course and I'm not giving any details here so from here let's say it would be a paid course okay so let's just click on paid and actually we cannot select any product from here and also Mr jondo has no access to create any new product in this area Mr jondo needs to mail Jim Fahad so he needs to mail me to create a product on behalf of him and then I will be as an admin I will connect that product with Mr jondo product so I'm again giving the example here so here he can just create the course he will uh deliver all the details he will add the course Elements by clicking here on new topics so right after clicking everything he will click here submit for review you see here is no publish button it says submit for review because the admin should review it and submit it so here I'm first clicking on submit for review so here jondo will wait for my approval okay now here this is the Jim fad account I'm the admin now from here from tutor LMS if I go to courses now you see we have seen we can see here all the previous courses that is made by me see here you can see it's by Jim Fahad it's by Jim Fahad but this course machine learning by John do it's by Mr joho and currently it's free because we haven't created any product for this course so here you see it's pending so first thing as an admin I need to publish this course so from here first of all I'm making it publish so it says course status updated and also now I want to create a product by matching with the name of this course and as I have the email of Mr jondo so I can discuss with Mr jondo that how much price do you want to set for this course because I will be creating that product on behalf of him okay as I'm the admin so I have some responsibility if I'm super busy so I could hire someone to do this on behalf of me now but now I'm doing this by myself as I'm the admin so here I'm first I'm clicking on view course of Mr John do course so here I'm seeing I'm reviewing it so I see everything is looking great for example let's say he has uh here fill up all the previews all the course elements are looking convincing to me so I want to approve this course okay so I already have approved this course now I want to create a product with matching the name so let's go to Wordpress dashboard from here so its name is machine learning by joho so let's create a product by following the name so from here products click on add new and here so here product name it would be machine learning by John do also I can add also product image if Mr jundo provides me these images I can do that on behalf of him and here you can see another thing like here it says product data I I'm keeping it simple data it would be virtual of course it would be for tutor so let's say I have discussed with with Mr jondo the product price would be $100 so that's basically it and let's click on publish so as an admin my job is done I can now email back to Mr jondo hey I have created the product you can add that product from your courses right so here I'm going back to Mr J's account so here if Mr jondo from his dashboard go to tutorial to courses here his course is showing it says it is publish so from here just click click on these three dots and click on edit and now you see if you just scroll down from here it's now a paid course and as the admin has created the product for Mr jondo so Mr jondo can see now the product name it's machine learning by jondo so Mr J is selecting this product and now he can update the course okay so this time Mr jondo doesn't need any approval from Jima because you may remember we have discussed it earlier from the tutor Elm settings we have done that so only when for I mean only for the first time when an instructor create any course on the first time they need that approval from the admin but later if they want to update anything maybe they want to add any new lesson or they want to update this information this additional data or anything like difficulty level or or they want to update any information next time they don't need any manual approval from the admin so Mr JRE is now clicking update and this time let's just view the course from a new tab so right now you see the price is now $100 and it's ready to buy so right now it's a practical product actually the concept is very easy you can just uh watch the last 5 to 7 minutes so you will understand it properly it's very easy concept all right so we have completed our full website here we can sell our own courses also other instructors can create and sell their courses from this Marketplace so just go ahead and make your own course selling website I wish you all the best and I have just one request please comment down below about The Learning Experience from this video also please share this video on social media it would mean the world to me I will see you in the next video for now bye-bye

Channel: Jim Fahad Digital

Views: 62,022

Keywords: how to make an online course website with wordpress, how to create an online course website like udmey, how to make lms website, create online course website, build a website for your course, build online course website, best lms plugin for wordpress, tutor lms tutorial, tutor lms, lms, wordpress online course plugin, wordpress lms, tutor lms wordpress, Elementor Course Website, Jim Fahad Digital, make online course website wordpress, how to make an online course website

Id: pF2GLmEGRWs

Length: 282min 38sec (16958 seconds)

Published: Wed Oct 11 2023