Elementor 4.0 版本正式发布：用于构建可扩展网站的全新 Atomic 基础

Elementor 4.0 版本引入了一个全新的基础架构，包含可复用的变量（Variables）、类（Classes）和组件（Components），以及改进的性能、统一的样式系统和完全响应式的样式控制。所有这些升级都旨在让网站构建体验变得更加快速、可扩展且高度一致。

就在刚刚，Elementor 团队宣布 Elementor 4.0 版本现已正式上线！

在 Elementor 4.0 中，新的 Elementor 安装将默认开启 Atomic 功能，包括 Atomic 元素、变量、类和组件。

对于现有网站，更新至 4.0 不会改变当前的设置。用户可以从“元素面板”（Elements Panel）中的新提示手动启用 Atomic 功能，也可以在 WordPress 后台 → Elementor → 编辑器 → 设置 → Atomic 编辑器 中将其禁用。

开发者可以继续使用当前的设置进行工作，并选择将新的 Atomic 元素与同一个页面上的现有小工具（widgets）结合使用。这使得创作者能够在保持与现有工作流程兼容且无需重建现有布局的情况下，逐步采用新的架构。

据悉，更多的 Atomic 功能将在未来的版本中继续扩展和推出。用户可以持续关注 Elementor 的产品路线图。

使用类（Classes）一次性设置样式

想象一下构建一个包含几十个按钮且应共享相同设计的网站。在过去，创作者需要为每个按钮单独设置样式，或者依赖一些替代方案。借助全新的类（Classes）系统，用户现在可以：

• 创建可应用于多个元素的可复用样式集合
• 在一个统一的位置更新样式，并让修改在全站自动生效
• 在整个网站中轻松保持设计的一致性

使用状态（States）无需编码即可定义交互式样式

通过使用状态（伪类，Pseudo-Classes），交互式元素能让网站栩栩如生。系统允许为任何类创建悬停（hover）、聚焦（focus）和活动（active）状态，从而准确定义访客与元素互动时的外观。这使得开发者无需编写一行代码就能设计出引人入胜的交互体验。

使用类管理器（Class Manager）控制和组织类

类管理器提供了一个维持全站样式一致性的指挥中心，允许用户：

• 从一个中心位置删除或重命名类
• 通过拖放更改类的优先级和层级
• 在一个有条理的视图中集中查看所有的全局类

使用变量（Variables）创建一致的设计系统

随着变量（Variables）的引入，大规模设计变得异常简单。变量允许一次性定义颜色、字体系列和尺寸值，并在网站中一致地应用，而不是逐个元素地手动分配样式。

假设在多个全局类以及站点的不同部分使用相同的颜色、大小和字体。现在无需每次都手动设置背景、文本颜色、文本大小和字体系列，用户可以将这些属性直接链接到诸如“primary-color”（主色）、“button-font”（按钮字体）和“accent-text”（强调文本）等变量上。

如此一来，如果品牌调色板发生变化，只需更新一次变量，该更改就会级联到所有应用了这些类和元素的组件中。

使用组件（Components）一次构建，随处复用 [Elementor Pro]

组件功能允许创建在整个网站保持同步的可复用布局区块，同时仍然允许在各个实例中进行受控的自定义。创作者可以将任何容器转换为组件，并为其赋予一个清晰、可复用的标识。

当一个组件被编辑时，网站中的所有实例都会自动更新。其结构和样式保持同步，这使得组件成为全站共享区块的理想选择，例如横幅（banners）、号召性用语（CTAs）、功能网格、页眉，以及需要随着时间推移保持一致的重复布局模式。

此外，组件还支持受控的内容编辑，允许公开组件内容的特定部分，以供每个实例进行单独编辑。编辑人员和客户只能调整这些暴露出来的属性，而其布局和结构则受到保护并保持全局同步。这种在一致性与灵活性之间的平衡，使得组件对专业工作流程、团队协作以及客户交接尤为有用。

