Logo Grid

How to use Logo Grid Widget of Sky Addons for Elementor

The Logo Grid widget helps you showcase your clients, partners, sponsors, or brands in a clean, responsive grid layout. Whether you want to display logos with or without captions, the widget is fully customizable and integrates seamlessly with Elementor. It enhances your site’s trust and credibility while maintaining visual consistency and flexibility in design.

Features:

1. Responsive grid layout with customizable columns.
2. Add logos with optional brand name and description.
3. Tooltip support for additional info on hover.
4. Custom image resolution and hover effects.
5. Multiple link options – media file, custom URL, or none.
6. Boxed or minimal style selection.
7. Tooltip placement and animation options.

Insert Logo Grid Widget

1. Open Elementor Editor. In the Elementor panel, search for “Logo Grid” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Layout Section

1. Columns – Choose how many logos to show per row (1–6).
2. Logo List – Add logos via repeater with full customization:
   • Logo – Upload your logo image.
   • Link – Add a custom or media file URL.
   • Brand Name – Title for the logo.
   • Brand Text – Description or tagline.
   • Show Tooltip – Enable/disable tooltip on hover.
   • Tooltip Placement – Choose top, bottom, left, or right.

Additional

1. Select Style – Choose between “None” or “Box” or “Border” or “Magic-Border” design.
2. Image Resolution – Adjust resolution for quality control.

Tooltip Settings

1. Animation – Choose from Scale, Shift-away, etc.
2. Offset – Adjust spacing from the logo.
3. Show Arrow – Enable/disable tooltip arrow.
4. Trigger on Click – Show tooltip on click instead of hover.

Style Customizations

Logo Grid

1. Row Spacing – Adjust the row space around the logo.
2. Column Spacing – Adjust the Column space around the logo.
3. Padding – Adjust inner space around the logo inside each item container.
4. Border – Add or style border lines for logo boxes.
5. Radius – Control corner roundness for logo containers.
6. Background – Set custom background color or gradient.
7. Shadow – Apply box shadow to give depth or highlight logos.
8. Opacity – Control transparency for each logo item.
9. CSS Filters – Apply effects like blur, brightness, contrast, etc.
10. Hover Mode – Enable all above styles to change on hover interaction.

Tooltip

1. Width – Set fixed width for tooltip boxes.
2. Alignment – Align tooltip text: left, center, or right.
3. Background – Set tooltip background color or gradient.
4. Padding – Adjust inner space around tooltip content.
5. Border – Add a border around the tooltip box.
6. Radius – Round the corners of the tooltip.
7. Box Shadow – Add shadows for a floating effect.
8. Color – Set tooltip text color.
9. Typography – Control font, size, weight, and spacing.
10. Arrow Color – Set color of the tooltip arrow pointer.
11. Title Style – Customize typography and color for title separately.
12. Text Style – Set different styles for description text within tooltip.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Logos not showing: Ensure images are properly uploaded and not missing from media library.
2. Tooltip not displaying: Check if tooltip is enabled and placed correctly.
3. Grid alignment issues: Adjust column settings and spacing for responsiveness.
4. Hover effects not working: Confirm that hover styles are defined in the Style tab.

Conclusion

The Logo Grid widget is a perfect solution for displaying brand logos professionally on your site. Its flexibility, tooltip options, and easy customization make it ideal for building brand trust and enhancing your website’s presentation.