內容簡介
Toolbox for Elementor 是一款專為 WordPress 創作者、UI/UX 設計師及前端開發者設計的全方位診斷工具和工作流程生產力工具包，旨在提升使用 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
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.
