LearnDash Design & Tutorials

LearnDash Design & Tutorials

Tag: Focus Mode Page 1 of 2

The following articles will explain how to customize LearnDash’s focus mode design & layout. Move the sidebar navigation to the right, adjust the header height, apply different colors and more.

Explore all LearnDash focus mode customizations below.

LearnDash Focus Mode & Divi – Issues & Solutions

If you’re using Divi along with LearnDash Focus Mode, you might be running into some issues. The most common issue is that the 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 briefly explain the issues with Divi & Focus Mode, and provide solutions for fixing them.

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

Focus Mode comment title custom text example

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.”

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 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.

How to Enable Comments for LearnDash

With LearnDash, one of the easiest ways to encourage discussion amongst your students, as well as the instructor, is to use native WordPress comments. There are forum plugins and third-party live chat solutions, but using comments is a quick & simple way to allow for discussion to take place within your LearnDash courses.

There are a few steps to ensure comments are enabled for LearnDash. Let’s walk through each one.

How to Remove Bullets from Elementor Icon Lists in LearnDash Focus Mode

Many of you who use LearnDash also use Elementor to build your lesson & topic pages. This article addresses a very specific design issue when using the Elementor Icon List widget.

Elementor icon list with LearnDash bullet points

In LearnDash Focus Mode, Elementor icon lists have bullet points next to them, and this is not the expected behavior. This is because LearnDash’s CSS overrides Elementor’s CSS for icon lists.

I’ll provide the CSS to remove the bullets that LearnDash adds and return your Elementor icon lists back to normal.

How to Programatically Number LearnDash Sections, Lessons & Topics with CSS

Justin from the LearnDash Facebook group asked if there was a way to automatically add numbers before each lesson using the BuddyBoss theme + platform. I was pretty confident the answer was yes, so I rolled up my sleeves and got to work.

Not only can we do this for BuddyBoss, but I’ll provide you with the CSS to do this for all themes using the LearnDash 3.0 template, as well as those using the Legacy template. I’ll even throw in some code to auto-number lessons & topics in the Uncanny LearnDash Toolkit Dashboard.

This is the perfect solution for those who want to display lesson/topic numbers in navigation & course lists, but not include the number in the actual lesson or topic title. This way, the numbers don’t show up at the top of each individual page. They only appear when viewing lists & navigational elements 👍.

It also works great for those who switch lessons & topics around or use them in multiple courses with shared course steps.

How to Change the LearnDash Focus Mode Logo URL

When Focus Mode first came out in LearnDash 3.0, you could add your logo to the header of Focus Mode, but it didn’t link anywhere. It was just a static image.

LearnDash Focus Mode header image example

Starting in LearnDash 3.1, the logo now automatically links back to your site’s homepage. Personally, I see this as an improvement, but… what if you want it to link somewhere else? Or remove the link entirely and go back to how it was prior to 3.1 (not recommended)?

I’ll walk you through the steps on how to change the URL of the LearnDash Focus Mode logo, as well as provide a few examples.

Page 1 of 2

Powered by WordPress & Theme by Anders Norén