---
title: "How to Add an Interactive Circle in WordPress?"
url: https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/
date: 2024-12-06
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "A process with no beginning or end — a cycle, a set of services, the parts of a method — reads oddly as a numbered list, because a list implies..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Interactive-Circle-in-WordPress_-1024x519.jpg
word_count: 534
---

# How to Add an Interactive Circle in WordPress?

## Key Takeaways

- Interactive Circle Info se añade como bloque en la página y permite una entrada por elemento, con icono, título y contenido, además de elegir apertura por hover o por click.
- Nexter Blocks indica que el bloque es gratuito y funciona en Nexter Blocks (free) y con Nexter Blocks Pro, con la opción Interactive Circle Info activada en Nexter > Blocks.
- Interactive Circle muestra un anillo de elementos con uno abierto a la vez, usa Default Active para definir el elemento inicial y mide alrededor de 400 píxeles de alto con los ajustes predeterminados.

A process with no beginning or end — a cycle, a set of services, the parts of a method — reads oddly as a numbered list, because a list implies an order.

The Interactive Circle arranges the items around a ring and shows each one's detail as the visitor moves through them.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-interactive-circle-infographic/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Interactive Circle Info, switched on under **Nexter > Blocks** in your WordPress dashboard.

## Video Tutorial

https://www.youtube.com/watch?v=qt50cHKQPY8

## Steps

- Add the **Interactive Circle Info** block to your page.

![Adding the Interactive Circle Info block](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-activate-new-1.webp)

- Add one entry per item, with an icon, a title and its content.

![Adding the circle items](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-design-type.webp)

- Choose whether items open on **hover** or on **click**.

- Set which item is **active by default**.

![Setting the default active item](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-connection-new.webp)

- Style the circle and publish.

![Styling the interactive circle](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-style-new.webp)

## How It Behaves

The block draws a ring of items with one open at a time, and the detail panel follows whichever item is active.

- **Exactly one item is active at a time.** Measured on published pages with the three default items: one carries the active state and the others do not.- **Default Active works as you would expect.** Measured: setting it to 2 made the *second* item active on load, and leaving it alone made the first.- **The trigger is written into the page** — measured, choosing hover or click sets the block's trigger attribute to match.- **The circle is a fixed height** — measured at 400 pixels with the default settings, so plan the surrounding layout around it.- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block.

> ***The connection needs both the toggle and an ID.** Measured: with the toggle on and an ID set, the block carries the connection attributes; with the toggle off and the same ID, they are all empty and no connection exists.*

## Limitations

- **Hover has no equivalent on a touch screen.** If you choose hover, phone visitors get the tap behaviour instead — consider click so both behave the same.- **Items are arranged around a ring**, so a long list becomes crowded. Keep it to a handful.- **The block is tall by nature.** Measured at 400 pixels, which is a lot of vertical space on a phone.- **One item is always open** — there is no state where the circle shows nothing.

## Troubleshooting

### The wrong item is open when the page loads

Set **Default Active** to the item you want. Measured: setting it to 2 opens the second item.

### Nothing opens when I hover on my phone

There is no hover on a touch screen. Set the trigger to click so the behaviour is the same everywhere.

### The circle overlaps the content below it

It is around 400 pixels tall by default. Give it room, or reduce the circle size in the block's settings.

### My Carousel Anything connection does nothing

**The connection needs both the toggle and an ID.** Measured: with the toggle on and an ID set, the block carries the connection attributes; with the toggle off and the same ID, they are all empty and no connection exists. See the [carousel connection guide](https://nexterwp.com/docs/connect-interactive-circle-info-with-carousel-anything-in-wordpress/).

## Related Docs

- [Connect Interactive Circle Info with Carousel Anything](https://nexterwp.com/docs/connect-interactive-circle-info-with-carousel-anything-in-wordpress/)- [Add a progress bar in WordPress](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/)- [Add pro buttons in WordPress](https://nexterwp.com/docs/add-pro-buttons-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What do I need before adding an interactive circle in WordPress?**
A: Nexter Blocks provides the Interactive Circle Info block, and it works in the free edition as well as with Nexter Blocks Pro. The block has to be enabled under Nexter > Blocks in your WordPress dashboard before it appears in the editor. That matters because the feature is a block-based setup, not a separate plugin flow, so if it is switched off you will not see it when building the page.

**Q: How many items should I put in an interactive circle?**
A: A handful is the practical limit. The items sit around a ring, so long lists get crowded fast and become harder to scan. The page also notes that one item is always open, which means the circle is better for small sets of related points than for large catalogs or long step-by-step content. If the content feels dense, a different layout may read better.

**Q: Should I use hover or click for an interactive circle on mobile?**
A: Click is the safer choice when mobile traffic matters. Hover has no equivalent on a touch screen, so phone visitors get tap behavior instead. That can create inconsistent interactions if desktop uses hover and mobile falls back to touch. Nexter Blocks lets you choose either trigger, but click keeps the behavior aligned across devices.

**Q: Why is the wrong item open when the page loads?**
A: Default Active controls which item starts open, and measured behavior shows that setting it to 2 opens the second item on load. That setting matters because exactly one item is active at a time, so the first visible panel is not random. If the wrong detail appears first, adjust Default Active instead of changing the content order.

**Q: Why does my interactive circle overlap the content below it?**
A: The block is tall by nature and measures around 400 pixels with the default settings, so it needs vertical room in the layout. If nearby sections sit too close, they can collide visually with the circle. Reducing the circle size in the block settings or giving it more space below usually solves that spacing problem.

**Q: Why does my Carousel Anything connection do nothing?**
A: The connection only works when both pieces are present: the toggle must be on and an ID must be set. Measured behavior shows that with both enabled, the block carries connection attributes, but with the toggle off and the same ID, those attributes are empty and no connection exists. For that setup, use [Connect Interactive Circle Info with Carousel Anything](https://nexterwp.com/docs/connect-interactive-circle-info-with-carousel-anything-in-wordpress/) or the [carousel connection guide](https://nexterwp.com/docs/connect-interactive-circle-info-with-carousel-anything-in-wordpress/).