提升网站速度与用户体验,增强功能,带来更流畅的操作体验!
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 个表单小部件
这些优化使得网站的加载速度得到了极大提升,无论是在桌面端还是移动端,都能为访问者提供更流畅的浏览体验,同时对 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 的更新带来了多项改进,尤其是在性能优化、滚动体验和搜索功能方面:
- 持续的 CSS 优化:减少了不必要的 CSS 加载,提升了网站速度和响应能力。
- 新的锚点偏移控制:提供了更加精确和流畅的滚动体验,适用于有固定导航栏的页面。
- 搜索小部件分页:增强了实时搜索功能,通过分页提升了搜索速度和用户体验。
这些更新不仅能提高网站的加载速度,减少不必要的资源消耗,还能增强用户的浏览体验和互动性,为网站的整体优化提供强大的支持。
暂无评论内容