エレメンターのチュートリアル, WordPress チュートリアル

WordPress で Elementor を使用する方法に関する完全なガイド

奇妙だと思いますか,WordPressページを作った理由,いつも見ている美しいWebページとは少し違うでしょうか?明らかにWordPressを使用しています,他の人のウェブページはなぜこんなにも素晴らしいのでしょうか?

もしかしたら、これらの美しい Web ページはプロの Web デザイナーしか作成できないと思っているかもしれません。,しかしそうではありません,見た目を良くするには、ハイエンドウェブサイト,Webデザイナーは特に必要ありません,必要なのは 1 つだけです使いやすいページエディター(ページビルダー)

実際には,あなたが見ている美しいウェブページ,99%これらはすべて、強力なページ エディターである Elementor を使用して作成できます。,鍵,まだ無料です。

プロのウェブサイトデザイナーのようになりたい場合,さまざまな強力な機能を作成する,ハイエンドのウェブサイトのように見える場合は、,それなら、500 万以上のインストールが有効になっている強力な無料の WordPress ページ エディター プラグインである Elementor を見逃すことはできません。。次,Elementor の使用方法を学ぶには、この Elementor チュートリアルに従ってください。。

エレメンターについて

初め,エレメンターについて学びましょう。

エレメンターとは何ですか?

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

エレメンターそれは強力です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 の無料版を使用しています。

Elementor教程,最受欢迎的WordPress页面编辑器-2
Elementor の無料版の基本的なブロック機能

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

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

有料版エレメンター プロ追加のブロック機能を提供します,たとえば、記事リスト、価格表、スライドショー、フォームなど,主に動的Web要素の追加,ウェブページをよりクールに見せる,よりダイナミックなエフェクト。

Elementor Proの機能を有効にしたい場合,行かなければなりませんエレメンター公式サイトライセンスを購入する,最も安いプランは 1 つの Web サイトに対して年間 49 米ドルです,高くはないけど安くもない,を作りたい場合は、非常にクールなWordPressウェブサイト言葉,そうすれば投資する価値はある。

Elementor Pro には次のサービスもあります30数日以内に無条件全額返金,購入後に使用に不安を感じた場合、または、価格性能比が高くない場合,カスタマーサービスに直接返金を申請することもできます,お金は無駄になりません。

加えて,あなたが Web デザイナー、または Elementor を使用して他の人向けの Web サイトを構築したいと考えている場合,年間 999 ドルで 1,000 の Web サイトに使用できるプランを直接購入することをお勧めします。,複数サイトで共有すると安くなります(共同購入と同様)。

エレメンター プロを購入する

Elementor をページ エディター プラグインとして使用する利点は何ですか?

Elementor教程,最受欢迎的WordPress页面编辑器-4
  • 使いやすい: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页面编辑器-6

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

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

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

Elementor のデフォルトの色とフォントを無効にする

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

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

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

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

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

使用 Elementor 创建页面

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

设置完之后我们新建一个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主题

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

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主题制作的网站形象网站博客网站电商网站(几乎所有类型的网站)

前往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)来改变你的文章区块外表

例えば,如果你觉得原先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 创作者无缝构建具有复杂动态功能的网页通过使用编辑器将小部件拖放到您的页面上您可以节省创建杰作的时间这意味着工作更直观无需编写代码即可创建专业网站

について 編集部

kuajinggu の編集スタッフは WordPress の専門家チームです,ディラン率いる,WordPress で、仮想ホスト、電子商取引、SEOとマーケティングにおける10年以上の経験。クアジンググは年に作成されました 2014 年,現在、業界最大の無料 WordPress リソース Web サイト,WordPress の Wikipedia と呼ばれることが多い。

返信を残す