Description
Ever stared at an Elementor page wondering why that button sits too far from the heading? Is it the widget’s margin, the column’s padding, the section’s spacing, or a global style?
BanzaiStyle answers that in one click. Flip the toggle in the editor and every element on the page gets a colour-coded outline with its real padding and margin values printed on the edges – no browser DevTools, no CSS knowledge required.
What you get
- One toggle. A floating button in the Elementor editor turns the overlay on and off instantly. No page reload, nothing to configure.
- The box model at a glance. Blue is the element’s own content, green is its padding, orange is its margin – the same colours your browser’s developer tools use. Every pixel shows the innermost element covering it, so deeply nested layouts stay just as readable as simple ones instead of piling up into a solid block of colour.
- See your nesting. Each level of nesting gets a paler shade of blue, so you can tell at a glance whether a widget sits directly in a section or three containers deep – the thing that usually makes Elementor spacing confusing in the first place.
- Real spacing values. Every non-zero padding and margin edge is labelled with its measured pixel value, right on the edge it belongs to.
- The same names as the Navigator. Every element carries a name badge, and it says exactly what Elementor’s Navigator says – «Section», «Column», «Text Editor», or the custom name if you renamed the element. Hover any element for a quick readout, including the container gap.
- Click to inspect. Click any element and a panel pins beside it with the whole story. First, where you are: «Section > Column 2» tells you what you actually clicked, which is half the battle when three nested containers all look the same in the editor. Then what it is – «Image Widget», not
div.elementor-widget– along with the CSS ID and CSS Classes you set in the Advanced tab, if any. Then the numbers: padding top, right, bottom and left, margin top, right, bottom and left, the gap between child elements, and the element’s measured size. Zero sides are listed rather than hidden, because «the padding is 0» is exactly the answer you need when something is sitting flush that shouldn’t be. Last, how it is aligned – only the controls that element actually has, named with Elementor’s own words, with the setting it is on marked: the answer to «why is this centred» without going looking for which control did it. Close it with the X in its corner, press Esc, or click the element again to unpin. - See how it arrives, and play it. The inspector has two tabs, and the second is Animation: the entrance animation Elementor will run on this element, its speed and its delay, read straight from Elementor’s own settings. Underneath them is a Play button, and it does what it says – the animation runs right there in the editor, delay and all, exactly as a visitor would see it. No publishing, no opening the page in another tab, no scrolling to the right spot and hoping you catch it. Everything else the overlay draws gets out of the way while it plays, so what you are watching is the animation rather than a panel chasing it around the screen.
- Copy every style onto the next element. Getting one element right and then making its siblings match is most of what building a page is. The panel’s Styles row is Elementor’s own Copy and Paste Style without the two right-clicks and without losing your place: copy everything this element has – spacing, size, colours, typography, borders, motion effects – then walk to the next one and paste. Elementor decides what counts as a style, exactly as its own menu does, so the result is identical and one Ctrl/Cmd + Z puts it back. It is the same clipboard too, so you can copy here and paste from Elementor’s menu, or the other way round. The one thing Elementor never tells you, the panel does: a line under the buttons naming what is currently loaded, so you always know what you are about to paste.
- Copy any value with one click. Every number in that panel has a small copy button beside it, and a checkmark to say it landed. When the fix is «make this one match that one», you read the value off one element and paste it into another instead of retyping it and hoping.
- Rename an element where you found it. The name at the top of the inspector is a field. Type a new one, press Enter, and it is Elementor’s own rename – the same name the Navigator shows, in the undo history, saved with the page. Once three containers all called «Container» become «Hero», «Feature row» and «Footer CTA», the breadcrumb at the top of this panel starts telling you exactly where you are. Empty the field to go back to the default name.
- Walk up the tree. Half the time the problem isn’t the widget at all, it’s the column or the section wrapping it. The panel has a button naming whatever the element sits inside, so one click moves you up to it, and a Back button brings you down again. No hunting for the right outline to click.
- Take Elementor with you. Walking up moves the panel, not Elementor’s selection – looking at the container above shouldn’t rearrange the editor around you. So when you land on the element that is actually wrong, the button in the panel’s top-right corner hands it to Elementor: its panel opens on that element and the Structure highlights it, ready to edit. One click instead of finding it again in the Navigator.
- Editing keeps working. Elementor’s own hover chrome is held back while the overlay is on so it stops fighting the debug view, but clicking, dragging, reordering, and inline editing all behave exactly as before.
- Works with every Elementor structure. Legacy sections and columns, Flexbox Containers, and Elementor 4’s atomic elements – Div block, Flexbox, Grid, and the new Heading, Paragraph, Button and Image widgets.
Zero configuration. Install, activate, open the Elementor editor, and the toggle is there.
Built for Elementor freelancers and site builders who want to fix spacing issues fast
External services
This plugin uses Freemius, a third-party service, for account registration, license management, checkout, and software updates for the paid version. Freemius also powers the optional opt-in screen shown when you first activate the plugin.
Nothing is sent to Freemius unless you opt in. The overlay, spacing labels and inspector all work without connecting. You can skip the opt-in screen and keep using the plugin.
If you do opt in, the following is sent to Freemius:
- Basic website info – homepage URL and title, WordPress and PHP versions, and site language. Used to avoid version incompatibilities and to know which languages the plugin should be translated into.
- Basic plugin info – the current plugin and SDK versions, and whether the plugin is active or uninstalled.
- Your profile info – the name and email address on your WordPress user account, used to create your Freemius account.
- Optional, and declined separately – diagnostic information, and a list of your installed plugins and themes (names, slugs, versions, and whether each is active).
- Optional – your email address for product update announcements, if you tick the newsletter box.
If you buy a license, your license key and a site identifier are also sent to Freemius to activate the license, confirm it is still valid, and deliver updates to the paid version.
Service provider: Freemius, Inc. – https://freemius.com
- Privacy policy: https://freemius.com/privacy/
- Opt-in terms: https://freemius.com/product/opt-in/38044/banzaistyle/
- License activation terms: https://freemius.com/product/license-activation/38044/banzaistyle/
- End user license agreement: https://freemius.com/product/38044/banzaistyle/legal/eula/
Screenshots
Installation
- Install and activate Elementor (version 3.0 or later).
- Upload the plugin to
/wp-content/plugins/banzaistyle, or install it through the Plugins screen in WordPress. - Activate the plugin through the Plugins screen.
- Edit any page with Elementor and click the BanzaiStyle button in the bottom-right corner.
FAQ
-
Does this change my site?
-
No. The overlay only exists inside the Elementor editor preview. Visitors never see it, and no markup, styles, or settings on your page are modified.
-
Does it work with Flexbox Containers?
-
Yes. Both the legacy section/column structure and Flexbox Containers are supported, including nested containers.
-
Does it work with Elementor 4’s new atomic elements?
-
Yes. Div block, Flexbox and Grid are drawn and named as the containers they are, and the new Heading, Paragraph, Button and Image widgets are outlined, labelled and inspectable like any other widget. One difference is worth knowing: Elementor 4 keeps an atomic element’s spacing in its Style tab rather than in the settings the overlay can read, so for those elements the inspector shows the measured pixels rather than the value and unit you typed, and cannot tell you which sides Elementor is leaving to your theme.
-
Can I still edit normally while the overlay is on?
-
Yes. The overlay is click-through everywhere except the pinned inspector panel, which takes clicks itself so that reaching for one of its controls can’t accidentally select whatever the panel is sitting on top of. Everything outside that panel – the colours, the labels, the badges, the hover readout – passes clicks straight through, so selecting, dragging, and inline editing all behave as usual. Close the panel (the X in its corner, or Esc) to get at the page underneath it. Elementor’s hover highlights and element handles are suppressed while it is on, so they don’t compete with the overlay. Toggle it off to get them back.
-
If clicking an element opens the inspector, does it still select the element?
-
Yes, one click does both. The inspector only watches for the click; it never intercepts it, so Elementor selects the element and opens its settings panel exactly as it always did.
-
Where do the numbers come from?
-
They are the browser’s final computed values, so they reflect whatever actually applied, such as Elementor settings, theme CSS, or custom CSS.
-
Does renaming an element change anything else?
-
It sets the element’s name, which is exactly what renaming it in Elementor’s Navigator does – the plugin uses Elementor’s own command for it. The name is part of the page, so it saves with the page and undoes with Ctrl/Cmd + Z. Nothing your visitors see changes.
-
What exactly does Paste bring across?
-
Whatever Elementor’s own Paste Style brings across – the plugin runs Elementor’s command rather than deciding for itself. In practice that is everything outside the Content tab: spacing, size, colours, typography, borders, backgrounds, and motion effects including the entrance animation with its duration and delay. Content – your text, your image, your link – is never touched. If the two elements are different widget types, the settings they have in common come across and the rest are left alone.
-
Does it use Elementor’s clipboard or its own?
-
Elementor’s. Copying here is the same as right-clicking the element and choosing Copy, so you can copy in the panel and paste from Elementor’s menu, or copy from the menu and paste in the panel. It also means an element you copied for any other reason is already loaded when you open the panel, and the line under the buttons tells you which one it is.
-
No. It runs the entrance animation your element already has, using Elementor’s own animation classes, and puts the element back exactly as it found it when the animation ends. Nothing is written to the page and nothing lands in the undo history. Playing is free in every version of BanzaiStyle.
-
Which animations does the Animation tab cover?
-
The entrance animation – the one that runs once as the element comes into view – along with its duration and delay. Elementor’s scrolling and mouse effects are a different kind of thing: they respond continuously to the scroll position and the pointer rather than running once, so there is nothing to «play», and they stay in Elementor’s own Motion Effects panel.
-
Is there a keyboard shortcut?
-
Ctrl/Cmd + Shift + F toggles the overlay.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“BanzaiStyle — Layout Inspector for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “BanzaiStyle — Layout Inspector for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release: toggle button, colour-coded element outlines, padding and margin labels, Elementor-native element naming, hover detail readout, click-to-inspect panel with parent/child navigation, inline renaming and click-to-copy on every value, an Animation tab that reads the element’s entrance animation and plays it in the editor, copy and paste of an element’s styles onto another through Elementor’s own clipboard, and legend.