Editor V4 Alpha 引入了一个以 CSS 为核心的框架，提供可重用的类和状态、性能改进、统一的样式系统和完全响应式样式控制，这些设计旨在提高网站建设的效率和一致性。
随着网页设计多年来的演变，网站创建者面临的挑战也逐渐增多，许多人遇到类似的问题：
在网站中多处元素样式保持一致时的困难
在多个地方更新相同样式时的重复工作
限制响应性，迫使你使用自定义 CSS 或隐藏元素
复杂布局导致的性能下降
不同小部件间界面差异
Editor V4 通过一个强大的 CSS 为核心的框架来解决这些问题，提供了专业级的功能，且无需编写一行代码。
Editor V4 的第一个 alpha 版本现已作为可选体验提供，给你机会按自己的节奏探索新功能。你可以测试这些新功能，提供反馈，同时继续使用熟悉的 V3 功能，我们将继续扩展和改进 V4 体验。
要开始使用 Editor V4 Alpha，更新到 Elementor 3.29，进入 Elementor > 设置 > Editor V4，按照激活步骤操作。请注意，这是一个早期的 alpha 版本，应仅在暂存或测试网站上使用，避免在生产环境中使用。
一次设置样式，随处应用——使用类（Classes）
想象一下，构建一个网站，网站中有很多按钮，它们应该共享相同的设计。过去，你需要逐个设置每个按钮的样式，或者依赖一些替代方法。现在，Editor V4 的类系统让你能够：
创建可重用的样式集合，可以应用到多个元素上
在一个地方更新样式，所有使用该样式的地方都会立即反映更改
保持整个网站的设计一致性
类系统引入了两种类型的类：
本地类（Local Class） 每个元素自动获得一个唯一的本地类（以粉色显示），该类具有最高的样式优先级，且不可删除。确保元素特定的样式不会被其他类覆盖。
全局类（Global Class） 你可以创建并命名自己的全局类（以绿色显示），应用到任何需要共享这些样式的元素上。当你更新全局类时，所有使用该类的元素都会同步更新。你可以从元素中删除全局类，而不删除该类本身，这让你在设计时可以轻松进行不同设计的尝试。
无需编写代码即可定义交互式样式——使用状态（States）
使用状态（伪类）让你的站点更具互动性。你可以定义元素在用户与之互动时的外观，比如创建悬停、聚焦和激活状态。这样，你就能设计引人入胜的互动体验，而无需编写任何代码。
要添加状态，只需点击你希望应用状态的类旁边的三个点，选择悬停、激活或聚焦状态。你所定义的更改将只应用于选择的状态。一个状态的更改不会影响其他状态，给予你对交互元素的精确控制。最棒的是，你可以通过将状态与全局类一起使用，在整个网站上应用一致的交互体验。
使用类管理器管理和组织你的类
类管理器为你提供了一个命令中心，用于保持网站样式的一致性，可以让你：
从一个中央位置删除或重命名类
通过拖放改变类的优先级和层级
查看所有全局类的组织视图
了解样式的级联情况，使用类指示器
在处理类和状态时，颜色编码的指示器会帮助你了解样式的级联情况。每种颜色具有不同的功能：
粉色点：来自本地类的样式
绿色点：来自全局类的样式
橙色点：需要注意的冲突样式
灰色点：来自其他类的继承样式
这些视觉提示在你工作时提供即时反馈，帮助你理解样式的来源及其相互作用。
统一样式选项卡，简化工作流程
Editor V4 引入了统一样式选项卡，适用于所有元素，而与 V3 中每个小部件拥有独立样式选项面板不同。
统一样式选项卡的主要优势：
内容和功能设置保持在常规选项卡中
所有视觉样式选项都在样式选项卡中
一次学习系统，随处应用
在所有元素中一致地访问强大的样式功能
统一样式选项卡包括全面的部分，提供完整控制：
布局：定义显示行为和结构
间距：设置边距和填充的链接控制
大小：定义宽度和高度，设置约束
定位：选择定位方法，并控制 Z-Index
排版：访问重要的文本样式选项
背景：创建丰富的分层设计，具有无限潜力
边框：应用一致或不同的边框样式
效果：添加多个阴影层和其他效果
通过单一 DIV 包裹器提高站点性能
Editor V4 引入了一个显著更清洁的 DOM 结构，直接影响网站的性能。现在，每个元素只使用一个 DIV 包裹器，而不是以往版本中的多个嵌套 DIV。这种简化的结构带来了更清晰的 HTML 输出，减少了页面大小，减少了浏览器渲染页面时的复杂性，从而带来以下好处：
更清晰的代码和更快的渲染速度
改善的 SEO 排名
更好的访问者体验
尽管 alpha 版本已经显示出性能改进，但随着 Editor V4 的成熟，这些好处将在网站上使用新优化元素时更加显著。
针对每个设备控制每个样式属性
Editor V4 在响应式设计方面进行了全面改进，提供前所未有的控制，解决了 V3 小部件的限制，在 V3 中只有特定的控制选项具备响应式功能。
在 Editor V4 中，每个样式属性都可以针对每个设备进行调整，且没有例外。只需在顶部栏切换设备，进行只影响特定屏幕大小的调整。这意味着，你可以为移动设备和桌面设备设置完全不同的样式，而无需编写一行 CSS。
创建丰富的分层设计，使用样式重复器（Style Repeaters）
Editor V4 引入了样式重复器，允许你为背景和效果创建分层结构：
添加多个背景图像、渐变和颜色
创建复杂的阴影效果并多层叠加
拖动层以调整优先级
复制、隐藏或删除层，使用上下文操作
增强的渐变工具提供高级控制，让你添加所需的多个颜色停顿，并精确地定位它们，创造惊人的视觉效果。
样式重复器目前适用于背景和盒子阴影，未来将为更多样式选项添加支持。
新的 Editor V4 元素
Editor V4 Alpha 引入了七个新的原子元素：
DIV 块
Flexbox
标题
段落
图像
按钮
每个元素都展示了 V4 的理念——简化标记、一致的样式模式和改进的性能。这种模块化方法确保了更快速、更具可扩展性的设计更新，适用于整个网站。
与 V3 完美兼容
考虑到 Elementor 已经拥有超过 1800 万个网站，我们正在分阶段推出 Editor V4。这使我们能够收集反馈并在成为默认编辑器之前不断改进体验。
Editor V4 目前与 V3 完美兼容：
可以在同一页面上同时使用 V3 和 V4 元素
继续使用熟悉的 V3 小部件，同时逐步探索 V4 功能
V3 小部件仍然功能齐全，可以放置在 V4 布局中（反之亦然）
不会影响现有的工作流程
开始体验 V4
重要提示：此 alpha 版本旨在供测试和探索使用。我们建议仅在暂存或测试网站上使用，不要在生产站点上使用。
这个 alpha 版本只是一个开始。未来几个月中，将推出更多功能，改进现有功能，并根据我们的反馈完善 Editor V4，使其成为最强大、最直观的网站建设工具。
未来发布中，我们将看到——变量、自定义属性、CSS ID 等更多功能！
总结
随着 Editor V4 的推出，Elementor 将迎来一次重大的革新。新功能不仅提升了设计的灵活性和效率，还为用户带来了更强大的响应式设计控制和更优的性能表现。无论是通过可重用的类、交互式样式，还是简化的 DOM 结构，Editor V4 都在为每一位网站建设者提供更高效的工作流程和更精致的设计体验。