Toolbox for Elementor

Toolbox for Elementor is an all-in-one diagnostic HUD (Heads-Up Display) and workflow productivity toolkit designed specifically for WordPress creators, UI/UX designers, and front-end developers building with Elementor.

Stop toggling between browser DevTools and the Elementor panel. Say goodbye to repetitive margin/padding calculations, unexpected Z-index stacking collisions, and responsive breakpoint guesswork. Toolbox for Elementor embeds professional design-system overlays, precision pixel rulers, computed spacing visualizers, typographic hierarchy checks, and WCAG accessibility audits right inside your active Elementor editor canvas.

Why Designers & Developers Choose Toolbox for Elementor

• Zero Frontend Bloat: Assets, scripts, and stylesheets load exclusively inside the active Elementor editing session. Live visitors experience zero impact on speed, Core Web Vitals, or page weight.

• Non-Destructive Workflow: Visual overlays, rulers, guides, crosshairs, and inspection badges are non-destructive visual guides. They never alter your DOM structure, post content, or database records.

• Modern Container Architecture: 100% compatible with modern Elementor Flexbox Containers, CSS Grid Containers, and classic Section/Column structures.

• Pixel-Perfect Precision: Build websites with the rigor of Figma or Sketch directly on live WordPress pages.

Core Diagnostic Tools & Features

• Global Class Crosshair: Hover over any container or widget to instantly detect and pulse-highlight every other element across the canvas sharing the identical custom CSS class. Ideal for micro-auditing custom design systems and utility classes.

• Live Alignment Grid Overlay: Display an adjustable layout grid on top of your live canvas. Freely customize column width ( vw, px ), row/gutter height ( vh, px ), and grid line colors with real-time opacity control.

• Precision Canvas Rulers & Drag Guidelines: Pull interactive horizontal and vertical guide lines from top and left pixel rulers. Measure distances with single-pixel accuracy and align disparate widgets effortlessly.

• Spacing Compare & Live Margin/Padding Inspector: Hover over any element to reveal real-time computed box model overlays (margins in orange, padding in green, exact content dimensions). Includes a detachable, draggable floating Spacing HUD.

• T-Tags Heading Structure Detector: Visualize your entire document heading hierarchy (H1, H2, H3, H4, H5, H6) with color-coded live badges. Catch missing H1 tags, multiple H1 tags, or skipped heading levels to ensure optimal on-page SEO and GEO (Generative Engine Optimization).

• Live Font Family Detector: Inspect rendered font families across all headings and text blocks with live badges. Rapidly discover accidental fallback fonts, inconsistent font assignments, or rogue typography styling.

• Live Z-Index Overlay & Stacking Map: Solve sticky header overlaps, dropdown menu stacking bugs, and misplaced modal backdrops with instant visual badges displaying computed z-index values for all positioned elements.

• Live Element Inspector HUD: Inspect computed CSS rules, box dimensions, element tags, and classes directly on canvas without having to open the browser inspect panel.

• Device Responsive Breakpoint Simulator: Test layouts instantly across 24+ real-world mobile, tablet, and foldable device presets (iPhone 17/16/15 Pro Max, Galaxy S26/S25/S24 Ultra, Pixel 9 Pro XL, iPad Pro, Galaxy Z Fold 6) or enter custom viewport dimensions. Features a one-click ⇄ orientation swap button.

• Canvas Zoom & Extended Height Controls: Zoom canvas scale from 100vh up to 1000vh and 2000vh with smooth panning controls for effortless long-page layout reviews and sticky position debugging.

• Instant Custom CSS Jump: Jump directly into Elementor’s Custom CSS panel with a single click, saving hours of repetitive tab switching.

• Page Accessibility & Structure Audit (WCAG 2.1 AA): One-click accessibility scanner analyzing your page for color contrast ratios (4.5:1 text, 3:1 large text), missing or duplicate <main> landmarks, header/footer landmarks, missing image ALT tags, non-modern image formats (PNG/JPEG vs WebP), heading level skips, and touch target minimum sizes (24x24px). Includes an interactive “Info & Fixes” drawer with step-by-step Elementor remediation instructions.

• Quick Navigator & Search Drawer: Search and filter containers, sections, and widgets instantly via a fast slide-out drawer to jump to any element on heavy pages.

• Customizable Control Layer: Organize your workflow by showing or hiding individual tools, setting your default startup tool, and saving preferences per user account via user meta.

• Global Admin Control: Includes a clean WordPress dashboard settings screen with a master toggle switch to enable or disable editor HUD assets site-wide.