How to Turn Divi's LMS Layout Pack into a Functioning eCourse Website

all right I think we are live yes we are all right hey Debbie nation this is Jason champagne content creator here at elegant themes and I want to welcome you to our weekly live stream where we will be providing you with some extra value in and around the divi design initiative which is a part of our larger mission which is to make the divination the most empowered community on the web the first wave of this design initiative is to give away a new Divi layout pack every Monday if you've been getting these I know you love them just as much as I do these layout packs are created by our super talented design team published on our blog each Monday and now gone over in detail every Tuesday with yours truly or another member of elegant themed staff and today I'm going to show you how to download install and setup a brand-new functioning learning management or eco eCourse website using the new Divi Learning Management layout pack that we got yesterday on the blog if you haven't found that you need to go check that out you can download this layout pack and all of the high-resolution images used in the layout for free right now from our website I place the download link in the video description so please be sure to check it out if you are just learning about elegant themes and Divi and want to learn more about our product we have a link in the description as well so make sure and check that out alright so let's go ahead and get things started off here I'm gonna fix my video all right so I'm gonna first go to our get our layout pack so again the link is in the description it's right here on our blog post that went out on Monday and it looks like this download a free breath Learning Management LMS layout pack for Dibby and if you notice down here what we're going to do is download the whole layout pack it's got a little anchor link here download for free today I'm going to click that it's going to bring me down to the download section of the blog post and here I've already entered my email in there so a lot of people kind of freaked out about the whole entering an email over and over again don't worry just we're not gonna Reese absque ribe you if you've already subscribed just go ahead and enter your email and a download button will pop up click it and then you'll see this button here to download the layout pack so let's go ahead and download it it'll go to your downloads folder and it's going to be a zip file alright once you get that layout pack I'm gonna actually look in my downloads folder so you can see a couple of things here just a reminder of what you're going to be needing for this first of all the layout pack is going to look like this right here and it's in a zip file also your WP complete plug-in which we're going to be using this is a plugin that you can in fact I'll go to the page here and it's in wordpress.org in the plugins section you can download the free version here I'm actually going to be using the pro version because it's awesome and it's going to basically allow you to keep track of your courses with like you know bars percentage bars and you know little checkmarks and the menu to see what courses you've done already so it's really helpful plug-in I hear some things going on over here in the comments all right I'll get to you guys in a little bit hello everyone so aside from the WP complete plug-in we're going to be using the restrict content Pro plugin so let me go back to my downloads folder here so this folder I'm sorry this plug-in is actually works really well with the WP complete plug-in it's very compatible and tested well together so it's one of the reason why I decided to go with it the restrict content Pro plug-in is actually I'm using the pro version number of reasons main reason that is that it's simple to use simple to setup and I think it's pretty perfect for what we're going to be using it for today so again that's restrict content Pro plug-in and then the WP complete plug-in or the two ones we're going to be using to get the restrict content Pro just go to their website and there it is there aside from those two plugins we will be needing our Divi theme so I've got a copy downloaded there to get your copy of Debbie you're going to want to go to the actually login to the members area and once you're logged into the members area and elegant themes dot-com you're going to go to the down Divi box here and we always have the most updated version of Divi for you there so go ahead and download it and again if you haven't subscribed or become a member please feel free to do that today alright let's go ahead and continue on that's all the things we're going to be needing let's let's go ahead and get started let's go first thing we're gonna need to do is go to our wordpress dashboard and we're gonna since we're going to be starting from scratch you know starting from a blank slate of Divi and to a functioning eCourse or learning management site we got a lot to cover so if I'm going a little fast that's why you know I've got a big goal and I'm gonna hopefully going to meet it so let's go ahead and get started the Divi theme can be downloaded I already have it here but if you need it to download it for the first time go to appearance themes once you're there go ahead and click add new at the top and then up there at the top click upload theme and then the box here where you can choose the file you're going to use that Divi dot zip file that you downloaded from the members area then you're going to go in there choose the file from your downloads folder there debby dot zip file open it and then install it once it's installed you're going to go it's going to look like this and your themes page but you do have to activate it so make sure you activate Divi at this time it is a good you know time to mention that you would want to do a child theme here install a child theme I'm not going to do it because we really aren't going to be extending any thing past the theme itself that would require a child theme so but feel free to do that at this point all right so the next step is to go ahead and start adding our new pages and then adding those layouts to our pages so this is a again learning management site that we're building and it's gonna be a coding school so of course it will apply to other usage uses as well so I'm gonna go to the pages here and I'm gonna start adding some new pages alright so the first page oh actually I'm got ahead of myself here I actually need to go ahead and download or import my layouts before I add my new pages cuz I have nothing to add to my pages yet so to do that remember we have our layout pack that we got we downloaded so now we're gonna go to our go to Divi go to Divi library and in the Divi library this is where you can import your layouts now I'm gonna go ahead and go back to my downloads folder and let's look at our our layout I'm gonna unzip it here now inside the layout you'll see there are there should be ten yeah there's ten JSON files the there's nine pages with one extra and that one extra is the one we're looking for it's going to say coding school all that JSON and that one is going to be really helpful because it's going to upload all of them at once to our Divi library without having to go individually some of you may already know what pages you want and you won't need them also you may just import them separately but for now we're going to be using this coding school all dot JSON so feel free before I do that feel free to comment as we go along I know we have some of our staff here that are going to help answer questions in the comments so please feel free if you have any questions don't hesitate to ask all right continuing on so let's go back to our page our Debbie library here and we're gonna click this button called import and export so once that portability box shows up we don't need export we want to import so I'm gonna click that and then I'm gonna go ahead and choose my file and then I should find that Divi layout folder and then I want to find coding school all JSON then I'm gonna open it and then click the blue import Divi builder layouts and that'll take a few minutes to upload if you're just joining us we are going over our layout pack our new layout pack this weeks is going to be learning management layout pack and we're going to be turning it into a functioning eCourse so we're going to be using restrict content pro and WP complete plugins to do so and you can access this layout pack by clicking on the link in the along with a Divi theme if you don't have it there's a link to go and get that as well all right so now continuing on we have imported all of our layouts that looks beautiful whole lot happen in just a few seconds you now have layouts for nine different pages here for this use case I'm actually only going to use seven of them we're going to be concentrating on turning it into a working course so we won't be you know covering all of these pages but let's go ahead now that we have our layouts they're going to be accessible in our Divi builder as we build our pages so now we can go ahead and start adding our new pages so I'm going to add my first one it's going to be my home page it's a pretty important one and then I'm going to be using the Divi builder and then I'm going to actually load from library so this is going to pull up all of the elements that I have from my library when I click Add from library notice the the nine layouts that I have are now accessible and I'm going to find the one that says home since it is my home page and I'm going to load it in and then I'm going to publish all right and we're gonna we're gonna keep doing this quickly I'm gonna show you this one but just so you can see what it has already done here so there's our homepage layout just by importing it in there and saving it now I have a home page beautiful alright let's continue on I'm going to add a let's see what's next let's go ahead and add an about page gonna load from library find the about layout load it in there I'm going to basically repeat this process over and over alright let's go ahead and publish this one alright let's go ahead and add a new page this one's going to be our you know contact page alright let's go ahead and load from library find the contact layout they're coding contact click publish now we have a contact page let's go ahead and add a new one I'm going to add our blog so I clicked on the use visual builder which you know since it's the first time I'm using it this little box pop that up popped up to take a tour so if it is the first time you're using it feel free to take the tour but I don't need I'm gonna start building now and just to show you that you can add these layouts from the visual Builder here if I go down to this small circle purple button down there to open up my menu I can here you go wrong one hit the plus icon and then you can add from library here we're doing the same thing I'm just basically doing it from the visual builder so you can see it it's normally where I work for them anyway and then since this is the blog I'm gonna find coding blog that way we can see it kind of come to life right away it says no results found because I don't have any blog post yet go ahead and click publish all right let's go ahead and add a new page this one's going to be our courses page use Divi builder use visual builder I'm gonna go ahead down here and click on the my menu plus icon to load from library and then I'm gonna find the courses layout right there okay I hope you all are staying with me here I know this what's funny is this part may seem like it's tedious but I mean it's doing so much in like such a small amount of time it's crazy so no complainers out there guys alright let's continue alright let's add another one it's our courses page I think we're gonna add one more which is our course page alright use Divi builder use visual builder go ahead and find our course page layout here add from library there it is beautiful alright let's go ahead and publish it and you can see that you it's already popping up up here on my Mick my main menu I need to delete some items there but let's go ahead and do that now that we have our pages in there so uh right now actually let's do one more page we may or may not get to it this time around but I want it in there just in case let's add that pricing page because I know some of you who will be using this layout excuse me will probably be using our pricing page here use the visual builder and let's add in our pricing page all right we are right at 20 minutes so we got everything up and running I think in about 20 minutes which is good at least all of our layouts that is we got a lot more to go there's our pricing page and let's go ahead and save that all right so if you are just joining us we are going over basically how to turn this week's learning management layout pack into a functioning II course like coding school using restrict content pro WP complete and of course our Divi theme and you can access this new layout by clicking on the link in the description wherever it is and this layout works with the Divi theme and if you need more info on Divi please feel free to we have a link for that as well feel free to click on it and learn about it all right so now that we have all of our layouts in there we need to go ahead and let's actually go to our menu and let's set up our menu here so I went back to my dashboard WordPress dashboard go to appearance go to menus and I'm going to create a main menu here just call it main and then we're going to add in those links yes yes I see people asking about what I'm using here yes WP complete plug-in and restrict content pro plugin we're going to get to those but right now when you just set up our menu and maybe in do some clean customizations as well alright so now that I have my main menu in here let's go ahead and I'm gonna view all and I'm going to select all but I don't want my sample page there and let's see let's take out that one add to menu let's remove this custom link we don't need that one let's put in this one alright so the order really doesn't matter at this point we're just going to create our menu there so once we have our menu saved we are going to check it out on the live site here oh I did I forgot something you don't want to forget to add it to your primary menu this so that it shows up in that location all right let's refresh the page and there we go so as you can see up here we still need to stylize our headers and to make it match the site so let's go ahead and do that to do that we're going to go to the theme customizer go to the our dashboard theme customizer and once we're there the this layout is absolutely beautiful it's using a lot of custom graphics and since I am using it as a code school for this time just for sake of time I am going to be leaving most of the design the way it is so I'm not going to change too much to that I'm really just going to concentrate on turning it into a functioning eCourse so to do that but but I need to make sure our header kind of looks better than that and so to do that I'm going to go to our header and navigation in the theme customizer and let's go ahead and before I do that I'm a backup and I'm going to general settings I forgot and then under layout settings I'm going to do I'm going to change this theme accent color and let's go ahead and change it to this purple all right I'm sorry this green or something like that there you go so that's the same green as like using this button and stuff like that so I just want to if you are building a theme from a scratch this is probably one of the first places you do want to go before you start customizing all the colors is this theme accent color here it's going to change a lot of colors in the settings automatically so it's good to go here first make sure and save that all right and then let's go back to our header and navigation here keeping the default header format here but I do want to go to my primary menu settings here and let's go ahead and change a few things I want my text my background of my header to kind of be transparent so that I can see the background behind it and so to do that I'm going to add in this color it's actually a the purple so if I take the the purple the same one of the purples here one way I could do that is to find the color picker this eyedropper it's a it's a Chrome extension here and I can choose to pick a color from the web and I can get it that way if I wanted to or and once I get it I'm just going to place it in there another way you can get these colors is to actually just go in to the the module and just look what colors we're using get the code and then paste it in there but right now what we're doing is adding our background color to be this matching purple and then I'm just going to take down the opacity so we can see through it a little bit that looks good let's go ahead and change my active link color to this green as well there you go and then um what else it's go ahead and change our drop-down menu background color to the to that purple as well actually let's go ahead and make it this green we can keep it simple let's just leave it the same color all right and then drop down menu line color let's go ahead and make that one the green one so I'm just using our two main colors there to just kind of give us a look we don't even have any dropdowns but once we have that set up there I want to make sure my drop-down text since we are on in here just make it white so to show up I don't have my logo I do let's go ahead and put a custom logo in there now that we have that but we're gonna do that in a moment I'm going to go back to once we have our primary menu setup up looks like my text is still black let's go ahead and change my text to white there we go that looks a lot better save and publish that alright let's go back and let's go to our footer settings and let's change our bottom bar the bottom bar is this black bar by default and we're just going to change that to the purple for now hope that's not the purple just make it a lighter purple all right and let's make our text color whites make our social icon color white and there you go it looks good save and publish that now we have a footer or a bottom bar here and a top header there that matches I'm gonna exit out of my theme customizer for right now and I'm gonna add my logo normally what to do that I'm going to my dashboard go to Divi theme options and then here under general tab just click upload and I'm going to add in this logo here from my downloads and then set as logo and then Save Changes now I want to look at my site I should have a new logo sorry about the green on purple for those of you I think Ginny doesn't like it too much for the help though I think it's okay appreciate the feedback let's see alright so we need to set our homepage so to do that let's go to our settings to reading and for our static we're gonna for the front page our static page should be our home so let's click that one I'm going to leave the post page blank since we are going to be using a blog module for this layout all right so now when I go back alright my home page ok so there you go got my new logo got everything set up now let's go ahead and we're going to be needing some of these elements so I'm going to actually go to my contact page so one of the great things about this these layouts is that Ora Divi in general is that you can you know take elements to be used elsewhere on your on your website so let's say I'm going to need to build some more pages but I like this heading and I want to keep it consistent so I'm going to enable my visual builder on this page and I'm going to save this out so let's say I like this section here let's actually go to my let's go to our courses page be a better example and let's enable the Divi I'm sorry the visual builder and I'm gonna grab this top section here and I'm gonna save it to my library so I click up here to my section and I'm gonna click Add to library I'm just going to call it you know header section I could make it a global item if I if I need it to but not for now I'm just gonna save it out so now I have a header section to be used on other pages also going to want to use this little box that's been stylized so I can put content in it it's actually a blurb but I like the way the shadows are I want to keep that consistent throughout my site so I'm going to go ahead and save this to my library just call it a blurb content box add that to my library I may want to add this footer section down here so let's go ahead and grab this just call it footer CT a call to action save that's a library I may need that all right so let's go back to our home page maybe I need this button here I like this button I want to use it somewhere else on my site so let's go ahead and grab it for now in case we need it wrong button just go ahead and save I'll call it green button save the layout all right all right so now we're going to be we're gonna have to create a course page in a little bit so there's something we don't have so the way the site's currently set up we have you know a courses page which takes you to this you know the list of all of your courses and if you click on one of them the links don't work we're going to update those but you can and then let's say I want to click to this UX design lesson this will pop up a course page called UX design and then it has all the chapters of each course but what we don't have is a specific lesson here a page or a chapter page for this and call it a lesson page so if I click on chapter 1 there's no corresponding page we need to build that one so and then that's going to be kind of the lesson that we walk through so I would think of these kind of as lessons and our modules if you used LMS as before this kind of thing so we need that page to be created so let's go ahead and do that first though I'm gonna go back to my we need a widget area we're going to be using for our course page that doesn't or a lesson page that doesn't exist yet so to do that I'm going to go to the widgets now this of course is where you normally store your default sidebar stuff I'm going to create a new widget and I'm gonna call it UX design and this is going to be the widget where I'm going to kind of put stuff for my specific courses so for each of your courses I would create a specific widget for that and that way you can pull that widget using the sidebar module which I'll show you in a minute to display it on your page so I'm going to create that one and refresh and that should create my widget now we're not going to add anything in it yeah but we need to create the the widget and now if I go back to my course page notice in the URL unlived yeah you can see that it still says course I'm gonna want to change that sorry click the wrong button okay so I need to change the name so I'm gonna change it to since it is a specific course I'm going to change it to UX design all right and then this should be design permalink well while I'm on permalinks I'm going to update that I'm gonna make sure and you're going to want to make sure and make set your permalinks if you haven't done so already so under settings permalinks and I went ahead and set it to post name here and then Save Changes alright so now I have a page called UX design which was our course page and of course you're going to add another one for every single course that you're offering so make sure that's updated so now that that's created we're going to create a new page and this page is going to be our lesson page so if I go back to my courses page layout here notice it says UX design now I'm gonna want to put that underneath courses but I'll do that not no later you'll see this first chapter that's what I want to create so I'm going to grab this title here and in my new page I'm going to call it chapter 1 introduction to the basics then I'm going to use the Divi builder to create this page now I've added some elements to my library already but for this I'm going to actually use a layout all right copy the layout that we have for our course um let's go ahead and get that one from our lay our library let's go ahead and load that in there all right so I went ahead and I'm gonna publish that I'm gonna go to my visual builder but before I do so over here under page attributes there's a spot here for adding a parent so I'm going to add the parent to be UX design and so that's a it's a that way it'll be listed underneath UX design whenever we have menus and stuff like that but also if you notice if I update this and you look at the permalink URL it happened now has you know UX design before it lists the chapter so it's a good kind of organizational strategy there all right let's go ahead deploy a visual builder and we're going to change this header we're actually going to make it into a one column structure I'm going to delete my image module there I'm going to delete my button and I'm just going to change this title here I'm going to enter in our title but I do want UX design up there so one good thing I can do is I'll just add another module let's just add another text module real quick and let's put UX design in there and let's you know change the text to be a little bigger and let's bring it down some that way we'll know that we are on the UX design course just bring it up to the top there so now we have UX design and in the chapter alright so down here I'm gonna want to change some of this stuff let's say I want to add a video so I'll go ahead and add a video because if it is of course you're going to want to probably offer videos to show you how to do stuff so if I go ahead and add my video using my video module there and then I'm gonna actually generate an overlay for that alright there's some other design elements I need to do like for instance this box shadow I can do that in the design tab go in the box shadow now I know what it is because I have it listed here but if you want to just go in here and and find out what this settings are and then copy it over so that it matches so let's get that one gonna be 0 0 zero and then let's give this blur strength a sixty there you go let's tone down our shadow color there alright that looks nice now one thing I'm going to want to do is maybe feature this at the top so to do that I'm going to drag it up there that's going to do something a little funk well no that works ok so now it has taken on my my row here margin so there we go we have a video showcasing at the top I probably want to change this content I like this kind of layout too to kind of walk you through a lesson so maybe I change this to like step one and then I go in here and maybe give sorry another content tab just go down to image and icon and let's use an icon here and let's select I know this and you know since it's pulling our theme accent color there that looks pretty good and then I can just of course change the content as I want but I like the way that looks and I can duplicate it a couple of times just to give you a feel of what it would look like and just kind of change this to step two and so on so alright that's good enough all right over here we don't really need this so what we're going to do is erase this one but we are going to oops I probably should have sorry I got too quick there I'm gonna actually add a sidebar module to here so this is where we're going to be putting our our list here so I'm gonna sorry the sidebar so now that I have my sidebar module there make sure to go back to our alright so you can see it's pulling in our our widget default widget which is the sidebar but I wanted to pull in this UX design widget area that we created earlier which doesn't really have anything in it yet so if but I need to go ahead and add something to that one so let's go ahead and do that actually I'm gonna wait on that because I'm gonna need those links the pages to be put in there so first we just need to create some alright so let's go on they add a video module we did that one one thing we can do I'm not going to do it right now but you could add a post navigation down here if I had time I'd show you but the the post navigation were to allow you using the post navigation module I should say would allow you to toggle through the certain lessons according to their category or something like that if you were using posts or something like that you could do that that's another option all right so let's go ahead and save this page template so now that I've created it I'm gonna save it out add it to my library call it a lesson template because I'm gonna use it again alright and let's go ahead and add another page and we're going to call this one let's just call it chapter to create one more lesson here use the Divi builder let's go ahead and use the visual builder here and I'm going to add from library sorry let's go down here add from our library the one we just saved out so speed up sometime here now that we have our lesson template then we're gonna go in here and just change the name out alright so chapter two very good publish it and I'm gonna go ahead and edit this page because I want to make sure and add this parent here as well I get UX design update so now that I have two posts that's probably good for time I know so this is going I probably won't have as much time to go into my plugins as much as I would like to but this will at least set you up so under Divi I'm sorry appearance under menus I need to add another quick menu this is going to be my lessons menu in the sidebar so create a new menu I'm gonna call it UX design and once I create it I'm going to add in these elements here notice because I made it a parent you'll see it kind of organized underneath it you know I had two menu actually I don't need this one for this I'm gonna delete it but I do want the chapter one in chapter 2 of course we would have more and then I'm gonna save it out now that I have this menu saved I can go into my widget area and I can go ahead and add a custom menu here make sure and select the UX design and save it out alright so now since I'm over here in my my specific lesson go back to my lesson page here the visual builder alright so you can see that the there it is there's my sidebar I just need to go in and you know style it up a little bit but this will serve as my lesson sidebar there kind of walk you through so maybe I add a you know box shadow like we've had before tone down this color a bit alright maybe I'll need to give it some spacing we will match the margin so I'm gonna give it a minus margin there 20 20 20 and then 20 on them on the padding alright it looks like I need to make sure and change my background color change it to white all right and there you go that'll serve as my menu so we have about 10 minutes left if you're just joining us we're going over our learning management layout pack and basically turning into a functioning eCourse and and so if you want to access that layout pack you can in the description below and of course you can learn more about Divi in the link below as our above as well so right now we basically built our lessons here our lesson pages and we created a sidebar for our lessons with us menu according to our specific course which is UX design and now for the remaining minutes I'm just going to make sure and just upload a couple of these plugins here go to my plugins page I'm going to add a new plug-in and go to my downloads folder oh sorry upload first one is WP complete I'm going to install that one activate it all right update it it's going to add a new one too as well upload the restrict content Pro activate plugin it's not letting me oh wait yeah there it is okay great so now I have both of those plugins I'm gonna go to settings go to WP complete settings here and of course I would want to change this color but for now I'm just gonna leave it the same basically what this is going to do is well I'll show you but I'm gonna click automatically uncheck automatically add a complete button because we're going to do that ourselves change this to page types because we're going to add it to a page not a post and I'm going to save those changes there and then I'm going to go to my page and I'm gonna find my page that I want to actually track and I'm going to edit it and then down here I'm gonna sorry use my visual builder here I'm going to add a shortcode you'll see it's going to add some functionality there so I'm basically I'm just going to duplicate this erase this let's just go ahead and add there's a shortcode that they give you you can find it on the site but it works with the plug-in and basically it adds a button so I'm just going to add it in here just so you can see um I'm gonna click Save save the layout there alright and I'm gonna exit a visual builder it should show up our button there hopefully nope not yet that's probably because I have to go in here edit the page and there's a little section down here that I need to click enable complete button sorry I forgot that and this is part of code school I'm gonna update that now when I go back to it you'll see a button and it says click me to complete and and so actually I'm going to do something really quickly well actually once it is all set up I'm just going to show you a working one here what it's going to look like for you since we're about out of time one second so using the short codes what it's going to look like is a lot like this so you have your lessons here and once you click a lesson completed down here it's gonna actually mark it complete on that menu for you and it also keeps track of it with a little bar which is pretty awesome I think so make sure to check out that plug-in and use it and it keeps track of it for you we of course I failed you I didn't have much time to get into our membership site but with your restrict content Pro you you'll want to of course go into your subscription levels and just to show you what how I have it set up here you can set up a free subscription level and a premium and then you can go in and use the the short codes because it's going to display certain pages using short codes and you're going to basically build you can use your layouts your custom Dibby layouts to add to build your your whatever layout you want and then you just plug in that short code inside of a module for instance to display all those custom layouts so I'm going to actually stop there and maybe get some of these questions that I know I won't have time to answer fully but I know my team has been diligently doing that but let's go ahead and check out a few here so it looks like my I might have been going too fast for some of you and the sounds going in and out but okay all right so I'm going to toggle out of this for a moment let's look at some of these looks like we were having some issues with the screen hopefully it didn't mess you up too much a lot of thumbs up great let's see alright so again sorry for the letdown on the membership side but it's pretty straightforward using that plugin but that's it that's all I got for this week thanks for tuning in I've made some notes I'll make some more notes on the questions that you have and maybe we'll get to answer those maybe sometime later and a follow up be sure though to like our Facebook page subscribe to our blog newsletter and keep an eye out for our next freebie coming out on Monday so excited about that I'll be back here or someone will next Tuesday to do the same thing for you for the next layout which you can get a sneak peek of this Friday on the divination podcast so thanks again guys and I will see you soon

Channel: Elegant Themes

Views: 30,056

Keywords: Divi, Divi 3.0, Visual Page Builder, Learning Management Website, LMS, WordPress, Jason Champagne, Restrict Content Pro, WPComplete

Id: suRaBN9vlEY

Length: 61min 4sec (3664 seconds)

Published: Tue Oct 24 2017