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

2024年9月5日
2024年1月5日

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

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

Elementorの公式ページはこちら

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

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

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

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

Elementorとは

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

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

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

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

Elementorをインストール

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

Elementorのインストール

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

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

Elementorのウィジェットのリスト

Elementorのエディタを開きますと、左側にウィジェットのリストが出てきます。
ここからウィジェットを掴んでドラッグ&ドロップで右側にウィジェットを落としていく形がElementorの基本的な使い方です。

レイアウトはコンテナウィジェットで作る

そして右には赤いプラスボタン。
このプラスボタンを押すと、コンテナの構造をいくつのカラムで作るかを決めることができます。

Elementorのコンテナの構造を選ぶ

このように、あらかじめ用意されたレイアウトから始めることも可能です。
ですが、これらのレイアウトは自由に変えることができ、そして自分で一から作ることもできます。
詳しくはコンテナの使い方をご覧ください。

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

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

Elementorの基本関連リンク集

Elementorのウィジェット

Elementorの基本ウィジェット

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

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

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

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

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

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

Elementorのテンプレートライブラリ、完成したレイアウトをロードする方法【初心者向】(動画)

Elementor Pro

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

ElementorとElementor Proの違い

Proウィジェットが使える
高度な設定タブのAttributesが使える
高度な設定タブのカスタムCSSが使える
動的タグが使える
グローバルウィジェットやセクションを作れる
使える無料レイアウトが格段に増える
ユーザーのロールによる権限のコントロールが可能になる
カスタムフォントをが使える
カスタムアイコンが使える
reCAPTCHAやTypekitやConvertkitのような第三者サービスと連携できる
テーマビルダーでヘッダーやフッターやアーカイブページをElementorで構築できる
ポップアップが簡単に作成できる
Custom Codeが使える
Loop Gridが使える

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

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

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

Elementor Proウィジェット

Elementor Proのウィジェット

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

テーマウィジェット

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

WooCommerceウィジェット

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はElementorと連携して動きます。AstraはElementorのサイトを構築するのに沢山のテンプレートサイトが入っていて、そこからElementorのウェブサイトを一気に作ることが可能です。

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

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

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

Elementorの不具合と解決方法

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

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

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

Elementorの文字を縦書きにする

文字を日本風に縦書きにしたいと思ったことはないですか？

ElementorではCSSを追加するだけで見出しウィジェットなどを簡単に縦書きにできます。

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

通常の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年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。