LDX Design

How to Display Course Title Over the Image in LearnDash Course Grid

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

The LearnDash Course Grid add-on provides a much nicer way to display your courses, but it has plenty of room for improvement. Our plugin, Design Upgrade Pro for LearnDash, provides over 20 options to customize the LearnDash Course Grid design. If you’re looking to improve your LearnDash design, you should check it out. (There are over 80 options in all!)

But if all you want to do is move your course title over the image in the LearnDash Course Grid, we’ll show you how to do that with a little custom CSS.

Move the Content Up Over the Image

The first thing we’re going to do is move all the content up about 50px. The “content” includes everything below the image: course title, description, “see more” button and progress bar (if you choose to show it).

All of this content is contained in a div with a class of .caption. To move it up over the image, we set it’s position to relative and give it a top value of -50px. You might need to adjust the 50px slightly, depending on the font size of your course title.

.ld_course_grid .thumbnail .caption {
	position: relative;
	top: -50px;
	margin-bottom: -50px;
}

The margin-bottom: -50px; removes the extra spacing that is created at the bottom of the grid item.

Recommended ProductKinsta 2 months of free hosting

Edit the Course Title Styles

There are a few things you’ll probably want to do to the course title after you’ve moved it over the image. These are optional, and you can choose to add other styles not depicted here. These are simply recommendations and ideas that you can build upon.

Your course title is likely a dark color of some kind. Typically, dark grey or black. That’s hard to read over an image, so I like to change it’s color to white, and add a little shadow behind the text.

.ld_course_grid .entry-title {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}

You could also experiment with adding a background color behind it. Or even a gradient that goes from black to transparent.

Here’s our final design:

LearnDash course title over image in course grid
Our final design

Frustrated with the LearnDash design?

Design Upgrade for LearnDash

80+ styling options for LearnDash.
Complete design control in the WordPress Customizer.

Recommended ProductPressidium Hosting

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers. Learn More →

Previous

LearnDash Certificate Font Issues: Question Marks, Accents & How to Fix Them

Next

Change Font Size in LearnDash Course Navigation Widget

2 Comments

  1. hi
    Great article i was wandering is there a way to add instructors pictures, number of students enrolled in the course and ratings on the course grid using Astra as a theme

    • Unfortunately, there’s no easy way to add those details to the course grid. You’d have to modify the course grid plugin and write some custom PHP.

      I have seen some people use a page builder to make their course grid instead. You can build a grid based on a custom query, querying just your courses post type, and then pull in the author. But you’d still have to write custom code, I think, to pull the number of students enrolled. And getting the ratings would depend on what you’re using for course ratings, since that’s not a standard LearnDash feature.

Leave a Reply

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