1. Home
  2. Docs
  3. Xpro Elementor Addons
  4. Free Elementor Widgets
  5. Course Grid

Course Grid

Course Grid Widget

The Elementor Course Grid Widget allows the developers to showcase their online Tutor LMS courses in a beautiful grid layout. The Elementor widget can be dynamically added to any page with multiple layouts and advanced customizations.

You need to install and activate the Tutor LMS plugin to your WordPress to create courses. Once the courses have been created, you can display them in a grid on your website so your visitor can easily access them.

How to Install Course Grid Widget for Elementor


You need to install and activate the free version by Xpro Elementor Addons to use this amazing widget. If you already have the plugin installed, just make sure the Course Grid widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Course Grid widget, and finally, toggle the button ON to enable it.

How to Use Xpro Course Grid Widget for Elementor

Use the drag and drop feature by the Elementor to easily integrate the Xpro Course Grid widget into the Elementor Page. Dynamically display the list of courses in multiple choices of layouts and manage what post to be displayed with the query. Add pagination and allow your users to access all classes as well as save webpage space. Perform styling for each element in the grid which includes typography, colors, border, and so much more.

Step 1

Open the Elementor Page Builder and click on the Xpro Addons.

Step 2

Search or find the Course Grid Widget and drag’n’drop it to the desired location on the page.

When the widget is placed on an Elementor Page, the default view automatically fetches the most recent courses and displays them on the screen.

Content Section

How to Change the Layout Of the Elementor Course Grid Widget

With its grid widget, Xpro provides ten alternative layout choices, each featuring a unique set of element arrangements. Furthermore, choose how many courses you want to display in a single column.

The LMP course grid widget includes all of the elements required to create listings; however, you have the ability to pick which pieces are displayed and which are excluded. Enable or disable the following option to make them display or not.

Show Images: Activate the option to display the featured image and adjust its size.
Show Rating: Showcase course rating provided by students.
Show Excerpt: Display the course description and manage the text length.
Show Button: Enable the option to display CTA as well as write text for the button.

Show Author: Enable the option to showcase the author of the lectures and provide it with a title.
Show Avatar: Dynamically display the author’s picture or avatar.

Show Meta: Show meta display like date, categories, comment, etc, and include icons with each of them.

How to Set the Query in Elementor Course Grid Widget

Select what programs of study you want to show in the list of lectures. Select the source from where the widget will fetch the data to showcase them in the grid. There are three different sources from which you can add courses.

Courses: The widget will retrieve data you created from the LMS Plugin.
Manual Selection: Type in the name to manually add study material.
Dynamic: This option shows posts dynamically according to the loop.

All the sources come with a different set of options to allow adjustment in the grid display. For Example, if you selected courses from the source option then you can adjust the query with the following options; author, category, tags, and exclude.

For Manual Selection, you can easily type in the course title to make it display on the Elementor Page.

The dynamic source is used in Theme Builder where it shows the data based on the page type. This selection allows you to manage display with the outset option.

Furthermore, you can adjust the post type with the following options.

Per Page: Specify how many posts are to be shown on a single page.
Off Set: Move to the next post and make it the first one.
Order By: Arrange the order by date, author ID, number of content, etc.
Order: Arrange posts in ascending or descending order.
Post with Images: Only show the courses that have a featured Image.

How to Add Pagination in Course Grid Widget for Elementor

Allow your users to access all the courses in your portfolio while efficiently utilizing the space of your web page. The pagination option allows your users to browse your list by moving next or backward. Click and open the pagination menu and toggle on the enable option to show it with your widget.

Moreover, add text to indicate users to move next or back. In addition, choose a type of arrow from the option available.

How to Style Xpro Course Grid Widget for Elementor

Perform multiple customizations to the Elementor Grid Widget, starting with adjusting the alignment of content to left, right, or center of the boxes. Manage image size from the image height option and the gap between each box from the Space Between option.

Personalize the grid appearance by adding custom or gradient colors. You may add a shadow to each post box and manage their appearance by blur and spread option and move it in a vertical and horizontal position.

You can add a border to each slider by selecting a border type between solid, double, dashed, dotted, and grove. Moreover, customize border width, radius, and color. In addition, you can add overlay color to the image for normal and hover displays.

How to Style Rating in Elementor Course Grid Widget

Style the display of course ratings by customizing the size of rating icons, the typography of a number of reviews, text color, icon color, and margin.

How to Style Content in Elementor Course Grid Widget

Click and open the Content menu from where you can perform multiple styling to the content section design. You have the option to adjust the size of the content section as well as add background colors, shadow, and border.

Style the title and description by performing text customization through the typography option from where you can change font, size, weight, spacing, and other text styling. Moreover, you can color the text in the description and also add a hover color for the title.

How to Style Meta in Course Grid Widget

Style the meta display in the grid widget by customizing the typography of text, space between each meta, add colors for icon, text, and background. You can even create a border by selecting a border type.

How to Style Button in Xpro Course Grid Widget

Customize the CTA display by styling the text in the button with typography and adding colors to the text and background for normal and hover displays. You can add a border by selecting a border type and configuring it with radius, width, and color.

How to Style Author Display in the Course Grid Widget for Elementor

If you have selected the option to add an author view then you can customize this section by starting with styling the author media. Adjust the avatar size and gap between content. Make a border if you want around the author’s image.

For the author title and name, you have a similar styling option that you had previously in the title and description of the content section which includes typography, color, and margin.

How to Style Pagination in Elementor Course Grid

At the end of the styling tab, you have the option to style the pagination where you can adjust the position of its display to left, right or center. The rest of the options include typography, space between, border, and color. For color, you can add different numbers and background colors for normal, hover, and active states.

Best Course Grid Widget for Elementor

That is all there is to know on how to use this widget in the Elementor Page Builder. Create educational lessons and make them display to your visitor through this widget which is absolutely free. Send a message to the students with the Block Quote widget and convince them to learn from you.

Xpro Elementor Addons consist of a wide variety of widgets, extensions, and theme templates. The Elemetor Theme Builder by Xpro is an advance free tool that can be used to create a customizable site. Try our more than 50 free Elemntor widgets which are enough to create a good-looking site. For a more advanced site, try out the Elementor premium widget by Xpro.

How can we help?