Elementor- 掌控WordPress页面的每一个像素(2020)

Elementor可视化编辑器是WordPress中迄今为止使用人数最多的一个页面可视化编辑器插件，相比于wordpress 自带的gudenberg编辑器，Elementor的专业程度和易用度要高出几个等级。

如果把Gudenberg比做修图软件中的美图秀秀，Elementor就是PhotoShop。Elementor非常强大，足以制作出专业级的网页，上手也非常容易，学习成本非不高，值得每一位网站站长学习掌握。

以下文章详细讲解Elementor的几个主要功能和用途。

1. Elementor安装和版本选择
2. 快速入门
3. 页面布局基础
4. 页面元素
5. Popup弹窗
6. Theme主题修改
7. 结束语

建站全过程可参考文章：从零开始构建一个完整的wordpress网站。

一、Elementor的版本和安装

Elementor提供了2个版本：

• 基础版：免费，直接在wordpress后台的plugins插件菜单中搜索elementor即可下载安装。
• 专业版Pro：需在Elementor官网购买后才能下载和激活。

功能	基础版（free)	专业版Pro （49美金起）
拖拽式编辑器	支持	支持
支持的页面元素种类	30+	90+
页面模板导入	部分	全部
主题定制修改	N/A	支持
PopUP弹窗制作	N/A	支持
Woocommerce支持	N/A	支持

专业版提供的功能非常强大，支持几乎B2B，B2C网站常用的各种功能。单网站版本49美金，包含一年的软件更新升级维护和技术支持。

二、快速入门

安装完Elementor插件后，即可在新建page或者post页面时，使用 Edit with Elementor进行编辑。

进入Elementor编辑器后，左侧为Elementor的主要功能区，右侧为当前页面的编辑区。

拖拽式操作，直接将左侧需要的页面元素拖入右侧页面编辑区。

点击每个元素右上角的笔形图标，即可对该元素进行进一步的属性设置。

页面内容模板

对于大部分新手来说，要从一个空白开始制作和设计一个完整网站还是有点挑战，Elementor提供了很多制作精良的网页内容模板，这些内容模板都是经过专业的设计师制作，无论从配色，样式设计，审美等方面都很专业，可以直接导入页面中稍作下内容修改即可使用。

使用内容模板库功能，需要绑定Elementor官网账号, 如没有，可进入Elementor官网免费注册。

内容模板页面引入后，可直接点击对应的页面元素对模板内容定制修改。

设计外包专家库

内容模板的使用和导入大大加快了网站开发的速度。

如果你对当前模板库中提供的模板还不满意，别急，还有办法，elementor提供了一个expert专家库，可以通过雇佣的方式让你找到专业的设计高手，通过外包的形式让专业的设计师为你定制页面。

从Elementor官网 官网的Experts菜单进入即可。

当然各个外包平台UPWORK，Freelancer，fivrr等，都可以找到大量的专业兼职Elementor页面设计师。

如果你有兴趣和设计专长，学习下Elementor的使用，也可以成为一名专业的Elementor设计师，到这些外包平台上赚dollar。

三、Layout页面布局

要想完全掌握Elementor的使用，最好的办法就是从一个空白页面开始，逐步模仿并完成一个完整的页面制作。

学习和掌握Elementor的技术，如padding，margin，href链接等，对以后使用其他网页软件都有很好的帮助。

以下内容基于astra极简wordpress主题制作，也是elementor最佳的主题搭档，有elementor pro版本后，可以直接修改主题的页面样式，对主题的要求已经非常弱化了，只需要主题提供最基本的功能即可，没有特殊要求，建议使用免费的astra主题即可。

好了，我们先从最基本的布局说起。

页面布局中的几个基础概念：

• Section段，虚拟格子，不会实际在页面中体现出来，一个section占用一整行。
• columns列，将一个section划分成1-6列区域，用于更精细化布局，column中可以嵌套column。
• Widget元素，图片，标题，文字等，最终体现在页面上的元素，Widget只能位于columns中。

Section，column，Widget元素具有层级关系，最底层是section，中间是column，最上层是Widget元素层。Widget元素层也就是我们能够直接看到的部分。

三者之间的关系非常重要，当需要更改各自的属性时，需要清楚每个属性影响的范围，以及最终在页面呈现的效果，否则很容易混淆。

Section(段)的属性

• 对section的属性设置影响的是该Section(段)自身及所有内部的Columns(栏)和Widget元素。

Columns属性

• 同理，Columns(栏)属性设置会影响该Columns(栏)自身和内部的所有Widget元素。

Widget元素

• 元素的种类有很多，text文本，heading标题，button按钮，img图形等，每个元素对应的属性也会各不相同。
• 元素只能位于Column列中，一列中可以包含多个Widget元素。

四、页面元素

页面元素是填充页面的最小单位，如一段文字，一个图片，一个button按钮等。互联网上的任何一个网页都是由这些基本的元素按照一定的布局进行排列组合出来的。

