这是一篇“ Elementor Pro 教学 ”的进阶版指南。Elementor Pro是Elementor的付费版本。
觉得Elementor Pro贵的话，可以看这篇Elementor Pro太贵怎么办
使用 WordPress 建设网站，Elementor页面编辑器通常是不可或缺的一环，尤其像跨境电商网站，还有B2b外贸独立站。
除此之外，不论是品牌官网设计、架设购物网站等各类型网站，有个好用的页面编辑器，可以帮助你更快的制作出美观的网站和高转化率的网站。
我们看一下这次的文章目录。
1. Elementor 是什么？
2. Elementor Pro 如何购买？
3. Elementor Pro外挂安装＋凭证连线
4. Pro 进阶区块＋模板
5. Pro 元素介绍
6. Pro WooCommerce 元素介绍
7. Theme Builder 主题编辑器
8. Popups 弹出式视窗
9. 自订程式码 / 字型 / 图示
常见问题
1. Elementor 是什么？
Elementor 是全球知名的 WordPress 页面编辑器，全球已经有 500w+ 次下载量，基本上与所有主题兼容。可参考 Elementor 插件教学。
你不需会任何编程基础，只要用区块拖拽方式，就能定制化网站设计。
有关任何的页面佈局、新增区块功能、编辑区块内容等 ..，都将变得更加简单。
Elementor 形象教学示范
Elementor 有多种功能区块，是建置网站的好帮手，当你心中简单构图完成，接下来只要拖放区块，并放置在网页上即可完成设计。
Elementor 有多种区块模板和网站样板，点击按钮就可套用，再从中进行修改自己喜欢的设计，可节省大量的建置网站时间。
购物网站盛行的时期，或许你想架设购物网站，Elementor 对于 WooCommerce 电商外挂，有良好的支援。
并为此开发了 WooCommerce Builder（购物网站编辑器），除了一般的页面设计，你也能设计定制购物网站页面。
像是添加购物车按钮、产品价格、产品图片和说明、相关产品列表、产品库存提醒等 .. ，如下图。
方案评论
Elementor 有免费版方案可使用，如果感觉不错用且有更多设计上的需求，再升级为进阶版即可。完整 Elementor Pro 进阶教学。
Elementor 进阶版，有额外 50 多个专业元素功能、300 多种进阶模板、主题编辑器、表单编辑器、弹出式广告编辑器、WooCommerce Builder（购物网站编辑器）等 ..，有更多功能可以使用。
Elementor 进阶版方案，分为个人用、公司用的两大类型，裡面又有不同的方案，但能使用的功能几乎都一样，最大的差别是“ 使用的网站数量 ”。
如果你只有一个网站会使用，只需购买最低的方案即可，依此类推。
产品定价
Elementor 个人用，起手价格是 $ 49 美元 / 年，算是满平价的费用，可应用在一个网站上，并享用它的全部功能。
2. Elementor Pro 如何购买？
如果你对 Elementor Pro 有兴趣，那要如何购买呢？这边带大家简单跑一次流程。
首先，前往 Elementor 方案页面，如果个人（少数量网站）使用选 Individuals，如果是公司（多数量网站）使用选 Teams。
前往 Elementor 方案页面
下图，我是用个人的基本方案示范（适用一个网站），如果有多个网站需使用，就选择适合的方案即可，里面都有标示可供几个网站使用。
购买安裝＋费用下载
小提醒：Advanced（3 个网站 99 美元）方案被放在下面的小字，3 个网站方案对于站长来说十分实用，可以参考看看：）
接著进入结帐页面，需先创建 Elementor 帐号，输入电子信箱、密码，选择创建帐号。
跳转第三步骤，填入相关购买资讯，这裡都需填写英文。
最后确认金额，和选择付款方式，完成后，点选“ Pay now ”送出订单。
接著，后面流程就照 Elementor 指示进行操作即可。
完成后前往 Elementor 会员后台，等等会教大家如何下载＋安装 Elementor Pro 外挂。
3. Elementor Pro 外挂安装＋凭证连线
登入并前往 Elementor 会员后台，在右上角会有下载 Icon，点击下载 Elementor Pro 外挂。
前往 WordPress 后台，找到外挂 > 安装外挂 > 上传外挂，把刚下载的 Elementor Pro 外挂上传安装＋启用。
前往 Elementor > License，点击 Connect ＆ Activate，与 Elementor 系统进行串接。
输入帐密登入 Elementor 后台，就会看到你的网域和帐号使用者，进行串接的图示，点击 Activate 连线。
如果有看到状态显示 Active，就代表网站的 Elementor Pro 功能，已经被顺利激活了唷：）
接下来，我们就能享用 Elementor Pro 强大的能力了。
4. Elementor Pro 进阶区块＋模板
Elementor Pro 功能解锁后，有更多的进阶区块＋模板，可以直接套用。
不论是区块或是页面类型，有标注 Pro 的都可以使用囉，如果你有多个网站架设需求，这会很有帮助！
Elementor Pro 进阶区块样板
5. Pro 元素介绍
Elementor Pro 提供多达 50 多种元素功能，基本上想要制作的功能，都可以直接拿来用。
如果加上第三方主题或外挂（有支援 Elementor 的），有些还会提供更多 Elementor 元素可用，简单来说根本达到无敌境界。
像是 Astra Pro 主题 的 Ultimate Addons for Elementor 插件，或是 Soledad 主题 内建的 Elementor 扩充，都是相关例子。
或是搭配 Essential Addons Elementor 外挂，都有提供非常多种元素功能。
下面我会挑选 Elementor Pro 的部分元素，做个简单翻译＋介绍，那我们开始囉。
Posts 列表：可把多个文章 / 页面 / 商品类型，用列表的方式呈现出来。
能设定显示样式、一栏显示几个、是否显示图片＆尺寸、显示标签、显示分页、文章显示条件等 。
Portfolio 作品集：可制作个人 / 公司作品集，或相关客户案例。
能设定佈局样式
作品显示类型（文章 / 页面 / 商品）
作品显示条件（例如，只显示某分类 / 标籤 / 作者的作品）
作品排序条件（例如，只显示最近一个礼拜 / 一个月的作品）
是否显示分类标签（访客可点击某分类标签，会自动带出分类下的作品）
更多设定
Gallery 画廊：跟上一个 Portfolio 作品集功能差不多，但点击图片会有图片放大的轮播功能，满适合有展示设计作品的需求。
Slides 轮播图：轮播图功能，可设定区块高度、显示导航、自动轮播、转场效果、轮播速度、无限轮播等 。
Price Table 价格表：如果是提供软件服务、专案服务等 ..（品项较少），这类型的价格表满好用的，可更换内容细项、显示样式等 ..。
Elementor Pro 还提供另一种价格显示元素，就是 Price List 价格清单，满适合有多项产品类型、服务类型的呈现。
Share Buttons 社群按钮：新增社群分享功能，可自订显示样式。
Form 表单功能：表单留言功能，有支援多种栏位类型、按钮样式设定、讯息送出后相关动作 ..
有关 Form 表单元素，因为网站有很多表单设计都需要用到它，像是联络表单、电子报订阅表单、会员登入 / 注册表单等 ..，所以我有特别写一篇 如何制作＋设计客制化表单，应该会有效的帮到你。
至于电子报订阅表单，可搭配 MailChimp 电子邮件软件，可以藉由这个平台完美的操作邮件营销。
还有会员登入 / 注册表单，常会用到社群快速注册功能，可参考 Super Socializer 外挂教学，就能启用此功能。
6. Elementor Pro WooCommerce 元素介紹
Elementor 和 WooCommerce 电商外挂有完美的支持，我在常见商品类型，有分享多种商品建立方法，可满足不同商家的需求。
Elementor Pro 有提供多个元素，可用在 WooCommerce 页面。但要留意的是，在不同的主题或页面上，不一定会显示所有的 WooCommerce 元素（有支援才会显示）。
否则网站不是架设购物网站，但却出现 WooCommerce 元素在工具列，那也会有点不太合理。
下面我会挑选几个 Elementor Pro 的 WooCommerce 元素来分享。
Product Images 商品图片：支援多张商品图呈列，可调整边线或其他样式。
Product Title 商品标题：设定商品名称。
Product Content 商品内容：商品内容描述。
Add To Cart 加入购物车：购买按钮。
我用上面提到的元素，快速设计一个单一商品页面，实在很方便（下图）。
Products 商品列表：新增商品列表功能。可设定显示的商品条件，像是用近期商品、特价商品、特色商品、手动指定等 .. 作为显示的条件。
还有许多功能，像是 Product Related 相关商品、WooCommerce Pages 页面套入等 .. 功能，有兴趣都可自行玩玩看：）
7. Theme Builder 主题编辑器
这是 Elementor 很酷的功能之一，可以用它打造自己的网站佈局（网站主题）。
我们知道一个网站的组成，可能是由多个页面组成，而且一般来说不同页面的头部、尾部都长的一样，但如果我们想要不同页面，呈现不同的头部或尾部，那要怎麽做呢？
这个功能就派上用场啦！它能让你自定义显示条件，让你在指定类型 or 指定页面，显示指定的头部或尾部区块，是不是很方便呢！
至于要如何做呢？下面我示范给大家看。
前往 Templates > 主题建构器，点击常见的左上角“ 新增 ”也可以。
但这裡玩点不一样的，我们试看看 Elementor 新功能，点 Try it now 就能前往 Theme Builder。
进入后，左手边可选取想新增的类型，这边我示范新增顶部 Header，选好之后点右上角的 Add New。
然后 Elementor 会自动带入选择类型的模板，像是我选 Header 页首，就出现了很多相关的类型，可选择自己喜爱的使用（如果打算自己设计，可直接关闭）。
进入后会看到左边面板，Elementor 自动把页首相关元素都放在前面了，方便我们选用。
这裡就可以自由设计区块啦，编辑完成后点发布。
发佈后会出现跟之前不太一样的视窗。
你可以设定刚设计的区块，想要在哪个页面显示（设定显示条件），完成后储存就搞定啦。
之后在设定的页面条件，就会出现你刚刚设计的区块囉！以上就是 Elementor 的 Theme Builder 主题编辑器 简单介绍：）
8. Popups弹出式窗口
我们在逛别的网站时，常会看到滑到某个地方，或点击某个按钮就跳出视窗，而视窗内容可能是商品或服务的讯息，或是打算收集访客 Email 的栏位，都是满常看到的！
Elementor Pro 有 Popups 弹出式视窗，功能非常的完整＋齐全，下面我会示范如何制作一个弹跳视窗，然后收集访客的 Email，我们开始囉。
Step1：新增 Popup 窗口
前往 Templates > Popups，点击新增 Popup。
Elementor 会自动带入 Popup 类型，帮版型取个名字，然后确认。
选择喜欢的弹出式视窗模板，然后套用。
选取 Popups 版型
Step2：调整表单设定
点击表单栏位，左手边会显示可调整项目，可更改标题文字、新增其他栏位等 。
切换到 Advanced 进阶，设定栏位 ID（可任意取名，系统用来判别栏位用的），ID 务必要填写，不然无法顺利发信。
接著 Shortcode 会自动带入 ID 的值（除非没有带入，再自行填写）。
切换到 Email 选项卡，这是当访客留言完，信件传送的相关设定。Elementor 会帮你带入预设值，你也能自行修改。
Message 信件内容：的预设短代码功能，是 Elementor 会自动带入所有访客留言的值（所以刚上面才需要设定栏位 ID 的原因在这），然后传到你的信箱。
Message 信件内容：能自行编辑程式码内容，栏位支援动态内容显示。
To 收件者：可填入自己的系统信箱。
From Email 发信来源：系统预设是网域信箱（可维持预设值，单纯显示用的，没特别功用）。
“ Additional Options 额外选项 ”可设置显示讯息，像是表单传送后的成功讯息等 ..。
上面都设定完毕后，就点击发布。
Step3：设定 Popup 显示条件
Conditions 是设定 Popup 要在哪边显示，有像是全网站显示、指定文章显示等 ..，有很多条件可运用。
我选择 Entire Site 全网站通用，点 Next。
Triggers 是弹出式视窗的触发条件，有 On Page Load 到了几秒就显示、On Scroll 网页滑到指定高度百分比就显示、On Scroll To Element 滑到指定位置就显示、On Click 点击就显示等 ..，多种触发条件。
下面我用 On Scroll（网页滑到指定高度百分比就显示）做示范。
Advanced Rules 是进阶规则设定，有 Show after X page views 浏览几个页面就显示、Show up to X times 总共出现几次等 ..。
这裡我不开启功能，如果有需要你也能使用，确认后送出。
Step4：前台测试成果
好囉，接著前往网站前台，并把滚动页面超过一半的高度，就会看到漂亮的弹出式视窗出现啦，就能收集访客的资讯了。
Popup 彈出式視窗出現啦！
以上就是 Elementor Pro 的 Popup 弹出式视窗的简单示范，不知道大家有没有学会呢：）
9. 自订程式码 / 字型 / 图示
Elementor Pro 有自订程式码（Custom Code）、自订字体（Custom Fonts）、自订图示（Custom Icons）功能，可满足客制化需求，我挑选其中一个做分享。
Custom Code 自订程式码 是我觉得 Elementor Pro 满佛心的小功能，因为之前嵌入 GA 分析码、FB 像素等 ..，都还需额外安装外挂嵌入。
这功能可让你为不同程式码片段，分开取名方便管理，还能设定在指定页面才会执行。
下面示范嵌入 GA 追踪码（如果你有其他的代码，也可以这样处理），我们开始囉！
Location 是程式码的放置位置，有 head 放置页首、body start 内容开始、body end 内容尾部可选择，有关 GA 码我就放置页首。
Priority 是权重排序，因为一个网站可能会有多个嵌入码，数字越小排序越前面。
点击发布，会出现显示条件设定，这裡我用 Entire Site 全网站都执行，确认后送出。
备注：如果使用的屏幕比较小，右下角的储存＆发布按钮，可能会在视窗之外，只要把浏览器百分比缩小就可以正常点击了。（因为我用 13 寸萤幕操作，一度找不到送出按钮）
恭喜你，这样代码就嵌入成功囉！
常见问题
如果购买一年的许可证，但没有继续续约，我的网站还能继续工作吗？
当然可以。你现有的项目将保持不变，但将无法继续访问 Elementor Pro 进阶功能，等于就是回到免费版的使用资格。
Elementor Pro 方案购买完，如果打算升级方案，有办法做到吗？
可以的。Elementor 会员后台随时都能让你升级方案，或是延长使用时间。
我可以使用 Elementor Pro 帮客户架设网站吗？
可以的。Elementor 当初在建立软体时，就考虑了团队运作的模式，如果你有多个客户需服务，也可购买 STUDIO（能架设 100 个网站）或 AGENCY 方案（能架设 1000 个网站）。
除了 Elementor 之外，还有推荐的优质页面编辑器吗？
有的。WordPress 页面编辑器领域，是一个很竞争的市场，有许多专业团队都相继投入开发。
除了 Elementor 以外，使用 Divi 也是热门的选择，因为购买 Divi 不光只有页面编辑器能用，还包含 Elegant Themes 公司开发的 Extra（佈景主题）、Bloom（电子报行销）、Monarch（社群工具）等 ..，都能同时使用。
