Editor V4 Alpha 引入了一個(gè)以 CSS 為核心的框架，提供可重用的類和狀態(tài)、性能改進(jìn)、統(tǒng)一的樣式系統(tǒng)和完全響應(yīng)式樣式控制，這些設(shè)計(jì)旨在提高網(wǎng)站建設(shè)的效率和一致性。

隨著網(wǎng)頁(yè)設(shè)計(jì)多年來(lái)的演變，網(wǎng)站創(chuàng)建者面臨的挑戰(zhàn)也逐漸增多，許多人遇到類似的問(wèn)題：

• 在網(wǎng)站中多處元素樣式保持一致時(shí)的困難
• 在多個(gè)地方更新相同樣式時(shí)的重復(fù)工作
• 限制響應(yīng)性，迫使你使用自定義 CSS 或隱藏元素
• 復(fù)雜布局導(dǎo)致的性能下降
• 不同小部件間界面差異

Editor V4 通過(guò)一個(gè)強(qiáng)大的 CSS 為核心的框架來(lái)解決這些問(wèn)題，提供了專業(yè)級(jí)的功能，且無(wú)需編寫(xiě)一行代碼。

Editor V4 的第一個(gè) alpha 版本現(xiàn)已作為可選體驗(yàn)提供，給你機(jī)會(huì)按自己的節(jié)奏探索新功能。你可以測(cè)試這些新功能，提供反饋，同時(shí)繼續(xù)使用熟悉的 V3 功能，我們將繼續(xù)擴(kuò)展和改進(jìn) V4 體驗(yàn)。

要開(kāi)始使用 Editor V4 Alpha，更新到 Elementor 3.29，進(jìn)入 Elementor > 設(shè)置 > Editor V4，按照激活步驟操作。請(qǐng)注意，這是一個(gè)早期的 alpha 版本，應(yīng)僅在暫存或測(cè)試網(wǎng)站上使用，避免在生產(chǎn)環(huán)境中使用。

一次設(shè)置樣式，隨處應(yīng)用——使用類（Classes）

想象一下，構(gòu)建一個(gè)網(wǎng)站，網(wǎng)站中有很多按鈕，它們應(yīng)該共享相同的設(shè)計(jì)。過(guò)去，你需要逐個(gè)設(shè)置每個(gè)按鈕的樣式，或者依賴一些替代方法?，F(xiàn)在，Editor V4 的類系統(tǒng)讓你能夠：

• 創(chuàng)建可重用的樣式集合，可以應(yīng)用到多個(gè)元素上
• 在一個(gè)地方更新樣式，所有使用該樣式的地方都會(huì)立即反映更改
• 保持整個(gè)網(wǎng)站的設(shè)計(jì)一致性

類系統(tǒng)引入了兩種類型的類：

• 本地類（Local Class） 每個(gè)元素自動(dòng)獲得一個(gè)唯一的本地類（以粉色顯示），該類具有最高的樣式優(yōu)先級(jí)，且不可刪除。確保元素特定的樣式不會(huì)被其他類覆蓋。
• 全局類（Global Class） 你可以創(chuàng)建并命名自己的全局類（以綠色顯示），應(yīng)用到任何需要共享這些樣式的元素上。當(dāng)你更新全局類時(shí)，所有使用該類的元素都會(huì)同步更新。你可以從元素中刪除全局類，而不刪除該類本身，這讓你在設(shè)計(jì)時(shí)可以輕松進(jìn)行不同設(shè)計(jì)的嘗試。

無(wú)需編寫(xiě)代碼即可定義交互式樣式——使用狀態(tài)（States）

使用狀態(tài)（偽類）讓你的站點(diǎn)更具互動(dòng)性。你可以定義元素在用戶與之互動(dòng)時(shí)的外觀，比如創(chuàng)建懸停、聚焦和激活狀態(tài)。這樣，你就能設(shè)計(jì)引人入勝的互動(dòng)體驗(yàn)，而無(wú)需編寫(xiě)任何代碼。

