In this documentation, we will show you how to customize the LearnPress Grid widget presented by the Element Pack Pro addon for Elementor.

How to insert the LearnPress Grid widget

Step-1

As it is a 3rd party widget of Element Pack Pro, you will find it inside the 3rd Party Widget tab inside Element Pack Pro under your WordPress dashboard.

Then, click on the plugin icon to Install and then Activate the LearnPress plugin to continue.

Step-2

After that, turn on the widget switcher and save settings.

Inserting The LearnPress Grid Widget

Inside the Elementor page editor, search for the LearnPress Grid widget name and drag-drop it inside the page.

Note: You need both Elementor and Element Pack Pro installed to use this widget.

Work With Content Tab

Layout Section Customizations

Go to Content > Layout

Find the Layout Type (Grid, and List), Columns, Column Gap, Row Gap, Alignment, Image Size, Show Filter, Hash Location, and Pagination options.

Query Section Customizations

Go to Content > Query.

Step-1

Find the Source (LearnPress Course, Manual Selection, Current Query, Related, etc.), Limit, Include & Exclude filters (Author, Categories, Tags, and Formats), and Offset options.

Step-2

Also find the Date, Order By, Order, Only Featured Image Posts, and Query ID options.

Note: Query ID field is for using custom Query.

Customizations of Additional Section

Go to Content > Additional.

Find the Categories, Instructor, Title, Title HTML Tag, Meta, Level, Lessons, Quizzes, Student, Duration, and Price options.

Work With The Style Tab

Style The Item Section

Go to Style > Item.

Step-1

In this section, you will see two subsections (Normal and Hover).

In Normal Mode, find the Background type (Classic and Gradient), Background Color, Padding, Border Type, Border Radius, and Box Shadow options.

Step-2

In Hover Mode, find the Background Type (Classic and Gradient), Background Color, and Box shadow options.

Category Section Customizations

Go to Style > Category

Step-1

In the section, you will see two subsections (Normal and Hover).

In Normal Mode, find the text Color, Background type (Classic, And Gradient), and Color options.

Step-2

In Hover Mode, find the text Color, Background Type (Classic and Gradient), and Color options.

Step-3

Also within the Normal mode, find the Border Type, Border Radius, Padding, Margin, Typography, and Box Shadow options.

Title Section Customizations

Go to Style > Title

Find the title text Color, Hover Color, Margin, and Typography options.

Style The Instructor Section

Go to Style > Instructor

Find the instructor’s text Color, Hover Color, Margin, and Typography options.

Style The Meta Section

Go to Style > Meta

Find the meta Color, Separator Color, Column Spacing, Row Spacing, and Typography options.

Style The Price Section

Go to Style > Price

In Normal Mode, find the price text Color, Background Type, Padding, Margin, Border Type, Border Radius, and Typography options.

In Hover Mode, find the price Color, Background Type (Classic, And Gradient), and Color options.

Style The Filter Section

Go to Style > Filter

Step-1

Find the Alignment, Typography, and Bottom Space options for the Filter.

In the Desktop subsection, find the Text Color, Background color, Padding, Border Type, border Radius, Space Between, and Box Shadow options.

Step-2

For Active Mode, find the Text Color, Background color, Border Color, border Radius, and Box Shadow options.

Step-3

In Mobile Mode, find the Button Width, Button Text Color, Button Background Color, Text Color, Dropdown Background color, and Typography options.

Customization The Pagination Section

Go to Style > Pagination

Find the Spacing, text Color, text Active Color, Margin, Arrow Size, and Typography options.

All done! You have successfully customized the LearnPress Grid widget on your website.

Video Assist

LearnPress Grid widget video tutorial coming soon.

Don’t forget to visit the demo page for more examples and designs with this feature.

Thanks for staying with us.