---
title: "How to Create Interactive Footer Links in WordPress?"
url: https://nexterwp.com/docs/create-interactive-footer-links-in-wordpress/
date: 2024-12-10
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "A footer with several link columns usually treats them as separate lists. They don't have to be. Interactive Links, set to Global, connects several Stylish List blocks — one per..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Interactive-Footer-Links-in-WordPress_-1024x519.jpg
word_count: 483
---

# How to Create Interactive Footer Links in WordPress?

## Key Takeaways

- Interactive Links, set to Global, conecta varios bloques Stylish List y al pasar el cursor sobre un enlace en uno, atenúa todos los demás bloques del grupo a la vez.
- Stylish List funciona en Nexter Blocks gratis y Nexter Blocks Pro, y se activa en Nexter > Blocks dentro del panel de WordPress.
- Global ID exige que cada bloque del grupo tenga el mismo ID exacto; una errata lo deja fuera del grupo y no hay indicador visual en el editor.

A footer with several link columns usually treats them as separate lists. They don't have to be.

Interactive Links, set to Global, connects several Stylish List blocks — one per footer column, say — so hovering a link in any of them dims every other block in the group at once.

*For every Dynamic Device setting in one place, see the [Icon List block guide](https://nexterwp.com/docs/add-an-icon-list-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-stylish-list/)

## Before You Start

- **Edition:** Free — the Stylish List block works in Nexter Blocks (free) and Nexter Blocks Pro.- **Block to enable:** Stylish List, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Two or more Stylish List blocks**, one for each column that should react together.

## Steps

- Add the **Stylish List** block and add a row for each item, with its own text and icon.

![The Layout Type options](https://nexterwp.com/wp-content/uploads/2026/09/sl-layouttype.webp)

- Switch on **Interactive Links** under Layout > Interactive Hover Connection.

![The Interactive Links setting](https://nexterwp.com/wp-content/uploads/2026/09/sl-interactive.webp)

- Set **Effect Area** to Global.

- Give every list block that should react together the same **Global ID**.

- Repeat for each footer column's Stylish List block.

> ***Global reaches other Stylish List blocks on the same page.** Measured with two separate blocks sharing the same Global ID: hovering an item in one dimmed items in **both**, even though only one was ever touched.*

## How It Behaves

- **Individual mode stays inside one block** — hovering an item dims only the other items in that same list, measured as opacity dropping to 60% on everything except the hovered item.- **Global reaches other Stylish List blocks on the same page.** Measured with two separate blocks sharing the same Global ID: hovering an item in one dimmed items in **both**, even though only one was ever touched.- **The connection is the Global ID, nothing else.** Any Stylish List block set to Global with the same ID joins the group, regardless of where it sits on the page.- **Inverse Opacity controls how much the rest fades**, not just on or off — the default measured at 0.6, and it can be set anywhere from barely noticeable to nearly invisible.

## Limitations

- **Only connects other Stylish List blocks** — it does not reach navigation menus or other block types.- Every block in a group needs the exact same Global ID, typed identically — a typo silently leaves a block out of the group.- There is no visual indicator in the editor that two blocks share a group — keep a note of the ID you used.

## Troubleshooting

### Hovering one column doesn't affect the others

Check every column's Stylish List block has **Effect Area** set to Global and the exact same **Global ID** — measured, a mismatched ID leaves that block out of the group entirely.

### The dimming is barely noticeable, or too strong

Adjust **Inverse Opacity** — lower values fade the rest more.

### I only want the effect inside one list, not across the footer

Set **Effect Area** to Individual instead of Global.

## Related Docs

- [Icon List block guide](https://nexterwp.com/docs/add-an-icon-list-in-wordpress/)- [Hover background](https://nexterwp.com/docs/change-wordpress-list-item-background-on-hover/)- [Pin Hint labels](https://nexterwp.com/docs/add-label-tab-to-wordpress-icon-list/)- [Read More button](https://nexterwp.com/docs/add-read-more-button-to-the-wordpress-icon-list/)