奇妙だと思いますか,WordPressページを作った理由,いつも見ている美しいWebページとは少し違うでしょうか?明らかにWordPressを使用しています,他の人のウェブページはなぜこんなにも素晴らしいのでしょうか?
もしかしたら、これらの美しい Web ページはプロの Web デザイナーしか作成できないと思っているかもしれません。,しかしそうではありません,見た目を良くするには、ハイエンドウェブサイト,Webデザイナーは特に必要ありません,必要なのは 1 つだけです使いやすいページエディター(ページビルダー)。
実際には,あなたが見ている美しいウェブページ,99%これらはすべて、強力なページ エディターである Elementor を使用して作成できます。,鍵,まだ無料です。
プロのウェブサイトデザイナーのようになりたい場合,さまざまな強力な機能を作成する,ハイエンドのウェブサイトのように見える場合は、,それなら、500 万以上のインストールが有効になっている強力な無料の WordPress ページ エディター プラグインである Elementor を見逃すことはできません。。次,Elementor の使用方法を学ぶには、この Elementor チュートリアルに従ってください。。
エレメンターについて
初め,エレメンターについて学びましょう。
エレメンターとは何ですか?

エレメンターそれは強力ですWordPress ページエディタープラグイン(ページビルダー),イスラエルの企業Elementor Ltd.によって2016年に設立されました。,そして今日に至るまで開発、運用、保守を続けています。。
Elementor がオンラインになってから (2016 年)、現在 (2022 年) までわずか 6 年です。,Elementor は WordPress エコシステム全体でほぼかけがえのない役割を果たしており、500 万以上の有効なインストールが行われています。,ほぼ完全な 5 つ星のレビュー,現在最も人気のあるWordPressページエディタープラグインです。
エレメンターの最大の利点は,それは私たちが通過できるようにしますマウスドラッグブロック方法,コードを書ける必要はありません美しく強力なプロフェッショナルなウェブサイトを作成する。
Elementorの操作は非常にシンプルで使いやすいです。,豊富なブロック機能をプリセットしています,たとえばタイトル,文章,写真,アイコン,リスト,フォームなど,これらのブロックをマウスで目的の場所に直接ドラッグできます。,そうすれば、美しいWebページを簡単に作成できます。
エレメンターは無料ですか?
Elementorは無料版と有料版に分かれていますエレメンター プロ,Elementor の無料版は、WordPress バックエンド プラグイン内で直接検索します。Elementor Page Builder インストールして有効にする。
Elementor の無料版では、いくつかの基本的なブロック機能が提供されます,たとえばタイトル、写真、文字、ビデオ、ボタン、ディバイダー、アイコンなど,実際、これは非常に便利です。,現在、NYPanda.com は Elementor の無料版を使用しています。

なぜなら、Web ページ上の要素を注意深く分解すると、,ほとんどの Web ページは、実際には上記の基本要素を並べ替え、組み合わせ、変更して構成されていることがわかります。,それで初心者の場合,Elementor の無料版から始めることをお勧めします。

有料版エレメンター プロ追加のブロック機能を提供します,たとえば、記事リスト、価格表、スライドショー、フォームなど,主に動的Web要素の追加,ウェブページをよりクールに見せる,よりダイナミックなエフェクト。
Elementor Proの機能を有効にしたい場合,行かなければなりませんエレメンター公式サイトライセンスを購入する,最も安いプランは 1 つの Web サイトに対して年間 49 米ドルです,高くはないけど安くもない,を作りたい場合は、非常にクールなWordPressウェブサイト言葉,そうすれば投資する価値はある。
Elementor Pro には次のサービスもあります30数日以内に無条件全額返金,購入後に使用に不安を感じた場合、または、価格性能比が高くない場合,カスタマーサービスに直接返金を申請することもできます,お金は無駄になりません。
加えて,あなたが Web デザイナー、または Elementor を使用して他の人向けの Web サイトを構築したいと考えている場合,年間 999 ドルで 1,000 の Web サイトに使用できるプランを直接購入することをお勧めします。,複数サイトで共有すると安くなります(共同購入と同様)。
エレメンター プロを購入する
Elementor をページ エディター プラグインとして使用する利点は何ですか?

