Elementor Tutorial, WordPress Tutorial

A complete guide on how to use Elementor with WordPress

Do you find it strange,Why you made the WordPress page,Is it a little different from those beautiful web pages that I usually see? Obviously using WordPress,为什么别人的网页会那么酷炫?

也许你会觉得那些精美的网页只有专业的网页设计师才能制作出来,But it’s not the case,To make it look good、High-end website,Don’t really need a web designer,你需要的只是一个好用的页面编辑器(Page Builder)

in fact,Those beautiful web pages you see,99%It can all be created using Elementor, a powerful page editor.,The essential,it's still free。

If you want to be like a professional website designer,Make various powerful functions,If it looks like a high-end website,,Then you can’t miss Elementor, a powerful free WordPress page editor plugin with over 5 million enabled installations.。Next,Just follow this Elementor tutorial to learn how to use Elementor。

关于Elementor

first,Let’s learn about Elementor。

Elementor是什么?

Elementor教程,最受欢迎的WordPress页面编辑器-1

Elementor是一款功能强大的WordPress页面编辑器插件(Page Builder),Founded in 2016 by Israeli company Elementor Ltd.,And continue to develop, operate and maintain it to this day。

It’s only been 6 years since Elementor went online (2016) to now (2022),Elementor has played an almost irreplaceable role in the entire WordPress ecosystem - more than 5 million enabled installations,Nearly full five-star reviews,Is currently the most popular WordPress page editor plugin。

The biggest advantage of Elementor is,它可以让我们通过鼠标拖曳区块的方式无需会写任何代码也能制作出好看而且功能强大的专业网站

The operation of Elementor is very simple and easy to use.,It has many preset block functions,For example title,text,picture,icon,list,forms etc.,We can directly drag these blocks to the desired place with the mouse,Then you can easily create beautiful web pages。

Elementor是免费的吗?

Elementor分成免费版与付费版的Elementor Pro免费版的Elementor直接在WordPress后台插件搜索Elementor Page Builder 即可安装启用

The free version of Elementor provides some basic block functions,For example title、picture、letter、video、button、divider、Icons etc.,In fact, it’s quite useful.,Currently NYPanda.com is using the free version of Elementor。

Elementor教程,最受欢迎的WordPress页面编辑器-2
免费版Elementor的基本区块功能

因为如果我们仔细地去拆解网页上的元素就会发现其实大部分网页都是由以上这些基本元素通过排列组合和变化组成的,so如果是刚入门的小伙伴我们建议可以先从Elementor免费版开始入手

Elementor教程,最受欢迎的WordPress页面编辑器-3

付费版的Elementor Pro则额外提供了更多的区块功能例如文章列表价格表幻灯片表单等等主要是添加了动态的网页元素能让网页看上去更加酷炫动态效果更多

如果要开启Elementor Pro的功能需要前往Elementor官网购买授权最便宜的方案是一个网站一年$49美元不算贵但也不便宜如果你想要做出一个极度酷炫的WordPress网站的话那这笔投资还是值得的

Elementor Pro也有提供30天无条件全额退款如果在买了之后觉得用起来不习惯或者性价比不高的话也可以直接跟客服申请退款不会浪费到任何钱

in addition,如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴建议可以直接买一年$999美金可用于1000个网站的方案多个网站分摊下来的话就会比较便宜(类似团购)

购买Elementor Pro

用Elementor来做页面编辑器插件有什么好处?

Elementor教程,最受欢迎的WordPress页面编辑器-4
  • 容易上手Elementor的操作界面十分简单易懂可以轻易地用【所见即所得】的方式来制作网站就算不会写代码或者没有任何设计基础也能轻松地通过拖曳区块(Drag & Drop)的方式将心目中想要的网站制作出来
  • 快速高效通过Elementor在设计网页的同时还可以给网页添加上各种强大的功能从而同时省下了请设计师and网页工程师cost of,而且无需跟他们进行来回反复的沟通因为在网页设计中沟通是最大的时间成本
  • 适用性高Elementor几乎可以做出任何类型的网站无论是企业形象网站在线电商网站或者是线上课程网站都能用Elementor制作出来
  • 支持响应式网页设计我们可以通过Elementor调整网页在不同设备上所展现的外观并进行预览从而确保我们的网站在电脑、cell phone、平板上都能给访客提供良好的用户体验
  • 最多人用Elementor目前(2022年)在WordPress后台插件中显示的已启用安装数已经超过500万了并获得了5000多个将近满分的评价是现在市面上最多人使用的WordPress页面编辑器插件这代表着如果在使用过程中如果遇到任何问题几乎都能在网上找到答案
  • 完整的生态圈由于使用Elementor的人实在太多了以至于市面上有许多的独立开发者或者公司也自行研发了Elementor的相关扩展插件这使得Elementor逐渐拥有了一个完整的生态圈这也意味着几乎所有类型的网站功能Elementor都有相关方案

