はじめに
WordPressでホームページを作るとき、「もっと自由にデザインしたい」「コードを書かずに直感的に編集したい」と思ったことはありませんか？
そんなときに活躍するのが Elementor です。
Elementorはドラッグ＆ドロップでレイアウトを作れるページビルダーで、世界中のWeb制作者や企業が愛用しています。
「初心者でも短時間で美しいページが作れる」というのが最大の魅力です。
今回は、その活用法を徹底解説します。
Elementorとは？
Elementorは、WordPressにプラグインとして導入できるページビルダーです。
特徴は以下の通りです。
- 直感的な操作性：ドラッグ＆ドロップでブロックやパーツを配置
- 豊富なウィジェット：見出し、画像、動画、フォーム、スライダーなど
- リアルタイム編集：編集結果を即プレビュー
- レスポンシブ対応：スマホ・タブレット表示も簡単に調整
- カスタマイズ性：テーマに依存せず独自デザインが可能
※ 無料版でも十分高機能ですが、Pro版ではフォームビルダーやWooCommerce対応など、ビジネス利用に便利な機能が追加されます。
Elementorの導入方法
WordPress管理画面から「プラグイン > 新規追加」
→「Elementor」で検索
→「今すぐインストール」
→「有効化」
アカウントを作成します。
（Googleアカウントなどでログインも可能）
ここからいろいろ聞かれますが、全部スキップして大丈夫です。
サイト設定
全てスキップが終わると、自動的にページの編集画面が開かれます。
さっそくElementorを使ってページを完成させていきましょう。
まずは「サイト設定」から開始します。
上のメニューのサイト設定をクリックします。
サイト基本情報
サイト設定から、サイト基本情報をクリックします。
サイト名、サイト説明、サイトロゴ、サイトのファビコン、全て入力したら「変更を保存」ボタンをクリックします。
ファビコンは、Webブラウザのタブやブックマーク、検索結果などに表示される小さなサイト用アイコンです。
保存したら、上部の矢印をクリックして、サイト設定一覧に戻ります。
次にサイトの配色を設定していきます。
グローバルカラーをクリックします。
サイトに表示する４つのカラーを設定できたら、「変更を保存」ボタンをクリックして、またサイト設定一覧に戻ります。
- メイン（プライマリ）：サイトの主要部分や強調したい要素（例：ヘッダー、重要なボタン、見出しのカラーなど）。
- サブ（セカンダリ）：メインほど目立たせたくない補助的な部分（例：副見出しや補助ボタン、背景の一部など）。
- テキスト：サイト全体の基本テキスト（本文）の色。
- アクセント：リンクやCTAボタン、ハイライトなど、特に目立たせたい小さなポイントカラー。
次にフォントを設定します。
サイト設定の中の「グローバルフォント」をクリックします。
メイン、サブ、テキスト、アクセントのフォントをそれぞれ設定し、「変更を保存」をクリックします。
メイン（プライマリ）フォント
主に見出し（H1〜H3など）やナビゲーションなど、最も目立たせたい重要なテキスト部分に使われるフォントです。初期状態ではHeadingウィジェットやメインメニューなどに適用される想定です。
サブ（セカンダリ）フォント
補助的な見出しやサブタイトル、キャプション、目立たせたくないサブ要素に利用されることが多いです。例：H4〜H6やサブメニューのラベルなど。
テキスト（本文）フォント
段落テキストやブログ記事本文、説明文など、一般的なテキスト要素全般に使われます。Text Editorウィジェットや長文の情報部分でよく使われます。
アクセントフォント
ボタンのラベルやリンク、特別な強調テキスト（例：CTA、ハイライト、多言語部分など）に設定されることが多いです。
作成したページを下書き保存する
ここまで作成したら、ページを下書き保存しておきましょう。
下書き保存をすると、ページを公開せずに編集したものを保存しておくことができます。
Elementorに限らず、WordPressのページ編集中はこまめに保存しておくのがおすすめです。
Macなら、command + S
Windowsなら、Ctrl + S
で下書き保存できます。
クリックで保存した場合は、画面右上のドロップダウンをクリックして「下書き保存」をクリックすれば、保存できます。
ウィジェット
では、ここからさっそくウィジェットでページを作成していきます。
ウィジェットを使用する前に知っておきたいことが、
Elementorのウィジェットは「コンテナ」や「グリッド」「フレックスボックス」の中にしか配置できない
ということです。
ウィジェットはドラッグ＆ドロップすれば表示できますが、直接「空白」部分にドロップしても何も表示されません。
表示させるには、デフォルトで表示されているこの赤枠部分にドロップするか、
もしくはレイアウトの中のコンテナかグリッドをクリックして、そこにウィジェットをドロップする必要があります。
ではまず、グリッドを配置するところから始めていきましょう。
グリッド
要素を追加するボタンをクリックします。
すると、フレックスボックスかグリッド、どちらを選ぶか聞かれます。
これらは、要素の配置を変えるものです。
画像を３つ横並びにしたりすることができるようになります。
フレックスボックスはより複雑な配置ができます。
今回はシンプルなグリッドの方を選択しましょう。
２列のカラムをクリックします。
左側のカラムにアイコンをドラッグ＆ドロップします。
これで要素を横並びに配置できるようになりました。
左上の要素を追加をクリックして、元のウィジェット一覧に戻ります。
見出し
では、先ほど作成したグリットにウィジェットを追加していきましょう。
まずは見出しを追加します。
本や新聞の「タイトル・章の見出し」と同じように、Webページにも見出しを表示することが推奨されています。
Webでは「h1、h2、h3…」というタグで見出しの重要度や階層を表します。
これは見た目の大きさだけでなく、検索エンジン（Googleなど）がページを理解する手がかりにもなります。
- h1：ページで一番大切な見出し（基本は1ページに1つ。WordPressはページのタイトルがh1になる）
- h2：大きな項目の見出し
- h3：h2の中の小項目の見出し
まずは見出しをグリッドの左側の枠にドラッグ＆ドロップします。
検索してヒットしそうな単語、一目見てどんな内容か分かるタイトルをつけましょう。
画像
次は画像を追加します。
メインビジュアルとして、サイトの内容が一目でイメージできるような画像を入れましょう。
画像の選択の部分をクリックして、画像を変更します。
ここまでできたら一度保存して、プレビューを見てみましょう。
画面右上の目のアイコンをクリックすると、本番のページがどのように表示されるか確認することができます。
テキストエディタ
次は文章を追加してみましょう。
デフォルトの文章を修正しましょう。
メインビジュアルのすぐ下なので、サービスの強みや内容が簡潔にわかるような文章が良いでしょう。
ボタン
次はボタンを追加します。
お問い合わせページや、電話番号など、お客様が購入・予約などをするためのリンク先を貼っておきましょう。
ボタンをドラッグ＆ドロップします。
テキストとリンクを変更して保存しましょう。
これで、Webサイトに最低限必要な情報を載せることができました。
画面右上の公開ボタンをクリックして、ページを公開できます。
注意：特定のテーマ・プラグインとの相性が悪いかも
Elementorを編集中、動作が結構不安定になるときがありました。
テーマとプラグインを全て外したら正常に動作するようになりました。
正直な話：無料版ならElementorは必要ないかもしれない
ここまでElementorの使い方を説明してきたのになんですが、無料版だけならElementorはインストールする必要はあまりないかもしれません。
というのも、無料版のElementorでできることは、WordPressで大体できてしまうからです。
また、結構代表的なプラグインやテーマとも相性が悪いみたいなので、Web制作者としては、あんまりおすすめできないかも…と思ってしまいました💦