- 使いやすい:Elementorの操作インターフェースは非常にシンプルで分かりやすいです。,簡単に使用できます【見たものがそのまま手に入る】ウェブサイトを作成する方法。コードが書けなくても、デザインの基礎がなくても,ブロックを簡単にドラッグすることもできます(ドラッグ & ドロップ)ウェイ,必要なウェブサイトを作成します。
- 速くて効率的:byElementor,Webページをデザインしているとき,Web ページにさまざまな強力な機能を追加することもできます,これにより時間の節約にもなりますデザイナーそしてWebエンジニアのコスト,そして、彼らとやり取りする必要はありません,なぜならWebデザインでは,コミュニケーションは最大の時間コストです。
- 高い応用性:Elementor はほぼあらゆる種類の Web サイトを作成できます,企業イメージのウェブサイトかどうか、オンライン電子商取引ウェブサイト、またはオンラインコースのウェブサイト,すべてElementorを使用して作成できます。
- レスポンシブ Web デザインをサポート:Elementor を使用して、さまざまなデバイス上の Web ページの外観を調整できます,そしてプレビュー,当社のウェブサイトがお客様のコンピュータ上にあることを確認するため、携帯電話、訪問者にタブレットで優れたユーザー エクスペリエンスを提供する。
- 最もよく使われる:Elementor は現在 (2022 年) 500 万以上の有効なインストールが WordPress バックエンド プラグインに表示されています,5,000 を超えるほぼ完璧な評価を受けました。,これは、市場で最も一般的に使用されている WordPress ページ エディター プラグインです。,つまり、使用中に問題が発生した場合、,几乎都能在网上找到答案。
- 完整的生态圈:由于使用Elementor的人实在太多了,以至于市面上有许多的独立开发者或者公司也自行研发了Elementor的相关扩展插件,这使得Elementor逐渐拥有了一个完整的生态圈,这也意味着几乎所有类型的网站功能,Elementor都有相关方案。
如何使用Elementor页面编辑器?
次,我们将会和小伙伴们分享Elementor页面编辑器的使用概念和简单操作方法。
在示范中,我们用的是Astra主题+Elementor页面编辑器,这个也是目前比较喜欢的WordPress制作页面的方案。
安装 Elementor

首先要我们要做的是安装Elementor插件,前往WordPress后台插件区域,検索Elementor,検索結果には、Elementor 関連のプラグインが多数表示される場合があります。,でも正式なものはそのうちの1つだけ。

上の写真を見てください,次に、これをインストールして有効にします。これには 500 万以上の有効なインストールがあります。,ほぼ 100 個の星を獲得した WordPress ページエディターElementor Page Builder。
Elementor のデフォルトの色とフォントを無効にする

因为我们要确保用Elementor做出来页面的风格,跟我们使用的主题是一致的。
所以我们要先前往WordPress后台 -> Elementor -> 设置,
将禁用Elementor的默认颜色 以及禁用Elementor的默认字体 都勾选起来,
完成之后记得点击一下保存更改。
使用 Elementor 创建页面

设置完之后,我们新建一个WordPress页面,接着点击使用Elementor编辑 ボタン,就可以进入Elementor的编辑模式中。
Elementor ページエディターの使用ロジック
次,この記事に来ました最も重要な部分,要素の使用ロジック。
ずっと前に,Webページを作りたいなら,HTMLとCSSを書く必要がある,ダイナミックなエフェクトが必要な場合,その後も JavaScript を記述する必要があります,とても面倒です。Elementor は、これらの煩雑なプロセスを置き換えるために存在します。,コードを書かずに美しく強力なウェブサイトを作成しましょう。
有一部分刚开始接触Elementor的小伙伴,可能会觉得Elementor怎么那么复杂,想要改个颜色或者字体都不知道去哪改,也太难上手了吧。
其实这正是Elementor功能强大的体现,因为Elementor是为了取代网页前端设计三大语言HTML,CSS,JavaScript而设计出来的,所以如果在你对网页三大元素,HTML,CSS,JavaScript有了基本认识之后,就可以在接触Elementor的五分钟内抓到Elementor的使用逻辑。
但对于完全不懂这三大语言概念的小伙伴们,可能在用了Elementor好几个月之后还是会似懂非懂,使用起来不太自信,必须依赖网上的攻略和影片才能做出想要的网页。
それで,如果我们想要学习如何操作Elementor的话,还是要先对HTML,CSS,JavaScript这三大语言有基本的了解会比较好,但不用想得太复杂。
适合配搭Elementor使用的主题
有哪些主题特别适合配搭Elementor使用呢?根据官方给出来的答案,Elementor适用于所有的主题,虽然官方是这么说,但根据我们的测试,有些主题其实并不是那么适合Elementor。
例如我之前用过的Avada, Flatsome等主题,这些主题都有自带的页面编辑器,主题官方也建议配搭它们自带页面编辑器使用,所以它们并没有特别支持Elementor(不过要用还是可以用的,只是效果没有那么好而已)。
それで,当我们在挑选WordPress主题的时候,记得要先查清楚这个主题是否支持Elementor再购买哦。但不用特别担心,因为Elementor的用户群很庞大,所以通常主题官方都会特别写出来是否支持Elementor。
次,我会介绍三个我使用过的,并认为是目前最适合搭配Elementor使用的主题,分别适合用来搭建形象网站、电商网站和博客网站。
Astra主题

