Elementorの使い方｜インストール・サイト設定・ページ作成・テンプレート保存・高速化

Elementor は、ページの見た目をドラッグ＆ドロップで組み立てられる WordPress のページビルダープラグインです。この記事では、インストールから最初のページを作るまでの流れと、運用を始めてから効いてくる設定（テンプレート、リビジョン、パフォーマンス）を説明します。

画面の名前とメニューの位置は、2026年11月時点の Elementor 4.4（無料版）に合わせています。Elementor 4 系では管理画面のメニューが整理され、「設定」「ツール」「エレメントマネージャー」などは、管理画面の「Elementor」→「エディター」の中にまとめられています。古いバージョンでは「Elementor」メニューの直下にあります。

無料版と Pro 版の違い

無料版でも、ページの作成、主なウィジェット（見出し・テキストエディター・画像・ボタンなど）、サイト設定、テンプレートの保存と書き出しが使えます。有料の Elementor Pro は、無料版に追加して使う別のプラグインです。Pro では次のような機能が加わります。

• テーマビルダー：ヘッダー・フッター・投稿ページなど、テーマが出力している部分を Elementor で作る
• フォームウィジェット：お問い合わせフォームを Elementor の中で作る
• ポップアップなど、無料版にないウィジェットとテンプレート

料金とライセンスの種類は変わることがあるため、購入前に Elementor の公式サイトで確認してください。

動作要件（2026年11月時点）

Elementor の公式ヘルプのシステム要件（2026年10月16日更新）では、次のようになっています。

メモリ上限は、管理画面の「ツール」→「サイトヘルス」→「情報」タブの「WordPress 定数」や「サーバー」で確認できます。足りない場合の上げ方は WordPressのPHPメモリ不足エラーの原因と直し方 を参照してください。

手順1：インストールして有効にする

管理画面の「プラグイン」→「新規プラグインを追加」で「Elementor」を検索し、「今すぐインストール」→「有効化」の順にクリックします。WP-CLI が使える場合は次のコマンドでも同じことができます。

# 無料版（wordpress.org のプラグインのスラッグは elementor）
wp plugin install elementor --activate

# Elementor Pro は公式サイトのアカウントから zip をダウンロードしてから入れる
wp plugin install ./elementor-pro.zip --activate

Elementor Pro は無料版の Elementor が有効になっていないと動きません。Pro を入れたら、Pro のライセンスを有効化します。

手順2：サイト設定で色・フォント・幅を決める

ページを作り始める前に、サイト全体で使う色・フォント・幅を「サイト設定」で決めておくと、あとからまとめて変更できます。

1. 固定ページを1つ「Elementor で編集」で開きます（手順3）。
2. エディター上部のバーの左端にある Elementor のロゴをクリックし、メニューから「サイト設定」を開きます。
3. 次の項目を設定し、「変更を保存」をクリックします。

ウィジェットで色やフォントを選ぶときに、ここで登録したグローバルカラー・グローバルフォントを選んでおくと、サイト設定を変えるだけで、それを使っている全ページの見た目が変わります。ウィジェットごとに色コードを直接入れると、この連動は効きません。

テーマ側の色とフォントをそのまま使いたい場合は、管理画面の Elementor の「設定」→「一般」タブで「デフォルトカラーを無効化」「デフォルトフォントを無効化」にチェックを入れます。

コンテナの幅や余白の考え方は、Elementorのレイアウト設定 で詳しく説明しています。

手順3：ページを作る

1. 管理画面の「固定ページ」→「新規固定ページを追加」で題名を入れ、上部の「Elementor で編集」をクリックします。既存のページの場合は、固定ページの一覧で該当ページにマウスを合わせると「Elementor で編集」のリンクが出ます。
2. エディターの編集エリアで「+」をクリックしてコンテナを追加し、中の並び（1列・2列など）を選びます。テンプレートのアイコンからは、用意されたデザインを読み込むこともできます。
3. 左のパネルからウィジェットをコンテナの中にドラッグし、パネルで内容とスタイルを設定します。
4. 右上の「公開」をクリックします。途中で止める場合は、公開ボタンの横の矢印から「下書き保存」を選びます。

よく使うウィジェットは次のとおりです。

• 見出し：見出しの文字と、HTML タグ（H1〜H6 など）を選べます。ページの見出し構造に合わせてタグを選びます
• テキストエディター：段落や箇条書きなどの文章を入れます
• 画像：メディアライブラリの画像を表示します。代替テキストはメディアライブラリで設定したものが使われます
• ボタン：リンク先を指定したボタンを置きます

