Elementorの使い方

最新!Elementorの使い方【完全ガイド】

このページはElementorの使い方をまとめたリソースページです。
Elementorを1から始めたい人もすでに使っていて新しい情報が欲しい人もElementorに関する有益な情報が見つけられると思います。
日々アップデートしていきますので是非チェックしてみてください。

それぞれのセクションの下に関連リンク集がありますので、そこに更に深掘りした情報があります。

Elementorの公式ページはこちら

Elementorは無料ですが、更に優れたPro版もあります。
Elementor Proの購入方法はこちら

Elementorの使い方のコースができました!
興味がある方は是非みてみてください。

コンテンツ

Elementorとは

Elementorとは世界中で大人気のドラッグ&ドロップでサイトを構築できるWordPressの無料プラグインです。
コードを書かずに感覚的にページを構築出来るため、その人気は上昇し遂にはWordPressで人気のプラグイントップ10に入りました。
その無料版は現在400万以上のサイトで使われています。
そしてFacebookの公式グループは5万人を超える巨大コミュニティを形成しています。
Elementorは有料版のPro以外にも沢山のプラグインが存在しその拡張性は高いです。

日本でも沢山のサイトがElementorを使って作られています。
この記事からElementorを使って作られた10のウェブサイトを紹介しています。

Elementorをインストール

Elementorの通常盤は無料のプラグインですので、WordPressのプラグインのページからサーチしてインストール可能です。
『Elementor』とサーチしてみましょう。

Elementorのインストール

『Elementor』とサーチして、インストールしてみましょう。

Elementorの基本操作はドラッグ&ドロップ

Elementorのウィジェットリスト

Elementorのエディタを開きますと、左側にウィジェットのリストが出てきます。
そして右には赤いプラスボタン。
このプラスボタンを押すと、セクションの構造をいくつのカラムで作るかを決めることができます。

Elementorのカラム

ここで決めた構造のセクションが作られ、そこにウィジェットをドラッグ&ドロップしてサイトを作っていきます。

Elementorの基本操作はドラッグ&ドロップ


コードはいらずわかりやすい操作画面から感覚的にページを構築していきます。

基本的なページ制作の流れ

  1. セクションのレイアウト選択
  2. ウィジェットをドラッグ&ドロップ
  3. ウィジェットの編集
  4. セクションを積み上げていく

ウィジェット

Elementor基本ウィジェットリスト

Elementorには29の基本ウィジェットがあり、Pro版になると更に47個追加されます。
Elementor Proのセクションで紹介しています。
基本ウィジェットの中にも役に立つものが沢山あります。
これらを組み合わせて、かっこいいページを作っていくわけです。

Elementorウィジェット関連リンク集

Elementorのテンプレートライブラリで、綺麗なレイアウトをロード

Elementorのテンプレートライブラリ

Elementorのテンプレートライブラリとは、沢山のすでに完成したレイアウトやセクションををページにロードできる機能です。
Pro版になると更に使えるテンプレートが増えるんです。
1からサイトを作らなくてもいいわけですね。

テンプレートライブラリ関連リンク集

Elementor Pro

Elementor ProはElementorに更にウィジェットや役立つ機能を追加した有料版のElementorです。
Elementor Proの購入方法はこちら

ElementorとElementor Proの違い

  1. Proウィジェットが使える
  2. 詳細タブのAttributesが使える
  3. 詳細タブのカスタムCSSが使える
  4. グローバルウィジェットやセクションを作れる
  5. 使える無料レイアウトが格段に増える
  6. ユーザーのロールによる権限のコントロールが可能になる
  7. カスタムフォントをが使える
  8. カスタムアイコンが使える
  9. reCAPTCHAやTypekitやConvertkitのような第三者サービスと連携できる
  10. テーマビルダーでヘッダーやフッターやアーカイブページをElementordで構築できる
  11. ポップアップが簡単に作成できる

詳しくはこのElementorとElementor Proの違いを説明した動画から。

Elementor Proのみで使用可能な47のウィジェット

Elementor Proになるとなんと47個も多くのウィジェットが使用可能になります。

Elementor Proウィジェット

Elementor Proウィジェット

Elementorで投稿一覧を作るならポストウィジェットがベストです。

テーマウィジェット

Elementor Proのテーマウィジェット

WooCommerceウィジェット

Elementor ProのWooCommerceウィジェット

Elementor Proで再利用可能なテンプレートを作る

Elementorで再利用可能なテンプレートを作る