如何使用Elementor页面编辑器?

Next,我们将会和小伙伴们分享Elementor页面编辑器的使用概念和简单操作方法

在示范中我们用的是Astra主题+Elementor页面编辑器这个也是目前比较喜欢的WordPress制作页面的方案

安装 Elementor

Elementor教程,最受欢迎的WordPress页面编辑器-6

首先要我们要做的是安装Elementor插件前往WordPress后台插件区域,searchElementor搜索结果可能会出来很多Elementor相关的插件但其中只有一个是官方的

Elementor教程,最受欢迎的WordPress页面编辑器-7

认准上图然后我们就安装并启用这个超过500万次已启用安装数接近满星好评的WordPress页面编辑器Elementor Page Builder

禁用Elementor的默认颜色和字体

Elementor教程,最受欢迎的WordPress页面编辑器-8

因为我们要确保用Elementor做出来页面的风格跟我们使用的主题是一致的

所以我们要先前往WordPress后台 -> Elementor -> 设置

禁用Elementor的默认颜色 以及禁用Elementor的默认字体 都勾选起来

完成之后记得点击一下保存更改

使用 Elementor 创建页面

Elementor教程,最受欢迎的WordPress页面编辑器-9

设置完之后我们新建一个WordPress页面接着点击使用Elementor编辑 button,就可以进入Elementor的编辑模式中

Elementor页面编辑器的使用逻辑

Next,就来到了这篇文章最重要的部分Elementor的使用逻辑

很久之前如果要做一个网页需要写HTML和CSS如果需要动态效果的话那还需要写JavaScript十分麻烦而Elementor的存在就是为了取代这些繁琐的过程让我们无需编写代码就能创建出好看而且功能强大的网站

有一部分刚开始接触Elementor的小伙伴可能会觉得Elementor怎么那么复杂想要改个颜色或者字体都不知道去哪改也太难上手了吧

其实这正是Elementor功能强大的体现因为Elementor是为了取代网页前端设计三大语言HTML,CSS,JavaScript而设计出来的所以如果在你对网页三大元素,HTML,CSS,JavaScript有了基本认识之后就可以在接触Elementor的五分钟内抓到Elementor的使用逻辑

但对于完全不懂这三大语言概念的小伙伴们可能在用了Elementor好几个月之后还是会似懂非懂使用起来不太自信必须依赖网上的攻略和影片才能做出想要的网页

so,如果我们想要学习如何操作Elementor的话还是要先对HTML,CSS,JavaScript这三大语言有基本的了解会比较好但不用想得太复杂

适合配搭Elementor使用的主题

有哪些主题特别适合配搭Elementor使用呢?根据官方给出来的答案Elementor适用于所有的主题虽然官方是这么说但根据我们的测试有些主题其实并不是那么适合Elementor

例如我之前用过的Avada, Flatsome等主题这些主题都有自带的页面编辑器主题官方也建议配搭它们自带页面编辑器使用所以它们并没有特别支持Elementor(不过要用还是可以用的只是效果没有那么好而已)。

so,当我们在挑选WordPress主题的时候记得要先查清楚这个主题是否支持Elementor再购买哦但不用特别担心因为Elementor的用户群很庞大所以通常主题官方都会特别写出来是否支持Elementor

Next,我会介绍三个我使用过的并认为是目前最适合搭配Elementor使用的主题分别适合用来搭建形象网站电商网站和博客网站

Astra主题

Elementor教程,最受欢迎的WordPress页面编辑器-16

Astra主题是一个在2017年由知名开发公司Brainstorm Force所开发的WordPress主题在短短的几年内Astra在WordPress官方主题中已经超过了一百万的安装次数并获得使用者将近全五星的好评

Astra最大的特点就是它非常的轻巧快速与其它动不动就好几MB的主题相比Astra主题仅有50KB。besides,Astra还可以高度定制可以让你在做出一个美观且功能强大的网站之余也能维持高速的网页载入速度

正因为Astra的简洁以及快速使它成为了最适合搭配Elementor页面编辑器的主题之一