随着项目规模和复杂性的增长，组件与变量、类以及新的样式架构一起，引入了一种更加系统化的方法来构建和维护网站。

通过统一的样式选项卡实现一致的工作流程并简化操作

Elementor 4.0 引入了所有 Atomic 元素共享的统一样式选项卡（Style Tab），这与经典 v3 小工具中每个小工具都有自己独立的样式选项和结构的面板形成了鲜明对比。

全新统一的样式选项卡的主要优势包括：

• 内容和功能设置保留在“常规”选项卡中
• 所有视觉样式选项都可以在“样式”选项卡中集中找到
• 只需学习一次系统，即可在任何地方应用
• 跨所有元素一致地访问强大的样式功能

通过单 div 包装器提升网站性能

V4 编辑器引入了一个明显更简洁的 DOM 结构，这将直接影响网站的加载性能。现在，相比以往版本中多个嵌套的 DIV，每个元素只使用一个单一的 DIV 包装器。简化的结构能生成更干净的 HTML 输出，减少页面的整体大小，并降低浏览器在渲染页面时需要处理的复杂性，从而带来：

• 更干净的代码和更快的渲染速度
• 更高的 SEO 排名表现
• 为网站访客提供更流畅的体验

在每种设备上控制所有样式属性

新版本通过一种综合方法改变了响应式设计，赋予开发者前所未有的控制力，消除了 v3 小工具中只有特定控件才具有响应式选项的局限性。

在 Atomic 元素中，每一个样式属性都可以针对不同设备进行独立调整，没有任何例外。只需在顶部栏切换设备，即可进行有针对性的调整，而这些调整只会影响正在编辑的特定屏幕尺寸。这意味着，无需编写一行 CSS 代码，就可以在移动端实现与桌面端截然不同的样式。

当用户使用顶部栏选择器在设备之间切换时，不仅仅是在预览网站的外观，实际上是进入了一个特定于设备的编辑上下文中。

以完全的 Atomic 控制来构建表单 [Elementor Pro]

全新的 Atomic 表单是通过在表单容器内组装各个字段元素来构建的。像标签（Label）、输入框（Input）、文本域（Textarea）、复选框（Checkbox）或提交按钮（Submit Button）等每一个字段，都是独立存在且可直接拖拽到表单结构中的元素。

表单字段的运作方式与编辑器中的其他元素相似，这意味着可以通过统一的样式选项卡对它们进行样式设置，并将它们与类、变量、组件等一起纳入更广泛的设计系统中。

由于每个字段都是独立的元素，创作者可以在画布上直观地构建和排列表单结构，而无需在小工具面板中进行繁琐的配置。

此外，现在还可以在表单包装器内嵌套其他元素，包括文本、图标、图像和布局容器，从而允许以更大的灵活性甚至采用多列方式来自由设计表单布局。

Elementor 团队表示，未来的迭代将为该系统扩展更多功能，例如条件逻辑和更高级的表单工作流程。

创建高级交互以实现动态体验 [Elementor Pro]

新版本允许设计出能够响应访客实际浏览网站方式的交互效果。元素不再仅依赖于进入动画，现在能够对真实的用户行为和页面移动做出反应。

触发器（Triggers）使构建更丰富、更动态的体验成为可能，例如元素随着用户滚动而显示，卡片在悬停时产生反应，或组件对点击做出响应。

为了支持这些交互，全新的“自定义”（Custom）效果提供了对元素动画呈现方式的精准控制。无需选择预设的动画，开发者可以确切定义元素在不同状态之间是如何转换的。

交互动画也可以按照各个断点（breakpoint）进行配置，允许为桌面端、平板端和移动端设计不同的动效。这确保了动画在各种设备上都能有恰当的表现。例如，在较大的屏幕上使用更丰富的与滚动相关的效果，而在移动设备上则简化或禁用某些交互，以保持性能和可用性。

(注：关于 Elementor 4.0 版本的更多疑问，用户可以前往 Elementor 官方网站查看其常见问题解答 FAQs。)