Elementorにはテンプレート機能がついており、セクションやページをテンプレートとして保存し、使い回すことができます。
Elementor Proになるとこれがテーマビルダーとして拡張され、更にオプションが増えます。

セクションやページ全体をテンプレートとして保存可能

Elementorで作ったレイアウトは再利用可能

Elementorでページを作ってる途中に気にったセクションやレイアウト全体をテンプレートとして保存することができます。

ページ間やサイト間でもテンプレートを共有可能

作成したテンプレートはエクスポートすることができ、ページ間だけでなくサイト間でも共有可能なんです。

Elementorのテンプレートに関するリンク集

Elementor Proのテーマビルダー

Elementor Proのテーマビルダーとは通常テーマがコントロールする部分のテンプレートをElementorで作れる機能です。
文字通りテーマを作っていくビルダーです。
これはPro版の機能ですが、かなり使われる必須のツールです。
例えば、サイトのヘッダーは通常テーマがコントロールするものですが、Elementor Proで自由に作ることができます。

テーマビルダーで作れるテンプレートの種類

  • ページ (無料版可)
  • セクション(無料版可)
  • Popup
  • ヘッダー
  • フッター
  • Single
  • Archive

これらのテンプレートをElementor Proで作ることが可能です。

テーマビルダーに関連したリンク集

Elementor Proで日本語のフォントも使用可能

Elementor Proになるとカスタムフォントを使用することが可能になります。もちろん日本語のフォントも使用可能です。
フォントファイルをアップロードする形になります。
Adobeフォントも使えますよ。

使用できるフォントのタイプ

  • WOFF
  • WOFF2
  • TFT
  • SVG
  • EOT

Elementorのプラグイン

Elementorには様々な拡張プラグインがあり、新しいウィジェットを追加したり、中にはElementor自体に新しい機能を追加するものもあります。
プラグインの代表的なのが、Elementor公式プラグインであるElementor Proです。
上で紹介したテーマビルダーもElementor Proの機能です。

そして自分が記事や動画でよく勧めてるのはHappy Addonsです。
かなり使えるプラグインですよ。

Elementorのプラグインのまとめ記事もあります。

Elementorのプラグイン関連リンク集

Elementorを通常のWordPressプラグインと使うこも可能

Elementorはショートコードをサポートしてますので、Elementor専用のプラグインでなくても一緒に使用することが可能です。

Elementorの他のプラグインとの使用例

Elementor用のWordPressテーマ

Elementorはプラグインなので、テーマと一緒に使います。
その時に相性のいいテーマや、Elementorと使う事を前提に作られたテーマもあります。
相性が悪いとサイト自体が遅くなることも。

Elementorとを使う事を前提に作られた無料テーマ

詳しく知りたい方はこの記事でElementorと相性のいいテーマを紹介しています。
>>Elementorと使うべきテーマはこの7つから選ぶべし!【じゃないとサイトが遅くなります】

Astraは特にElementorと相性抜群

Astraは高速でこのサイトも現在使っています。
AstraはElementorのサイトを構築するのに沢山のテンプレートサイトが入っていて、そこからウェブサイトを一気に作ることが可能です。
詳しくはこの記事からどうぞ。

Elementorは重い?高速化する方法

Elementorは遅いという情報も見ますが、原因は通常のWordPressサイトが遅くなる原因と変わりません。
Elementorを高速化したいなら次の要素が大事です。

  1. Elementorと相性のいいテーマを選ぶ
  2. 画像の最適化
  3. 画像のLazy Load
  4. ページに必要なものだけロードする
  5. キャッシュ
  6. 速いサーバー
  7. サーバーの設定

一つだけElementor特有の問題があるとすると、それはElementorが日本のテーマとは相性がよくないということです。
Elementorを使う時は海外のテーマと使う事をオススメします。

Elementorの不具合と解決方法

時にElementorの不具合も発生することがあります。これは大概場合はサーバーのPHPメモリが少なすぎたり、プラグインやテーマとの相性によるものがほとんどです。
この記事で不具合の原因と解決方法について説明しています。
>>Elementorが使えない!不具合の原因はこれ!【403&500&502エラーも解決】

Q&A

Q: Elementor Proのライセンスが切れたら、サイトはそのまま使えますか?

A: 使えますし、もうすでにElementor Proで作った部分は編集も可能です。ですが、新しくElementor Proのウィジェットを使ったりすることはできません。

Scroll to Top