Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Tutor LMS Grid widget

How to Use Tutor LMS Grid Widget

Learning Management System (LMS) is a way to offer courses. Using the Tutor LMS Grid widget, we can easily display the courses with some key facts. For example, the course title, duration, instructor, price and etc. Let’s see how this widget works below.

Tutor LMS

Step-1: Since Tutor LMS is a third-party plugin, you first have to install and activate the plugin.

installing the Tutor LMS Grid widget

Therefore, go to Dashboard PluginsAdd New > search plugins (on the right side) > hit on the Install and Activate.

Step-2: Next, go to the Tutor LMS Courses > Add New. As you can see in the image example below.

tutor lms widget grid 2 - BdThemes

When you want to show a course using our widget, don’t forget to add the course. It means that you’ve to add a course first.

Step-3: Go to Element Pack > 3rd Party WidgetsTutor LMS> hit the activate button > click on the Save Settings button. Look at the image below.

tutor lms widget grid 3 - BdThemes

Tutor LMS Widget: The process of displaying online courses

However, in the documentation below, you’re going to learn how to use Tutor LMS Grid widget for displaying course online.

To Insert Widget

tutor lms widget grid 1 - BdThemes

Inserting a widget, it is just a matter of dragging and dropping. As you see in the screenshot above.

Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the tab and how they work behind the widget.


tutor lms widget grid 4 - BdThemes

Simply, go to the Content tab > Layout.

In this section, you can determine the column number, select image size, and adjust item height. Keep your eyeballs on the screenshot placed above.

tutor lms widget grid 5 - BdThemes

Moreover, you will find some On/Off switchers that will help you to manage content, for example, title, image, etc.

Mostly, in case you enable the switcher Pagination, you can show pagination below the grid. On the contrary, you will be to hide.

Now, come to switcher Avatar. Enabling this switcher, you might show the logo.

Just, check rest of the repeaters.


This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different in accordance with the source location. Read more 

tutor lms widget grid 6 - BdThemes

For example, 

A.  Go to Query > Source > Manual selection.

B. Then, write the category name in the Categories field.

C. After that, set the limit.

D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Date, or category wise and can also define order with ascending or descending.

Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.


tutor lms widget grid 10 - BdThemes

Here, from this section, you can set gap between the items included by the grid. Generally, you can border and radius. Importantly, you will be able to add background color and box-shadow in both Normal and Hover mode.


tutor lms widget grid 8 - BdThemes

Go to the Style tab > Item > Normal.


tutor lms widget grid 9 - BdThemes

Go to the Style tab > Item > Hover.


This section includes sub-section Image, Meta Label, Wishlist Meta. Just, use the controls and style.

tutor lms widget grid style 3 - BdThemes

Image: From here, you can add radius to the image.

tutor lms widget grid style 1 - BdThemes

Meta Label: This sub-section will let you add text color and background color along with border type, radius, padding, and typography.

tutor lms widget grid style 2 - BdThemes

Wishlist Meta: Follow the image example above and style the wishlist meta.


tutor lms widget grid style 4 - BdThemes

Look, there are four tabs in the content section. That is are Rating, Title, User Meta, and Author. Under the tabs, you can style the specific content for the Tutor LMS Grid widget.


tutor lms widget grid style 5png - BdThemes

Utilizing this section, you have a chance to style the footer. Mostly, in terms of the Price and Cart button.


tutor lms widget grid style 6 - BdThemes

There are three modes Normal, Hover, and Active. In these modes, might style the pagination.

Video Assist

In conclusion, though our Tutor LMS Course Grid widget, developed by Bdthemes, contains some tricky parts, hopefully, in the end, you have got the solution. You can stream the video clip above. And to get more ideas about this, visit the demo page

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.