Elementor 3.22 更新：全新 Off-Canvas Widget 和缓存功能提升网站性能

新功能：Off-Canvas Widget

Elementor 3.22 引入了新的专业设计工具 Off-Canvas Widget，它可以创建交互式页面布局并提升用户体验。

功能特点：

• 交互式布局：通过单击链接打开和关闭容器，可以设计出更具互动性的页面。
  • 例如，可以将 Off-Canvas Widget 连接到“注册”按钮，点击后打开一个包含表单的小部件。
• 嵌套元素支持：Off-Canvas Widget 的内容区域可以作为容器使用，支持放置其他小部件，如表单。
  • 允许使用常规容器的所有设计功能对其进行样式化。
• 动态标签设置：在链接设置中，点击动态标签按钮可以选择连接到特定的 Off-Canvas Widget。
  • 例如，页面上有多个 Off-Canvas Widget 时，它们会显示为“Off-Canvas Widget 1”或“Off-Canvas Widget 2”等。
  • 可以选择链接触发打开、关闭或两种行为。
• 品牌个性化：可以个性化小部件的进入和退出动画样式和持续时间。
  • 控制交互的行为，如设置何时以及如何退出覆盖层，防止页面滚动。
  • 设置覆盖效果的样式，可以选择打开或关闭覆盖层，更改颜色，或选择图像。
  • 定义容器的 HTML 标签。
• 样式自定义：在“样式”选项卡中，自定义 Off-Canvas Widget 的外观，如颜色、字体和布局等。

使用步骤：

1. 将 Off-Canvas Widget 放置在页面的任何位置。
2. 单击编辑面板中的“编辑模式”控件，在编辑器中打开和关闭它。
3. 在链接的设置中，点击动态标签按钮，选择触发打开、关闭或两种行为。
4. 前往 WordPress 仪表板 → Elementor → 功能激活“嵌套元素”。

新功能：Elementor 缓存

Elementor 3.22 引入了新的缓存功能，通过缓存小部件的输出来显著提高网站性能。

性能改进：

• 内存使用减少：内存使用量从 3MB 减少到 8KB。
• TTFB 提升：首次字节时间 (TTFB) 提升 33%-70%。

缓存管理：

• 静态与动态内容区分：缓存功能区分静态和动态小部件，仅缓存静态内容。
  • 动态小部件（如包含访问者特定信息的小部件）不缓存。
• 缓存设置：在编辑面板中的高级选项卡中，可以控制特定小部件的缓存设置。
  • 例如，可以激活或停用小部件的缓存功能。

激活步骤：

1. 前往 WordPress 仪表板 → Elementor → 功能激活“元素缓存”。
2. 在 WordPress 仪表板 → Elementor → 性能中，控制缓存设置和缓存时间。

其他性能更新

原生 JS 替换 JS 库

• 提升前端性能：将外部 JavaScript 库（如 Waypoint.js）替换为原生的 JavaScript 解决方案。
  • 这种替换使用更现代的代码，提高了性能和 SEO 分数。
  • 替换后减少 18KB 内存使用。
• 向后兼容性：为了保持与第三方插件的向后兼容性，旧的 JavaScript 库将在未来版本中保留，但仅在插件开发者将其设置为依赖项时才会被激活。

新的“性能”选项卡

• 集中管理性能功能：所有稳定的性能功能都集中在新的“性能”选项卡中，方便用户激活或停用。
  • 用户可以在此选项卡中探索并激活与网站相关的性能改进功能。

激活步骤：

前往 WordPress 仪表板 → Elementor → 设置 → 性能。

总结

Elementor 3.22 通过以下方式显著提升网站性能和用户体验：

• 新增 Off-Canvas Widget：构建交互式布局，提升用户参与度。
• 引入缓存功能：优化小部件加载时间，提高网站性能。
• 原生 JS 替换外部库：清理网站代码，提高前端性能。
• 新的性能选项卡：集中管理性能改进功能，简化优化流程。

这些新功能和改进不仅提高了网站的加载速度，还简化了性能优化的管理流程，帮助用户更轻松地构建快速且引人入胜的网站。