BanzaiStyle — Layout Inspector for Elementor
| 开发者 |
joshuaroberts
freemius |
|---|---|
| 更新时间 | 2026年10月2日 05:02 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- 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.
安装:
- 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.
屏幕截图:
常见问题:
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.
Does the Play button change my animation?
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.
更新日志:
- 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.