How to use the Brand Grid widget by Element Pack Pro

  • BdThemes
  • How to use the Brand Grid widget by Element Pack Pro

Table Of Contents

How to use the Brand Grid widget by Element Pack Pro

The Brand Grid widget is a fully customizable grid box presented by BDthemes and it is a part of the Element Pack Pro. It helps you showcase your items in grid view.

Now, let’s learn how to use the Brand Grid widget on your site.

Inserting the widget

Brand Grid widget inserting

To insert the widget on your page, just type ‘Brand Grid’ in the search box, and drag-drop the widget in the text area.

Customize the Brand Grid layout using Content tab

From the content tab, you can customize the main layout of the widget to make changes to the final output.

Customize Brand Items

Step-1

Brand grid widget doc 1 - BdThemes

This is the default view of the Brand Grid widget. The grid shows some boxes with an icon for each one. Hovering on the icon on the 1st item, you can see the Brand Name and URL in the popup.

Step-2

Brand grid widget doc 2 - BdThemes

Notice that there is an item list on your left and the Image Size option in the Brand Items section. Here, you can add more items by clicking on the Add Item button.

Step-3

Brand grid widget doc 3 - BdThemes

Clicking on an item will give you an image field, brand name, URL, and URL text field. You can insert your brand image by selecting the image field and inserting images from your media library.

Step-4

Brand grid widget doc 4 - BdThemes

After that, you can change the Brand Name, provide your Website URL, and Website URL Text in the fields. These are visible in the popup that reveals when you hover over the icon in the Brand Grid widget.

More changes from the Additional Settings section

Step-1

Brand grid widget doc 5 - BdThemes

Go to Content> Additional Settings

Here, you can set the number of columns to show as well as configure the gap between the columns and rows using the scrollbars.

You have the opportunity to show or hide the Brand Name and Link Text by enabling or disabling the switchers.

Step-2

Brand grid widget doc 6 - BdThemes

After that, you can configure the icon event and position. To do that, select an event from the Select Event option and a position from the Icon Position option. Note that event means the popup trigger method of the Brand Grid widget.

Customize the Brand Grid with the Style tab

When you obtained the right grid layout for your website, it is time to customize the appearance to match your theme or taste.

Appearance Customization of Items

Step-1

Brand grid widget doc 7 - BdThemes

Go to Style> Items

Here, you can customize the Brand Grid items as a whole through the background color, border, padding, and box shadow. Notice that there are two modes for the background color; Normal and Hover. First, customize the Normal mode by changing the background color, a thin border with, setting a border color, and adding some Padding.

Step-2

Brand grid widget doc 8 - BdThemes

Next, for the Hover mode, set the border color and see the effect by hovering on the icon.

Customize the popup Icon

Brand grid widget doc 9 - BdThemes

Go to Style> Icon

Next, you can change the color of the Icon and then change the Size and Font Size using the scrollbars below. Additionally, you can add a border on the icon as well as use the margin field to reposition the icon.

Change the Name style

Brand grid widget doc 10 - BdThemes

Go to Style> Name

Let’s customize the Name by changing the text color and Typography. You can add text shadow if you like for the Brand Grid widget.

Customize the URL Text

Brand grid widget doc 11 - BdThemes

Go to Style> Text

Lastly, you can change the text Color, Hover Color, spacing, and Typography for the URL text that is below the brand name.

Good job! You have customized the Brand Grid widget on your website.

Video Assist

You can watch the tutorial and learn more about the topic. Our Demo Page will help you also.

That’s all for the widget. Thanks.

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