The Focus Mode panel is one of the areas we offer the most customization. First, let’s briefly talk about what 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?
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
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
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.
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
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.
First & Last 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
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.
“Reply” buttons will always have a 1px border & text color of semi-transparent black.
NOTE When background colors are applied to comments, each comment will inherit the Global Border Radius set on the General Design panel.