不仅如此Astra官方也极度推荐用户使用Elementor来制作页面并推出以Astra为基础所制作的Elementor扩展插件Ultimate Addons for Elementor宣示了其加入Elementor生态圈的决心

besides,Astra主题搭配Elementor页面编辑器也是全球许多WordPress大神Youtuber网页设计公司的主流搭配包括小伙伴们现在正在浏览的nypanda.com也是用Astra+Elementor制作出来的

适合用Astra主题制作的网站形象网站博客网站电商网站(几乎所有类型的网站)

前往Astra主题官网

WoodMart主题

Elementor教程,最受欢迎的WordPress页面编辑器-17

WoodMart主题是一款在2017年8月推出的一款WordPress电子商务主题算是比较新的电商主题相较于其它只兼容旧款页面编辑器的老牌电商主题WoodMart主题可以搭配Elementor制作整个电商网站

Elementor在制作电商网站上一直都不算是特别有优势因为电商网站的核心是网站背后的功能与商业逻辑例如相关商品商品组合库存管理这些消费者不一定看得到的东西并不只是在于网站是否美观

但WoodMart在这点上很好地弥补了Elementor的不足因为Woodmart主题有特别为这些电商功能做了开发可以直接搭配Elementor的区块拖曳式界面轻松地将想要的网站外观给做出来并且电商网站该有的功能也一样完整而且强大

适合用WoodMart主题制作的网站电商网站

启用Woodmart主题

有哪些好用的Elementor扩展插件

如果你感觉Elementor官方提供的区块功能不够用的话或是有一些想要的区块功能官方版并没有提供的话你可以另外安装一些其它公司自行开发的Elementor扩展插件里面新增了不少官方没有提供的热门功能

不过这类型插件也别安装太多了哦我建议Elementor扩展插件安装2到3个就好因为Elementor本来就属于挺占主机资源的大型插件了如果加装太多扩展插件上去的话容易令网站打开速度变慢

Essential Addons for Elementor

Elementor教程,最受欢迎的WordPress页面编辑器-19

Essential Addons for Elementor(EA)是一款由知名WordPress开发公司WPDeveloper推出的Elementor扩展插件有免费版与付费版的Pro

免费版的Essential Addons for Elementor在WordPress后台的插件中显示已经有超过100万次安装启用并获得将近满星的好评因此如果你想要有更多的Elementor区块功能的话可以先安装免费版来使用

Elementor教程,最受欢迎的WordPress页面编辑器-20

EA新增了大约77 种不同的Elementor扩展功能比如说Elementor最缺乏的表格(Table)功能如果你想要制作出美观又易懂的资料图表那么EA提供的进阶图表功能相信会符合你的需求

如果小伙伴们有兴趣的话可以参考EA的官方网站里面有许多功能的Demo可以让小伙伴们一一查看

启用Essential Addons for Elementor插件

Ultimate Addons for Elementor

Elementor教程,最受欢迎的WordPress页面编辑器-21

Ultimate Addons for Elementor(UAE) 是由前面提到的Astra主题的开发公司Brainstorm Force所制作因此在功能与整体设计上也是针对Astra与Elementor Pro两者不足的功能所新增与开发的

不过跟上面提到的EA插件不同的是UAE仅只有付费版并没有提供免费版试用不过如果你有打算使用Astra主题的话UAE可以跟Astra主题一起以优惠价格购买可以帮你省下不少钱

Elementor教程,最受欢迎的WordPress页面编辑器-22

UAE新增了大约54 种有趣的Elementor扩展功能比如说能够切换价格表的【Content Toggle】非常的实用可以帮助你的用户更加清楚地了解更种不同方案的区别也是UAE中最受欢迎的功能之一

更多额外的功能由于篇幅关系无法在此详述的描述如果你有兴趣的话可以参考UAE的官方网站里面有许多功能的Demo可以让你在购买之前查看一番

启用Ultimate Addons for Elementor插件

Elementor Custom Skin

Elementor教程,最受欢迎的WordPress页面编辑器-23

Elementor Custom Skin是一款受到全球网友大力推崇的Elementor插件它可以让我们对Elementor Pro中的文章区块的外观进行定制通过制作出不同的文章皮肤外观(Skin)来改变你的文章区块外表

for example,如果你觉得原先Elementor Pro提供的文章区块外观不是你喜欢的你就可以用Custom Skin这个插件另外制作一个模板并且将它改成了你想要的样子

