---
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-04-14
author: "Aditya Sharma"
description: "Are you looking to add interactive footer links in WordPress? Adding interactive links in the footer highlights the hovered link, making it easier for users to navigate and enhancing the..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Interactive-Footer-Links-in-WordPress_-1024x519.jpg
word_count: 315
---

# How to Create Interactive Footer Links in WordPress?

## Key Takeaways

- Nexter Blocks Stylish List block adds an inverse hover effect that highlights the hovered footer link and reduces the opacity of other items.
- Style Lists widget uses Vertical layout, List Content, and the Hover Inverse toggle in the Extra Options tab to create interactive footer links in WordPress.
- Global effect area uses a unique Global List Connection ID to connect multiple icon lists so hovering one item reduces opacity across all connected lists.

Are you looking to add interactive footer links in WordPress? Adding interactive links in the footer highlights the hovered link, making it easier for users to navigate and enhancing the overall user experience.

With the Stylish List block from Nexter Blocks, you can easily highlight a link on hover by adding an inverse hover effect on other items.

*To check the complete feature overview documentation of the Nexter Blocks Stylish List block,* *[click here](https://nexterwp.com/docs/add-an-icon-list-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

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

To create interactive footer links, add the Style Lists widget to the template and follow the steps - 

> *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.*

1. Select **Vertical** from the **Layout Type** section under the **List** tab.

2. Then add the icon list content from the **List Content** section.

3. Then, enable the **Hover Inverse** toggle, from the **Extra Options** tab.

From the **Inverse Opacity** section, you can set the opacity of the non-selected icon list items.

Then, from the **Effect Area** section, you can select where to apply the effect. Here you’ll find two options - 

- **Individual** - This will apply the inverse effect to this icon list only.

- **Global** - With this option, you can connect and add the inverse effect to other icon list items on the page. 

When Global is selected, you have to add a unique ID in the **Global List Connection ID** field. Then similarly you have to add the same ID in the **Global List Connection Id** fields of the icon lists, you want to connect and add the inverse effect on hover. 

This way when you hover over on anyone one item of one icon list all the items in that icon list and other connected icon list item's opacity will be reduced.