Astra主题是一个在2017年由知名开发公司Brainstorm Force所开发的WordPress主题,在短短的几年内,Astra在WordPress官方主题中,已经超过了一百万的安装次数,并获得使用者将近全五星的好评。
Astra最大的特点就是它非常的轻巧快速,与其它动不动就好几MB的主题相比,Astra主题仅有50KB。その上,Astra还可以高度定制,可以让你在做出一个美观且功能强大的网站之余,也能维持高速的网页载入速度。
正因为Astra的简洁以及快速,使它成为了最适合搭配Elementor页面编辑器的主题之一。
不仅如此,Astra官方也极度推荐用户使用Elementor来制作页面,并推出以Astra为基础所制作的Elementor扩展插件Ultimate Addons for Elementor,宣示了其加入Elementor生态圈的决心。
その上,Astra主题搭配Elementor页面编辑器,也是全球许多WordPress大神、Youtuber、网页设计公司的主流搭配,包括小伙伴们现在正在浏览的nypanda.com,也是用Astra+Elementor制作出来的。
适合用Astra主题制作的网站:形象网站、博客网站、电商网站(几乎所有类型的网站)。
WoodMart主题

WoodMart主题是一款在2017年8月推出的一款WordPress电子商务主题,算是比较新的电商主题,相较于其它只兼容旧款页面编辑器的老牌电商主题, WoodMart主题可以搭配Elementor制作整个电商网站。
Elementor在制作电商网站上,一直都不算是特别有优势,因为电商网站的核心是网站背后的功能与商业逻辑,例如相关商品、商品组合、库存管理这些消费者不一定看得到的东西,并不只是在于网站是否美观。
但WoodMart在这点上很好地弥补了Elementor的不足,因为Woodmart主题有特别为这些电商功能做了开发,可以直接搭配Elementor的区块拖曳式界面,轻松地将想要的网站外观给做出来,并且电商网站该有的功能也一样完整而且强大。
适合用WoodMart主题制作的网站:电商网站。
启用Woodmart主题
有哪些好用的Elementor扩展插件
如果你感觉Elementor官方提供的区块功能不够用的话,或是有一些想要的区块功能官方版并没有提供的话,你可以另外安装一些其它公司自行开发的Elementor扩展插件,里面新增了不少官方没有提供的热门功能。
不过这类型插件也别安装太多了哦,我建议Elementor扩展插件安装2到3个就好,因为Elementor本来就属于挺占主机资源的大型插件了,如果加装太多扩展插件上去的话,容易令网站打开速度变慢。
Essential Addons for Elementor

Essential Addons for Elementor(EA)是一款由知名WordPress开发公司WPDeveloper推出的Elementor扩展插件,有免费版与付费版的Pro。
免费版的Essential Addons for Elementor在WordPress后台的插件中显示已经有超过100万次安装启用,并获得将近满星的好评,因此如果你想要有更多的Elementor区块功能的话,可以先安装免费版来使用。

EA新增了大约77 种不同的Elementor扩展功能,比如说Elementor最缺乏的表格(Table)功能,如果你想要制作出美观又易懂的资料图表,那么EA提供的进阶图表功能,相信会符合你的需求。
如果小伙伴们有兴趣的话,可以参考EA的官方网站,里面有许多功能的Demo可以让小伙伴们一一查看。
启用Essential Addons for Elementor插件
Ultimate Addons for Elementor

Ultimate Addons for Elementor(UAE) 是由前面提到的Astra主题的开发公司Brainstorm Force所制作,因此在功能与整体设计上,也是针对Astra与Elementor Pro两者不足的功能所新增与开发的。
不过跟上面提到的EA插件不同的是,UAE仅只有付费版,并没有提供免费版试用,不过如果你有打算使用Astra主题的话,UAE可以跟Astra主题一起以优惠价格购买,可以帮你省下不少钱。

UAE新增了大约54 种有趣的Elementor扩展功能,比如说能够切换价格表的【Content Toggle】,非常的实用,可以帮助你的用户更加清楚地了解更种不同方案的区别,也是UAE中最受欢迎的功能之一。
更多额外的功能,由于篇幅关系无法在此详述的描述,如果你有兴趣的话,可以参考UAE的官方网站,里面有许多功能的Demo可以让你在购买之前查看一番。
启用Ultimate Addons for Elementor插件
Elementor Custom Skin