要添加狀態(tài)，只需點(diǎn)擊你希望應(yīng)用狀態(tài)的類旁邊的三個(gè)點(diǎn)，選擇懸停、激活或聚焦?fàn)顟B(tài)。你所定義的更改將只應(yīng)用于選擇的狀態(tài)。一個(gè)狀態(tài)的更改不會(huì)影響其他狀態(tài)，給予你對(duì)交互元素的精確控制。最棒的是，你可以通過(guò)將狀態(tài)與全局類一起使用，在整個(gè)網(wǎng)站上應(yīng)用一致的交互體驗(yàn)。

使用類管理器管理和組織你的類

類管理器為你提供了一個(gè)命令中心，用于保持網(wǎng)站樣式的一致性，可以讓你：

• 從一個(gè)中央位置刪除或重命名類
• 通過(guò)拖放改變類的優(yōu)先級(jí)和層級(jí)
• 查看所有全局類的組織視圖
• 了解樣式的級(jí)聯(lián)情況，使用類指示器

在處理類和狀態(tài)時(shí)，顏色編碼的指示器會(huì)幫助你了解樣式的級(jí)聯(lián)情況。每種顏色具有不同的功能：

• 粉色點(diǎn)：來(lái)自本地類的樣式
• 綠色點(diǎn)：來(lái)自全局類的樣式
• 橙色點(diǎn)：需要注意的沖突樣式
• 灰色點(diǎn)：來(lái)自其他類的繼承樣式

這些視覺(jué)提示在你工作時(shí)提供即時(shí)反饋，幫助你理解樣式的來(lái)源及其相互作用。

統(tǒng)一樣式選項(xiàng)卡，簡(jiǎn)化工作流程

Editor V4 引入了統(tǒng)一樣式選項(xiàng)卡，適用于所有元素，而與 V3 中每個(gè)小部件擁有獨(dú)立樣式選項(xiàng)面板不同。

統(tǒng)一樣式選項(xiàng)卡的主要優(yōu)勢(shì)：

• 內(nèi)容和功能設(shè)置保持在常規(guī)選項(xiàng)卡中
• 所有視覺(jué)樣式選項(xiàng)都在樣式選項(xiàng)卡中
• 一次學(xué)習(xí)系統(tǒng)，隨處應(yīng)用
• 在所有元素中一致地訪問(wèn)強(qiáng)大的樣式功能

統(tǒng)一樣式選項(xiàng)卡包括全面的部分，提供完整控制：

• 布局：定義顯示行為和結(jié)構(gòu)
• 間距：設(shè)置邊距和填充的鏈接控制
• 大?。憾x寬度和高度，設(shè)置約束
• 定位：選擇定位方法，并控制 Z-Index
• 排版：訪問(wèn)重要的文本樣式選項(xiàng)
• 背景：創(chuàng)建豐富的分層設(shè)計(jì)，具有無(wú)限潛力
• 邊框：應(yīng)用一致或不同的邊框樣式
• 效果：添加多個(gè)陰影層和其他效果

通過(guò)單一 DIV 包裹器提高站點(diǎn)性能

Editor V4 引入了一個(gè)顯著更清潔的 DOM 結(jié)構(gòu)，直接影響網(wǎng)站的性能?，F(xiàn)在，每個(gè)元素只使用一個(gè) DIV 包裹器，而不是以往版本中的多個(gè)嵌套 DIV。這種簡(jiǎn)化的結(jié)構(gòu)帶來(lái)了更清晰的 HTML 輸出，減少了頁(yè)面大小，減少了瀏覽器渲染頁(yè)面時(shí)的復(fù)雜性，從而帶來(lái)以下好處：

• 更清晰的代碼和更快的渲染速度
• 改善的 SEO 排名
• 更好的訪問(wèn)者體驗(yàn)

盡管 alpha 版本已經(jīng)顯示出性能改進(jìn)，但隨著 Editor V4 的成熟，這些好處將在網(wǎng)站上使用新優(yōu)化元素時(shí)更加顯著。

針對(duì)每個(gè)設(shè)備控制每個(gè)樣式屬性

