Àpèjúwe
A gauge widget for Elementor that covers two genuinely different readings of the same number:
- Fill Ìtumọ̀ Yorùbá: – progress toward a target. The bar grows from the origin. Use it when more is always better.
- Marker Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’s palette instead of drifting from it.
Developed and maintained by Santiago Cajiao — https://www.santiagocajiao.com
Ìgbéwọlẹ̀
- Upload the plugin folder to
/wp-content/plugins/. - Activate it from the Plugins menu.
- In the Elementor editor, look for “Gauge” in the elements panel.
FAQ
-
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.
Àwọn àgbéyẹ̀wò
Kò sí àwọn àgbéyẹ̀wò fún plugin yìí.
Àwọn Olùkópa & Olùgbéejáde
“Gauge Blocks for Elementor” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí.
Àwọn Olùkópa
Túmọ̀ “Gauge Blocks for Elementor” sí èdè rẹ.
Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?
Ṣàwárí koodu, ṣàyẹ̀wò ibi ìpamọ́ SVN, tàbí ṣe àgbékalẹ̀ sí àkọsílẹ̀ ìdàgbàsókè nípasẹ̀ RSS.
Àkọsílẹ̀ àwọn àyípadà
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.