如果把网页布局比喻成在画布上打格子，那么填充页面元素就是在格子中加入具体内容。

专业版加上基础版，Elementor一共提供了多达90种页面元素组件，足以满足大部分B2C, B2B网页制作了。

如果以上这些元素还不能满足你的需求，别急，wordpress插件市场提供了非常多的选择，直接搜索elementor addon即可找到很多优质的Elementor插件，提供一些额外的页面元素供快速使用。

不过，太多的选择有时候并不一定是好事，如果不是非常特殊的要求，尽量使用Elementor自身的widget元素即可。

元素的属性设置

每一个页面元素都有各自独立的属性设置，如文字有颜色，字体，大小等，图片有圆角，透明度等。这些概念和我们平常办公用的office中的很多概念一样，无需过多的解释都可以自行理解。

将对应的widget元素拖拽至页面中对应的位置后，鼠标移动到元素的右上角，点击出现的笔形标志即可进入该元素的属性设置。

所有的元素都有三个主要的属性类别：

• Content内容，设置元素本身的内容显示，如文字，图片等。
• Style样式，设置元素样式，如文字的字体，图片的透明度等。
• Advanced高级，用于控制该元素的动画效果，移动端显示等设置。

可自行结合google + 实践验证，了解每一个元素的不同属性对页面的效果影响。篇幅原因，本章不做过多详解，可参考后续的网页实例文章。

五、响应式设计

响应式，英文为Responsive design，即页面需要自动适配不同的终端显示设备（台式机，笔记本，手机，iPad等）。

由于终端设备的显示屏大小差异，如果不做适配设计，我们设计出的网页很可能就无法在手机端正常显示。

在Elementor编辑器中，自适应网页布局已经是默认选项，在编辑网页时，切换至mobile视图即可查看到该页面在不同终端上对应的显示效果。当然也可以根据需要进行修改。

如需要让元素在移动端页面显示出与桌面端不同的效果，只需在不同视图下对该元素的属性进行独立设置值即可。

属性名字后带有不同视图标志（手机，显示器图标）的，表示该属性可以根据视图下设置独立值。

如我们需要让下图中的可针对不同显示设备设置文字的大小。

六、Popup弹窗

Popup弹窗, 顾名思义，浏览网站的某些网页时弹出的提示窗口，如促销信息，隐私申明提示，邮件表单等。

弹窗不是一个独立的页面，它需要依附于页面上，作为网站页面的一部分浮动于页面之上 。

适当使用弹窗可以提高网站用户体验，但不要滥用，Popup的典型应用场景：

• 隐私申明提示（满足欧洲互联网隐私协议GDPR监管要求）

• 促销活动

• CTA表单收集

Popup背后的技术实现步骤：

1. 弹出窗口制作
2. 定义弹出窗口依附于哪些页面
3. 触发条件，即该页面在什么情况下会触发弹窗弹出

Elementor的Popup组件可以非常方便的制作弹窗，Popup需要Elementor Pro专业版才能支持。

第一步：制作弹窗窗口

回到wordpress的后台管理界面，找到 Templates（模板）>> Popups >> 添加新模板

七、Theme主题定制

Elementor除了可以精细制作页面中的内容，还可以修改主题提供的页面样式。如果对当前主题提供的页面样式不满意，没有Elementor之前唯一的办法是更换主题，但更换主题样式带来的影响非常大，要涉及到很多细节调整。

Elementor Pro版本中提供了 theme builder的功能，可以直接修改主题的样式。

选择需要修改的主题模板类型。

如对主题中各部分的作用不了解，可参考Astra主题xxxxx

这里以Single（Blog页面）的修改为例，选择 Single >> Post >> 模板名字（自定义），点击 CREATE TEMPLATE后即可创建一个新的Blog页面样式。

同样，模板库中已经提供了一些现成的样式供选择，你也可以直接关闭模板页面，从一张空白开始全新设计。

以我比较喜欢的样式为例，插入该模板后，即可对模板细节进行微调。

修改细节后，点击发布，即可将Blog页面样式应用到当前所有的blog页面上。

模板的修改影响的是最终Blog页面的展示效果，不会改变blog的内容，只会改变内容的展现样式。

重新开blog页面，查看刚才的Blog页面效果已经替换为theme builder修改的样式了，后续新建的所有blog页都会继承该样式。

同样的方法也可以修改主题中的 Header头部，Footer页脚，Page页面，Archive归档页等。也就是几乎可以修改整个主题的样式。

八、Conclusion结束

以上过程只是了解了Elementor的各个功能组件，要想熟练应用，还需多实践使用，最好的学习方法就是通过模仿模板库中的各种模板一步步自己实现相应的效果。

通过subscribe Elementor官网, 也可以随时获取到Elementor最新的一些功能和资讯。