How To Use The Brand Grid Widget By Atomic Addons

The Brand Grid widget by Atomic Addons shows the logos of your partners, clients or the brands you stock as a grid of tiles. Each tile has a small “+” tab in a corner. When a visitor points at it or clicks it, the tab opens over the whole tile and shows the brand's name and a link to its website. To show the same tiles as a sliding row, use the Brand Carousel widget. This guide covers adding the widget, adding brands and setting up the grid.

Enable the Brand Grid Widget

Brand 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 Brand Grid. You can also open the Content category.

4. 4

   Turn the Brand Grid widget on.

5. 5

   Click Save Settings.

Add the Brand Grid Widget

Brand Grid works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Brand 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).

The widget starts with six placeholder brands, so you can see the layout before you add your own logos.

Brand Items

Open the widget and go to Content → Brand Items. Each item in the list is one tile; click an item to open it, use Add Item for another brand and drag items to change their order. An item has these fields:

1. 1

   Brand Image: The logo. Pick it from the media library.

2. 2

   Brand Name: The name shown when the tile opens. It is also the logo's alternative text and the item's name in the list.

3. 3

   Website Url: The brand's website, “#” by default. It opens in a new tab with nofollow on; change both with the cog. Clear the field to leave the link out.

4. 4

   Website Url Text: The link's text, “www.example.com” by default.

Under the list, Image Resolution picks which image size WordPress serves for the logos, Medium by default. Logos are shown no taller than 96px, so a medium image is usually sharp enough.

Additional Settings

Content → Additional Settings sets the grid and how the tiles open:

1. 1

   Columns: How many tiles sit in a row, 1 to 6: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.

2. 2

   Column Gap: The space between tiles side by side, 20px by default. Use the device icon to set it per screen size.

3. 3

   Row Gap: The space between rows, 20px by default, also per screen size.

4. 4

   Show Brand Name: Shows the Brand Name when a tile opens. On by default.

5. 5

   Name HTML Tag: The name's markup: H1 to H6, div, span or p. H3 by default.

6. 6

   Show Link Text: Shows the website link when a tile opens. On by default.

7. 7

   Select Event: What opens a tile. Icon Hover, the default, opens it when the pointer reaches the “+” tab. Item Hover opens it as soon as the pointer is anywhere on the tile. Click opens it when the tab is clicked or tapped, and a second click closes it.

8. 8

   Icon Position: Where the “+” tab sits: Bottom Left (the default), Top Left, Top Right, Bottom Right or Center Center, which makes it a round button in the middle of the logo.

Tiles in the same row share the height of the tallest one. Keyboard users open a tile by tabbing to its link, or to the tab itself with Click. On touch screens, where there is no hover, Click is the most reliable choice.

Style the Brand Grid

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Items — the tile: background, border, border radius, padding and shadow, with a Hover state for the border color and shadow. Under Image, Size sets the logo's width and height (it lifts the 96px cap) and CSS Filters can, for example, turn the logos grey.
• Icon — the “+” tab: color, background, border, radius, margin, Size of the tab, Font Size of the plus and shadow. Under Panel, the Background and Padding of the opened tile.
• Name — color, typography and text shadow of the brand name.
• Text — the website link: color, hover color, spacing above it and typography.