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, free Divi Layout Pack from our design team to you.

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 georgeous 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!

divi layout

Check Out The Divi Layout Pack
for Learning Management (LMS) Below

Download For Free Today!

e-course layout pack

Landing Page Design

e-course landing layout

View The Live Layout Demo

Home Page Design

e-course home layout

View The Live Layout Demo

About Page Design

e-course about layout

View The Live Layout Demo

Blog Page Design

e-course blog layout

View The Live Layout Demo

Contact Page Design

e-course contact layout

View The Live Layout Demo

Marketing Page Design

e-course marketing layout

View The Live Layout Demo

Courses Page Design

e-course courses layout

View The Live Layout Demo

Course Page Design

e-course course layout

View The Live Layout Demo

Pricing Page Design

e-course pricing layout

View The Live Layout Demo

Key Features

This layout pack provides you will all of the necessary page layouts for any e-course website. It includes an excellent marketing page to promote your course(s). The courses page displays each course along with its brief discription in 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 fullwidth layout. Make sure you have quality featured images for your posts to accommodate for the fullwidth layout. Also, make sure to go into the blog module on the blog layout and select the categories you want 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.

  1. Learning Management Landing Page (live demo)
  2. Learning Management Home Page(live demo)
  3. Learning Management About Page (live demo)
  4. Learning Management Courses Page (live demo)
  5. Learning Management Course Page (live demo)
  6. Learning Management Marketing Page (live demo)
  7. Learning Management Pricing Page (live demo)
  8. Learning Management Blog Page (live demo)
  9. 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 Divi Daily email list 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.


You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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.

e-course layout add to library

No Licensing Restrictions

coding school image collage

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!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

The post Download a Free Breathtaking Learning Management (LMS) Layout Pack for Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!