How To Use The Logo Grid Widget By Atomic Addons

The Logo Grid widget by Atomic Addons shows the logos of your clients, partners or sponsors as tiles in a grid. Choose separate boxes, one framed table or inner lines only. Each logo can link to the brand's website and show a tooltip with its name and a short description, and the tiles can animate in as the visitor scrolls to them. This guide covers adding the widget, adding the logos and arranging the grid.

Enable the Logo Grid Widget

Logo Grid is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Logo Grid. You can also open the Content category.

4. 4

   Turn the Logo Grid widget on.

5. 5

   Click Save Settings.

Add the Logo Grid Widget

Logo Grid works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Logo Grid. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Logo Grid Items

Open the widget and go to Content → Logo Grid Items. Eight placeholder logos are there to start with. Click one to open it:

1. 1

   Logo Image: The logo, best as a transparent PNG or SVG.

2. 2

   Website Url: Makes the tile a link. Use the gear icon for Open in new window, Add nofollow and custom attributes.

3. 3

   Brand Name: The brand's name. With the description, it becomes the logo's alt text and the tooltip's heading.

4. 4

   Description: A short line about the brand.

5. 5

   Tooltip: Shows the name and the description in a tooltip when a visitor points at the logo. It appears only when both Brand Name and Description are filled in. Off by default.

6. 6

   Placement: With the tooltip on: where it opens: Top Left, Top (the default), Top Right, Bottom Left, Bottom, Bottom Right, Left or Right.

Additional Settings

Content → Additional Settings arranges the grid:

1. 1

   Grid Layout: Box (the default) shows each logo as a separate tile. Border joins the tiles into one framed table. Plus draws only the lines between the tiles, with no outer frame.

2. 2

   Columns: 1 to 6 columns: 4 by default, 2 on tablets and phones.

3. 3

   Grid Gap: With the Box layout: the space between the tiles, 15px by default.

4. 4

   Image Resolution: Which image size WordPress serves for the logos. Large by default.

5. 5

   Item Height: The height of each tile, 100 to 500px, per screen size. The tiles are 160px tall when you leave it unset.

6. 6

   Grid Entrance Animation: Plays an animation on each tile as it scrolls into view, one tile after another: Fade, Scale Up, Scale Down, or a slide from the top, bottom, left or right (each also as Small and Medium, which travel a shorter distance). None by default. Visitors whose system asks for reduced motion see the tiles without it.

7. 7

   Animation delay: With an animation chosen: the pause between one tile and the next, 300 ms by default.

8. 8

   Enable Logo Size Cover: Stretches each image to fill its whole tile, cropping it as needed. Off by default, so logos keep their shape and sit centered in the tile. Use it for photos rather than logos.

Tooltip Settings

Content → Tooltip Settings applies to every logo whose tooltip is on:

1. 1

   Animation: How the tooltip appears: Shift-Toward (the default), Shift-Away, Fade, Scale or Perspective.

2. 2

   X Offset: Slides the tooltip along the edge of the logo, in pixels.

3. 3

   Y Offset: The gap between the tooltip and the logo, in pixels.

4. 4

   Arrow: Adds a small pointer to the tooltip. Off by default.

5. 5

   Trigger on Click: Opens the tooltip on click instead of on hover.

Style the Logo Grid

Everything below is on the Style tab:

• Logo Grid — the tiles in Normal and Hover states: background, Border Type, width and color, border radius, padding, opacity and the logo's Image Size, plus the transition duration and a Hover Animation. The hover border color is available with the Box layout.
• Tooltip — width, title color and typography, text color and alignment (center by default), arrow color, background, padding, border, radius, shadow and typography.