The “Interactive Circle Infographic Widget” allows you to create engaging circular infographics for free in WordPress Elementor websites. This widget helps visualize data, steps, or processes in a dynamic and interactive way, making complex information easier to understand. You can customize the circle segments, icons, animations, and styling to seamlessly match your site’s design.
Let’s explore the features of the “Interactive Circle Infographic Widget” below
Elementor Interactive Circle Infographic Tutorial Video
Add Free Interactive Circle Infographic to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Interactive Circle Infographic”
- Hover over the widget in the search results and click install
- Add your “Interactive Circle Infographic” widget to any Elementor Page
General Settings in Elementor Interactive Circle Infographic
Title
Type the title.
Text
Type the text to display in the cirlce.
Selected Item (Pro)
Turn on to display an item as selected.
Selected Item Number
Add the item number you want to display as selected.
Show Icon In Button (Pro)
Show/Hide the icon in button.
Show Text In Button
Show/Hide the text in the button.
Show Segments (Pro)
Show/Hide the segments between items.
Close Center Item On Page Click
It will close the center item on page click
Item Image Size
Set the item image size from the available options.
Item Trigger Type
Select the item trigger type.
- Click
- Hover (Pro)
Source Settings in Elementor Interactive Circle Infographic
The Interactive Circle Infographic is fully integrated with dynamic source types that will supercharge your workflow. Use any of the available source types to populate the content in your widget.
Source Types:
- Items
- WordPress Posts
- ACF Custom Fields
- JSON or CSV
- Terms
- Users
- WordPress Menu
Layout Settings in Elementor Interactive Circle Infographic
Connected Widgets Settings in Elementor Interactive Circle Infographic
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings in Elementor Interactive Circle Infographic
Manage the circle’s items using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Schema Settings in Elementor Interactive Circle Infographic
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Interactive Circle Infographic Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want
General Styling in Elementor Interactive Circle Infographic
Set the circle size, padding, border, inner circle size, background and spacing.
Button/Segment Styling in Elementor Interactive Circle Infographic
Style the button text typography, background color, button color, button circle size, and icon size.
Separator Styling in Elementor Interactive Circle Infographic
In this section, set the separator color, width, height, and spacing.
Title Styling in Elementor Interactive Circle Infographic
In this section, set the title spacing, title color and title typography.
Text Styling in Elementor Interactive Circle Infographic
Style the text spacing, text color and text typography.
Image Styling in Elementor Interactive Circle Infographic
You can set the image height, radius, and image type.
Usage Examples of Elementor Interactive Circle Infographic
Here are some live use cases for the Interactive Circle Infographic widget.
Free Elementor Interactive Circle Infographic with Contact Information.
Free Elementor Interactive Circle Infographic with Custom Icons.
Thank you for using the Interactive Circle Infographic Widget for Elementor! With its dynamic animations and customizable segments, this is the best Interactive Circle Infographic Widget for Elementor, perfect for visually representing data in an engaging way. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.