You must have the LearnDash Course Grid plugin activated, and use the LD Course List block or shortcode for these settings to be applied. Learn more here →
The free version of Design Upgrade for LearnDash makes a handful of improvements to the LearnDash course grid, including but not limited to:
- Adjust the price/enrolled ribbons displayed in the top corner of each grid item
- Improved spacing inside grid items, as well as between them
- Equal height columns, regardless of the length of your course titles and/or descriptions
Our pro version provides over 20 customization options. Let’s go through each set of options below.
The term “grid item” refers to each course, lesson, topic or quiz that you’re displaying in the grid. The first set of options allows you to change the look & feel of these items.
- Grid Item: Border Width: The thickness of the border of each grid item. Value is in
px. Leave blank to use the default
- Grid Item: Border Color: The color of the border of each grid item. Leave blank to use the default
- Grid Item: Border Radius: The border radius of each grid item. Value is in
px. Leave blank to use the default
- Grid Item: Shadow: The default is None, which means no shadow is added. If Shadow is chosen, a shadow is added to each grid item in its default state.
- Grid Item Hover: Add Shadow?: When selected, this option will add a shadow on each grid item when it is hovered over
- Grid Item Hover: Transform: This dictates what happens to each grid item when it is hovered over. The default is None. Lift will move the item up vertically
5px. Enlarge will increase the size of the entire grid item by a factor of
The next set of options affect the small ribbons that appear in the top corner of each grid item, on top of the image.
- Ribbon: Position: This option changes where the ribbon is displayed. By default, LTR languages will display it in the top left and RTL languages in the top right. But you can manually choose one or the other to override the default ribbon position.
There are 4 types of ribbons that LearnDash uses. Let’s discuss each type:
- Default: If you’ve set your course access mode to “Closed,” “Buy Now,” or “Recurring,” and set a price, the default ribbon will be displayed with the price you’ve set. Default ribbons are also used to show “Completed” status for those who have finished a course.
- Enrolled: If a user is enrolled in a course, they will see an enrolled ribbon that simply says “Enrolled.” This overrides any other ribbon type.
- Free: If you’ve set the course access mode to “Free,” and the user is not yet enrolled in the course, the free ribbon is used
- Custom: If you’ve set custom ribbon text for your course, LearnDash will display a custom ribbon
Design Upgrade Pro allows you to change the color of all 4 of these types of ribbons independently. For each ribbon type, you have two options:
- Background: The background color of the ribbon
- Text: The text color of the ribbon
The final set of options relate to the category selector, if you’ve chosen to display it. If you’re not using it, you can ignore these settings. To learn how to enable the course category selector, visit the official LearnDash docs.
- Category Selector: Width: “Full” will make the selector’s container fill the entire width of its parent container. “Inline” will limit the width to only what is necessary to fit the dropdown menu selector.
- Category Selector: Background: Applies a custom background color to the category selectors parent container
- Category Selector: Padding: Determines the spacing on the inside of the parent container. Only useful if you’re also using a background color. Value is in
The “See more…” button within each grid item will use the Primary Button colors you set on the Buttons panel.
If you’ve chosen to display the progress bar within each grid item, your settings from the Progress Bar panel will be used.
Uncanny Toolkit Pro
Grid styles also apply to the Enhanced Course Grid if you’re using the Uncanny Toolkit Pro for LearnDash.
- All ribbons will use the Default Ribbon colors
- For completed courses, the progress bar will use your Complete/Correct Color from the General Design panel.