LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Formatting Short Descriptions in the LearnDash Course Grid

For a lot of LearnDash users, the course grid add-on is an essential component to designing the learning experience. You can filter & sort the course grid in a myriad of ways. This article will focus on one of the key components of the course grid—the short description.

We’ll explore:

Some creative ideas include:

  • display course authors
  • indicate the total time it takes to complete a course
  • display the amount of credit (or CEUs) a student might receive for completing the course
  • how to add bold, italics & insert new lines

How to Add a Short Description

NOTE
The “course grid” can also be used to display lessons, topics & quizzes in a grid format. A short description can be added for all of them. The instructions are nearly identical.

Let’s take a look at how to add a short description:

  1. Navigate to LearnDash LMS > Courses
  2. Click on the course you want to add a description for
  3. By default, you’ll land on the Course page. Look at the top of the page, just underneath the course title. Click on Settings.
  4. Scroll down until you see Course Grid Settings
  5. Enter your short description in the box
  6. Be sure to click the Update button when you’re finished

Add LearnDash short description in admin area

Follow the same steps to add a short description to a lesson, topic or quiz page, just open up the piece of content you want to edit, and go to the Settings tab.

Ideas for Using Short Descriptions

In many cases, people use this field for exactly what its name describes—a short description of their course. That’s a great use for it 👍.

You could also try:

  • author names (and even links to an author page)
  • the hours & minutes of video content in the course
  • an estimated time (hours, maybe days) to complete the course
  • a link to purchase or sign up for the course (and then hide the default button with CSS)
  • notes or callouts with a background color
  • the number of CEU credits awarded for course completion
  • total number of students enrolled in the course (you would have to update it manually, but you could use broad terms like “1,200+” or “10k”)

If you’re using the short description in other creative ways, please let us know in the comments!

PRO TIP
Did you know we built a free plugin that will instantly make your course grid look super sexy? Design Upgrade for LearnDash →

Short Description Design & Formatting

First, I tried out a bunch of HTML tags to see what the short description supported. Here are my findings.

The LearnDash course grid short description does not support:

<p>
<br />
<span>
<div>
<ul> & <ol>
❌ inline styles (ex: style="color:red;")
❌ class names (ex: class="some-class")
❌ shortcodes (ex: [student]some content here[/student])

It does support:

<strong>
<em>
<a> (links)

With that being said, we have to get a little creative with how we use these tags.

By default, most themes will probably render <strong> tags as bold, and <em> tags as italic, and neither will do anything more than that. But with CSS, we can give them more power.

Let’s look at some examples.

Add a link

A hyperlink in a LearnDash grid short description

Adding a link is pretty straightforward once you understand the syntax. You can add as many links as you’d like in a short description. Here’s an example that links “visit learndash.com” to learndash.com.

<a href="https://www.learndash.com/">visit learndash.com</a>

Your link should inherit the colors/styles of your theme, and look like most other links on your site.

Add a line break

LearnDash grid description, 2 paragraphs example

You might find yourself wanting to add a line break, or split things up into multiple paragraphs. Since we can’t use a paragraph tag (<p>) or line break tag (<br />), we need to use what’s available to us—either <em> or <strong>.

If you aren’t using any bold or italicized text, it doesn’t matter which one you choose. But if you plan to use either bold or italicized text, it’s easiest to use the opposite tag for this.

This first example is the most basic. We’ll just use the <strong> tag as a way to create line breaks. Here’s what we enter into the short description field:

<strong>First line of text goes here</strong>
Next line of text goes here, with some space in-between it and the previous line.

And now we’ll need to add a little CSS to the “Additional CSS” area in the WordPress Customizer.

.ld_course_grid .entry-content strong {
	display: block;
	margin-bottom: 10px;
	font-weight: normal;
}

You can adjust the margin-bottom value up or down to get the spacing you desire. And if you wanted that first line to remain bold, remove the entire font-weight: normal; line.

Bold + Line Breaks

LearnDash course grid description w/ meta data

In this next example, let’s say I want to make a few things bold. So I’m going to use the <em> tag as my wrapper instead. The short description looks like this:

<em><strong>Instructor:</strong> Dave Warfel</em>
<em><strong>Enrolled:</strong> 150 students</em>
<em><strong>CEU:</strong> 2 credits</em>

