ドラッグ&ドロップの直感的な操作だけで、コード知識がなくてもプロ級のデザインが作れるのがElementorです。この記事ではElementorの使い方を初心者向けに解説します。
- Elementorのインストールから編集画面の基本的な使い方
- ドラッグ&ドロップでレイアウトを組む具体的な手順
- 作成したページを保存・公開する方法
Elementorとは？WordPressの人気ページビルダープラグイン
Elementorの正式名称は「Elementor Website Builder（WordPress.org公式）」です。コードを書かずに、要素をドラッグ&ドロップするだけでページのデザインを作れるWordPress用のプラグインで、有効インストール数は1,000万以上の定番です。
Elementorには無料版と有料の「Elementor Pro」があり、無料版でも見出し・画像・ボタンなどの基本ウィジェットが使えます。この記事で紹介する操作はすべて無料版で試せます。
「ページビルダー」とは、コードを書かずに画面を見ながらページをデザインできるツールのことです。Elementorはその中でも世界的に利用者が多いプラグインです。
STEP1：Elementorをインストール・有効化する
- 動作確認環境：WordPress 7.0 ＋ Elementor v4.1.4
まずはElementorをインストールします。管理画面の左メニュー「プラグイン」→「プラグインを追加」を開き、検索ボックスに「Elementor」と入力します。表示された「Elementor Website Builder」（開発元が「Elementor.com」の正規版）の「今すぐインストール」→「有効化」をクリックすれば準備完了です。
STEP2：Elementorでページの編集画面を開く
インストールが済んだら、実際にページを作ってみましょう。Elementorは固定ページ・投稿のどちらでも使えます。ここでは固定ページを例に進めます。
1. 固定ページ（または投稿）を新規作成する
左メニューの「固定ページ」→「固定ページを追加」をクリックします。まずはページのタイトルだけ入力しておきましょう。
2.「Elementor で編集」をクリックする
編集画面の上部に表示される「Elementor で編集」ボタンをクリックします。すると、通常のブロックエディタとは別の、フルスクリーンのビジュアル編集画面に切り替わります。
STEP3：基本操作を覚える（コンテナ・ウィジェット）
Elementorの操作は「コンテナ」と「ウィジェット」の2つを押さえれば大丈夫です。
1. コンテナを追加する（ページの骨組みを作る）
ページのレイアウトは「コンテナ」という枠で組み立てます。編集画面の中央にある「＋」ボタンをクリックし、レイアウトの構成（1列・2列など）を選ぶと、コンテナが追加されます。
コンテナは、いわばコンテンツを入れる「箱」です。この箱を上から順に積み重ねることで、ページ全体の骨組みができあがります。
以前のElementorでは「セクション」「カラム」という要素でレイアウトを組んでいましたが、現行バージョンでは「レイアウト」カテゴリの「コンテナ」に統一されています。コンテナの向きを「横並び」に切り替えれば、複数カラムのような横並びレイアウトも作れます。
2. コンテナの中にウィジェットを追加する（見出し・画像・テキストエディター・ボタンなど）
骨組みができたら、その中に「ウィジェット」を入れていきます。ウィジェットとは、見出しや画像といった1つ1つの部品のことです。
左パネルの「基本」カテゴリには、次のような基本ウィジェットが用意されています。使いたいウィジェットを、コンテナの中へドラッグ&ドロップするだけで配置できます。
- 見出し：タイトルや小見出しを表示
- 画像：写真やイラストを挿入
- テキストエディター：本文の文章を入力
- ボタン：リンク付きのボタンを設置
- 動画・区切り・スペーサー・Googleマップ・アイコンなど
これらの基本ウィジェットだけで、大半のページ構成は作れます。まずはこの数種類を覚えれば十分です。
ウィジェット一覧には、Search・Posts・Portfolio・Menu・FormといったElementor Pro限定のウィジェットも一緒に表示されます。無料版でこれらをドラッグすると使えない旨の案内が出るため、初心者はまず「基本」カテゴリのウィジェットから使い始めるのがおすすめです。
STEP4：テンプレートを使うとさらに簡単（初心者におすすめ）
ゼロからデザインするのが難しいと感じたら、あらかじめ用意された「テンプレート」を使いましょう。プロがデザインしたレイアウトを挿入して、文章や画像を差し替えるだけでページが完成します。
テンプレートライブラリには次の4種類が用意されています。初心者は、まずページ全体のテンプレート（単一ページ）から始めるのがおすすめです。
- サイトキット全体：サイト一式のデザインセット
- 単一ページ：1ページ分の完成デザイン
- ブロック：ヘッダーや料金表などの部分パーツ
- ポップアップ：ポップアップ表示用（一部はPro向け）
テンプレートを挿入する方法
編集画面のコンテナ追加エリアにある「フォルダ型のアイコン（テンプレートを追加）」をクリックすると、テンプレートライブラリが開きます。気に入ったデザインを選び、「挿入」をクリックすれば、そのままページに読み込まれます。
あとは、テンプレート内の文章や画像を自分のものに置き換えるだけです。デザインの土台ができているので、大幅に時間を短縮できます。
STEP5：デザインを整える（スタイル・レスポンシブ確認）
要素を配置できたら、色や余白を調整して見た目を整えます。あわせて、スマホでの表示もチェックしておきましょう。
1. 要素のスタイル（色・余白）を変更する
編集したいウィジェットやコンテナをクリックすると、左パネルに設定項目が表示されます。パネルは「一般」「スタイル」「インタラクション」の3つのタブに分かれています。
- 一般タブ：「コンテンツ」欄で文章や画像などの内容を編集
- スタイルタブ：文字色・背景色・フォントサイズ・余白などの見た目を調整
数値やカラーを変えると、右側のプレビューにその場で反映されます。実際の見た目を確認しながら調整できるのが、Elementorの便利なところです。
2. モバイル表示を確認する
編集画面上部にある「デバイス切り替えアイコン（デスクトップ・タブレット・モバイル）」をクリックすると、各デバイスでの表示を切り替えて確認できます。
STEP6：保存して公開する
デザインが整ったら、いよいよ保存・公開です。Elementorの編集画面から直接おこなえます。
1.「公開」または「更新」をクリックする
編集画面の左下にある「公開」ボタンをクリックすると、ページが公開されます。すでに公開済みのページを編集した場合は、ボタンが「更新」に変わります。
2. 実際のページを表示して確認する
公開したら、実際のページを開いて仕上がりを確認しましょう。編集画面のメニューから「プレビュー」を開くか、公開されたページのURLにアクセスします。
公開直後は、表示キャッシュの影響でスタイルがすぐに反映されないことがあります。デザインが崩れて見えるときは、ブラウザの再読み込み（WindowsはCtrl+F5、MacはCommand+Shift+R）を試してください。
ラッコサーバーは高速SSD標準搭載でWordPressの表示を快適にサポート。「サイトマーケット」機能を使えば、WordPress本体・テーマ・プラグインの初期セットアップもワンクリックで完了します。
月額330円〜、10日間無料お試しでElementorのサイト作りを始められます。
よくある質問
Q1. Elementorの料金はいくらですか？
Elementorには無料版と有料の「Elementor Pro」があります。無料版でも基本的なコンテナ・ウィジェットを使ったページ作成が可能です。Elementor Proでは追加のウィジェットやテーマビルダー機能が使え、料金プランは公式サイトで確認できます。本記事で紹介する基本操作はすべて無料版で試せます。
Q2. Elementorとはワードプレスで何ですか？
Elementorは、コードを書かずにドラッグ&ドロップでページのデザインを作成できるWordPress用のページビルダープラグインです。詳しくは本記事の「Elementorとは？」の章で紹介しています。
Q3. Elementorのデメリットは？
Elementorは無料版でも数十種類のウィジェットが一覧表示され、その中にElementor Pro限定のウィジェットも多く混在しているため、初心者は最初どれが無料で使えるか分かりにくい点がデメリットとして挙げられます。本記事の「基本操作を覚える」の章で紹介する無料ウィジェットだけ覚えれば、直感的に使えるようになります。
Q4. Elementorの無料版でできることは？
無料版でも、コンテナを使ったレイアウト作成や、見出し・画像・テキストエディター・ボタンなど基本的なウィジェットの配置、テンプレートの利用ができます。本記事の「基本操作を覚える」の章で紹介する操作は、すべて無料版で完結します。
Q5. Elementorは何ができますか？
Elementorを使うと、コードを書かずに固定ページや投稿のレイアウトを自由に組み立てられます。コンテナで骨組みを作り、見出しや画像、ボタンなどのウィジェットを配置してデザインを整え、レスポンシブ表示も確認しながらページを完成させられます。
まとめ
Elementorを使えば、コードを書かなくてもドラッグ&ドロップだけで思い通りのページをデザインできます。最後に、基本の流れをおさらいしましょう。
- Elementorをインストール・有効化し、固定ページから「Elementor で編集」を開く
- コンテナで骨組みを作り、その中に基本ウィジェットを配置する
- 迷ったらテンプレートを挿入して差し替えるだけでも形になる
- スタイルを整えたらレスポンシブ表示を確認し、「公開」で仕上げる
まずは無料版で、コンテナとウィジェットの操作に慣れることから始めてみてください。基本操作さえ覚えれば、あとは組み合わせるだけで自由なページ作りが楽しめます。
