Elementor在2016年横空出世,把WordPress站点的网页设计水准提高了一个档次,拥有非常丰富的高级功能,无论是对入门者还是经验丰富的用户都很适用,同时也提供各种高级付费功能和API,是一个全能型的Page Builder。自从上线发布之后发展迅速,现在的用户群体已经扩大到180个国家地区,安装量超过两百万,仅WordPress插件中心就有100万以上的活跃安装,2500多个五星评价。
我们慕名而来,《构建WordPress页面最好用的Elementor插件》就让我们一窥Elementor有哪些特性和值得关注的地方。
主要功能亮点如下:
-
动态实时、性能流畅的前端编辑器
支持键盘快捷键
专业水准的设计风格
丰富的模板和功能模块
支持响应式布局
支持创建弹窗、验证等高级控件
适用于所有WordPress主题
支持模板的导入导出
自定义网站的Header和Fotter(PRO版)
支持自定义类型的布局(PRO版)
以上这些特点,已经足够说服我们使用Elementor,并且它还在不断的改进和增强,在WordPress中越来越流行。
在正式使用之前,还有必要就几个名词概念特别说明,常言道名正则言顺。
模板(Template)这个说法有点笼统,WordPress自身的主题(Theme)很多时候也被叫做模板,这种认知在大多数情况下是没有问题的,有必要提出的是Elementor中也有模板(Tempalte)这个概念,为避免行文的混淆,这里借用PPT中的概念“母版”,概念模板则单指的是Elementor的模板(Template),母版概念对应的是WordPress中的主题模板。
还有一个名词Canvas。英文中 Canvas 的意思是“画布”, Canvas 是 HTML5 中新出的一个元素,开发者可以在上面绘制一系列图形,Elementor中也引入了这个概念。这里我们可以把想象成PPT中一页页的幻灯片。
下载安装
Elementor是免费使用的,我们可以随时体验,不管是免费版还是Pro版本,都需要先安装Elementor,可直接在官网下载:https://elementor.com/。免费版本直接安装即可;如果你购买了Pro版本,需要先安装Elementor插件,然后再安装Elementor Pro插件,即使之前已有免费版也可以无缝切换到Pro版本。
注意:安装Elementor的话一定要确保符合它的环境要求,否则可能会出现意外的错误。
安装好之后我们就会在文章或者页面看到一个 “使用 Elementor 编辑” 的按钮,点击它就会进入到Elementor可视化编辑器。
页面布局
对于做产品介绍型的单页面公司官网,页面布局肯定要选择 full-width 全宽度,侧边栏什么都统统不要,这样可以最大程度的展现内容,让用户的注意力聚焦。
设置全宽度页面布局有两种方式:
第一种:在WordPress页面的母版里选择 Full-width (有的主题可能提供的全宽度布局叫做landing,但效果是一样的)。Wordpress本身的header、导航菜单、footer等全局性的元素还会保留。优点是:可以与原来的主题集成,保留导航的便捷性。缺点是如果不需要这些元素的话,那就是一个累赘。
第二种:在WordPress页面的母版里选择 Elementor canvas。这样就是完全空白的一个页面,WordPress自身所有布局元素都消失,一张白纸好作画。
两种方式都可以,具体看自己的需求,本次的案例使用的是Elementor canvas,即使没有导航也完全ok。
选择页面母版的方式如下 Pages → Add New → Page Attributes:
如果你的WordPress主题母版不支持Full-width ,那么你可以选择Elementor canvas,或者干脆换一个主题,推荐Genesis。
选定页面母版之后, Save Draft 保存以让设置生效(这是开始使用Elementor进行编辑之前的重要步骤)。然后,点击最上面那个大大的蓝色按钮 Edit With Elementor,进入Elementor接管的地盘。
现在有了一张空白画布了,但是并不需要你完全什么都自己来画,那样还有什么意义? 点一下红色加号旁边的文件夹图标,看看有什么惊喜?

百宝箱
简直是个大宝库,基本上涵盖了一个产品展示网页能用到的所有功能区域,也可以在这里复用你自己保存好的模板。FREE版里面已经有很多不错的选择,当然,很多很漂亮华丽的页面布局模板和预设件是需要PRO版的Elementor,付费购买的。付费版的好处是可以节省你更多的时间,毕竟时间成本也是成本!
其它特性
Elementor除了基本的页面编辑器功能外,还有很多非常有特色的功能。导航栏是Elementor新加入的一个特性,这个导航最大的作用就是你可以在上边改变段的位置,避免了使用鼠标在页面上长距离滚动拖动。Elementor Pro中提供了幻灯片工具,只需要简单设置便能开始使用,如果你不需要比较炫酷的效果的话,Slider Revolution、LayerSlider之类的插件基本可以卸载了。Elementor内置了一个侧边栏调用小工具,你可以用它来制作自己的侧边栏小工具,Elementor制作侧边栏小工具教程。Elementor不仅可以一键开启维护模式,而且你可以使用Elementor定制自己的专属维护页面,Elementor开启维护模式教程。
Elementor Pro价格
-
单个站点授权,49美元
3个站点授权,99美元
1000站点授权,199美元
所有的套餐都包含一年的更新和支持,Elementor Pro续费的话有25%的折扣,当然也可以选择取消续费,插件还可以继续使用,只是没有更新和支持。
和其他的页面编辑器相比,Elementor的使用范围更广,更加通用,不管你是普通的WordPress用户,还是做商业性质的网站,都可以在Elementor中找到自己需要的功能,而且使用起来也灵活,可以快速构建,也可以针对一个模块进行各种高级的设置以及自定义样式。
无论是免费版本还是Pro版本,Elementor都是非常强大的编辑器,它最大的作用是改变了WordPress的编辑习惯,有着多样的设置和人性化的编辑体验,不再需要专业和枯燥的代码来修改页面。
之前安装过,启用后原主题的一些小图标不能正常显示,就删了
[…] 修改网站页面是每个人都会做的事情,比如新建一个定制的页面,添加一个图片、按钮之类的元素到网页上,但是用代码的话非常麻烦,所以各种WordPress可视化编辑器就出现了,所见即所得的使用方式让你可以轻松的修改网页。 Elementor是目前最流行的WordPress可视化页面编辑插件,现代化的编辑方式和轻量的体验让其广受好评,在2.0版本中,Elementor更是推出了主题编辑功能ThemeBuilder,它突破了之前用户不能改变主题的限制,让人们可以使用Elementor设计自己的主题,Elementor可以让你,可视化设计页面,无需任何代码知识。使用Theme Builder改造自己的主题,自己制作各种小工具,比如侧边栏小工具、弹窗等。不管是不是必须的,Elementor都是一款值得安装体验的插件,如果你对这款插件有兴趣的话,这里可以查看更多关于Elementor的介绍,或者你也可以查看Elementor教程。 […]