how can i adjust my course grid look on learndash

by Mr. Willy Halvorson 8 min read

  • Navigate to LEARNDASH LMS > COURSES
  • Click on the course you’d like to edit
  • Click on the Settings tab
  • Scroll down until you see Course Grid Settings
  • Enter as much or as little information as you’d like
  • Be sure to click Update when you’re finished

To add a course grid block:
  1. Make sure the “LearnDash Course Grid” plugin is installed & activated.
  2. Click the + icon to add a new block.
  3. Search for “LearnDash Course Grid” & click on the block to insert it.
  4. Adjust your settings in the Block options panel.
Apr 25, 2022

Full Answer

Can you customize the learndash course grid?

But thankfully, you’ve discovered the LearnDash Course Grid add-on. And now you want to take it to the next level. This post will cover many of the various ways you can customize the LearnDash course grid. There are around 20 different parameters you can use to make your course grid just right, along with various ways to improve your grid’s design.

How do I change the color of the learndash course list?

By default, LearnDash uses a light grey color (#f5f5f5) but our plugin changes this to black. You could change the color to anything you’d like with this CSS: .ld-course-list-items .ld_course_grid .ld_course_grid_video_embed { background: #fff; }

How do I change the course id of a course grid?

Make sure you have the course grid add-on plugin installed, and use this shortcode: [ld_topic_list course_id="123"]. Replace the course_idwith your own.

What is the process of enrolling a learndash course?

The process of a course is 1. Course grid -> Access button 2. Course page of Learndash -> Enroll. 3. Course product of EDD -> Pay 4. Checkout. I was wondering how to do like you have on your page: avoiding one step (2 or 3). From course grid to course product of EDD; or from Course page to checkout. Thank you in advance! Laura. August 25, 2020

How do I customize LearnDash?

1:369:44How to Customize a LearnDash Course Page - YouTubeYouTubeStart of suggested clipEnd of suggested clipIf you go to add new and then search and activate it's completely free once you activate it you canMoreIf you go to add new and then search and activate it's completely free once you activate it you can go under learn - LMS. And you'll see a new section called custom templates.

How do I arrange courses in LearnDash?

0:033:41How To Order Content in LearnDash - YouTubeYouTubeStart of suggested clipEnd of suggested clipWhen you boost first go to create the the content if you scroll down you'll see the post attributes.MoreWhen you boost first go to create the the content if you scroll down you'll see the post attributes. Right there you're gonna you can make that whatever order you want so in this case here.

What is LearnDash course grid?

LearnDash Course Grid (CG) 2.0 is a brand new plugin written from scratch. It supports custom templating to make it easier for users to customize the template. All the front-end aspects of the plugin including skins, cards, filter, and pagination are customizable.

How do I use LearnDash design upgrade?

0:463:13Design Upgrade Pro Plugin for LearnDash - YouTubeYouTubeStart of suggested clipEnd of suggested clipChoose from three different styles. Including your default bar with a slight shadow a flat bar whichMoreChoose from three different styles. Including your default bar with a slight shadow a flat bar which removes the shadow. Or you can go full on zebra and add some fancy stripes.

What is course Grid?

The Course Grid add-on gives you the ability to create a responsive course library that can be inserted on any page or post of your site. This is a perfect feature if you have a variety of course offerings and want to give users the ability to filter through them by category.

What is LearnDash focus mode?

NOTE. This feature was introduced in LearnDash 3.0 and works with the new LearnDash 3.0 template. This feature does not work with the Legacy template. Focus Mode aims to eliminate distractions & streamline your user's learning experience – increasing learning retention and completion rates.

How do I use Learndash ProPanel?

You can download the ProPanel plugin from your support.learndash.com account....To Install ProPanel:Go to PLUGINS > ADD NEW.Click UPLOAD PLUGIN.Browse for and select the file that you downloaded after purchase. It will be in a . zip format.Click Install Now.Click Activate Plugin.

Does Learndash work with Divi?

Learndash Pages using Divi Learndash Kit Divi Learndash Kit adds the Divi Builder to your LearnDash courses, lessons, quizzes, topics, certificates, and groups. Now all of those pages can be created using the Divi Builder.

How does WooCommerce integrate with Learndash?

Set Up Your CourseNavigate to LEARNDASH LMS > COURSES.Click on the course that corresponds with a WooCommerce product.Click the Settings tab at the top.Under Course Access Settings, look for Access Mode.Set this to Closed.In the Button URL field, enter the URL to your WooCommerce product page.

Can you have custom text in a course grid?

Each course can have it’s own custom button text displayed in the course grid. Keep in mind, however, that if you add custom button text here, it will alwaysbe displayed in your grid, regardless of whether your student has completed the course, the course is free, etc. Course Grid Ribbon Text.

Does LearnDash have a course description?

By default, there is no course description. LearnDash does not provide a separate field to enter a description for the course page, and no themes display a course description. The content you add to the course in the main content area, it will appear belowthe progress bar and abovethe course content list. 2.

Introduction

LearnDash is one of the best learning management systems (LMS) and many of our customers use it on their WordPress websites.

The LearnDash course grid shortcode

LearnDash recommends using the following shortcode to generate a 4 column grid of all courses:

CSS code to fix the LearnDash Courses grid

To have a clear demonstration of how this works we will add other two categories with the corresponding LearnDash shortcodes under the <h2> category titles.

Skin

Skin in Course Grid 2.0 is an object that defines the whole course grid style. The Skin templates folder is located in /templates/skins/. By default there are 4 different types of skins: grid, masonry, list, and legacy-v1.

Card

Card in Course Grid 2.0 is an object that defines how an individual card inside a skin looks. Each skin can has multiple different card designs. Card templates folder are located in /templates/cards/. By default there are 5 different cards: grid-1, grid-2, grid-3 (available for grid and masonry skin), list-1, list-2 (available for list skin).

Pagination

Course Grid 2.0 comes with 2 default paginations: load more button and infinite scrolling. Pagination templates are located in /templates/pagination/.

What is pagination in LearnDash?

Pagination refers to the number of course steps that are displayed at one time, before the user has to use small navigation buttons to navigate to subsequent pages to access additional course steps. By default, LearnDash will use your settings from the general settings page, but you may choose to customize this on a course-by-course basis.

Can each course have its own display?

Each course can have its own set of display options. In this article, we’ll cover how each display setting affects your course, and how you might want to adjust each setting to fit your particular needs.

Dynamic Progress Display

With this latest update, the pricing ribbon will not only show the price (or custom text if the price type is ‘closed’), but it will also indicate the learner’s status in the course!

Featured Videos

The Course Grid pulls in the course’s featured image by default, but now you can make this a featured video! You can use YouTube videos, Vimeo, Wistia, among others!

Custom Button Text

By default the Course Grid has a “See More…” button that displays, and when selected the learner is taken to the course page. You can now change this text to whatever you wish from the Edit Course page via the “Custom Button Text” field.

About Justin Ferriman

Justin Ferriman started LearnDash, the WordPress LMS trusted by Fortune 500 companies, major universities, training organizations, and entrepreneurs worldwide for creating (and selling) their online courses. Justin's Homepage | Twitter

What are the colors in LearnDash?

You can customize the colors of three main types of elements within LearnDash: Accent Color: The main color used throughout the theme (buttons, action items, and other callouts. Progress Color: The color used for all successful progress-related items (completed items, certificates, and progress bars).

Can you upgrade LearnDash to 3.0?

If you were using a LearnDash version prior to 3.0, you can safely upgrade to LearnDash 3.0 and you’ll remain on the Legacy theme.

Features

Image
First, let’s take a look at what the course grid can and cannot do. Now we’ll show you how to install the Course Grid add-on, and then cover the two different ways it can be added to your site.
See more on learndash.com

Installation

  • Option 1: Add-ons Menu (requires an active LearnDash license) 1. In your WordPress admin area, navigate to LEARNDASH LMS > ADD-ONS 2. Locate the LearnDash Course Gridadd-on 3. Click Install Now 4. Click the Activate Pluginbutton Option 2: Manual Upload 1. Download the plugin file (must be logged into download) 2. In WordPress, navigate to PLUGINS > ADD NEW 3. Click Upload Plugin 4. Browse for the .zipfile you downloaded in …
See more on learndash.com

Using The Course Grid

  • There are two ways in which you can add a grid to any page on your LearnDash site: 1. Block:Best for those using blocks editor such as Gutenberg. This is primarily the main option available for Course Grid 2.0 2. Shortcode:Best for those using page builder plugins (Elementor, Beaver Builder, Divi, etc.) or the WordPress Classic Editor. The options may be limited while using shortcodes vs. the blocks editor version of Course Grid. DEVELOPERS You ca…
See more on learndash.com

Featured Image

  • The featured image is a standard feature of WordPress. The LearnDash Course Grid add-on will use this image, if you’ve uploaded one. To set a featured image for your course: 1. Navigate to LEARNDASH LMS > COURSES 2. Click on the course you’d like to add an image to 3. In the sidebar, look for an area titled Featured Image 4. Click “Set featured image” 5. Choose your image from the Media Library, or upload a new one 6. Click the Selectbutto…
See more on learndash.com

Ribbon

  • A course ribbon is a small piece of information displayed in the top-corner of each course in your grid. It’s displayed over top of all other content, and the text it displays depends on… 1. the specific user viewing your grid, and their enrollment status 2. the course access mode for that particular course If the user viewing the course grid has completed the course, then the ribbon will say Completed. If the user is enrolled in the course, but has not co…
See more on learndash.com

Call-To-Action Button

  • By default, all courses in your grid will include a CTAbutton that says, “See More…”. This language remains the same for enrolled users, non-enrolled users, and completed courses. See below for how to customize the button texton a course-by-course basis.
See more on learndash.com

Lessons, Topics & Quizzes

  • You can also use the Course Grid add-on to display lessons, topics and/or quizzes in a grid format. Most of the same customization parameters apply, like: number of columns, sorting & filtering, show/hide image and/or short description, video preview, button text The following course grid features do not applywhen displaying lessons, topics or quizzes in a grid: enrolled courses only, progress bar, price ribbon Let’s take a look at how to display ea…
See more on learndash.com

Shortcode Examples

  • Here are some examples you can use when building out a grid on your site: Display a progress bar for each course: Display up to 8 courses in 4 columns (4×2 grid): Display all courses & sort them in alphabetical order, by their title: Display all courses & order them by the most recently modified course first: A few notes about sort order: 1. When ascending (ASC) is chosen for orderby="title", your courses would be displayed in alphabetical or…
See more on learndash.com