Hey Divi Nation, thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.
I must admit, like a lot of you, I look forward to this post every week. The design team just keeps on surprising us with gorgeous layouts. And this layout pack is no exception. Today, I’m excited to share with you a learning management system (LMS) layout pack perfect for any e-course website.
Thinking about teaching a course online? Need an upgrade for your current e-course site? This 9-page layout will give you the headstart you need in just a few minutes. And don’t forget, this offer includes all those beautiful graphics, icons, and images as a free download as well!
Landing Page Design
Home Page Design
About Page Design
Blog Page Design
Contact Page Design
Marketing Page Design
Courses Page Design
Course Page Design
Pricing Page Design
Key Features
This layout pack provides you will all of the necessary page layouts for any e-course website. You can use these templates along with any LMS plugin to give you a headstart in creating your course. It includes an excellent marketing page to promote your course(s). The courses page displays each course along with its brief description in a well-designed grid layout, perfect for listing any amount of courses. The CTA at the bottom of each page is also a really smart addition.
The blog page uses the blog module to display your posts in a nicely centered full-width layout. Make sure you have quality featured images for your posts to accommodate the full-width layout. Also, make sure to go into the blog module on the blog layout and select the categories you want to be displayed so that your posts will show up.
Live Demos
Click the links below to see a live demo for each of the layouts included in the pack.
- Learning Management Landing Page (live demo)
- Learning Management Home Page(live demo)
- Learning Management About Page (live demo)
- Learning Management Courses Page (live demo)
- Learning Management Course Page (live demo)
- Learning Management Marketing Page (live demo)
- Learning Management Pricing Page (live demo)
- Learning Management Blog Page (live demo)
- Learning Management Contact Page (live demo)
Download The Layout Pack
To use the Code School Layout Pack on your own Divi website, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
How To Import The Divi Layout
Subscribe To Our Youtube Channel
Once you have downloaded the layout pack, locate the divi-code-school-layout-pack.zip file in your downloads folder on your computer. Double-click the folder to unzip it and then navigate inside the divi-code-school-layout-pack folder. Inside this folder, you will find 8 files, each of which is a unique layout that you can import into your Divi Library. To do so, navigate in your WordPress Admin to Divi > Divi Library > Import & Export. You can select the individual layout you desire or choose the All Layouts file to important everything at once.
- Coding-School_All.json
- Coding-School_About.json
- Coding-School_Blog.json
- Coding-School_Contact.json
- Coding-School_Marketing.json
- Coding-School_Landing.json
- Coding-School_Pricing.json
- Coding-School_Home.json
- Coding-School_Courses.json
- Coding-School_Course.json
To load one of these layouts onto your page, activate the Divi Builder and then look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup and then navigate to the Add From Library tab. Here you can choose any of the eight layouts we’ve included in this pack to add to your page.
No Licensing Restrictions
The photos included with these layouts have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.
Download the Full Res Image Assets
But Wait…There’s More!
We hope you enjoy this E-Course Coding School layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page this Tuesday at 3pm EST to walk through what it might be like to actually use this layout for your own e-course website. We will be covering design changes, membership setup, integrating WooCommerce, email optins, and more.
See you there!
Thanks for this freebie!
I do not know why, but at home, in the second session, with 8 text boxes and icons, on the right, the texts are blurry, I tried but could not fix it. In other places the texts appear without any blur.
Can you tell why this occurs only in this session?
Wow! Awesome. Thank you.
Hi Nick,
If there is somewhere where users like me can place request with samples of demo which your future monday’s layout can be..it would be great!
Breathtaking is the right word for it!
Thanks for sharing!
What a fantastic post! The information is very useful. Thank you for sharing this here.
OMG. The value with Divi is off the hook. Using Divi and all the resources that come with it has revolutionized my business. Thank you to all the people that put in the hard work behind the scenes to make this possible!
Hi, is there also a layout pack hotel / apartment?
this is why divi is #1, great layout
hello sir i watched your all videos on youtube
Great. Could we have a Micro-finance site / accounting transactions site. Thanx in advance!!
Great layout indeed but still issues with overlay in IE11 or Edge.
Also images are not correctly displayed in IE11. For example “Build your portfolio”: Image is 50% behind the text and should be next to it.
I noticed quite a lot that CSS is not correctly generated in IE (wrong order) and is a pity as Divi is a great product.
This is completely awesome! Can’t wait to actually use it! Thank you so much. Ya’ll ROCK!
Tnx for sharing. Great!! good job!
Is anybody having trouble viewing the pictures once you uploaded it to a page. I do not see any content, pictures or animations unless i’m in the visual builder.
Help will be highly appreciated it.
Thank you
This is beautiful! Thanks a lot for this!
Is there a PSD File for this pack tho?
Thank you!
Thanks! This is really useful.
Well done. Divi is just perfect.
I wonder if you can you make in the future
a kind of “real life” layout,
like the one you can see in my URL.
Thank you very much for DIVI
Beautiful layout! How can we make this work with Learndash or LifterLMS?
I really hope someone gets on here to answer this question. Everyone seems to be asking the same thing. How can we make this work with Learndash LMS?
why does your page keep asking me to join to download even after i’m logged in. it’s insane. i’m on a 30 day trial and you’re making a horrible impression.
Who illustrated those vectors? They are great!
The layout is great to see but it is not a real LMS pack : how to attach it to LearnDash or any other LMS system ? Where are the course / lesson page ?
Same question.
Thanks for sharing!
Now that you guys are so busy with graphics and such, when can we expect to see an update on the ET icons font? Either that, or — even better– a switch that lets users use other icon fonts (or icon files, like the upcoming FontAwesome 5 SVGs) where ET icons can be used now….
Bonjour,
c’est super d’avoir des mise en page gratuite, mais elles sont plutôt fades, je préfèrerai en avoir moins mais plus élaborée…
Another great layout guys. Love the way the actions are connected with overlap.
Really beautiful thank you lots !! I love this 🙂
This isn’t a Learning Management System. Your wording in the title and introduction is misleading. WordPress is a Content Management System already, and CMS and LMS share some similarities but LMS does some things not available in a CMS. This is a website template for creating a front-facing website (here- a marketing website to sell a service) for visitors on the WordPress CMS. Nick Roach, please work harder to publish accurate wording on your blog. Don’t mislead readers and members.
Dude, this stuff is FREE … not sure what’s so misleading about it …. 😉
If you don’t know, you can create anything with WordPress 😉
This template is for someone creating a LMS website with WordPress. There are lots of great plugins that can help you do that, but you still need to design the website. That’s where this layout and Divi comes in.
I have to admit, the title totally threw me, too! I posted a comment on the other article with the tutorial for this and am realizing in reading the comments on this article, my questions may have been way off.
I was under the impression this could REPLACE Learndash as an LMS. Totally misunderstood it.
Now I am wondering, does it work well with Learndash LMS as a design feature, I guess? Nick? What sayest thou?
Hey this is great, what LMS plugin do you guys recommend? I’d love to use this 🙂
These design examples are great, so please keep them coming. I do note though that because of the use of overlays with the backgrounds, this design does not render well on browsers like Edge and Explorer, which do not support overlays as yet.
I love the creative potential – but can we actually afford to use these features when they only work on certain browsers?
I love you guys! Thank you so much for your awesome work. Nick – you’re amazing, thanks for being you and for your extreme generosity.
Thank you so much for this layout. I would love to see, next, a layout for portfolios. Are you planning on doing that?
Thank you ET team <3
The images doesn't show in this page + the last blog post, I used vpn to make the images appear!
Wondering if anyone knows if these template with play nice with Learndash?
I have the same question! Also, Jerry, what are you using to process payments for Learndash? Can I just connect it to my paypal account or do I need a full ecommerce solution?
Trying to cut down on costs. Very tiny budget.
Oh, and do you offer LIVE classes, like through WizIQ? Wisdmlabs created a plugin to integrate WizIQ Live Classes with LD, not working well for me though.
Thank you very much, very nice work.
Great looking layout!
Question though, when I view the demo in Chrome or Firefox, the background is purple. When I view the demo in MS Edge, the background is grey?
There are also background issues on the their other recent layout pack… https://www.elegantthemes.com/preview/Divi/design-agency-landing/ … And this is the only mention of it on the comments of either post. ??? I guess it goes to show how popular the MS Edge browser is these days — at least with web designers!
I’m also getting http errors when i am using these on a site w/ https SSL certificates> Backgrounds and other image elements are broken. How can I easily fix this?
When will the Creative Design Agency layout be available?
I was ydby the end of this month.
This is wow! What a great gift! Thanks 1000 times!
Another excellent freebie, thanks guys!
Very impressive set of pages and design!
Great design.
What would you recommend as a payment system to integrate that gives the user login access behind the paywall?
In the Facebook live today they show how to use it with WP Complete and Restrict Content Pro
I’m using WP Complete and Woocommerce Memberships for my LMS and it works great too (I was already using Woocommerce, so it made sense to keep using it). These new layouts look far better than what I designed for myself though…. I think I’ll need to do a refresh. 🙂
Thanks, Loralee! Appreciate the response 🙂
Fantastic layout, Great Job!!!
The new layouts look very, VERY good! Thank you!
The only problem is that they’re not SEO improved. For example, the same page have multiple H1 (heading 1). Bad.
So then, changing H1 for another heading (H3 for example), they lose the style.
It would be nice (even better), if you can pay attention to SEO good practises.
Thank you very much!
this is solved with the font settings in every module.
cant see it in firefox and chrome.
Looks beautiful. How do I download this as a lifetime member? It keeps asking me to join even when I’m signed in. Thanks.
I am a Lifetime member and keep seeing this free things but when I go to login I’m not sure where I find them to access them. I did see a post above that in a couple months these should all be in the members area but until then can you direct me please where to go? Thanks.
Also I already have an appointment during tomorrow’s live stream. Will there be a recording on You Tube or another way to watch it?
Also you need to disable ad blocker add-ons in your browser. Otherwise you sometimes don’t see the download link.
Hey Jamie,
You can click on “Download For Free Today!” and it will automatically scroll you to the subscribe form. All you need to do is enter your email address and the download button will appear. If you are already subscribed it will not subscribe you multiple times.
The video will be available on our Facebook page: https://www.facebook.com/elegantthemes/
This is awesome. However, wouldn’t this be better described as an E-course marketing pack? It doesn’t have lesson/module pages or a learning interface. Would be functional for marketing your course for sure.
I agree too! I’ve put together a layout for myself with WP Complete and Woocommerce, and this layout pack will be an awesome complement to it – but it would be really cool to have the lesson page included in the package.
Yes I agree. Was all excited LMS but then oh it’s missing parts… Like student login, actual courses…. Yes needs to be course marketing.
I agree with Jane, Looks awesome but missing key pages to be useful for what we need.
Would have seriously considered converting from Social learner if it could integrate with Learndash.
Nice! This is my favorite layout pack yet!
Hi, impossible to download and display the demo, images don’t displayed in this page, pages are always downloading. Problem with cdn ?
Great!! good job!
I look forward for the new cloud library !
thanks for the great layout! any chance you can share a recording of the live webinar for us who can’t join, but want to learn from it??
You don’t need a replay simply go to the facebook page and it will be there when you are ready.
This looks really great. I already have a divi site–looks like these templates can be used on particular pages (course area) without having to modify my entire site, if i understand correctly. Fantastic, will download.
A lot of work and creativity has gone into the Layout pack and this post.
Plus “…the plan is to offer these layout packs via a cloud library available in the Divi Builder.” is great news 🙂
AI S, beat me to the punch on the “suggestion/complaint”, but that is good news Josh, for members to have a cloud based access to these amazing layouts, tools and so much. Elegant Themes is REALLY Delivering on their Promise, big Props to Nick!!!
Congratulations for achieving the next great milestone!
Looking forward to the webinar. Thanks.
Amazing !!! Thanks
Thanks Jason, excited to watch your live stream! Right before Divi Chat too, woot!
You people should really get a grip and add these to the member download area instead of lifetime members constantly having to subscribe each week to get a freebie. I tried to subscribe but it says I already and and I can’t download it. Why do you mess your members around so much???
+1
i love to read your blog, and newsletters, and i really love all the updates and freebies you are giving away all the time.
but yeah, i must agree, your site is maybe not built for returning users. it’s kind of complicated and sales focused on products i already have (lifetime user), so i’m not so interested in the ads for them 😉
but your content makes me wanna come back over and over again, which is a very good thing.
i am happy that you are more focused in the development in your awesome products than anything else if i had to choose
lifetime deal with you was one of the better web investments i ever did
They will soon be available right inside the Divi Builder 🙂 For now they are here on our blog, and you can download them by simply inputing your email address. If you are already subscribed, just input the same email address and the download button will appear.
I can confirm, this works. Can’t wait until the “Library” of Themes is created direclty within Divi.
Thank you for all your hard work time and time again Nick & Co.
Al S, if you can wait a few months, I believe the plan is to offer these layout packs via a cloud library available in the Divi Builder. No more need to download from the blog. While I agree the download process is currently less than ideal, it should still work. It’s worked for me in the past. =P
Thanks Josh that would be great. It’s a beautiful looking site and all credit to the very talented creator. I see it I want it, I want it, I want it! It was a chrome issue (maybe ad blocker) so I have it now via firefox. Exceptional work…