Tag: Elementor

提升网站速度与用户体验，增强功能，带来更流畅的操作体验！

Elementor 3.25 版本带来了一系列提升网站性能和用户体验的重大改进。这次更新的核心亮点包括持续的 CSS 优化、更平滑的滚动体验（借助本地 CSS 和新的锚点偏移控制），以及搜索小部件的分页功能。以下是此次更新的详细内容：

性能提升：持续的 CSS 优化

网站的加载速度对用户体验至关重要，尤其是在移动端和 SEO 排名方面。Elementor 3.25 通过持续的 CSS 优化，显著提高了页面加载速度，减少了不必要的资源加载，从而提升网站的整体性能。

关键改进：

• Elementor Pro 插件的零 CSS 权重
  在 Elementor 3.25 中，Elementor Pro 插件将默认从零 CSS 开始。这意味着，当首次启用该插件时，插件不会加载任何 CSS 样式，直到开始添加小部件或使用其功能。这种方法能够大幅度减少初始 CSS 的体积，确保网站从一开始就更加轻便，避免加载冗余的 CSS，进一步提升加载速度。
• WooCommerce 小部件的按需加载
  WooCommerce 用户将从这次更新中受益匪浅。之前，无论是否使用，Elementor 会加载所有 32 个 WooCommerce 小部件的 CSS，而在 3.25 版本中，CSS 将根据实际使用情况进行条件加载。这样，只有在页面上实际使用到某个 WooCommerce 小部件时，才会加载该小部件相关的 CSS，从而节省最多 197KB 的 CSS 资源，使 WooCommerce 商店的加载速度大大提升。
• 全局样式按需加载
  Elementor 3.25 中的全局样式将进行条件加载。这一改进可将全局样式文件大小减少多达 65KB，进一步减少不必要的 CSS 负担，提升网站的响应速度。
• 按需加载小部件样式
  在 3.25 版本中，Elementor 针对不同的小部件进行了更细化的按需加载。原本一次性加载的样式现在会根据实际使用的小部件逐个加载。具体包括：
  • 6 个主题元素小部件
  • 3 个轮播小部件
  • 2 个表单小部件

  通过这种优化，Elementor 只加载实际使用的 CSS 样式，避免了冗余的代码加载，从而显著提高了页面的加载速度。

这些优化使得网站的加载速度得到了极大提升，无论是在桌面端还是移动端，都能为访问者提供更流畅的浏览体验，同时对 SEO 评分和核心 Web Vitals 指标产生积极影响。

[Pro] 使用原生 CSS 实现更流畅的滚动：引入新的锚点偏移

Elementor 3.25 还对滚动性能进行了重大改进。Elementor 技术团队用原生 CSS 解决方案替换了 AnchorJS 库，这不仅通过减少对 JavaScript 的依赖来提高性能，而且还使滚动在不同设备上更流畅、更一致。

新的锚点偏移控制

这次更新的主要功能之一是“锚点偏移”，它可确保锚点链接滚动到页面上的正确位置，同时考虑到粘性标题和其他元素。以前，锚点链接通常会滚动到隐藏在粘性标题后面的位置，从而给访问者带来困惑和沮丧。“锚点偏移”功能解决了这个问题，它能设置自定义偏移值并调整滚动行为，使链接部分完全可见，而不会隐藏在粘性标题后面。

如何设置锚点偏移

要设置锚点偏移，转到标题中的“高级”选项卡，向下滚动到“运动效果”，将标题设置为粘在顶部或底部，然后可以在锚点偏移字段中设置相关值。

[Pro] 增强搜索小部件：实时结果分页

Elementor 3.25 中的搜索小部件进行了重要更新，引入了实时结果分页功能。以前，实时搜索下拉菜单中的搜索结果仅显示一定数量的项目，访问者必须导航到单独的页面才能查看其他结果。现在，Elementor 3.25 直接在实时搜索下拉菜单中引入了分页功能，允许访问者浏览多个结果网格而无需离开当前页面，并在搜索大量内容时提供更无缝的体验。

主要优点

• 改进的搜索体验：访问者可以直接在搜索栏中探索更多结果，减少摩擦并保持他们的参与度。
• 增加内容发现：通过分页，访问者更有可能找到他们正在寻找的内容，从而提高访问者满意度。
• 更高的参与度和更低的跳出率：通过让访问者在搜索时停留在当前页面，可以创建更无缝的体验，让他们参与更长时间。

如何设置分页 

要将分页添加到“搜索”小部件，首先要在“内容”选项卡的“结果”部分下启用“实时结果”，然后选择“循环模板”，然后在“其他设置”（在同一选项卡 -“内容”）下，可以选择启用带有数字和/或下一个/上一个的分页选项。还可以从“样式”选项卡中自定义分页的外观。可以选择调整对齐方式、垂直定位、间距和排版，以及添加悬停和活动状态样式。

Elementor 3.25 的其他更新

• 表单提交默认在所有网站上处于活动状态：表单提交现在在编辑器中是原生的，并且在所有网站上都处于活动状态。用户可以通过导航到 Elementor > 设置 > 高级，从 WP 仪表板禁用此功能。
• 新的优化标记性能实验：删除按钮、PayPal 和 Stripe 小部件的第一个包装器div，以简化标记并减少整体 DOM。目前处于 Alpha 状态，不应在生产站点上激活。
• Twenty Fifteen 主题：删除 CSS 兼容性，从而删除使用“Elementor Canvas”模板的页面上的主题背景颜色。
• 功能和实验更新：
  • 网格容器 – 合并到 Flexbox 容器并重命名为“容器”。  
  • 优化控制负载 – 针对现有站点有效并提升至稳定状态。  
  • 嵌套元素 – 适用于现有站点。  
  • 编辑器顶部栏 – 对现有站点有效。
  • 显示条件（针对元素）——编辑器中的原生条件。

总结：

Elementor 3.25 的更新带来了多项改进，尤其是在性能优化、滚动体验和搜索功能方面：

1. 持续的 CSS 优化：减少了不必要的 CSS 加载，提升了网站速度和响应能力。
2. 新的锚点偏移控制：提供了更加精确和流畅的滚动体验，适用于有固定导航栏的页面。
3. 搜索小部件分页：增强了实时搜索功能，通过分页提升了搜索速度和用户体验。

这些更新不仅能提高网站的加载速度，减少不必要的资源消耗，还能增强用户的浏览体验和互动性，为网站的整体优化提供强大的支持。