And now the CSS will look like this:

.ld_course_grid .entry-content em {
	display: block;
	margin-bottom: 10px;
	font-style: normal;
}

You could even change the color of your bolded text with some additional CSS.

.ld_course_grid .entry-content strong {
	color: #1e73be;
}

LearnDash grid descriptions, example of extra info

Note/Callout Box

LearnDash grid descriptions, example of callout box

Using the same principles, let’s try to make a callout box within our description. Let’s add this to our short description:

This is my normal course short description text below the course title.
<em>Look at me! 🙋‍♂️ I'm important.</em>

This CSS will have a few new properties that we haven’t used yet. We’re adding some padding for our box, giving it a yellow background & black text, and some margin to space it out from the text above it.

.ld_course_grid .entry-content em {
	display: block;
	margin-top: 15px;
	padding: 0.5em 0.75em;
	background: #ffeb3b;
	color: #000;
	font-style: normal;
}

We’re using the background property to add a light purple background to our box. And the padding property gives our text some room to breathe so it doesn’t rub up against the edges of our box.

For padding, the first value is the top & bottom padding, and the second value is left & right padding.

If you want to switch the order and place the box first, move your <em> block to the top in your short description, and then change your CSS from margin-top to margin-bottom.

Want to make the callout bold and round out your edges? Add these two extra lines:

font-weight: bold;
border-radius: 5px;

And now, some simpler formatting for course grid short descriptions:

Short Description Font Size & Color

Use this CSS to change the font size and/or color of your short description text:

.ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
	font-size: 15px;
	color: #000;
}

If there are things you’d like to do with your course grid short description not mentioned in this article, please leave a comment below. If there’s a way to do it, we’ll help you figure it out 👍.

Previous

How to Remove Bullets from Elementor Icon Lists in LearnDash Focus Mode

Next

How to Make the Entire Course Grid Element Clickable in LearnDash

4 Comments

  1. This is great stuff, thanks!

    How do I format each Course grid Item (course)? Likke controlling the border, and control the background colour inside the item/box?

    Currently, my items (boxes) have no border and the same background colour as the page.

    So it does look a bit messy, as each course doesn’t stand out.

    On an old theme (Invent – want Astra soon) + Elementor (in a few places)

    • Hey Finn — So I’m hearing two different questions:

      1. How do you format each course grid item, individually?
      2. How do you control border & background color of the grid items?

      For each item individually, you’ll need to see how your theme adds a unique class or ID to the <article> element. Then you can use this unique class/ID to target only that specific grid item. Shoot me an email if you need help with this.

      Controlling the border can be done with our Design Upgrade Pro plugin (which I know you’ve already discovered 😉). It can also be done with custom CSS, but our plugin makes it a bit easier.

      The background color of the grid item is not a feature of our plugin, but I can send you some custom CSS to achieve this.

  2. Thanks Dave, you are such a big help!

    Got most of the things done by now, also with a lot of good help from your excellent plug-in (and your blog). The Pro version probably has the best ROI of any plugin, I have purchased – and I have quite a few…

    Keep up your excellent work.

    Thanks again!

    PS: The CSS for grid item background could be nice. Please shoot.

    • Wow, I appreciate those very kind words, Finn. Thank you 🙏.

      Here’s the CSS for grid item backgrounds. Each piece is labeled because once you change the background color, you’ll likely want to also chance the short description text, course title color & maybe the button colors, too.

      /* Background Color */
      .ld-course-list-items div.ld_course_grid .thumbnail.course, .ld_course_grid .thumbnail {
      	background: #113263;
      }
      /* Course Title Text */
      .ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-title, .ld_course_grid .thumbnail .caption .entry-title {
      	color: #fec300;
      }
      /* Short Description Text */
      .ld-course-list-items div.ld_course_grid .thumbnail.course .caption .entry-content {
      	color: #eee;
      }
      /* Button */
      .ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary {
      	background: #fff;
      	color: #000;
      }
      /* Button: Hover */
      .ld-course-list-items div.ld_course_grid .thumbnail.course a.btn-primary:hover {
      	background: #fec300;
      	color: #000;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén