サイト内検索

Elementorの使い方

2022年Elementorの使い方【完全ガイド】

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

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

Elementorの公式ページはこちら

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

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

WordPressのことをもっと知りたい場合はWordPressの使い方の記事を見てください。

Elementorの基本的な使い方がわかる動画

Elementorとは

Elementorとは世界中で大人気のドラッグ&ドロップでサイトを構築できるWordPressの無料プラグインです。
コードを書かずに感覚的にページを構築出来るため、その人気は上昇し遂にはWordPressで人気のプラグイントップ10に入りました。

全世界のウェブサイトの5%がElementorを使って作られています。
そしてFacebookの公式グループは5万人を超える巨大コミュニティを形成しています。
Elementorは有料版のPro以外にも沢山のプラグインが存在しその拡張性は高いです。

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

またナオミが主宰するTOFUラボメンバーの多くがElementorを使用しています!

Elementorをインストール

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

Elementorのインストール

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

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

Elementorのウィジェットリスト

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

Elementorのカラム

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

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


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

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

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

Elementorは近い将来にレイアウトの概念がコンテナ(Container)に変わる!

Elementorのサイトのレイアウトを司る機能は、2022年の現段階では『セクション』と『カラム』での構成です。

しかし、近い将来にはセクションとカラムがなくなり、『コンテナ(Container)』というCSSのFlexboxという概念に変わります。

FlexboxはLquid designと呼ばれ、さらにレイアウトの自由度が増します!

現段階ではコンテナ(Container)にいつ変わるのかはElementor社より明言されてはいませんが、2022年の現在ですでにコンテナを使用することも可能になっています。

Elementorがコンテナに移行したらカラムとセクションの使用はおろか、今までカラムとセクションで作成していたサイトが崩れてしまう恐れもあります。

ですのでなるべく早い段階でElementorのコンテナの使い方を覚えましょう。

Elementorのウィジェット

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

Elementorには10の基本ウィジェット21個の一般ウィジェットがあり、Pro版になると更に62個追加されます。
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. ポップアップが簡単に作成できる
  12. Custom Codeが使える

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

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

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

Elementor Proウィジェット

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

テーマウィジェット

WooCommerceウィジェット

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

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

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

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

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

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

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

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

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

Kit Libraryで設定やレイアウトがすでにされたフルサイトテンプレートをインポートできる

ElementorのKit Library(キットライブラリー)はプロにより作成されたフルサイトのテンプレートキットです。

固定ページや投稿、サイトの設定やテーマビルダーで作成されたパーツなどのフルサイトに必要なすべてがオールインワンになっており、それらをサイトに一度にインポートすることができる優れものです。

ElementorのKit Libraryを使えばサイトの画像やテキストを変更するだけであっという間にオリジナルサイトが作れてしまうのでとてもおすすめです!

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と使うべきテーマ9選!『じゃないとサイトが遅くなります』

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エラーも解決】

Elementorでサイトをおしゃれにアレンジする方法

Elementorの使い方をある程度習得した方が、さらにElementorの機能をおしゃれに使い倒す方法をこちらで紹介していきます。

横スクロールするプログレスバーを設置する

通常のWebサイトはご存知のとおり、スクロールバーが縦に設定されていますが、Elementor ProのProgress Trackerウィジェットを使えば、サイトに横スクロールするスクロールバーを設置することができます!

Progress Trackerは横スクロールするタイプと円グラフのような形のトラッカーの2種類があり、ちょっと小洒落た印象になるのでとてもおすすめです!

ElementorでGoogleカレンダーをサイトに紐付けする

GoogleカレンダーをElementorでサイトに紐付けすることができます!

しかも、紐付けしたGoogleカレンダーをElementorで自由にスタイルし、おしゃれにアレンジすることができますよ!

Elementorをサイトに紐付けするには、『Essential Addons for Elementor』(無料)というプラグインをつかいます。

ElementorにGoogleカレンダーを紐付けすると、クライアントにサイトをいじらせることなくカレンダーの更新が可能になるのも魅力です!

Elementorで外部サイトの記事を自分のサイトにリスト表示できる

例えばまとめサイトなどを作るときに、ページのテーマに関連した外部サイトの記事を自分のサイトに集めてリスト表示させることもできます。

WordPressプラグインの『Feedzy』をつかいます。

くわしくは»Elementorで外部サイトの記事を自分のサイトにリスト表示する方法をご覧ください!

Q&A

Elementorに関するよくある質問をこちらにまとめてみました!

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

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

Q: Elementorは案件に使用できますか?

A: もちろん案件でElementorを使用することができます!

Elementorを案件に使用するべき理由3つを»Elementorは案件で使えるの?もちろんです!使うべき理由と注意点の記事にまとめましたのでぜひご覧ください!

また案件を受託しクライアントのサイト構築を始める前に、クライアントにどのようなサイトを作りたいのかをヒアリングすることが大切です。

»サイト構築を始める前にクライアントさんに絶対聞くべき7つの質問の記事でどのようなヒアリングをするべきかをまとめています。

さらに、クライアントへのヒアリングシートを無料ダウンロードすることもできますのでぜひご利用ください!

Q: Elementor Cloudってぶっちゃけ使えますか?

A: Elementor Cloud(Elementor社のWebサイトをホスティングするクラウドサービス)はUIがとてもシンプルでElementorを使う上で最適化され、サポートも手厚いのがメリットですが、日本語でサポートされてなかったり1サイトのみしかホスティングできないなどのデメリットも存在します。

»Elementor Cloudとは?メリットとデメリット でさらにくわしく説明をしていますので、自分の使用スタイルに合うかどうかをご確認いただけます。

Q: Elementorの編集画面上にサイトには反映されないメモを残すことはできますか?

A: できます。

Elementorの『ノート機能』を使えば、同じサイトの製作者同士で共有したり、後でやろうと思っていることを忘れないようにメモに残すことができます。

Q: Elementorでお問合せフォームを自動返信にすることはできますか?

A: できます。

Elementorのフォームウィジェットの設定で自動返信のカスタマイズが可能ですので、くわしくは»Elementorで作る問い合わせフォームの自動返信設定!定型文をカスタマーごとに動的に変換する方法をご覧ください。

Q: Elementorでブログを書いてはいけないのですか?

A: Elementorの機能でブログを書くのはおすすめしません。
しかし、ブログはグーテンベルグで書いて、Elementorでサイトのデザインやレイアウトをするのなら何の問題もありません。

くわしくは»Elementorでブログを書いてはいけない理由をご覧ください。

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通