How To Use Product Grid Widget By Element Pack Pro

  • BdThemes
  • How To Use Product Grid Widget By Element Pack Pro

Table Of Contents

How To Use Product Grid Widget By Element Pack Pro

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

Inserting The Product Grid Widget

Inserting The Product Grid Widget

Open your page in the Elementor editor, search by the widget name, then drag and drop it on the page.

Content Tab Customizations

Product Items Section

Go to Content > Product Items

Step-1

Product Items1 1 - BdThemes

Here you can add Product Grid widget items (with the Add Item button).

Step-2

Product Items2 1 - BdThemes

For each Product item, find the Item Title, Image, Price, and Text options.

Step-3

Product Items3 1 - BdThemes

For each Product item, also find the Item Link, Rating, Rating Count, Time, and Badge Text options.

Additional Settings Section

Go to Content > Additional Settings

Step-1

Additional Settings 2 - BdThemes

Come to the Additional Settings section, Find the Columns, Column Gap, Row Gap, Title HTML Tag, Link To (Button, Title, Image, Item Wrapper), and Rating Type (Star, and Number) options.

Also, Find the Show Name, Show Price, Show Time, Show Text, Show Rating, and Badge switchers.

Step-2

Additional Settings1 2 - BdThemes

Here also Find the Show Image, Image Size, Image Mask, and Alignment options.

Read More Button Section

Go to Content > Read More

Read More 5 - BdThemes

Find the Read More Button Text and Icon options.

Badge Section

Go to Content > Badge

Badge 4 - BdThemes

Here Find the Badge Position (9 Positions), and Offset options.

Work with The Style Tab

Style The Items Section

Go to Style > Items

Step-1

Items1 2 - BdThemes

Come to the Items section, you will find two sub-sections; Normal and Hover.

In the Normal Mode, Find the Content Padding, Background Type ( Classic, and Gradient), Background Color, and Image options.

Step-2

Items2 2 - BdThemes

In the Normal Mode, Also find the Border Type, Width, Color, Border Radius, Padding, Box Shadow, and Match Padding options.

Step-3

Items3 2 - BdThemes

In the Hover Mode, you will get a similar customization option as in the Normal mode. So please try it yourself.

Image Section

Go to Style > Image

Image 14 - BdThemes

Here Find the Border Type, Width, Color, Border Radius, Padding, Spacing, CSS Filter, and Box Shadow options.

Title Section Customization

Go to Style > Title

Title 15 - BdThemes

Find the Title Color, Spacing, Typography, and Text Shadow options.

Style The Price Section

Go to Style > Price

Price 1 - BdThemes

Find the Price Text Color, Spacing, and Typography options.

Text Section Customization

Go to Style > Text

Text 14 - BdThemes

Come to the Text Section, Find the Text Color and Typography options.

Read More Button Section

Go to Style > Read More

Step-1

S.Read More1 2 - BdThemes

Come to the Read More section, you will find two sub-sections; Normal and Hover.

In the Normal Mode, Find the Read More Text Color, Background Type ( Classic, and Gradient), Background Color, and Image options.

Also find the Border Type, Width, Color, Border Radius, Padding, Box Shadow, Margin, and Typography options.

Step-2

S.Read More2 2 - BdThemes

In the Hover Mode, Find the Read More button text Color, Background Type, Background Color, Border Color, and Animation (27 Styles) options.

Style The Rating Section

Go to Style > Rating

Rating 4 - BdThemes

Here Find the Rating Color, Background Color, Border Type, Border Radius, Padding, Margin, Size, Space Between, Count Text Color, and Count Text Typography options.

Time Section Customization

Go to Style > Time

Time 1 - BdThemes

Come to the Time section, you will get a similar customization option as in the Price section. So please try it yourself.

Style The Badge Section

Go to Style > Badge

S.Badge 1 - BdThemes

Come to the Badge section, you will get a similar customization option as in the Rating section. So please try it yourself.

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

Video Assist

You can also watch the tutorial video about the Product Grid widget. Please visit the demo page for examples.

Thanks for staying with us.

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 14-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.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge