Skip to main content

Quick start

This guide gets your LearnDash design matched to your brand in about 10 minutes. You'll set a handful of global values, and every other panel picks them up automatically. Fine-tune individual panels later, only where you need to.

Before you begin, install and activate Design Upgrade Pro, then reset LearnDash's color settings.

Step 1: Open the Customizer on a lesson page​

Visit a lesson on your site while logged in as an administrator, then click Customize in the admin toolbar. Open the LearnDash Design Upgrade panel.

A lesson page shows the most LearnDash elements at once: buttons, the progress bar, course navigation, and Focus Mode, if it's on.

Step 2: Set your five color hues​

Open the General Design panel and set the five hues. Each hue generates lighter and darker shades automatically, so you only pick one color for each.

Primary hue​

Use your main brand color. It colors buttons, link hovers, tooltips, and other interactive accents.

Neutral hue​

Use a gray, or a gray with a hint of your brand color. It colors surfaces, borders, and secondary text.

Success hue​

Use a green, or any color that reads as "done". It colors progress bars, correct answers, and completion states.

Warning hue​

Use an amber or orange. It colors in-progress states and warning alerts.

Danger hue​

Use a red. It colors incorrect answers and destructive actions.

Step 3: Set your corners and borders​

Stay on the General Design panel.

Global border radius​

Set how rounded your containers, alerts, tooltips, and menus are. Use 0 for square corners. Higher numbers give softer corners.

Border color, Border width, and Bold border width​

Border Color is optional. Leave it empty and borders follow your Neutral hue. Border Width (default 1 px) sets thin dividers. Bold Border Width (default 2 px) sets emphasis borders, such as alert and lesson outlines.

Step 4: Set your text​

Open the Typography panel.

Set Text Color if LearnDash's text doesn't match the rest of your site. Leave the size tiers empty to keep the defaults, unless your theme's text looks noticeably larger or smaller.

Set Link Color if you want links to stand out from the surrounding text.

Step 5: Match your buttons​

Open the Buttons panel and set Button Border Radius to match your theme's buttons. Button colors already follow your Primary hue, so you only need to change them if you want something different.

Step 6: Review and publish​

Click through a few LearnDash pages inside the Customizer preview to check your design:

  • a course page, to see course content lists
  • a lesson or topic, to see Focus Mode and navigation
  • a quiz, to see the Success and Danger hues on answers

When you're happy, click Publish.

Step 7: Clear your cache​

If your site uses a caching plugin, a CDN, or host-level caching, clear it after publishing. Otherwise, logged-out visitors may keep seeing the old design for a while.

To check your design as a student sees it, open your site in a private browser window.

Where to go next​

Your global design is set. From here:

Last updated on