Course Grid

REMINDER
You must have the LearnDash Course Grid plugin activated, and use the “LearnDash Course List” block or [ld_course_list] shortcode for these settings to be applied. The new layouts in Course Grid 2.x (“LearnDash Course Grid” block) are not compatible.

Free Version

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

Pro Version

Our pro version provides over 20 customization options. Let’s go through each set of options below.

Grid Items

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 2px.
• Grid Item: Border Color: The color of the border of each grid item. Leave blank to use the default #dddddd.
• Grid Item: Border Radius: The border radius of each grid item. Value is in px. Leave blank to use the default 6px.
• 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 1.02.

Ribbons

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
• Enrolled: If a user is enrolled in a course, they will see an enrolled ribbon that 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, we provide two options:

• Background: The background color of the ribbon
• Text: The text color of the ribbon

Completed Ribbons
When a course has been completed by a user, the ribbon will say “Completed.” When this occurs, we use the Complete/Correct Color set on the General Design panel as the background, and white as the text color.

Category Selector

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

Buttons

The “See more…” button within each grid item will use the Primary Button colors you set on the Buttons panel.

Progress Bar

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.

Course Grid 2.0 / “LearnDash Course Grid” Block

When we say “Course Grid 2.0,” we mean anyone using either of the following implementations of the LearnDash course grid add-on:

• “LearnDash Course Grid” block
• [[learndash_course_grid]] shortcode

We don’t currently have plans to add features for the Course Grid 2.0. The main reason for this is because LearnDash provides a bunch of style options already in the plugin. See here.

If we added our own styles, we’d be competing with LearnDash’s styles, and this would lead to confusing conflicts.

They also included a new templating system so developers could create their own layouts & designs. This adds another potential area for conflicts with our plugin if we implemented our own design options.

It’s for these reasons that we don’t plan to add any design features for Course Grid 2.0.