Focus Mode

How to Use Design Upgrade for LearnDash Focus Mode

The Focus Mode panel is one of the areas we offer the most customization. First, let’s briefly talk about what LearnDash Focus Mode is and how to enable it. If you’re already up-to-speed, skip right to the customization options.

What is Focus Mode?

LearnDash’s Focus Mode is an option that was added with the release of LearnDash 3.0. When enabled, all of your lesson, topic & quiz pages will be rendered in a streamlined layout & design, completely determined by LearnDash. Nothing that you have set up with your WordPress theme will apply. Headers, footers, sidebars… they’re all gone.

The idea is to create a distraction-free experience for your learners.

How to Enable Focus Mode

LearnDash Focus Mode must be enabled for it to take effect, and for any of our plugin’s design options to work. If you started using LearnDash recently, it should be turned on by default. But let’s check to make sure it’s on.

Navigate to LearnDash LMS > Settings
In the first section, Design & Content Elements, make sure your Active Template is set to “LearnDash 3.0”
Scroll down to the Focus Mode setting and toggle the switch on. You should see “Distraction-free course experience” next to the toggle.
(optional) Adjust your focus mode content width
Click Save in the top-right corner of the page

LearnDash Focus Mode is now enabled, and you can begin customizing its design with our plugin.

Focus Mode Customization Options

Now let’s dive into each available option.

Content Options

Content Width
- Inherit LearnDash Setting: This will use the content width setting from the LearnDash LMS > Settings screen. There are multiple options to choose from there.
- Edge-to-Edge: If you want to use a page builder for your content, or handle your spacing in the WordPress editor, you can choose this option. This will remove the padding on the left & right side of the content area, so your content will touch the left sidebar and right side of the user’s browser window.
Content Background: Applies a background color to the main content area of Focus Mode
Content Animation: Applies a subtle animation to Focus Mode content every time a new page loads. This only affects the content area, not the header or left sidebar. There are 4 options:
- Fade In Right
- Fade In Left
- Fade In Up
- Fade In Down
- Leave set to None if you don’t want to use this feature

WARNING
For the Focus Mode background color, we recommend something light. There is no setting to change the color of the text, which will most likely be very dark (this is determined by your theme). And there are an infinite number of elements that can be added to this area, so it’s impossible to style them all. Please choose your background color wisely.

Hide Content Elements

These next set of features are useful if you’re using page builders for your content, or just want an even cleaner layout.

Hide Page Title: Enabling this option will hide the page title at the very top of the page
Hide Breadcrumbs: Enabling this option will hide the breadcrumbs that are shown beneath the page title. The small label for “in progress” or “complete” will also be removed.
Hide ALL Bottom Buttons: Enabling this option will remove the next/previous navigation, mark complete button & “Back to…” link. Navigation & “Mark Complete” are available in the header, and a course link is provided at the top of the sidebar navigation, so you might want to remove these ones at the bottom.
Hide “back to…” Link: Enabling this option will just remove the “Back to…” link at the bottom

Header Options

The next set of options apply to the Focus Mode header.

User Display Name: This option allows you to change the name that is displayed after “Hello,” in the top-right corner. All fields are pulled from the user’s WordPress profile.
- Username (default)
- First Name
- First & Last Name
- Display Name

NOTE
If you’re using either “First Name” or “First & Last Name,” make sure you are collecting this information when a user signs up for your course. By default, LearnDash does not collect this information.

Avatar Style: Choose between either a circle (default) or square avatar to be shown in the top-right corner. The square avatar will be slightly larger and flush up against the top-right corner of the browser window.
Hide Avatar: Enabling this option will hide the user’s avatar in the top-right corner
Hide Name: Enabling this option will hide the “Hello, ____!” in the top-right corner

WARNING
Hiding both avatar & name will make the dropdown menu inaccessible. If you want to utilize a dropdown menu in Focus Mode, do not enable both.

The dropdown menu appears when hovering over the name or avatar in the top-right corner. These two options allow you to customize its design.

Dropdown Menu: Background: Applies a background color to the dropdown menu items
Dropdown Menu: Text: Applies a text color to the dropdown menu items

The Global Border Radius setting from the General Design panel is used for the menu’s corners.

A black overlay with 95% transparency is added on hover of each item. This cannot be customized with the plugin.

Sidebar Options

There are a few options for the LearnDash Focus Mode sidebar in this panel, but many additional options can be found in the Course Navigation panel.

Sidebar Background: This setting determines the color of the entire sidebar area. It is visible behind the text of all navigation items.
Sidebar: Course Background: This controls the background color for the top section of the sidebar that contains the course title
Sidebar: Course Text: This controls the text color of the course title in the top section of the sidebar, as well as the icon used for opening/closing the sidebar

The circle surrounding the arrow will always have a partially transparent black background, which darkens on hover.

Focus Mode Comment Options

The final set of options for Focus Mode allow you to customize comments, if you have comments turned on.

Focus Mode comments design options — An example of focus mode comments styled with Design Upgrade Pro

Comments: Avatar Shape: You can choose between 3 shapes for the avatars used in comments: Circle (default), Square, or Inherit Border Radius, which will use the Global Border Radius from the General Design panel
Comments: Background Color: Apply a background color to comments left by all non-administrators

All of the options prefixed with “Admin Comments:” refer to the style of comments left by an administrator on the site. This helps distinguish comments by admins from those of enrolled users.

Admin Comments: Background Color: Applies a background color to comments left by administrators
Admin Comments: Border Width: Dictates the width of the border applied to administrator’s comments. Leave blank for no border.
Admin Comments: Border Color: Dictates the color of the border applied to administrator’s comments. Both border width & border color must be set for either option to work.
Admin Comments: Avatar Border Width: Dictates the width of the border applied to an administrator’s avatar. Leave blank to use the default value of 4px, or enter 0 for no border.
Admin Comments: Avatar Border Color: Dictates the color of the border applied to an administrator’s avatar. Default is #00a2e8.