[WordPress] 外掛分享: Mortar for Bricks Builder

首頁 › 外掛目錄 › Mortar for Bricks Builder
WordPress 外掛 Mortar for Bricks Builder 的封面圖片
200+
安裝啟用
★★★★★
5/5 分(3 則評價)
9 天前
最後更新
100%
問題解決
WordPress 6.2+ PHP 7.4+ v1.8.0 上架:2026-06-22

內容簡介

Mortar for Bricks Builder 是一款為 Bricks Builder 提供實用工作流程工具的外掛,能夠幫助使用者更有效率地管理 BEM 類別、測試響應式佈局、快速撰寫 CSS,並直接從結構面板進行操作。

【主要功能】
• BEM 生成器:批量創建和重命名 BEM 類別
• 視口調整器:測試響應式佈局的畫布寬度滑桿
• CSS 食譜:將快捷方式擴展為完整 CSS
• 智能值:即時轉換 CSS 變數和計算
• HTML 標籤:直接從結構面板更改語義 HTML 標籤
• 側邊欄快捷方式:快速插入常用元素

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.8.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Mortar for Bricks Builder」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Mortar adds practical workflow tools to Bricks Builder: manage BEM classes, test responsive layouts, write CSS faster and work directly from the structure panel.
Each tool is explained in the Mortar settings panel with a description and a live example, so you can choose what fits your workflow.
Included modules

BEM Generator: create and rename BEM classes in bulk. Review the element hierarchy and proposed changes before applying, with nested block detection and protected component instances. Your default All/None selection is saved per user across browsers.
Viewport Resizer: test responsive layouts with a canvas-width slider, breakpoint markers and a reset control. Use Bricks’ native width field for precise values.
CSS Recipes: expand shortcuts such as @clickable-parent; into complete CSS.
Smart Values: convert CSS variables, calculations and pixel-to-rem values as you type, including in the Custom CSS editor.
HTML Tags: change semantic HTML tags directly from the structure panel, including when editing component definitions.
Style Indicators: see which elements have styles applied through classes or element IDs.
Sidebar Shortcuts: add frequently used elements through a configurable quick-insert rail.
Auto-Select Class: automatically select an element’s first existing, unlocked global class. Bricks 2.4 also provides a native first-class option.
Export ID Styles to Class: move ID-level styles to the first CSS class in one click.
Expand Children: expand or collapse an entire subtree at once, including inside component definitions.
Editor Theme: customise the builder’s accent and surface colours with presets and saved palettes. The Custom CSS editor follows your theme too.

Requirements
Mortar requires Bricks Builder and runs inside its editor.
Independence and trademark
Mortar is an independent project, not affiliated with, endorsed by or sponsored by Bricks Builder or its makers. “Bricks” is a trademark of its respective owner and is used here only to describe compatibility.

延伸相關外掛

文章
Filter
Mastodon