Editor V4 在響應(yīng)式設(shè)計(jì)方面進(jìn)行了全面改進(jìn)，提供前所未有的控制，解決了 V3 小部件的限制，在 V3 中只有特定的控制選項(xiàng)具備響應(yīng)式功能。

在 Editor V4 中，每個(gè)樣式屬性都可以針對(duì)每個(gè)設(shè)備進(jìn)行調(diào)整，且沒(méi)有例外。只需在頂部欄切換設(shè)備，進(jìn)行只影響特定屏幕大小的調(diào)整。這意味著，你可以為移動(dòng)設(shè)備和桌面設(shè)備設(shè)置完全不同的樣式，而無(wú)需編寫(xiě)一行 CSS。

創(chuàng)建豐富的分層設(shè)計(jì)，使用樣式重復(fù)器（Style Repeaters）

Editor V4 引入了樣式重復(fù)器，允許你為背景和效果創(chuàng)建分層結(jié)構(gòu)：

• 添加多個(gè)背景圖像、漸變和顏色
• 創(chuàng)建復(fù)雜的陰影效果并多層疊加
• 拖動(dòng)層以調(diào)整優(yōu)先級(jí)
• 復(fù)制、隱藏或刪除層，使用上下文操作

增強(qiáng)的漸變工具提供高級(jí)控制，讓你添加所需的多個(gè)顏色停頓，并精確地定位它們，創(chuàng)造驚人的視覺(jué)效果。

樣式重復(fù)器目前適用于背景和盒子陰影，未來(lái)將為更多樣式選項(xiàng)添加支持。

新的 Editor V4 元素

Editor V4 Alpha 引入了七個(gè)新的原子元素：

• DIV 塊
• Flexbox
• 標(biāo)題
• 段落
• 圖像
• 按鈕
• SVG

每個(gè)元素都展示了 V4 的理念——簡(jiǎn)化標(biāo)記、一致的樣式模式和改進(jìn)的性能。這種模塊化方法確保了更快速、更具可擴(kuò)展性的設(shè)計(jì)更新，適用于整個(gè)網(wǎng)站。

與 V3 完美兼容

考慮到 Elementor 已經(jīng)擁有超過(guò) 1800 萬(wàn)個(gè)網(wǎng)站，我們正在分階段推出 Editor V4。這使我們能夠收集反饋并在成為默認(rèn)編輯器之前不斷改進(jìn)體驗(yàn)。

Editor V4 目前與 V3 完美兼容：

• 可以在同一頁(yè)面上同時(shí)使用 V3 和 V4 元素
• 繼續(xù)使用熟悉的 V3 小部件，同時(shí)逐步探索 V4 功能
• V3 小部件仍然功能齊全，可以放置在 V4 布局中（反之亦然）
• 不會(huì)影響現(xiàn)有的工作流程

開(kāi)始體驗(yàn) V4

重要提示：此 alpha 版本旨在供測(cè)試和探索使用。我們建議僅在暫存或測(cè)試網(wǎng)站上使用，不要在生產(chǎn)站點(diǎn)上使用。

這個(gè) alpha 版本只是一個(gè)開(kāi)始。未來(lái)幾個(gè)月中，將推出更多功能，改進(jìn)現(xiàn)有功能，并根據(jù)我們的反饋完善 Editor V4，使其成為最強(qiáng)大、最直觀的網(wǎng)站建設(shè)工具。

未來(lái)發(fā)布中，我們將看到——變量、自定義屬性、CSS ID 等更多功能！

總結(jié)

隨著 Editor V4 的推出，Elementor 將迎來(lái)一次重大的革新。新功能不僅提升了設(shè)計(jì)的靈活性和效率，還為用戶帶來(lái)了更強(qiáng)大的響應(yīng)式設(shè)計(jì)控制和更優(yōu)的性能表現(xiàn)。無(wú)論是通過(guò)可重用的類、交互式樣式，還是簡(jiǎn)化的 DOM 結(jié)構(gòu)，Editor V4 都在為每一位網(wǎng)站建設(shè)者提供更高效的工作流程和更精致的設(shè)計(jì)體驗(yàn)。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息