Elementor Custom Skin是一款受到全球网友大力推崇的Elementor插件,它可以让我们对Elementor Pro中的文章区块的外观进行定制,通过制作出不同的文章皮肤外观(Skin),来改变你的文章区块外表。
例えば,如果你觉得原先Elementor Pro提供的文章区块外观不是你喜欢的,你就可以用Custom Skin这个插件另外制作一个模板,并且将它改成了你想要的样子。
Elementor Custom Skin算是Elementor整个生态系中,数一数二重要的必装扩展插件了。它可以帮助你制作各种不同外观的动态内容,比如说文章、作品集等通过WordPress动态产生的内容。
如果你想学习怎么使用Elementor Custom Skin的话,可以参考下面这个10分钟的简单教学:
Elementor 常见问题
エレメンターとは何ですか?
エレメンター是一款功能强大的WordPress页面编辑器插件(Page Builder),イスラエルの企業Elementor Ltd.によって2016年に設立されました。,そして今日に至るまで開発、運用、保守を続けています。。
Elementor がオンラインになってから (2016 年)、現在 (2022 年) までわずか 6 年です。,Elementor已经在整个WordPress生态圈里面已经产生了几乎不可取代的作用——超过500万次启用,ほぼ完全な 5 つ星のレビュー,現在最も人気のあるWordPressページエディタープラグインです。
エレメンターの最大の利点は,它可以让我们通过鼠标拖曳区块的方式,无需会写任何代码也能制作出好看而且功能强大的专业网站。
而且,Elementorの操作は非常にシンプルで使いやすいです。,豊富なブロック機能をプリセットしています,たとえばタイトル,文章,写真,アイコン,リスト,フォームなど,これらのブロックをマウスで目的の場所に直接ドラッグできます。,そうすれば、美しいWebページを簡単に作成できます。
エレメンターは無料ですか?
Elementor分成免费版与付费版的Elementor Pro,免费版的Elementor直接在WordPress后台插件搜索【Elementor】即可安装启用。
Elementor の無料版では、いくつかの基本的なブロック機能が提供されます,たとえばタイトル、写真、文字、影片、ボタン、ディバイダー、アイコンなど,実際、これは非常に便利です。,現在、NYPanda.com は Elementor の無料版を使用しています。
Elementor Pro 值得花钱买吗?
付费版的Elementor Pro相较于免费版,额外提供了更多的区块功能,たとえば、記事リスト、価格表、スライドショー、フォームなど,主に動的Web要素の追加,ウェブページをよりクールに見せる,よりダイナミックなエフェクト。
Elementor Pro需要前往エレメンター公式サイトライセンスを購入する,最も安いプランは 1 つの Web サイトに対して年間 49 米ドルです,高くはないけど安くもない,如果你想要做出一个极度酷炫的WordPress网站的话,そうすれば投資する価値はある。
Elementor Pro也有提供30天无条件全额退款,購入後に使用に不安を感じた場合、または、価格性能比が高くない場合,カスタマーサービスに直接返金を申請することもできます,お金は無駄になりません。
加えて,あなたが Web デザイナー、または Elementor を使用して他の人向けの Web サイトを構築したいと考えている場合,年間 999 ドルで 1,000 の Web サイトに使用できるプランを直接購入することをお勧めします。,複数サイトで共有すると安くなります(共同購入と同様)。
Elementor可以在任何主题上使用吗?
Elementor可以在任何主题上面使用,可以通过开启Elementor提供的画布功能,将主题的设置以及Header, Footer去除掉,并重新以Elementor进行网页设计。
有哪些适合配搭Elementor使用的主题
适合搭配Elementor的主题有三款,分别对照三种不同的功能:
1.形象网站 –アストラ
2.电商网站 –WoodMart
我可以用Elementor来写文章(Post)吗?
できる,但是一般不建议这么做,因为用Elementor所制作出来的区块在HTML的结构上包含着大量的 <div> ラベル,使用过多的Elementor区块在文章之中,将会影响到网站的速度(除非你的文章很少、或是使用到Elementor区块的部分很少)可以参考这篇 WordPress Gutenberg エディターのチュートリアル或者使用经典编辑器插件。
したがって,在使用 Elementor 上,建议小伙伴们遵循官方的建议,将其用在【页面】上就好了。
Elementor会降低网站速度吗?
会的,因为Elementor其实包含了大量函数库,才会令它的功能如此强大。
所以当我们在使用Elementor的同时,也导入了许多我们可能表面上、或暂时没有用到的代码,这些都会降低一点网站的速度。
如果想要网站维持高速的加载速度的话,建议使用Astra主题和Cloudways主机。
WordPress 和 Elementor 有什么区别?
Elementor 是一个流行的 WordPress 网站和网页构建器插件,它为 WordPress 世界带来了自己的工具。也许最简单的看待它的方式是 WordPress 提供了一个建筑框架,而 Elementor 可以让你在这个基础设施上建造美丽的豪宅。
允许您构建“豪宅”的关键工具之一是 Elementor Editor。这种可视化拖放编辑器允许 Web 创作者无缝构建具有复杂动态功能的网页。通过使用编辑器将小部件拖放到您的页面上,您可以节省创建杰作的时间。这意味着工作更直观,无需编写代码即可创建专业网站。