知识库

Page Builder Sandwich：布局与设计系统

Page Builder Sandwich 对布局和设计系统的作用，以及其中哪些是免费的。

功能说明

Flexbox 與 CSS Grid 容器 — 具備完整 Flex 和 Grid 控制項的區段與容器，包含視覺化網格編輯器：直接拖曳即可設定欄與列。
三個內建中斷點 — 針對桌機、平板與行動裝置提供獨立設定，並可即時預覽。
全域色彩與字型，與您的佈景主題共用 — 全站適用的色彩與印刷樣式，直接讀取與寫入佈景主題的設定（theme.json），使建構器與佈景主題始終保持一致。
在元素與網站之間複製並貼上樣式 — 複製單一元素或整個區段的樣式，並直接貼至其他頁面或其他網站。
調色盤顏色的色調與不透明度（OKLCH） — 直接在檢色器中將任何調色盤顏色調亮、加深或設為半透明。採用 OKLCH 混色以確保色相精準不失真，同時維持與調色盤顏色的關聯，並為舊版瀏覽器提供純色備用方案。
樣式建構器中的條件（媒體、容器與支援 at 規則） — 僅在列印、深色架構、減少動態效果或使用滑鼠裝置時為元素套用樣式；開發者亦可透過 pbsw_style_at_rules PHP 篩選器新增自訂的媒體、容器與支援預設集。
自訂中斷點 (Pro) — 新增您專屬的螢幕尺寸（大型桌機、小型手機、橫向平板）。
全域類別與 CSS 變數 (Pro) — 如同專業建構器的類別管理器：一次設定樣式，處處重複使用，並可於單一位置集中修改。
設計權杖：間距、圓角與陰影比例 (Pro) — 在整個網站中維持一致的間距與樣式預設集。
個別元素與個別頁面的自訂 CSS (Pro) — 專為需要自行撰寫 CSS 的使用者打造，並提供語法反白功能。
網站深色模式 (Pro) — 為您的網站色彩建立淺色與深色版本；訪客可自由切換或依循其裝置設定。
品牌工具包 (Pro) — 僅需儲存一次您的標誌、色彩、字型與語氣調性；AI 與範本即會自動套用。
全域類別與設計權杖分類 (Pro) — 將類別、比例級階與變數整理至您的自訂分類中，依分類篩選清單，並在編輯器中按分類選取類別與預設集。
匯入與匯出您的設計系統 (Pro) — 將您的分類、全域類別、變數、比例與自訂色彩下載為單一 JSON 檔案，並匯入至其他網站：經過驗證與版本控制，支援合併或覆蓋，且在寫入任何內容前皆可預覽變更項目。