今天介绍一个非常重要的插件,用于WP的页面编辑和美化,Wordpress有很多页面编辑器,比如最古老的Gurtenberg(古腾堡)编辑器,还有其他的一些块编辑器,可以完成页面编辑的工作,但是易用性和功能的强大性在Elementor面前就显得很薄弱了。如果你上手了Elementor就会完全爱上这个插件。

先介绍一些Elementor的基本情况,Elementor是一个页面编辑插件,可以在完全可视化的情况下,设计、编辑网页,能够设计出精美、适应不同终端、设备和浏览器的页面。当然,一些比较好看的视觉效果、动画、弹窗等也都不在话下。

主题支持方面,主流的主题如Astra等都支持Elementor,同时Elementor本身也有很多主题可选。可以极大提高页面的设计效率,没有审美感的人也能设计出比较好看的页面出来。好了,言归正传,开始正式介绍Elementor的使用方法。
1. 首先是安装,Elementor有免费的版本可以安装,直接在插件市场里面搜索,安装并激活

2. 安装后可以左边的侧边栏就会出现Elementor的标志,点击进去后到Elementor的设置页面,可以看到有不同的设置选项,这里面暂时可以不用操作,你只需要先知道这里面有哪些东西就行了,后面会用到。

3. Elementor的精髓在页面的编辑,如果你用的主题支持Elementor,那么你就可以在前端的页面中直接进行编辑,进入你想要修改的页面,比如说一个主。在登录管理员用户的前提下,进入主页,在顶部的工具栏有个Elementor图标,点击进去后就可以编辑页面了。

4. 编辑页面是这样的,左侧是工具栏,可以添加各种控件,右侧就是页面的预览区域,有个浮动的导航就是显示页面上现在已经有的元素(这个示例网站装的有Elementor汉化包,如果需要汉化包,可以关注公众号输入:Elementor汉化,获取下载地址和提取码)

5. 站点设置里面可以设置对整站都有效的默认设置,以后你添加相应的控件或者元素都是这些你配置的全局设置,比如说主色调,色系,字体,按钮形状等等。

6. Elementor的基础控件是“容器”,也就是container,标题,段落,按钮,图片等等控件都是放到容器中的,所以你可以尝试拖动一个容器到主页中,然后就可以配置这个容器的属性了。可以设置宽度,高度,里面元素的排列方向,间距等。注意可设置的项前面有电脑图标的就是可以在不同设备上设置不同的显示参数。

样式设置是背景边框等设置

高级设置里面则包含了比较多的高级设置方法,这个只有Pro版本才能用,很多高级功能也只有Pro版本才能使用,官方价格还是比较高的,想要pro版本可以持续关注我,不定时给粉丝发放一些pro版本插件。

控件很多,这里没法一一介绍用法,可以自己摸索尝试,有机会开直播可以详细介绍这些控件的使用方法。
7. Elementor的模版功能,模版功能是个很强大且很好用的功能,在后台的模版中可以新增Elementor模版。

8. 可以看到有很多类型的模版可以使用,选择你想要设计的模板,起个名字,比如说我觉得Woocommerce的默认产品界面不好看,我想自己设计一个,就可以使用Elementor的单产品模版。

9. 插入模版库中的单产品模板,注意需要有Elementor的账号登录才能导入模板。

10. 插入后就可以进入这个产品单页的编辑界面啦,可以看到左侧工具栏有很多和产品相关的控件,拖动进去就可以了,可以自己发挥你的创意。

11. 页面编辑完成后,别忘了设置显示条件。

12. 比如说我们设置的是产品单页,那么显示条件就是所有的产品单页用这个模板,其他的模板,显示条件可以自己设置。

13. Elementor虽然好用,但是很多高级功能都是Pro版本才有的,一年$84美金,对于刚起步的小伙伴建议,插件的投入不是一笔小数字。关注、转发、收藏,截图发给我们的公众号,免费发放10套Elementor Pro。
