开启您的高性能独立站项目

腾腾博客专注 WordPress 高性能外贸建站
看了无数篇教程,依然不知道买哪家服务器最稳?不知道怎么配置才能让谷歌 PageSpeed 跑出高分?别纠结了,直接告诉我您的需求和预算。

我会根据您真实的业务场景,帮您避开那些又贵又坑的劣质主机和臃肿主题,量身定制最合理的建站项目方案。
VPS-WordPress

ElementsKit 使用教程:Elementor 最强增强插件功能详解与实操指南

你的 Elementor 缺的就是 ElementsKit

如果你用 Elementor 免费版搭建外贸独立站,做着做着会发现一些令人头疼的问题:

  • 想做一个多列下拉导航菜单(Mega Menu),Elementor 原生做不了
  • 想自定义网站顶部 Header 和底部 Footer,每个页面都不一样,Elementor 免费版没有这功能
  • 想设置不同用户组看到不同内容(登录用户 vs 访客),原生也没有
  • 模板库里的设计太少,想要更多现成模板直接导入用

这些问题,ElementsKit 一个插件全部解决

ElementsKit 是一个全能型 Elementor 增强插件,提供 110+ 强大组件(Widgets)和 1000+ 模板,拥有 200 万以上的 Elementor 用户在使用。 它由 Wpmet 团队开发,使用 ElementsKit 不需要安装 Elementor Pro,免费版 Elementor 就可以运行。

想了解更多 ELementor 建站知识可以参考:Elementor 编辑器教程

ElementsKit 功能概览:免费版能做什么,Pro 版多了什么

搞清楚免费和付费的边界,才能做出正确的决策。

免费版包含

ElementsKit 免费版提供 50+ 组件(Widgets)、5+ 核心模块,以及专业设计的 Elementor 模板,是目前免费 Elementor 增强插件中功能最完整的选择之一。

免费版已包含的实用组件(部分列举):

组件类别具体组件
内容展示标题(Heading)/ 按钮 / 手风琴折叠 / 选项卡 / 计数器
团队与社交团队成员卡片 / 社交图标 / 进度条
媒体图片对比 / 视频弹窗 / 图标盒子
营销倒计时 / 价格表 / 客户评价(Testimonial)
布局导航菜单 / 面包屑 / 搜索框

Pro 版独有功能

ElementsKit Pro 官方起价 $49/年(本博客Pro正版授权仅需¥38),解锁全部 Pro 专属组件和高级模块,包括:

点击获取:ElementsKit Pro官方正版授权

Pro 专属模块功能描述外贸站价值
Header Footer 构建器可视化设计网站顶部和底部,替代主题默认样式⭐⭐⭐⭐⭐
Mega Menu 构建器多列下拉导航菜单,支持添加图片/图标/小部件⭐⭐⭐⭐⭐
条件内容显示根据用户角色、设备类型、页面等条件控制内容可见性⭐⭐⭐⭐
社交媒体 Feed嵌入 Instagram/Facebook/YouTube 动态⭐⭐⭐
密码保护内容部分内容设密码才能查看⭐⭐
跨域复制粘贴从其他网站直接复制 Elementor 设计过来⭐⭐⭐⭐
自定义 Widget 构建器无代码创建自己的专属 Elementor 组件⭐⭐⭐
elementskit elementor tutorial 2

使用教程:安装并激活 ElementsKit

安装免费版(WordPress 插件库直接安装)

进入 WordPress 后台 → 插件 → 安装插件 → 搜索 ElementsKit → 找到作者为 Roxnor 的插件 → 点击安装启用

如果您还不会安装插件可以参考:WordPress插件安装教程

⚠️ 搜索结果里会有多个名字相似的插件,确认安装的是 ElementsKit Lite,作者是 Roxnor,活跃安装量 200 万以上。

elementskit elementor tutorial 3

安装 Pro 版

购买 Pro 授权后,登录 wpmet.com 账户 → 进入 Downloads → 下载 ElementsKit Pro 的 .zip 文件。

进入 WordPress 后台 → 插件 → 上传插件 → 选择下载的 .zip 文件上传安装,激活后进入 ElementsKit → License,输入购买时获得的 License Key,在授权管理中添加你的域名即可。

elementskit elementor tutorial 4

ElementsKit 仪表板与模块管理

