wpnomy Elementor Atomic 專家 (V4) 是做什麼的？
由 wpnomy 轉接，wpnomy 負責接收、設計標準、JSON 交付和交接。此檔案僅包含 V4 建置規則。
需要已啟用 Atomic Editor 的 Elementor Core 3.29+，並在 4.x 版中預設啟用。
在每次建置開始時打開路由器的建置草稿板，並使其保持最新狀態：接收、計畫、決策、建置器綁定例外狀況和驗證。
搭配使用
使用 elementor-build-page 透過 Novamira 進行建置，以及在將現有 V3 頁面移轉時使用 elementor-convert-to-v4。為它們加載機制；此處的慣例在它們有差異時主導。
黑盒子閘道
在放置任何元素之前執行。完整說明：路由器的 references/black-box-policy.md。
| 允許 (基本元素) | Div Block、Flexbox、Heading、Paragraph、Image、Button、SVG、Divider，搭配 Global Classes 和 Variables |
|---|---|
| 允許，建置器綁定 | Atomic Form、Atomic Tabs、Atomic Accordion (當 Elementor 推出時，用作常見問題的預設)、帶有外觀的 YouTube 或影片、用於動態列表的 Loop Grid、Nav Menu、搜尋、分頁、導覽路徑、Components。僅透過類別設定樣式；每個都需記錄其輸出標記 |
| 永不 | 傳統複合小工具 (icon box、image box、CTA、pricing、testimonial、counter、progress、countdown、hero、social icons、star rating、author box、post info)、附加元件包小工具、舊版 Section、Column 或 Inner Section、動畫和進入效果、每個元素上的懸停效果、用於響應式可見性的顯示條件、包含佈局標記的 Text Editor |
- 可以描述元素確切的輸出 HTML 嗎？2. 每個部分都可以由我們的類別和變數設定樣式嗎？3. 它可以作為 HTML 加上類別複製到另一個建置器嗎？任何一個答案是否定的：跳過它，或者將其記錄為建置器綁定的例外狀況。
首先檢查安裝
一些功能是以功能標誌的形式提供的，並且在某些安裝上預設為關閉。在圍繞它進行規劃之前，請確認每一項，並報告任何缺失，而不是默默地繞過它進行設計。
| 功能 | 重要性原因 |
|---|---|
| Global Classes | 整個類別工作流程依賴於它 |
| Variables 和 Variables Manager | 沒有 Manager，可以使用變數，但無法建立變數 |
| Components | 沒有它，就沒有可重複使用的佈局基本元素 |
| V4 Custom CSS | 沒有它，每個元素的 CSS 將不可用，程式碼將沿著升級順序向上移動 |
樣式原則
這是 Oxygen 和 Bricks 工作流程的延續，因為 V4 具備實現它的基本元素。
Variables 就是代幣。 顏色、排版和大小都以 Variables 的形式存在。首先閱讀網站現有的集合並使用它。切勿對變數已表達的值進行硬編碼，也切勿因為現有名稱不明顯而建立近乎重複的變數。
類別承載樣式，以 BEM 命名：block、block__element、block--modifier。為類別設定樣式，而不是元素。此套件發明的任何類別都帶有公司加上網站前綴 sw-<site>- (路由器，命名)。在本地設定樣式的元素是下一個頁面無法重複使用的一次性元素。
V4 Global Classes 是一個扁平命名空間，沒有後代選擇器。BEM 正是為此而設計，因此它很合適，但上下文必須存在於類別名稱中，而不是父選擇器中。在兩個區塊內不同的 card__title 需要兩個類別名稱，而不是巢狀規則。
設計永遠不會存在於元素上。 排版、間距、顏色、邊框、陰影和狀態都存在於類別和變數中。元素自身的樣式控制僅保留一次性放置 (路由器，styling-and-code.md)，第二次使用時將成為修飾符類別。
Atomic Framework
內部設計系統，作為獨立產品維護：跨顏色、排版、間距、佈局和效果的 72 個代幣，使用 OKLCH 格式，透過 clamp() 實現流暢，並具有深色變體。代幣名稱完全按照框架的寫法傳遞。
在安裝、擴充或將任何代幣映射到 V4 Variable 之前，請閱讀 references/atomic-framework.md。新的框架版本是針對新的代幣 JSON 重新執行 scripts/build_framework.py，絕不是手動編輯生成的檔案。
即使沒有閱讀其他內容，也值得記住一條規則：框架需要 html { font-size: 62.5% }，以便 1rem 等於 10px。沒有它，每個 rem 值都會渲染大 1.6 倍，而且不會出現任何錯誤。
樣式和程式碼放置
路由器的 references/styling-and-code.md 是階梯。使用 V4 術語表示：
| 階梯步驟 | Elementor V4 |
|---|---|
| 代幣 | Variables (以及 V4 無法容納的代幣的框架 CSS 層) |
| 類別原生欄位 | Global Class 的樣式分頁，按斷點和狀態區分 |
| 類別自訂 CSS | 類別上的 V4 Custom CSS (複合狀態、:focus-visible 環、color-mix()、容器查詢、滾動驅動動畫) |
| Component | Elementor Component，僅公開可變的屬性 |
| 元素原生欄位 (僅放置) | 元素的本地樣式控制：順序、自身對齊、網格放置、位置偏移、z-index、長寬比、其自身的背景圖像 |
| 元素自訂 CSS，簡短 (僅放置) | 元素上的 V4 Custom CSS，一條簡短規則 |
| FluentSnippets | 實用程式集、@keyframes、小型原生 JavaScript、PHP 鉤子。框架的 :root 層是唯一的例外：它保留在 Elementor 的全站 CSS 中，以便編輯器渲染它 |
顯示條件僅適用於伺服器端渲染邏輯 (缺少的欄位、使用者狀態)，絕不用於響應式可見性，後者應使用實用程式類別。
Components
在編寫程式碼之前，對任何重複的佈局使用 Components。
- 使用原生 atomic 元素佈置區段。
- 從容器建立一個 Component。
- 僅公開每個實例應不同的屬性，通常是文字和圖片來源。
- 將核心佈局和樣式控制在全域範圍內，並放在 Component 內部。
一個每個屬性都公開的 Component 只是一個多餘步驟的模板。公開最少的屬性。參考：elementor.com/help/components-2/
Atomic 元素和覆蓋缺口
可用的 atomic 元素包括 Div Block、Flexbox、Heading、Paragraph、Button、Image、SVG、YouTube、Tabs 和 Atomic Form 集合，並支援 CSS Grid。
某些傳統小工具尚無 atomic 等效項，包括 accordion、gallery 和 carousel。在考慮使用之前，請遵循策略的決策流程：
- 優先使用原生 HTML。 Gallery：一個由
figure項目組成的 CSS 網格。Carousel：一個scroll-snap行。Modal：dialog或popover。尚無 atomic accordion 時的 Accordion：details和summary(內部預設的巢狀 accordion 僅在 Elementor 推出後才存在於 V4 中)。從允許標籤控制的 atomic 元素建置，否則使用一個持有由框架類別設定樣式的作者標記的 HTML 元素，並記錄為建置器綁定。 - 在 V4 頁面上使用傳統 V3 小工具是最後的手段：它無法接受 Global Class 或 Variable，因此違反了單一類別系統規則。僅在策略的第 0 條規則下使用一個 (操作員同意，記錄並設定重新檢視觸發條件)，並在 atomic 元素推出時替換它。
結構
在佈局為 flex 上下文時使用 Flexbox，在佈局為純包裝器時使用 Div Block。每個結構元素上都帶有語義 HTML 標籤。有效的標題輪廓。僅在模式確實需要時才使用巢狀連結，因為錨點內部的錨點是無效標記。
元素狀態和響應式值在樣式分頁中按斷點和狀態設定。尊重網站自身的斷點，切勿引入新的斷點。
版本界限
V4 頁面就是 V4 頁面。不要將現有的 V3 生產頁面轉換為 V4，也不要部分移轉一個頁面。只有在覆蓋缺口迫使的情況下，混合頁面才是可以接受的。