这是一篇「Elementor Pro 教程」的进阶版指南，如果是 Elementor 免费版教程，请参考这链接。
使用 WordPress 建置网站，页面编辑器 通常是不可或缺的一环，除非做的是 小型博客，那可能就不需用到。
除此之外，不论是 品牌官网设计、搭建购物网站 等 .. 各类型网站，有个好用的页面编辑器，可以帮助你更快的制作出美观的网站（省时又省力）。
好啰，我们看一下这次的文章目录。
- 1. Elementor 是什么？
- 2. Elementor Pro 如何购买？
- 3. Pro 插件安装+凭证连接
- 4. Pro 高级区块+模板
- 5. Pro 元素介绍
- 6. Pro WooCommerce 元素介绍
- 7. Theme Builder 主题编辑器
- 8. Popups 弹出式窗口
- 9. 自定义代码 / 字体 / 图标
- 常见问题
- WordPress 学习资源
购买链接
Elementor Pro 实战应用：购物网站设计： 网页设计教程+制作建置流程
1. Elementor 是什么？
Elementor 是全球知名的 WordPress 页面编辑器，全球已经有 500w+ 次插件下载量，基本上与所有主题兼容。 可参考 Elementor 插件教程。
你不需会任何程序基础，只要用区块拖曳方式，就能定制形象网站设计。
有关任何的页面布局、新增区块功能、编辑区块内容等 ..，都将变得更加简单。
Elementor 有多种功能区块，是建置网站的好帮手，当你心中简单构图完成，接下来只要拖放区块，并放置在网页上即可完成设计。
Elementor 有多种区块模板和网站样板，点击按钮就可套用，再从中进行修改自己喜欢的设计，可节省大量的建置网站时间。
购物网站盛行的时期，或许你想搭建购物网站，Elementor 对于 WooCommerce 电商插件，有良好的支持。
并为此开发了 WooCommerce Builder（购物网站编辑器），除了一般的页面设计，你也能设计定制化的购物网站页面。
像是添加购物车按钮、产品价格、产品图片和说明、相关产品列表、产品库存提醒等 .. ，如下图。
方案评论
Elementor 有免费版方案可使用，如果感觉不错用且有更多设计上的需求，再升级为进阶版即可。 完整 Elementor Pro 进阶教程。
Elementor 高级版，有额外 50 多个专业元素功能、300 多种高级模板、主题编辑器、表单编辑器、弹出式广告编辑器、WooCommerce Builder（购物网站编辑器）等 ..，有更多功能可以使用。
Elementor 进阶版方案，分为个人用、公司用的两大类型，里面又有不同的方案，但能使用的功能几乎都一样，最大的差别是「使用的网站数量」。
如果你只有一个网站会使用，只需购买最低的方案即可，依此类推。
产品定价
Elementor 个人用，起手价格是 $ 59 美元 / 年（约 ￥430人民币 / 年），算是满平价的费用，可应用在一个网站上，并享用它的全部功能。
2. Elementor Pro 如何购买？
如果你对 Elementor Pro 有兴趣，那要如何购买呢？ 这边带大家简单跑一次流程。当然我们为了满足客服需求，也购买一份399的，有需要可以联系
首先，可点击按钮前往 Elementor 方案页面。
针对不同网站的使用数量，Elementor 各自给出了不同方案，就选择适合的方案即可，里面都有标示可供几个网站使用。
小提醒：最多可 3 个网站使用的方案，被放在下面的小字，这个 CP 值比较高，可以参考看看：）
接着进入结帐页面，需先创建 Elementor 帐户，输入电子邮箱、密码，选择创建帐号。
跳转第三步骤，填入相关购买信息，这里都需填写英文，地址中翻英可用 中华邮政工具，姓名中翻英可用 外交部工具。
最后确认金额，和选择付款方式，完成后，点选「Pay now 」送出订单。
接着，后面流程就照 Elementor 指示进行操作即可。
完成后前往 Elementor 会员后台，等等会教大家如何下载+安装 Elementor Pro 插件。
3. Pro 插件安装+凭证连接
登录并前往 Elementor 会员后台，在右上角会有下载 Icon，点击下载 Elementor Pro 插件。
前往 WordPress 后台，找到插件 > 安装插件 > 上传插件，把刚下载的 Elementor Pro 插件上传安装+启用。
前往 Elementor > License，点击 Connect & Activate，与 Elementor 系统进行串接。
输入帐密登入 Elementor 后台，就会看到你的域和帐号用户，进行串接的图标，点击 Activate 连线。
如果有看到状态显示 Active，就代表网站的 Elementor Pro 功能，已经被顺利激活了唷：）
接下来，我们就能享用 Elementor Pro 强大的能力了。
4. Pro 高级区块+模板
Elementor Pro 功能解锁后，有更多的进阶区块+模板，可以直接套用。
不论是区块或是页面类型，有标注 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. 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） > 主题建构器，就可以前往主题建构器。
进入后，左手边可选取想新增的类型，这边我示范新增顶部Header，选好之后点右上角的Add New。
然后 Elementor 会自动带入选择类型的模板，像是我选 Header 页首，就出现了很多相关的类型，可选择自己喜爱的使用（如果打算自己设计，可直接关闭）。
进入后会看到左边面板，Elementor 自动把页首相关元素都放在前面了，方便我们选用。
这里就可以自由设计区块啦，编辑完成后点 发布。
发布后会出现跟之前不太一样的窗口。
你可以设定刚设计的区块，想要在哪个页面显示（设定显示条件），完成后储存就搞定啦。
之后在设定的页面条件，就会出现你刚刚设计的区块啰！ 以上就是 Elementor 的 Theme Builder 主题编辑器 简单介绍：）
8. Popups 弹出式窗口
我们在逛别的网站时，常会看到滑到某个地方，或点击某个按钮就跳出窗口，而窗口内容可能是商品或服务的讯息，或是打算搜集访客 Email 的字段，都是满常看到的！
Elementor Pro 有 Popups 弹出式窗口，功能非常的完整+齐全，下面我会示范如何制作一个弹跳窗口，然后搜集访客的 Email，我们开始啰。
你也可以使用下面的视频教程，帮助你设置 Elementor Pro 弹跳窗口：
Step1：新增 Popup 窗口
前往Templates>Popups，点击新增Popup。
Elementor 会自动带入 Popup 类型，帮版型取个名字，然后确认。
选择喜欢的弹出式窗口模板，然后套用。
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：前台测试成果
好啰，接着前往网站前台，并把滚动页面超过一半的高度，就会看到漂亮的弹出式窗口出现啦，就能搜集访客的信息了。
以上就是 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 英寸屏幕操作，一度找不到发送按钮QQ）
恭喜你，这样程序码就嵌入成功啰！
常见问题
如果购买一年的许可证，但没有继续续约，我的网站还能继续工作吗？
当然可以。 你现有的项目将保持不变，但将无法继续访问 Elementor Pro 进阶功能，等于就是回到免费版的使用资格。
Elementor Pro 方案购买完，如果打算升级方案，有办法做到吗？
可以的。 Elementor 会员后台随时都能让你升级方案，或是延长使用时间。
我可以使用 Elementor Pro 帮客户搭建网站吗？
可以的。 Elementor 当初在建立软件时，就考虑了团队运作的模式，如果你有多个客户需服务，也可购买更多网站使用权限的方案。
除了 Elementor 之外，还有推荐的优质页面编辑器吗？
有的。 WordPress 页面编辑器 领域，是一个很竞争的市场，有许多专业团队都相继投入开发。
除了 Elementor 以外，使用 Divi 也是热门的选择，因为购买 Divi 不光只有页面编辑器能用，还包含 Elegant Themes 公司开发的 Extra（主题主题）、Bloom（电子报营销）、Monarch（社群工具）等 ..，都能同时使用。 更多 Divi 完整教程。
原文链接：https://www.itaoda.cn/blog/9350.html，转载请注明出处。
评论0