---
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-04-14
author: "Aditya Sharma"
description: "Interactive circles can increase engagement by adding interactive elements to your WordPress site. Which can serve various purposes, from visualizing data to creating engaging call-to-action buttons. With the Interactive Circle..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Interactive-Circle-in-WordPress_-1024x519.jpg
word_count: 732
---

# How to Add an Interactive Circle in WordPress?

## Key Takeaways

- Nexter Blocks includes the Interactive Circle Info block for adding interactive circles to WordPress sites.
- Interactive Circle Info block features three triggers: hover, click, and auto for content switching.
- Users can connect the Interactive Circle Info block with the Carousel Anything block for enhanced functionality.
- The Interactive Circle Info block allows customization of button styles, titles, and descriptions for each circle item.

Interactive circles can increase engagement by adding interactive elements to your WordPress site. Which can serve various purposes, from visualizing data to creating engaging call-to-action buttons.

With the Interactive Circle Info block from Nexter Blocks, you can easily add beautiful interactive circles to your WordPress website.

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

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Interactive Circle Info block is activated, to verify this visit Nexter → Blocks → and Search for Interactive Circle Info and activate.

## Learn via Video Tutorial

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

## How to activate the Interactive Circle Info Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-activate-new-1.png)

## Key Features

- **Three Triggers** - You’ll find three triggers to switch between items on hover, on click, and auto.

- **Carousel Anything Connection** - You can easily [connect the interactive circle with the carousel anything block](https://nexterwp.com/docs/connect-interactive-circle-info-with-carousel-anything-in-wordpress/).

## How to Use the Interactive Circle Info Block?

Add the Interactive Circle Info block from Nexter Blocks to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-design-type-1024x190.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Content

By enabling the **Display Button** toggle, you can show buttons in the interactive circle info items.

When enabled, you can select from different pre-defined styles.

From the **Alignment** section, you can align the content in the interactive circle for different responsive devices.

Then in the **Interactive Circle** section, you have to add the content. Here you’ll find three repeater items by default, open one item.

From the **Content Type** section, you can manage the circle button and the content of the item.

### Button Tab

From the **Icon Type** section, you can add an icon or image to the circle button.

Then, in the **Title** field, you can add a title to the circle button.

After that, you’ll find different styling options to manage the circle button icon, title, background and border style for normal, hover and active status.

### Content Tab

From the **Title** field, you can add a title to the content.

In the **Description** section, you can add a description to the content.

Then, in the **Button Text** field, you can add a text for the button in the content.

In the **Button Link** section, you can add a link to the button.

> *Note: You’ll see the button related fields only when the Display Button toggle is enabled.*

After that, you’ll find different styling options to manage the title, description, background, and border style for normal, hover, and active status.

Similarly, you can edit the remaining items.

You can click on the **+ Add Item** button to add more repeater items.

### Extra Options

From the **Trigger** section, you can choose how to change the interactive circle content. Here you’ll find three options - 

- **Hover** - To change the content on the circle button, mouse hover. 

- **Click** - To change the content on the circle button, mouse click.

- **Auto** - To change the content automatically.

Select the option as per your requirements.

Then, from the **Default Active** dropdown, you can set any particular circle item to be active by default.

By enabling the **Out Animation** toggle, you can set different loading animations for the interactive circle.

### Connection

This tab will be visible only if you set the trigger to Hover or Click from the Extra Options tab.

From the **Carousel Anything Connection** toggle, you can connect the Interactive Circle Info block with the Carousel Anything block.

![](https://nexterwp.com/wp-content/uploads/2024/12/interactive-circle-info-connection-new.png)

## How to Style the Interactive Circle Info Block?

To style the Interactive Circle Info, you’ll find all the options in the Style tab.

**Circle **- From here, you can style the main circle. 

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

**Button **-  From here, you can style all the circle buttons at once.

**Content **-  From here, you can style all the circle content at once.

**Extra Button** - You’ll see this tab only when the Display Button toggle is enabled from the Layout tab. From here, you can style the buttons in the interactive circle content.

**Extra Options **-  From here, you can add indicators to the circle buttons and auto-rotate the circle buttons around the circle.

Advanced options remain common for all our blocks, you can explore all the options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Interactive Circle Info block is not showing up?**
A: If the Interactive Circle Info block is not visible, ensure that the Nexter Blocks plugin is installed and activated. Additionally, check that the block is activated by navigating to Nexter u2192 Blocks and searching for 'Interactive Circle Info'. If it's not activated, toggle it on to make it available for use.

**Q: How do I add content to the Interactive Circle Info block?**
A: To add content, first enable the Display Button toggle. Then, in the Content section, you can manage the circle button and item content. You can also add more items by clicking the + Add Item button. This flexibility allows you to create a tailored experience for your users.

**Q: What triggers can I use for the Interactive Circle Info block?**
A: The Interactive Circle Info block offers three triggers: hover, click, and auto. You can select the trigger that best suits your content interaction needs. For example, using the hover trigger can create an engaging experience as users explore your site.