Elementor Custom Skin算是Elementor整个生态系中数一数二重要的必装扩展插件了它可以帮助你制作各种不同外观的动态内容比如说文章作品集等通过WordPress动态产生的内容

如果你想学习怎么使用Elementor Custom Skin的话可以参考下面这个10分钟的简单教学

Elementor 常见问题

Elementor是什么?

Elementor是一款功能强大的WordPress页面编辑器插件(Page Builder),Founded in 2016 by Israeli company Elementor Ltd.,And continue to develop, operate and maintain it to this day。

It’s only been 6 years since Elementor went online (2016) to now (2022),Elementor已经在整个WordPress生态圈里面已经产生了几乎不可取代的作用——超过500万次启用,Nearly full five-star reviews,Is currently the most popular WordPress page editor plugin。

The biggest advantage of Elementor is,It allows us to drag blocks with the mouse,You can create a beautiful and powerful professional website without writing any code.。

而且,The operation of Elementor is very simple and easy to use.,It has many preset block functions,For example title,text,picture,icon,list,forms etc.,We can directly drag these blocks to the desired place with the mouse,Then you can easily create beautiful web pages。

Elementor是免费的吗?

Elementor分成免费版与付费版的Elementor Pro免费版的Elementor直接在WordPress后台插件搜索【Elementor】即可安装启用

The free version of Elementor provides some basic block functions,For example title、picture、letter、影片、button、divider、Icons etc.,In fact, it’s quite useful.,Currently NYPanda.com is using the free version of Elementor。

Elementor Pro 值得花钱买吗?

付费版的Elementor Pro相较于免费版额外提供了更多的区块功能例如文章列表价格表幻灯片表单等等主要是添加了动态的网页元素能让网页看上去更加酷炫动态效果更多

Elementor Pro需要前往Elementor官网购买授权最便宜的方案是一个网站一年$49美元不算贵但也不便宜如果你想要做出一个极度酷炫的WordPress网站的话那这笔投资还是值得的

Elementor Pro也有提供30天无条件全额退款如果在买了之后觉得用起来不习惯或者性价比不高的话也可以直接跟客服申请退款不会浪费到任何钱

in addition,如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴建议可以直接买一年$999美金可用于1000个网站的方案多个网站分摊下来的话就会比较便宜(类似团购)

Elementor可以在任何主题上使用吗?

Elementor可以在任何主题上面使用可以通过开启Elementor提供的画布功能将主题的设置以及Header, Footer去除掉并重新以Elementor进行网页设计

有哪些适合配搭Elementor使用的主题

适合搭配Elementor的主题有三款分别对照三种不同的功能

1.形象网站 –Astra
2.电商网站 –WoodMart

我可以用Elementor来写文章(Post)吗?

Can,但是一般不建议这么做因为用Elementor所制作出来的区块在HTML的结构上包含着大量的 <div> Label,使用过多的Elementor区块在文章之中将会影响到网站的速度(除非你的文章很少或是使用到Elementor区块的部分很少)可以参考这篇 WordPress Gutenberg Editor Tutorial或者使用经典编辑器插件

therefore,在使用 Elementor 上建议小伙伴们遵循官方的建议将其用在【页面】上就好了

Elementor会降低网站速度吗?

会的因为Elementor其实包含了大量函数库才会令它的功能如此强大

所以当我们在使用Elementor的同时也导入了许多我们可能表面上或暂时没有用到的代码这些都会降低一点网站的速度

如果想要网站维持高速的加载速度的话建议使用Astra主题和Cloudways主机

WordPress 和 Elementor 有什么区别?

Elementor 是一个流行的 WordPress 网站和网页构建器插件它为 WordPress 世界带来了自己的工具也许最简单的看待它的方式是 WordPress 提供了一个建筑框架而 Elementor 可以让你在这个基础设施上建造美丽的豪宅

允许您构建“豪宅”的关键工具之一是 Elementor Editor这种可视化拖放编辑器允许 Web 创作者无缝构建具有复杂动态功能的网页通过使用编辑器将小部件拖放到您的页面上您可以节省创建杰作的时间这意味着工作更直观无需编写代码即可创建专业网站

About Editorial Department

kuajinggu’s editorial staff is a team of WordPress experts,Led by Dylan,In WordPress、virtual host、e-commerce、Over 10 years of experience in SEO and marketing。kuajinggu was created in 2014 Year,Currently the largest free WordPress resource website in the industry,Often referred to as the Wikipedia of WordPress。

Leave a Reply