Creative · Elementor
Values Circle Infographic widget for Elementor
Six text blocks around a center image or Lottie, with arc connectors — a values or process diagram.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Six text blocks around a center image or Lottie, with arc connectors — a values or process diagram.
render() writes HTML data attributes: data-conn-, data-conn-gap, data-dot-r-large, data-dot-r-small, data-json-url, data-mobile-conn-gap, data-mobile-dot-r-large, data-mobile-dot-r-small.
The widget script reads data attributes: data-conn-, data-json-url, data-settings.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Values Circle Infographic”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Type”, “Image”, “Lottie File Source”, “Upload JSON File”. Style and Content tabs are listed on this page.
When to use it
- A company values section.
- A six-step method.
- A “why us” diagram.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Center Image — Type | The chosen value is read in render() and applied on the front end. Options: Image; Lottie Animation. |
| Center Image — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Center Image — Lottie File Source | The chosen value is read in render() and applied on the front end. Options: Media File (JSON); External URL. |
| Center Image — Upload JSON File | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Center Image — Animation JSON URL | Get free animations at lottiefiles.com. |
| Center Image — Autoplay | Passed through to Swiper autoplay. |
| Center Image — Loop | Switcher inspector control (`ka_values_circle_lottie_loop`). |
| Center Image — Speed | Numeric value used in this widget’s render/JS (default 1, min 0.1, max 3). |
| Center Image — Reverse | Switcher inspector control (`ka_values_circle_lottie_reverse`). |
| Center Image — Render As | The chosen value is read in render() and applied on the front end. Options: SVG; Canvas; HTML. |
| Center Image — Width | Writes CSS `width` onto the widget’s front-end markup. (min 5, max 90). |
| Mobile Layout — Image → First Block Gap | Writes CSS `height` onto the widget’s front-end markup. (min 12, max 220). |
| Mobile Layout — Gap Between Blocks | Writes CSS `height` onto the widget’s front-end markup. (min 12, max 220). |
| Mobile Layout — Gap from block edge (px) | Spacing/size control (min 0, max 40). |
| Mobile Layout — Small dot radius (px) | Spacing/size control (min 1, max 30). |
| Mobile Layout — Large dot radius (px) | Spacing/size control (min 1, max 40). |
| Mobile Layout — Spacing between dots (px) | Spacing/size control (min 2, max 80). |
| Connectors — Dot Color | Writes CSS `fill` onto the widget’s front-end markup. |
| Connectors — Gap from block edge (px) | Spacing/size control (min 0, max 80). |
| Connectors — Small dot radius (px) | Spacing/size control (min 1, max 30). |
| Connectors — Large dot radius (px) | Spacing/size control (min 1, max 40). |
| Text Blocks — Width | Writes CSS `width` onto the widget’s front-end markup. (min 80, max 500). |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-values-circle-title`. |
| Divider — Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Divider — Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 300). |
| Divider — Thickness (px) | Writes CSS `border-top-width` onto the widget’s front-end markup. (min 1, max 10). |
| Divider — Spacing (top / bottom) | Writes CSS (margin-top, margin-bottom) onto the widget’s front-end markup. |
| Description — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-values-circle-description`. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Values Circle Infographic actually change on the page?
Six text blocks around a center image or Lottie, with arc connectors — a values or process diagram. Inspector labels from this widget’s PHP include “Type”, “Image”, “Lottie File Source”, “Upload JSON File”.
How do I add Values Circle Infographic in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Values Circle Infographic”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related creative widgets
3D Holographic Card
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
Auto-Scrolling Text
A CSS marquee for a short phrase or logo strip. Keep the text short; this is not a blog loop.
Content Flip Box
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
Creative Button
A button with extra shapes and hover treatments beyond Elementor’s default button.
Magnetic Buttons
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Pulsing Button
A CTA with a pulse animation so it reads as the next action on a busy page.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Values Circle Infographic after you activate it.