BanzaiStyle — Layout Inspector For Elementor Wordpress Plugin - Rating, Reviews, Demo & Download
Plugin 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
The overlay showing colour-coded outlines and spacing labels in the Elementor editor.
The hover readout, describing an element’s spacing in Elementor’s terminology.
The pinned inspector, showing where the element sits, its CSS ID and classes, every padding and margin side, and the name field it can be renamed from.
The toggle button and legend.
