The Logo Grid widget from Element Pack Pro lets you display multiple logos in a clean, organized grid. It’s ideal for showcasing clients, partners, or sponsors with flexible styling options. In this documentation, we will guide you on how to use and customize the Logo Grid widget.
Enable The Logo Grid Widget
To use the Logo Grid widget from Element Pack, first, you have to enable the widget.
- Go to WordPress dashboard → Element Pack Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Logo Grid Widget Name.
- Enable the Logo Grid Widget.
- Hit the Save Settings Button.
Inserting The Logo Grid Widget
1. Go to the Elementor Editor Page and hit the “+” icon Button.
2. Search the Logo Grid name.
3. Drag the widget and drop it on the editor page.
Work With The Content Tab
Logo Grid Items Section
Go to Content → Logo Grid Items
1. Close Button: You can click on the close icon to remove the logo grid items with this option.
2. Copy Button: You can click on the copy button to duplicate the logo grid item with this option.
3. Add Item: You can click on this button to add more logo grid items.
In each item of the logo grid, you will get more options where you can add information to show to your audience. Let’s explore those now –
1. Logo Image: You can add the logo image in this field.
2. Website URL: You can add a link to the logo image with this option.
3. Brand Name: You can add and make changes to the brand name with this option.
4. Description: You can add and make changes to the description with this option.
5. Tooltip: Enable the switcher to show the brand name & description as a tooltip with this option.
6. Placement: You can set the tooltip position to top, top left, top right, bottom, bottom left, bottom right, left, or right with this option.
Additional Settings Section
Go to Content → Additional Settings
1. Grid Layout: You can select the grid layout that you want to show to your audience with this option. The available layouts are Box, Border & Plus. You can choose the layout as you prefer.
2. Columns: You can select the column number that you want to show to your audience with this option.
3. Grid Gap: You can adjust the space between the grid with this option.
4. Image Resolution: You can make changes to the image resolution with this option.
5. Item Height: You can adjust the height of the items with this option.
6. Image Mask: You can add a visible shape to the image by applying a mask over it. You will get two options here. These are the Default Shape & Custom Shape. Here you can see the default shape and choose one that you want to apply to the logo image.
7. Masking Shape (Custom): You can choose a custom shape to the logo image with this option.
8. Position: You can set the image mask position to the logo image with this option.
9. Size: You can adjust the size of the image mask with this option.
10. Repeat: You can choose how you want to repeat the mask to the logo image with this option.
11. Grid Entrance Animation: You can select the animation style of the grid items’ appearance with this option.
12. Animation Delay: You can adjust the animation delay time with this option.
13. Enable Logo Size Cover: Enable the switcher to control how each logo image fits inside its container.
Tooltip Settings Section
Go to Content → Tooltip Settings
1. Animation: You can add an animation to the tooltip appearance with this option.
2. X Offset: You can move the tooltip position horizontally with this option.
3. Y Offset: You can move the tooltip position vertically with this option.
4. Arrow: Enable the switcher to add an arrow to the tooltip.
5. Trigger On Click: You can enable the switcher to make the tooltip visible when clicked on the image. Don’t set yes when you set a lightbox image with a marker.
Work with The Style Tab
Logo Grid Section
Go to Style → Logo Grid
In this section, we have two more tabs. These are Normal & Hover. Let’s start describing the Normal Tab first –
1. Background Color: You can make changes to the logo grid items’ background color with this option.
2. Border Type: You can add and change the type of borders with this option.
3. Border Width: You can set the thickness of the border with this option.
4. Border Color: You can change the border color with this option.
5. Border Radius: You can control the roundness of the border with this option.
6. Padding: You can adjust the inner space of the items with this option.
7. Box Shadow: You can add a shadow effect to the items with this option.
8. Opacity: You can adjust the transparency of the items with this option.
9. CSS Filter: You can customize the image by making changes to blur, brightness, contrast, saturation & hue with this option.
10. Image Size: You can make changes to the image size with this option.
Now, let’s proceed to the Hover Tab –
1. Background Color: You can make changes to the background hover color with this option.
2. Border Color: You can change the hover border color with this option.
3. Opacity: You can adjust the item hover transparency with this option.
4. CSS Filters: You can customize the image with this option.
5. Transition Duration: You can adjust the transition duration with this option.
6. Hover Animation: You can set the hover animation type for the items with this option.
Tooltip Section
Go to Style → Tooltip
1. Width: You can adjust the height of the tooltip layout with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Title Color: You can make changes to the title text color with this option.
4. Text Color: You can make changes to the description text color with this option.
5. Text Alignment: You can adjust the tooltip content position to left, center or right with this option.
6. Background Type: You can choose the background type to be classic or gradient with this option. Here, we have chosen the background type as classic.
7. Color: You can change the tooltip background color with this option.
8. Image: You can add a background image with this option.
9. Arrow Color: You can change the arrow color with this option.
10. Padding: You can adjust the inner space of the tooltip with this option.
11. Border Type: You can add and change the border types with this option.
12. Border Radius: You can control the roundness of the border with this option.
13. Box Shadow: You can add a shadow effect to the tooltip layout with this option.
All done! You have successfully customized the Logo Grid widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Logo Grid widget. Please visit the demo page for examples.
Thanks for being with us.
