---
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 highlights hovered links with an inverse hover effect.
- Users can select between Individual and Global options to apply the hover effect across icon lists.
- The Global option requires a unique ID to connect multiple icon lists for synchronized hover effects.

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.

## Frequently Asked Questions

**Q: What should I do if the Stylish List block isn't highlighting links on hover?**
A: If the Stylish List block isn't highlighting links, ensure that the block is installed and activated as part of Nexter Blocks. Also, check if the Hover Inverse toggle is enabled in the Extra Options tab. This toggle is crucial for the hover effect to work correctly, allowing non-selected items to show reduced opacity.

**Q: What is the best way to set up the opacity for non-selected items in the Stylish List block?**
A: To set up the opacity for non-selected items, adjust the Inverse Opacity section after enabling the Hover Inverse toggle. This setting allows you to control how transparent the other items become when one is hovered over, enhancing the visual effect and user experience.

**Q: How does the Global option for the inverse effect work in the Stylish List block?**
A: The Global option allows you to apply the inverse effect to multiple icon lists across your page. When selected, you must assign a unique ID in the Global List Connection ID field. This ID should be used in all connected icon lists to ensure they all respond to the hover effect simultaneously, creating a cohesive interactive experience.

**Q: Are there any limitations to using the Stylish List block in Nexter Blocks?**
A: The Stylish List block is specifically designed for use with Nexter Blocks, meaning it requires the block to be installed and activated. Additionally, it relies on Gutenberg as the primary builder, so it won't function as a standalone theme without it. This integration is essential for accessing all features.