編集中の操作を取り消すには Ctrl + Z（Mac は Cmd + Z）を使います。保存済みの状態に戻す方法は Elementorのリビジョンで以前の状態に戻す方法 を参照してください。

手順4：テンプレートとして保存し、別サイトへ移す

作ったページは、テンプレートとして保存しておくと別のページで使い回せます。

1. エディターで、公開ボタンの横の矢印をクリックし、「テンプレートとして保存」を選びます。
2. テンプレートの名前を入れて保存します。

保存したテンプレートは、管理画面の Elementor の「テンプレート」→「保存済みテンプレート」に並びます。別のサイトへ移すには次のようにします。

1. 移行元の「保存済みテンプレート」の一覧で、テンプレートにマウスを合わせて「テンプレートのエクスポート」をクリックします。JSON ファイルがダウンロードされます。
2. 移行先のサイトにも Elementor を入れ、同じ一覧の画面で「テンプレートのインポート」をクリックし、JSON ファイルを選びます。

JSON に含まれるのはレイアウトと設定で、画像は URL として入っています。インポートのときに、移行先のサイトがその URL から画像をダウンロードしてメディアライブラリに取り込むため、移行元のサイトが外から見られない状態（Basic 認証のかかったステージングなど）だと画像を取り込めません。Pro のウィジェットを使ったテンプレートは、移行先にも Elementor Pro が必要です。

手順5：リビジョンを増やしすぎない

Elementor で保存するたびに、WordPress のリビジョンが作られ、Elementor のレイアウトのデータ（投稿メタの _elementor_data）もリビジョンごとに保存されます。編集を重ねるとデータベースが大きくなるので、保存するリビジョンの数を wp-config.php で制限しておきます。

<?php
// 1つの投稿につきリビジョンを最新10件まで残す
define( 'WP_POST_REVISIONS', 10 );

すでにたまった古いリビジョンを削除する場合は、先にデータベースをバックアップし、件数を確かめてから削除します。

wp db export before-revision-cleanup.sql
wp post list --post_type=revision --format=count

削除の手順と注意点は WordPressのリビジョンをデータベースから削除する方法 で説明しています。削除したリビジョンには戻せません。

手順6：パフォーマンスの設定を確認する

管理画面の Elementor の「設定」→「パフォーマンス」タブに、表示速度に関わる設定がまとまっています。

キャッシュ系のプラグインにも画像の遅延読み込みや CSS の最適化の機能があります。両方で同じ機能を有効にすると表示が崩れることがあるので、どちらか一方で有効にし、変更のたびに公開ページを確認します。

使わないウィジェットを止める

使わないウィジェットは、管理画面の Elementor の「エレメントマネージャー」で無効にできます。無効にしたウィジェットは編集パネルに出なくなり、登録もされなくなります。

コードで止める場合は、elementor/widgets/register フックで unregister() を呼びます。次の例はカウンター・プログレスバー・お客様の声のウィジェットを止めます。子テーマの functions.php か、自作のプラグインに書きます。

<?php
add_action( 'elementor/widgets/register', function ( $widgets_manager ) {
	$widgets_manager->unregister( 'counter' );
	$widgets_manager->unregister( 'progress' );
	$widgets_manager->unregister( 'testimonial' );
}, 100 );

どちらの方法でも、すでにそのウィジェットを使っているページでは、そのウィジェットが表示されなくなります。止める前に、使っているページがないかを確認してください。

注意点

• Elementor は、ページごとの CSS を wp-content/uploads/elementor/css/ に書き出します。このフォルダーに書き込めないと、公開ページのデザインが崩れます。WordPress の推奨どおり、ディレクトリは 755、ファイルは 644 を基本にします。
• テーマを直接編集すると、テーマの更新で変更が消えます。テーマのファイルを変える場合は子テーマを使います。
• Elementor と Elementor Pro は、どちらかだけが古いと正しく動かないことがあります。両方を最新版にそろえます。
• エディターが開かない、保存できない、公開ページだけ崩れるといった場合は、Elementorのエラーを解決する方法 と Elementorのウィジェットが表示されない場合の解決方法 を参照してください。

まとめ

• 最初にサイト設定でグローバルカラー・グローバルフォント・コンテンツ幅を決め、ウィジェットではそれを選ぶ
• ページは「Elementor で編集」からコンテナを追加し、ウィジェットをドラッグして作る
• よく使う形はテンプレートとして保存し、別サイトへは JSON でエクスポート・インポートする
• リビジョンは WP_POST_REVISIONS で数を制限し、削除する前にはデータベースをバックアップする
• パフォーマンスタブの設定とエレメントマネージャーで、読み込む量を減らす