How To Use The Static Grid Tab Widget By Atomic Addons

The Static Grid Tab widget by Atomic Addons shows a grid of tabs: small images or titles. When a visitor clicks one, a panel slides open under its row with a larger image, a title, some text and a Read More link; clicking another tab swaps the panel. You write each item yourself. This guide covers adding the widget, writing the items and the tab and panel settings.

Enable the Static Grid Tab Widget

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

4. 4

   Turn the Static Grid Tab widget on.

5. 5

   Click Save Settings.

Add the Static Grid Tab Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

Items

Content → Items holds the items, eight to start with. Click an item to open it, use Add Item for a new one, and drag items to change their order. Each item has:

1. 1

   Image: The picture, a placeholder by default. It is used both as the tab's thumbnail and in the panel.

2. 2

   Title: “This is a title” by default. It is the panel's heading, and the tab's label when the tabs show titles.

3. 3

   Text: The panel's body text, written in a text editor.

4. 4

   Link: Where the panel's Read More link leads, # by default. The cog icon opens Elementor's link options. Leave it empty to show no link on that item.

Additional Settings

Content → Additional Settings sets up the grid and the panels:

1. 1

   Columns: How many tabs sit in a row, 1 to 6: 4 by default, 3 on tablets and 2 on phones. The editor always shows the desktop number; check the tablet and phone layout in the preview.

2. 2

   Layout: Grid, the default, draws the tabs as a grid of boxes. Tab joins the open tab to its panel, like a folder tab.

3. 3

   Active Tab Index: The number of the tab that is open when the page loads, counting from 1. Leave it empty to start with every panel closed.

4. 4

   Speed: How long a panel takes to slide open or closed, in milliseconds: 100 to 1000, 500 by default.

5. 5

   Close Button: Adds a close button (×) to the top corner of each panel. On by default. Clicking the open tab again also closes it.

6. 6

   Scroll To Tab: Scrolls the page to the tab a visitor clicks, so the opening panel is in view.

7. 7

   Grid Tab Type: What the tabs show: Image (the default), a thumbnail of the item's image, or Title, the item's title as text. With Image, the Image Resolution just below picks the thumbnail size, Medium by default.

8. 8

   Text Align: Left, center (the default), right or justified placement of the tab's image or title.

9. 9

   Show Title: Shows the title in the panel. On by default. Title HTML Tag sets its markup: H1 to H6, div, span or p, H3 by default.

10. 10

    Show Text: Shows the text in the panel. On by default.

11. 11

    Show Read More: Shows the Read More link in the panel. On by default.

12. 12

    Show Image: Shows the image in the panel. On by default. Image Resolution picks its size, Medium by default.

13. 13

    Content Reverse: Swaps the panel's sides: the text on the left and the image on the right.

14. 14

    Alignment: Left, center, right or justified text in the panel, per screen size.

In the panel the image sits beside the text on screens 768px and wider, and above it on phones.

Read More

With Show Read More on, Content → Read More sets up the link:

1. 1

   Read More Text: The link's label, “Read More” by default.

2. 2

   Icon: An optional icon beside the label.

3. 3

   Icon Position: With an icon: Left or Right (the default) of the label.

4. 4

   Icon Spacing: With an icon: the space between it and the label, 8px by default.

Style the Static Grid Tab

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

• Tab — the tabs, with Normal, Hover and Active states: background, the Border Width (2px by default) and Border Color of the grid lines, padding, and the image radius or, for title tabs, the text color and typography.
• Content — the open panel: background, padding and the space between its image and text.
• Image — the panel image's border, radius, padding, CSS filters and shadow.
• Title and Text — color, margin and typography; the title also has a text shadow.
• Read More — the link's colors, background, border, radius, padding, margin and typography, with a Hover state and a hover animation.
• Close Button — the panel's close button: color, background, border, radius, padding and shadow, with a Hover state.