Make Divi Builder Full-Width on Learndash Course Pages

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

Divi Booster adds the option to use the Divi Builder on custom post types. By default, the Divi Builder layout will be placed wherever the text typed into the regular edit box would have gone. This placement is determined by the custom post type and not easily overridden in the general case. However, it is possible to adjust the placement of the Divi Builder layout on a case-by-case basis. Here is how to do it for Learndash Courses.

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.

Adding the Course Content to the Divi Builder Layout

After making the Divi Builder content full-width, you may find that the course content section appears below the Divi Builder content. But what if you want to place the Course Content section within the Divi Builder layout itself? One way to do it is by using the course content shortcode, as described in this LearnDash post.

Place the shortcode for your course content in a Divi Builder "Code" module and your Course Content section should show up in the correct place within the Divi Builder layout.

You will still have the original Course Content section at the bottom of the page, but you can hide this by adding the following CSS to your site:

.entry-content > .learndash_post_sfwd-courses > #learndash_course_content { 
  display: none !important; 
}

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 *