Title: BanzaiStyle — Layout Inspector for Elementor Author: joshuaroberts Published: Ọ̀wàrà 1, 2026 Last modified: Ọ̀wàrà 1, 2026 --- Ṣàwárí àwọn plugin ![](https://ps.w.org/banzaistyle/assets/banner-772x250.jpg?rev=3723855) ![](https://ps.w.org/banzaistyle/assets/icon-256x256.png?rev=3723855) # BanzaiStyle — Layout Inspector for Elementor Láti ọwọ́ [joshuaroberts](https://profiles.wordpress.org/joshuaroberts/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/banzaistyle.1.0.0.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/banzaistyle/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/banzaistyle/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/banzaistyle/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/banzaistyle/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/banzaistyle/) ## Àpèjúwe Ever stared at an Elementor page wondering _why_ that button sits too far from the heading? Is it the widgetÌtumọ̀ Yorùbá: ’s margin, the columnÌtumọ̀ Yorùbá: ’s padding, the sectionÌtumọ̀ Yorùbá: ’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 Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’s own content, green is its padding, orange is its margin Ìtumọ̀ Yorùbá: – the same colours your browserÌtumọ̀ Yorùbá: ’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 Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’s Navigator says Ìtumọ̀ Yorùbá:–“ 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 Ìtumọ̀ Yorùbá: – “Image Widget”, not `div.elementor- widget` Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’t be. Last, how it is aligned Ìtumọ̀ Yorùbá: – only the controls that element actually has, named with ElementorÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s own settings. Underneath them is a **Play** button, and it does what it says Ìtumọ̀ Yorùbá:– 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Ìtumọ̀ Yorùbá: ’s Styles row is ElementorÌtumọ̀ Yorùbá: ’s own Copy and Paste Style without the two right-clicks and without losing your place: copy everything this element has Ìtumọ̀ Yorùbá: – spacing, size, colours, typography, borders, motion effects Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s own rename Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’t the widget at all, itÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s selection Ìtumọ̀ Yorùbá: – looking at the container above shouldnÌtumọ̀ Yorùbá: ’t rearrange the editor around you. So when you land on the element that is actually wrong, the button in the panelÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s atomic elements Ìtumọ̀ Yorùbá: – 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** Ìtumọ̀ Yorùbá: – 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** Ìtumọ̀ Yorùbá: – the current plugin and SDK versions, and whether the plugin is active or uninstalled. * **Your profile info** Ìtumọ̀ Yorùbá: – the name and email address on your WordPress user account, used to create your Freemius account. * **Optional, and declined separately** Ìtumọ̀ Yorùbá: – diagnostic information, and a list of your installed plugins and themes (names, slugs, versions, and whether each is active). * **Optional** Ìtumọ̀ Yorùbá: – 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. Ìtumọ̀ Yorùbá: – 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/ ## Àwọn àwòrán ìbòjú [⌊The overlay showing colour-coded outlines and spacing labels in the Elementor editor.⌉⌊The overlay showing colour-coded outlines and spacing labels in the Elementor editor.⌉[ 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 hover readout, describing an element's spacing in Elementor's terminology.⌉[ The hover readout, describing an elementÌtumọ̀ Yorùbá: ’s spacing in ElementorÌtumọ̀ Yorùbá: ’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 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 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.⌉⌊The toggle button and legend.⌉[ The toggle button and legend. ## Ìgbéwọlẹ̀ 1. Install and activate Elementor (version 3.0 or later). 2. Upload the plugin to `/wp-content/plugins/banzaistyle`, or install it through the Plugins screen in WordPress. 3. Activate the plugin through the Plugins screen. 4. 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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá:’ t accidentally select whatever the panel is sitting on top of. Everything outside that panel Ìtumọ̀ Yorùbá: – the colours, the labels, the badges, the hover readout Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’s hover highlights and element handles are suppressed while it is on, so they donÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s name, which is exactly what renaming it in ElementorÌtumọ̀ Yorùbá: ’s Navigator does Ìtumọ̀ Yorùbá: – the plugin uses ElementorÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s own Paste Style brings across Ìtumọ̀ Yorùbá:– the plugin runs ElementorÌtumọ̀ Yorùbá: ’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 Ìtumọ̀ Yorùbá: – your text, your image, your link Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’s clipboard or its own? ElementorÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá:’ 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Ìtumọ̀ Yorùbá: ’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 Ìtumọ̀ Yorùbá: – the one that runs once as the element comes into view Ìtumọ̀ Yorùbá: – along with its duration and delay. ElementorÌtumọ̀ Yorùbá:’ 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Ìtumọ̀ Yorùbá: ’s own Motion Effects panel. ### Is there a keyboard shortcut? Ctrl/Cmd + Shift + F toggles the overlay. ## À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 “BanzaiStyle — Layout Inspector 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 * [ joshuaroberts ](https://profiles.wordpress.org/joshuaroberts/) * [ Freemius ](https://profiles.wordpress.org/freemius/) [Túmọ̀ “BanzaiStyle — Layout Inspector for Elementor” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/banzaistyle) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/banzaistyle/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/banzaistyle/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/banzaistyle/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/banzaistyle/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà #### 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Ìtumọ̀ Yorùbá: ’s entrance animation and plays it in the editor, copy and paste of an elementÌtumọ̀ Yorùbá: ’s styles onto another through ElementorÌtumọ̀ Yorùbá: ’s own clipboard, and legend. ## Àkójọpọ̀ Meta * Ẹ̀yà **1.0.0** * Ìgbàgbọ́hùn tó kẹ́yìn **ọjọ́ 1 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **Tó kéré sí 10** * Ẹ̀yà WordPress ** 6.0 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **7.1.2** * Ẹ̀yà PHP ** 7.4 tàbí ju bẹ́ẹ̀ lọ ** * Èdè * [English (US)](https://wordpress.org/plugins/banzaistyle/) * Àwọn àmì * [debug](https://yor.wordpress.org/plugins/tags/debug/)[elementor](https://yor.wordpress.org/plugins/tags/elementor/) [layout](https://yor.wordpress.org/plugins/tags/layout/)[margin](https://yor.wordpress.org/plugins/tags/margin/) [padding](https://yor.wordpress.org/plugins/tags/padding/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/banzaistyle/advanced/) ## Àwọn ìbò Kò sí ìwádìí tí a tíì fi ránṣẹ́. [Your review](https://wordpress.org/support/plugin/banzaistyle/reviews/#new-post) [Wo gbogbo àwọn àgbéyẹ̀wò](https://wordpress.org/support/plugin/banzaistyle/reviews/) ## Àwọn Olùkópa * [ joshuaroberts ](https://profiles.wordpress.org/joshuaroberts/) * [ Freemius ](https://profiles.wordpress.org/freemius/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/banzaistyle/)