LearnDash + Divi – Issues & Solutions

If you’re using Divi along with LearnDash, you might be running into some issues. The most common issue is that the LearnDash Focus Mode width you set in your LearnDash settings is not being respected. Content is appearing on the page with a very small width, as opposed to taking up the full screen or full width of the content area.

This article will explain all the issues we’ve found with Divi & LearnDash, and provide solutions for fixing them.

Course Grid in 1 column? Grid CSS not loading? Here’s the fix.

Is your LearnDash course grid CSS not loading? Perhaps your courses are only being displayed in one column, instead of 3 or 4 columns. This is a common issue when using the course grid with Elementor, Divi & other page builders.

Let’s fix this problem and make sure your course grid is displaying exactly the number of columns you told it to (using the col="X" parameter).

How to Change the “Leave a Comment” Title in Focus Mode

Focus Mode comment title custom text example
LearnDash Focus Mode comment title

If you’ve enabled comments in Focus Mode, the default title that appears before the comment box reads, “Leave a Comment.” This works fine for traditional blogs but it doesn’t always make sense for a LearnDash lesson or topic.

This article will show you how to use custom text instead of “Leave a Comment.”

LearnDash Course Grid Returns No Results? Show a Custom Message.

When using LearnDash course grid parameters to customize the output of the grid, some users or instances might return no results. By default, when the course grid doesn’t show any courses, the area is left blank. But what if you want to display a custom message in place of your grid when no courses are available?

This article will show you how to do that.

Design Upgrade Compatibility with the Elementor for LearnDash Add-On

On July 30, 2020, LearnDash released a new integration that adds support for the Elementor page builder. Compared with the Design Upgrade Pro plugin, there is definitely some overlap in the features that they each provide. But there are also a ton of differences.

This article will discuss how the pro version of Design Upgrade for LearnDash works with the new Elementor for LearnDash integration. We’ll cover the pros & cons of each, as well as how they work together if you decide to use them both.

Enter WisdmLabs Ultimate Elearning Giveaway

WisdmLabs is awarding 3 lucky winners over $1,000 worth of LearnDash plugins (and their eLumine theme) in their Ultimate Elearning Giveaway. Enter for a chance to win this awesome package, which also includes our very own Design Upgrade Pro plugin.

Enter the Giveaway →

Move the LearnDash Focus Mode Sidebar to the Right

We’ve previously showed you how to adjust the focus mode header height, and apply a background color to the focus mode header. In this article, we’ll continue customizing LearnDash’s Focus Mode by moving the navigation panel (aka: Focus Mode sidebar) from the left side of the screen to the right.

I’ll walk you through all the CSS and explain what each piece of code is doing, and then provide the full CSS to copy/paste at the bottom.

Use a Custom Background Color for your LearnDash Focus Mode Header

There are a few questions I routinely get about the LearnDash Focus Mode header. I’ve previously explained how to use a custom height for the focus mode header, as well as move the focus mode sidebar to the right. In this article, we’ll take a look at applying your own background color to the entire LearnDash Focus Mode header area.

How to Change the LearnDash Focus Mode Header Height

I’ve had a few users ask if they can change the height of the header in LearnDash’s Focus Mode. The answer is yes, and this tutorial will provide the exact CSS you need to use.

LearnDash Focus Mode Edge-to-Edge Content for Page Builders

In our Design Upgrade Pro plugin, we offer the ability to set LearnDash Focus Mode content to run from edge-to-edge. The left navigation bar will still be present, but the rest of the content area will span from the right edge of the navigation, right up to the right edge of the user’s browser.

This is great for those creating content with page builders. You can use your own spacing via the page builder elements/widgets, and build more creative layouts.

Our plugin only provides the option to do this globally, for every single piece of content in Focus Mode. This includes all lessons, topics & quizzes. But what if you want to only apply it to topics? Or only to quizzes? This tutorial will show you how.

Page 7 of 12