BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Bright Addons
Download free
Guide

Interactive Links Pro

How to set up and style the Interactive Links widget in Elementor.

Interactive Links shows a list of big links, each with a small label and a line, over an image or next to it. When a visitor points at a link, or moves to it with the keyboard, the image changes to the one of that link. Use it for category menus, collections and portfolio sections.

Part of: Bright Addons Pro.

See the widget page and live demo

Set it up

  1. Add the Interactive Links widget to a section with Elementor.

  2. Under Links, edit each item: Small Label, Title, Link and Image.

  3. Under Settings, choose the Layout: Links over the image or Links next to the image.

  4. Pick Change the Image On, the Image Change Effect and the Height.

  5. Set the label, title and active colors in the Style tab, then publish.

Content options

Links

Option What it does
Small Label Short text before the line, for example Explore.
Title The big text of the link.
Link Where the link goes. Without a link the item still changes the image.
Image The image shown while this link is active.
Image Description (for screen readers) Alt text for the image. Empty means the image is decorative.
Title HTML Tag The HTML tag of the titles.

Settings

Option What it does
Layout Links over the image, or Links next to the image.
Image Side Left or right, when the links are next to the image.
Change the Image On Hover (and keyboard focus), or Click, where a link opens on the second click.
Active Link at Start Which link is active when the page opens.
Image Change Effect Fade, Fade and zoom, Slide up or Blur.
Effect Duration (ms) How long the change takes.
Line Between Label and Title Shows or hides the line.
Move the Active Label to the Title Moves the label of the active link a little to the right.
Height Height of the box.
Links Width How much of the box the list takes.
Vertical Position Top, middle or bottom for the list.
Image Focus Which part of the image stays in view.
Bright Addons Pro

Unlock this and 90+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Box

    background, radius, shadow, links padding, space between links and an image overlay color or gradient.

  • Small Label

    typography, color, active color, label column width, line color and line width.

  • Title

    typography, color, active color and the opacity of the other links while one is active.

Tips

  • The first image loads with the page and the others load shortly after, so the change has no delay.

  • The list gets smaller titles and puts the label above the title when it is narrow, for example on phones.

  • On phones, the links next to the image move under the image.

  • Use the Image Overlay so white titles stay easy to read on bright photos.

Questions and answers

Does it work with the keyboard?

Yes. Moving to a link with the Tab key shows its image, and Enter opens the link.

What happens on phones and tablets?

The first tap on a link shows its image and the second tap opens the link.

Can an item have no link?

Yes. Then it is a button that only changes the image.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides