注：本课程中的Elementor是基于Astra主题展开的教学。
Elementor介绍
什么是Elementor？
Elementor 是 WordPress 的拖放页面构建器。这个插件可以帮助您使用可视化编辑器创建漂亮的页面。它专为您快速构建动态网站而设计。
这个 WordPress 插件是一个一体化解决方案 – 让您在一个平台上控制网站设计的每个部分。您可以通过动态效果、多种字体和增强的背景图像自定义您的网站以适合您的品牌。
Elementor的优势。
便于使用
如上1所述，创建 Elementor 的目的是使 WordPress 网站的创建变得更加容易。因此，这是它的主要好处之一也就不足为奇了。
使用 Elementor，即使没有任何网站建设和专业编码知识，每个人都可以创建网站。您可以根据需要自定义页面并使用此页面构建器创建复杂的设计。
此外，Elementor 有很多现成的模板和设计可用，如果您不想花费大量时间创建自己的设计，您可以使用他们现成的模板并对其进行一些自定义，以使您的网站独一无二。
预算友好
Elementor 有免费和付费版本，如果您不确定是否需要其所有功能，则可以仅使用其免费版本。而且，免费版本的功能相当多，即使使用免费版本也可以建立一个简单、功能齐全的网站。
当您不打算创建电子商务商店或复杂的网站时，您可能不需要 Elementor 的高级功能。因此，对于那些试图减少所有不必要开支的人来说，Elementor 是一个非常经济实惠的选择。不过，请注意，高级版本也相当实惠。
拖放生成器
我们已经提到 Elementor 是一个拖放构建器。但是，这是什么意思？嗯，这意味着您可以轻松地添加或编辑页面（网站前端）上的部分和小部件，并通过拖放来定位它们，以实现所需的前端设计。
Elementor 拥有大量不同的小部件（尤其是专业版），您可以使用它们添加所需的任何类型的内容。您可以添加图像、视频、文本、轮播、标题、按钮、推荐和许多其他小部件。您还可以自定义这些小部件的样式和颜色。
最后但并非最不重要的一点是，使用 Elementor，您还可以完全控制您的网站在不同屏幕尺寸上的外观，这使您可以创建完全响应式设计。
高品质的网站设计
- Elementor 是网页设计师的绝佳选择。无需任何编码知识，他们就可以构建完全适合品牌的高质量网站设计。
- 在绝大多数情况下，很难找到对细节一丝不苟的开发人员。即使是前端开发人员也经常关注功能而忽略更精细的设计细节，这在很多情况下导致设计的构建版本与设计本身有很大不同。
- Elementor 和其他类似强大的构建器允许设计师构建他们自己设计的内容，并且设计师往往更加关注这些更精细的细节，从而产生更高质量的最终产品（至少在匹配设计方面）。这也加快了任何设计迭代的速度，并且可以轻松地持续对设计进行较小的内容编辑。
响应式、适合移动设备的设计
响应能力已成为所有网站成功的关键。如今，如果您的网站响应速度不快且不适合移动设备，您就不能指望它表现良好或获得高排名。Elementor 允许您创建响应式网页设计并在不同屏幕上预览页面，以确保其在所有设备上完美运行。
您还可以编辑网站的移动和平板电脑版本，使其对最终用户更具吸引力。
Elementor的选择方案。
Elementor 有免费版方案可使用，如果感觉不错用且有更多设计上的需求，再升级为进阶版即可。
Elementor 进阶版，有额外50 多个专业元素功能、300 多种进阶模板、主题编辑器、表单编辑器、弹出式广告编辑器、WooCommerce Builder（购物网站编辑器）等..，有更多功能可以使用。
Elementor 进阶版方案，分为个人用、公司用的两大类型，里面又有不同的方案，但能使用的功能几乎都一样，最大的差别是每种方案使用的网站数量限制不一样。
如果你只有一个网站，建议您购买最低的方案即可，依此类推。
Elementor安装和设置
Elementor安装
打开网站后台>插件>安装插件，搜索elementor，点击安装并启用。（如下如所示为官方正版elementor插件）
如果您不会安装，请查看之前的教学课程。
Elementor设置
开启页面编辑权限 ＆ 禁止默认颜色/字体
Elementor 安装后左侧边栏会看到操作区块，点击Elementor 前往设定项，参考下面设定，完成后保存更改。
Post Types: 该模块是设置这些页面是否使用Elementor编辑器进行编辑，建议您全部勾选。
禁止Elementor默认颜色&字体：这两个禁止建议您全部勾选，勾选后不会使用Elementor默认颜色和字体，而会继承您的主题颜色，避免颜色和字体出现和主题不一致的效果。
角色管理员。
如果您的网站管理员拥有两个及以上，您可以在这里设置设置他们的编辑权限；如果只有您，则忽略该教程。
Elementor页面编辑。
我们将前面的基础设置设置完成后，本章讲解页面的编辑。
打开后台>页面>新增页面，点击上方的”使用Elementor编辑“按钮。
Site Settings 全站设定
设置Site Settings将会对所有使用Elementor 编辑的页面属性修改，所以称其为全站设定，本章挑选几个项目介绍。
点击后您将看到如下画面：
Global Colors 全局颜色
前往Global Colors，可设定全局常用颜色，之后在使用Elementor 设计页面时，就能直接选用这些颜色，维持网站色调的一致性。
Global Fonts全局字体
设定网站文字的相关内容。
注：这里的文字设定是全站预设值，如果在单一Elementor 元素上，有调整字型样式，就会覆盖掉这里的预设值。
排版设定
排版设定可以对段落，链接，h1-h6标题等排版进行预设定。
功能元素区块
元素是Elementor的重点区块，就是实现页面设计的组成要素，会看到有标题、图片、按钮等..，因为本课程购买了版，所以功能比免费版多。
简单来说，只要把想使用的功能，拖曳到编辑窗口就能完成设计了。
Navigator 结构解析
点选Navigator，如图示，会出现当前页面的分层结构，有助于了解整个页面的编排。
点击Navigator 上的栏位，也可以直接把指定区块挑出来，方便我们编辑。
响应模式
点击对应的平板和手机样式可以浏览到不同设备的相应模式，方便我们对不同设备进行优化，达到您想要的效果。
预览模式
点击如图所示的小眼睛，可以预览我们的前端页面，方便我们进行进一步的修改版式。
如何使用Elementor 设计页面
Elementor 设计逻辑
Elementor 主要分为Section 区块、Column 栏、Widget 元素，是由这3 大项组成。
一个页面通常由多个Section 区块组成。
如下图所见，Section 区块能包含多个Column 栏，而每个Column 又能包含多个Widget 元素。
更进阶的排版作法，就是用Inner Section 元素，在Column 中又嵌入一个内部Section 区块，而内部Section 又包含多个Column & Widget。
新增区块内容
本节课范如何开始用Elementor 设计一个区块，点编辑区的加号。
会出现多种column架构，我们选择两栏式的。
然后会出现两栏，我们点击的一个栏，将图片拖拽到此处。
拖拽完成后，左边会自动显示关于图片的排版区域。
您可以进行上传图片，修改图片，图片位置等进行排版。
同理，我们在第二栏中放入标题以及文字。
这样，一个左右形式的简单排版就形成了。
样式&区块设定
样式的修改，本节课示例修改文本的颜色。
点击需要修改文本颜色的内容，点击图中的颜色块，选择您需要修改的颜色即可。
高级设置
有关Elementor 的任一个内容（区块/ 栏位/ 元素），都可以做进阶设定。
高级设置：
- 调整外边距和内边距。
- 指定 CSS（如果您具备css基础知识，将非常简单）。
- 动画设定。
- 在不同设备上显示或隐藏某一板块。
- 不同的元素，有更多设定。
- 预览＆发布上线
当一个区块设计完成后，接着可再设计n个区块，全部设计完成后就会变成一个完整的页面。
等页面都设计完成，就可点预览看一下成果（Elementor 面板缩起来，或是点顶部的预览按钮）。
完成后点发布，页面就正式上线了。
以上为关于Elementor页面设计的简单教程。
Elementor 编辑技巧
切换指定区块的不同类型
如下图所示，点击就可以自由切换想要编辑的区块。
您也可以点击Navigator来选择您想要编辑的板块。
点击后如图会显示页面的组成结构，更快速找到您想要编辑的板块。
操作Elementor 区块
将鼠标移至区块上方，会出现相关功能，也可以拖曳区块进行排序，如下图所示。
更多操作区块
鼠标右击区块，即可看到关于Elementor的相关功能。
例如，编辑、复制、粘贴、重置等等功能，如下图所示。
Elementor 快速建立页面的方法
如果要从零开始设计整个网页，会花费很多时间。
Elementor 提供多种现成模板，方便您快速使用！
这里简单分成几个方法，如下。
- 套用区块模板
- 套用整个页面
- 套用自订版型
- 套用第三方主题
套用区块模板
Elementor 有非常多类型的页面，您可以直接套用进去。
首先，使用Elementor 编辑页面> 点资料夹，就可以套用模板快速实现布局。
选择区块类型，选择您喜欢的区块版式，点击插入即可实现，非常省事。
注：标有pro标签的为Elementor专业版才可以使用。
套用页面模板
和上节课一样，您只需要选择页面模板即可。
套用自订版型
自订版型指的就是您自己创建的模板，直接插入即可。
套用第三方主题
因为Elementor 页面编辑器名气很高，所以许多WordPress 开发公司/ 者，都针对它做相关扩充功能。
举例来说，像是Astra 一样是很知名的WordPress 主题，推荐您去使用Elementor。
Astra 主题有针对Elementor 做一定程度的功能扩充，安装完成后会多了一个Start Template 起始模板的Icon，点进去就能使用！
将您喜欢的模板导入即可。
Elementor 扩充插件
如同上一章节所提到的，因为Elementor 这个WordPress 插件十分热门，所以除了主题商有开发扩充功能，插件商也一定有开发周边的功能。
本节课挑选几款常见的Elementor 扩充插件，可帮助您再次强化Elementor。
基本插件
Essential Addons Elementor提供超过70 个广告素材元素、网页设计元素，强化Elementor 页面编辑器。
70 几个广告元素中，有将近40 个是免费版就能使用，像是文章页面布局、倒数计时、表格支援、行动招唤、进度条、黏性影片显示等，剩下就是它的进阶版才能用的元素。
如果您有预算考量，但是又很想使用Elementor 做更多的事情，使用Elementor 免费版＋Essential Addons Elementor 免费版，其实就能设计出很棒的网站了。
当然，如果有更多的客制化需求，可能还是要采用进阶版，根据您的个人需求决定是否购买。
终极插件
Ultimate Addons for Elementor终极扩充功能，是Astra 在Elementor 页面编辑器上，新增了多种区块元素，可强化网页设计能力。
除了Elementor 编辑器，Astra 也有Ultimate Addons for Beaver Builder 插件，帮Beaver Builder 做了功能扩充（这在购买Astra 方案时，就需选择）。
Ultimate Addons for Elementor 主要功能有，提供40 多种功能小套件、100+ 网站模板、200+ 区块模板。
这个插件通常适用于Astra 主题的使用者，如果你正使用Astra 主题，应该会对你有帮助，但这是进阶版才有的功能。
除此之外，还有许多Elementor 周边插件，就不个别列举了，如果有兴趣的只要在WordPress 后台的安装插件，搜寻Elementor 就会有很多插件。
常见问题
Elementor 是什么？
Elementor 是全球知名的WordPress 页面编辑器，它有免费版本可使用。
全球已经有500w+ 次插件下载量，可用在任何的布景主题上，且和 WordPress 知名布景主 题有完美兼容性。
你不需会任何程式基础，只要用区块拖曳方式，就能客制化形象网站设计。
Elementor 适用于所有主题吗？
是的，只要是合乎WordPress 系统的开发原则，Elementor 都是兼容的。
Elementor 可以和其他的插件一起使用吗？
它几乎适用于所有插件。如果遇到不兼容问题，Elementor 有表明欢迎向他们提出。
什么是Elementor Pro？
Elementor 有提供免费版给大家使用，如果想要尝试更多进阶版功能，就能使用Elementor Pro。
可以使用Elementor 编辑WooCommerce 页面吗？
当然可以，Elementor 还提供专门处理电商页面的WooCommerce Builder，让你编辑商品列表、 单一商品页、结帐页面等。
WordPress学习资源
大胡说跨境
如果您没有时间建立网站，或者对您来说有一定的困难。欢迎咨询《大胡说跨境》，帮您制作专业、效率的网站。（VX：avalancheLW）
官网教学资源
官网拥有完整的建站流程，您可以前往官网自行学习。
如果你偏爱自建网站，也欢迎持续关注大胡说跨境，我们都持续有发布新的网站架设、网路行销教学。
课程到此结束，感谢您的观看！
