Make Divi Builder Full-Width on Learndash Course Pages

Written by Dan Mossop

When you use Divi Builder to edit a Learndash course page, by default the visual builder is only available on a relatively small part of the page, like so:

Here's how to make the visual builder area extend the full width of the page.

Make the Course Page Layout Fullwidth using Divi Learndash Kit

 Divi Learndash Kit adds a "Fullwidth" option to the Page Layout setting shown below:

Note: If you're in the visual builder, you can access this option by selecting the 'Edit Course' link in the black admin bar at the very top of the page.

Setting the Page Layout to Fullwidth now makes the visual builder available for the full width of the page.

Make the Course Page Layout Fullwidth using CSS,

For the Learndash course pages we can make the Divi Builder layout full-width by hiding the other elements on the page / removing some excess padding. This can be achieved with the following CSS code:

.single-sfwd-courses .et_post_meta_wrapper, 
.single-sfwd-courses #sidebar, 
.single-sfwd-courses #main-content .container:before,
.single-sfwd-courses .learndash_post_sfwd-courses br,
.single-sfwd-courses #learndash_course_status { 
    display: none !important; 
}
.single-sfwd-courses #left-area, 
.single-sfwd-courses #main-content .container { 
    padding: 0 !important; 
    margin:0 !important; 
    width: 100% !important; 
    max-width: 100%; 
}
Once added to your site, the Divi Builder layout will occupy the full area of the Learndash Course pages.

Seamlessly Integrate LearnDash with Divi!

Elevate your LearnDash LMS with the Divi LearnDash Kit from Divi Booster. This plugin adds custom LearnDash modules to Divi, resolves compatibility issues, and supports Divi design settings, creating a cohesive and visually appealing learning environment. Perfect for making your course pages full-width and integrating smoothly with Divi.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

7 Comments

  1. Hi, how can I get a refund? The plugin doesn't work.

    Reply
    • Hi Ben, I'm sorry to hear the plugin hasn't been working for you. If you'd like some help with the problem you've been having, please feel free to send through some details (with a link / screenshot if applicable) and I'll do my best to resolve it for you. Otherwise, just let me know and I'll happily put through the refund for you without further delay. Thanks! Dan

      Reply
      • Hey Ben, I've just issued a refund as per your email and you should receive confirmation shortly. If you ever want to revisit the plugin let me know and I'll be happy to look into why it wasn't working for you. Thanks!

        Reply
  2. Bought the plugin. Doesn´t work!

    Reply
    • Hi Andrés, I've very sorry you're having problems with the plugin. Are you able to describe in more detail the issue you're having, so that I can look into it for you? E.g. is it just the option to make the course page layout fullwidth that isn't working for you or other features of the plugin too? Are you able to point me to a specific part of the site that you're trying to change? Thanks!

      Reply
  3. Thanks guys

    Reply
  4. Thanks a lot for an awesome tip

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.