How To Use The Interactive Links Widget By Atomic Addons

The Interactive Links widget by Atomic Addons shows a stack of large titles on a panel, each with a small sub title beside it. When a visitor points at a title (or clicks it), it becomes active: the title fills with color from the left, its sub title slides over and its image fades in behind the whole list. It suits a list of destinations, projects or services. This guide covers adding the widget, building the list and setting how items become active.

Enable the Interactive Links Widget

Interactive Links 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 Interactive Links. You can also open the Creative category.

4. 4

   Turn the Interactive Links widget on.

5. 5

   Click Save Settings.

Add the Interactive Links Widget

Interactive Links works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

It starts with five items, from “Paradise” to “Bebhionn”, each with the sub title “Explore”.

Items

Content → Items holds the list. Click an item to open it:

1. 1

   Sub Title: The small label beside the title.

2. 2

   Title: The large title. An item without a title shows only its sub title.

3. 3

   Title Link: Where the title goes when clicked. Leave it empty for a title that only shows its image. The gear icon adds nofollow or custom attributes.

4. 4

   Image: The picture that fills the panel behind the list while this item is active.

All four fields accept dynamic tags.

Additional Options

Content → Additional Options:

1. 1

   Image Size: Which image size WordPress serves for the backgrounds, Full by default, since they cover the whole panel.

2. 2

   Show Title: Shows the titles. On by default.

3. 3

   Title HTML Tag: The titles’ markup: H1 to H6, div, span or p. H1 by default; if the page already has its own main heading, pick H2 or H3.

4. 4

   Show Sub Title: Shows the sub titles. On by default.

5. 5

   Sub Title HTML Tag: The sub titles’ markup, H4 by default.

6. 6

   Select Event: What makes an item active: Hover (the default) or Click. With Click, a title that has a link still follows it.

7. 7

   Active Item: Which item is active when the page loads, by its position in the list: 1 (the first) by default. A number below 1 or above the number of items falls back to 1.

An item stays active until another one takes over, so one image is always showing. Visitors who move through the page with the Tab key activate each linked title as they reach it.

Style the Interactive Links

Everything below is on the Style tab:

• Wrapper — the panel’s Height (in %, px or vh), the Max Width and Padding of the list, Background Image Settings (position, repeat and size of the item images; they cover the panel by default) and a Background Color. As the panel’s note suggests, set the background color to match your images if the switch between them looks abrupt.
• Title — the Color of inactive titles, the Fill Color that wipes over the active one, typography, a text stroke (for outlined inactive titles) and X Spacing and Y Spacing around each title.
• Sub Title — color, Active Color, typography and opacity.
• Line — the short line between the sub title and title, which disappears on the active item: color, opacity, height and width.