激活后,WordPress 左侧菜单会出现 ElementsKit 选项,进入 ElementsKit → Dashboard

这里是 ElementsKit 最重要的控制中心,建议第一件事就是在这里做模块管理

为什么模块管理这么重要?

ElementsKit 基于模块化架构设计,每个组件(Widget)和模块(Module)都可以单独开启或关闭,有效减少不必要的加载时间。

如果你把所有 110+ 组件全部开启,网站会加载大量用不上的 CSS 和 JS 代码,拖慢速度。正确做法是:只开启你实际要用的组件

elementskit elementor tutorial 5

用 Elementor 和 ElementsKit Lite自定义网站页面

激活Elementor和ElementsKit Lite之后,我们新建一个页面。

elementskit elementor tutorial 6

进入ElementsKit模板库

elementskit elementor tutorial 7

选择你喜欢的页面模板或者sections进行导入

elementskit elementor tutorial 8

模板导入成功后,剩下的工作就像做“填空题”一样简单:只需把页面上的演示文字和配图,替换成您自己公司的真实资料,点击右上角“发布”,一个高大上的专属网页就上线了!

当然,如果您想自由发挥,完全可以自己从零开始用“搭积木”的方式。看一眼 Elementor 编辑器左侧的工具栏,ElementsKit 插件已经为您解锁了一大批高级扩展组件,直接用鼠标拖拽到右侧就能轻松排版。

elementskit elementor tutorial 9

ElementsKit 对网站速度的影响

这是很多人的顾虑,正面回答:

ElementsKit 基于模块化架构,每个组件和扩展都可以单独启用和禁用,有效减少额外的加载时间。

实测影响:

  • 只开启 5-10 个必要组件:页面额外加载体积约 +30-60KB,可忽略
  • 全部 110+ 组件开启:额外加载约 +300-500KB,明显拖慢速度
  • 结论:精简开启是关键,按本文第二步的推荐配置做,对速度影响极小

搭配 WP Rocket 的 Delay JS 和 Minify CSS 功能,ElementsKit 引入的资源会被合并压缩,速度损失几乎可以归零。

相关教程:WP Rocket 使用教程

免费版够用吗?什么时候升级 Pro?

免费版完全够用的情况:

  • 只用基础组件(手风琴、价格表、计数器、按钮等)
  • 不需要自定义 Header Footer
  • 用主题自带的导航菜单

值得升级 Pro 的情况:

你有这个需求Pro 对应功能
想自定义顶部 Header 和底部 FooterHeader Footer Builder
想做多列下拉 Mega MenuMega Menu Builder
需要控制不同用户/设备看到不同内容Conditional Content
需要跨站复制 Elementor 设计Cross Domain Copy Paste
想嵌入社交媒体 FeedSocial Feeds

常见问题

ElementsKit 需要安装 Elementor Pro 才能使用吗?

不需要。ElementsKit 可以在免费版 Elementor 上正常运行,不需要 Elementor Pro 授权。这是 ElementsKit 的一大优势——你不需要花 $99/年 买 Elementor Pro,也能用上 Header Footer Builder 等高级功能。

ElementsKit 和 Essential Addons for Elementor 哪个更好?

两者各有侧重。ElementsKit 的 Header Footer Builder 和 Mega Menu 是同类插件中体验最好的,模块化开关机制对速度控制更友好;Essential Addons 的 WooCommerce 相关组件更丰富。如果是外贸展示站,推荐 ElementsKit;如果主要用 WooCommerce 做电商,两者都可以考虑。

ElementsKit 对网站速度影响大吗?

取决于你开启的组件数量。精简开启 5-10 个需要的组件,额外加载体积约 30-60KB,基本可以忽略。建议进入 ElementsKit Dashboard 把不用的组件全部关闭,搭配 WP Rocket 进一步压缩,速度影响可以最小化。

ElementsKit 的 Header Footer 和我主题自带的 Header 冲突怎么办?

如果你的主题(如 Blocksy、Astra、GeneratePress)有自己的 Header 系统,启用 ElementsKit Header Footer Builder 后需要在主题设置里关闭主题原生的 Header 显示,避免两个 Header 叠加。大多数流行主题都有「Disable Theme Header」的选项,找到关闭即可。

ElementsKit 支持中文语言吗?

插件界面目前主要是英文,但编辑器里设计的内容完全支持中文输入,对外贸中文站建设没有任何影响。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注