Make Divi Builder Full-Width on Learndash Course Pages

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.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Thanks guys

    Reply
  2. Thanks a lot for an awesome tip

    Reply

Submit a Comment

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