Gauge Blocks for Elementor

A gauge widget for Elementor that covers two genuinely different readings of the same number:

• Fill – progress toward a target. The bar grows from the origin. Use it when more is always better.
• Marker – position within a range. The scale is always complete and the value is a point along it. Use it when the ideal value sits mid-scale or at the low end: pH, risk level, temperature.

The color scale is defined by positionable stops, so one engine produces a solid color, a gradient, a heat map, or hard threshold bands.

Accessibility

• Ships a color-blind safe preset. Green and red are indistinguishable to roughly 8% of men, and the plugin flags this when you pick the traffic light preset.
• Color is never the only encoding: the marker and the numeric value always accompany it.
• Title and description are linked to the graphic through aria-labelledby, so a screen reader announces the whole block meaningfully.

Nothing else to install

Elementor is all you need. No ACF, no Chart.js, no external library. The graphic is server-rendered SVG: there is no frontend JavaScript and no layout shift on load.

Works with your theme

Color controls accept Elementor global colors, so gauges follow your site’s palette instead of drifting from it.

Developed and maintained by Santiago Cajiao — https://www.santiagocajiao.com

1. Upload the plugin folder to /wp-content/plugins/.
2. Activate it from the Plugins menu.
3. In the Elementor editor, look for “Gauge” in the elements panel.

Does it work with free Elementor?

Yes. Elementor Pro is not required.

Can I bind the value to a custom field?

The value control accepts Elementor dynamic content, so it can be tied to any source Elementor exposes.

Does it work with the Elementor 4 Atomic editor?

Yes. Version 3 widgets and atomic elements coexist on the same page.

Why is orientation not responsive?

The SVG is generated on the server once, and switching orientation changes its structure rather than just its CSS. A responsive control would silently store tablet and mobile values that the render ignores.

0.3.4

• Labels containing control characters or invalid UTF-8 no longer break or blank the graphic.

0.3.3

• Declared compatibility with WordPress 7.0.

0.3.2

• Fixed an editor error about the layout section not being closed.

0.3.1

• Fixed the widget not appearing in the Elementor panel after 0.3.0.

0.3.0

• Internal restructure: the rendering engine, the shared controls and the widget registration are now separate layers. No change in behaviour or output.
• Fixed the panel icon not rendering at all, and its alignment inside the widget tile.

0.2.2

• Placeholder title and description text on a new gauge.
• Interface labels switched to American spelling.

0.2.1

• Fixed the marker color control having no effect. It is now applied through a CSS custom property, so it also updates live in the editor.
• Thickness, corner radius and marker size now repaint immediately while dragging.

0.2.0

• Color controls now accept rgba() and Elementor global colors, not just hex.
• Removed the white outline from the dot marker.
• Alignment control now matches the stacking direction it acts on.
• Added a panel icon.
• Interface translated to English.

0.1.0

• Initial release.