【2021年最新版】Elementorの使い方：完全ガイド

• WordPressを使っているけど、デザイン性の高いページを作りたい
• ページビルダープラグインを使ってみたいけど、どれがオススメなのか教えて欲しい

と思ったことはありませんか？今日は、そんなあなたにElementor（エレメンター）という、無料で使えるWordPressの専用のページビルダープラグインをご紹介します。ちなみに、普段僕も、実際に使っていて、結構なヘビーユーザーなので、その実体験を元にご紹介していきます。

Elementor（エレメンター）とは？

Elementorは、無料で使えるWordPressのページビルダープラグインです。海外では有名で、たくさんの人が使用しています。通常、WordPressのサイトは、テーマごとに書式やレイアウト等が決まっています。でも、Elementorを使うことによって、テーマのデザインに依存しない綺麗なデザインのページを作成することができます。ただ、無料版のElementorは使える機能に制限があります。

もし、もっと凝ったデザインのサイトを作成したいとか、ページを作りたいと考えているのであれば、Elementor ProというElementorの有料版を使ってみると良いかもしれません。

Elementor（エレメンター）のメリット

そんな無料で使えるElementorは、ドラッグ&ドロップでページを作成することができます。なので、直感的に操作することができます。また、通常のWordPressのテーマなら記事は1カラムになっていますよね。でも、Elementorでは最大6カラムにもすることができます。しかも、そのカラムはページ全体に適用されずに、一部のセクションだけに適用させることができます。

また、Elementorは、プラグインなのでどんなテーマをインストールしていても、使えます。今回は、Twenty SeventeenというWordPressにデフォルトで備わっている無料のテーマを使って、Elementorの使い方をご紹介していきます。

Elementor（エレメンター）のデメリット

今、メリットについてご紹介してきましたが、Elementorにはデメリットも存在します。

記事作成に時間がかかる

最も大きいものとしては、ブログ記事の作成が面倒だということです。WordPressに備わっているクラシックエディターやグーテンベルグのエディターを使うと、使用しているテーマのデザインに依存してしまいます。かといって、デザイン性の高いページを作成したいとなると、Elementorの編集画面を使っての作業となるので、時間がかかります。

もちろん、テンプレートを作成しておいて、それを使ってページを作成しても良いですが、それでもElementorの編集画面で文章を書いていくことになるので、結構面倒だと思います。もし、クラシックエディターやグーテンベルグのエディターを使いたい、かつElementorでデザイン性の高いページも作りたいというのであれば、Elementor Proを使ってみてください。Elementor Pro2.0からテーマビルダーという機能が追加されたので、投稿毎、固定ページ毎、カテゴリー毎に別のデザインにしたりということもできるようになります。

ページの表示速度が遅くなりがち

Elementorなどのページビルダープラグインは、高機能が故に、ページの表示速度が遅くなりがちです。何も対策をしないと、かなり遅くなってしまい、ブログを運営している方にとっては、SEO的にもマイナスになり得ます。しかし、高速化対策をすることによって、大幅に改善することができます。

• Elementorのサイトが重い！？高速化するための7つの対策
• 表示スピードアップに効果的！EWWW Image Optimizerの設定と使い方
• Autoptimizeプラグインの設定と使い方：HTML・CSS・JavaScriptコードを最適化する方法
• WP Fastest Cacheの使い方：キャッシュを生成しサイトを高速化する方法
• WP Rocketの使い方：完全ガイド

Elementor（エレメンター）をインストールする

まずは、Elementorをインストールしていきましょう。WordPressのダッシュボードから「プラグイン」にある「新規追加」に移動します。そして、検索窓で「Elementor」と検索してみましょう。すると、「Elementor Page Builder」というプラグインがトップに表示されていると思うので、これを「今すぐインストール」して、「有効化」しましょう。

Elementor（エレメンター）プラグインを設定する

プラグインをインストールしたら、特に設定が必要な項目はありませんが、

設定

一般

• 投稿タイプ：Elementorを使う投稿のタイプにチェックを入れます。「投稿」と「固定ページ」の両方にチェックを入れておくと良いと思います。
• デフォルトカラーを無効化：Elementorのデフォルトカラーではなく、サイトのカラーが使われます。
• デフォルトフォントを無効化：Elementorのデフォルトのフォントではなく、テーマのフォントが使われます。
• 使用状況データのトラッキング：チェックを入れると、Elementorに利用状況に関する情報を送信するようになります。

スタイル

• デフォルトの汎用フォント：Elementorで用意されているフォントが利用できない場合、ここで設定したフォントが代わりに使用されます。
• コンテンツの幅：ウィジェットのデフォルトの幅を設定できます。
• ウィジェット間のスペース：上下のウィジェットのスペースの幅を設定できます。
• 選択範囲をフィットするよう引き伸ばす：引き伸ばされた要素が適合する親要素を選択します。
• ページタイトルセレクター：ページタイトルを隠すための
• タブレットのブレークポイント：パソコンとタブレット間のブレークポイントを設定します。
• モバイルのブレークポイント：タブレットとモバイル間のブレークポイントを設定します。
• 画像Lightbox：画像リンクが埋め込まれている場合は、ポップアップで表示されます。

詳細

• CSS印刷設定：CSSを独立したスタイルシートとして含めるか、各ページに含めるかを選択します。「外部ファイル」が推奨されています。
• エディター読み込みツールのメソッドを切り替える：サーバーで問題が起こった時に、有効にします。
• Editing Handles：エレメントの編集ボタンにマウスカーソルを置いた時の編集可能項目が追加されます。
• Enable SVG Uploads：アイコンなどをアップロードする際に使いますが、「有効にする」に設定しておくと、SVGファイルをアップロードできます。
• Load Font Awesome 4 Support：Font Awesome 5ライブラリを使用しているときに、Font Awesome 4アイコンが正しく表示されるようにするかどうかを設定します。

ツール

ここからは、ツールの設定を確認していきましょう。

一般

• CSSを再生成する：古いElementorのスタイルに関するCSSファイルを削除し、新しいファイルが生成されます。
• ライブラリーを同期：手動でElementorのライブラリーをアップデートしたい時に使います。
• Safe Mode：「有効にする」に切り替えると、問題が起こった時に、テーマやその他のプラグインを読み込まずに、エディターのみを読み込むことで、解決してくれます。
• Debug Bar：「有効にする」にすると、ツールバーにElementor Debuggerが追加され、表示されているページに使われているテンプレートが見れるようになります。

最後の「Debug Bar」は、このような感じで表示されます。

URLを変更

• サイトアドレス（URL）を更新：サイトを移転した際に、左に古いサイトのURL、右に新しいサイトのURLを入力して「URLを変更」ボタンをクリックします。

バージョン管理

• バージョンのロールバック：古いバージョンのElementorを利用したい場合に使いますが、基本的には使いません。
• ベータテスター：ベータバージョンのElementorを利用したいときに、「有効にする」に切り替えます。

メンテナンスモード

この項目は、サイトをメンテナンスする際に使用します。

• モードを選択：「Coming Soon」か「メンテナンス」を選択します。それぞれ、HTTP200、HTTP503のコードを返します。
• アクセス権：「Coming Soon」か「メンテナンス」が有効化されている時にコンテンツを表示できるユーザーを選択します。「ログイン」と「カスタム」があります。
• テンプレートを選択：メンテナンスモードを有効かする場合は、メンテナンス中であるというページを表示します。「作成」というリンクからそのページを作成することができます。

• Administrator
• Editor
• Author
• Contributor
• Subscriber

「アクセス権」で「カスタム」を選択した場合は、上記の5つのユーザーのチェックボックスが表示されます。コンテンツを表示したいユーザーにだけ、チェックを入れておきましょう。

Elementor（エレメンター）の基本用語

Elementorを使う前に、知っておいたいただきたい用語がいくつかありますので、それを確認していきましょう。

ウィジェット

まず、「ウィジェット」というのは、「見出し」、「画像」、「動画」、「ボタン」などがありますが、ページに追加できる要素のことです。追加する方法は、2つあります。

まず1つ目は、ウィジェットをそのままドラッグ&ドロップで「ウィジェットをここにドラッグ」と書いてある場所に追加する方法です。

2つ目は、「ウィジェットをここにドラッグ」にあるプラスボタンをクリックして、構造（カラム）を選択してから追加する方法です。複数のカラムにしたいのあれば、この方法で追加しましょう。

セクション

セクションというのは、ウィジェットを入れる箱みたいなものだと思ってください。ウィジェットを追加する2つ目の方法では、構造を決めますが、この構造がセクションになります。

ベーシックウィジェットの使い方

ここからは、ウィジェットの使い方をご紹介していきます。まずは、「ベーシック」にあるウィジェットについてです。

• Inner Section
• 見出し
• 画像
• テキストエディター
• 動画
• ボタン
• 区切り線
• スペーサー
• Google マップ
• アイコン

ベーシックの項目には、上記の10個のエレメントが用意されています。使い方が簡単なものや設定項目が少ないものに関しては、この記事でお伝えします。設定項目が多いものは別の記事を用意していますので、詳細は各ウィジェットを確認してください。

Inner Sectionウィジェットの使い方

「Inner Section」というのは、セクションの中にカラムを複数にすることができる機能です。そして、その中に、テキストを入れたり、画像を入れたりすることができます。

見出しの使い方

見出しウィジェットは、そのまま見出しです。テキストエディターでも、見出しを追加することができますが、「Inner Section」を追加して、その中にテキストを追加して、見出しを挿入すると、左か右に見出しが寄ってしまいます。なので、そういった時に「見出し」を「Inner Section」の上に追加して使用すると良いです。

画像ウィジェットの使い方

画像ウィジェットでは、画像専用のウィジェットです。でも、画像を追加するだけでなく、画像にキャプションを付けたり、シャドウを付けたり、アニメーションを付けたり、画像にボーダーを付けたり、そのボーダーの色や太さなど、細かい設定をすることができます。

テキストエディターウィジェットの使い方

テキストエディターウィジェットは、WordPressを使ったことがある人なら簡単に操作できると思います。でも、WordPressで作成する文章よりも、カスタマイズすることができます。例えば、先頭の文字だけを大きくしたり、フォントや文字の色、サイズを変更したり、複数のカラムにしたり。

動画ウィジェットの使い方

動画ウィジェットでは、「YouTube」と「Vimeo」、「Dailymotion」、「独自アップロード」の4つのプラットフォームを利用して、動画を表示させることができます。ただ動画を表示するだけでなく、動画にオーバーレイ画像を追加したり、外見を魅力的にすることができます。

ボタンウィジェットの使い方

ボタンウィジェットでは、お客さんを別のページに飛ばしたいとか、同一ページ内の他のセクションにスクロール（ページ内スクロール）して飛ばすことができます。

区切り線ウィジェットの使い方

「スタイル」では、「直線」、「二重線」、「点線」、「破線」から区切り線のタイプを選びます。「太さ」の項目では、区切り線の太さを変更することができます。ツマミを右にずらすと、線を太くすることができます。「色」の項目では区切り線の色を、「幅」では区切り線の幅が調節できます。幅を狭くした場合は、「配置」で左・中央・右に寄せることができます。最後の「すき間」は、区切り線のウィジェットの縦幅を調節することができます。

スペーサーウィジェットの使い方

「スペーサー」というのは、スペースを開けるためのエレメントです。「区切り線」を使って、上のセクションと下のセクションを分けるのではなく、空白を開けたいという場合などに使用します。スペーサーの幅は「スペース」という項目で変更が可能です。ツマミを使うと、最大値は「600」ですが、それより幅を広くしたい場合はその数値を直接入力しましょう。

Googleマップウィジェットの使い方

Googleマップウィジェットは、会社の所在地やお店の所在地を表す時とかに使います。レストランのホームページを作成していたり、会社ホームページを作成している方は、このGoogle マップをサイトに置いておくと良いかもしれません。

アイコンウィジェットの使い方

アイコンウィジェットは、アイコンが追加できます。いろんなアイコンが用意されているので、様々な目的に使えますが、例えばあなたが使用しているSNSのアイコンを追加したり、カフェの設備情報(コンセントやWiFiなど)に関するアイコンを追加したり、といった使い方ができます。

一般のウィジェットの使い方

• 画像ボックス
• アイコンボックス
• Star Rating
• 画像ギャラリー
• 画像カルーセル
• アイコンリスト
• カウンター
• ブログレスバー
• お客様の声
• タブ
• アコーディオン
• 切り替え
• ソーシャルアイコン
• アラート
• SoundCloud
• ショートコード
• HTML
• メニューアンカー
• サイドバー

一般では、上記のエレメントが備わっています。以下で、1つずつ確認していきましょう。

画像ボックスウィジェットの使い方

画像ボックスウィジェットは、画像と見出し、テキストが一体型になっているエレメントです。なので、画像・見出し・テキストを1つずつ追加する必要はありません。それでは、上記の細かい設定を見ていきましょう。

アイコンボックスウィジェットの使い方

「アイコンボックス」は、先ほどやった「画像ボックス」と使い方が同じです。「コンテンツ」の「アイコン」では、Elementorで用意されているアイコン、もしくはSVG形式のファイルをアップロードしてもOKです。

「スタイル」では、「ローテーション」というのがあります。これは、「アイコン」ウィジェットでもあったように、アイコンの角度を調整することができます。

Star Ratingウィジェットの使い方

Star Ratingウィジェットでは、星5つか星10個でレビューを表示できます。

画像ギャラリーウィジェットの使い方

「画像ギャラリー」は、複数の画像を表示させるためのウィジェットです。「画像の追加」から、ギャラリーとして追加したい画像を選択します。1枚の画像だけではなく、複数の画像を選択できます。

画像カルーセルウィジェットの使い方

画像カルーセルウィジェットは、画像のスライドショーが作れるウィジェットです。ちなみに、カルーセルとは回転台とかメリーゴーランドの意味です。

アイコンリストウィジェットの使い方

アイコンリストウィジェットでは、アイコンと一緒に、ブレッドのようにテキスト文章をリストアップすることができます。

カウンターウィジェットの使い方

カウンターウィジェットでは、数値を表示することができます。入力した数値がカウントアップされます。

• 開始ナンバー：カウントを始める数字の値
• 終了ナンバー：カウントを終了する数字の値
• 数字の接頭語：数字の頭につける単語(例：コース数)
• 数字の接尾語：数字のお尻につける単語(例：個)
• アニメーションの継続時間：カウントが始まり終了するまでの時間
• 3桁ごとの区切り文字：3桁ごとに数字を区切る設定(例：1,000)
• 区切り：区切り点の種類(「Default」、「Dot」、「Space」から選択)
• タイトル：数値の下につけるタイトル

プログレスバーウィジェットの使い方

「プログレスバー」は、進歩度合いを表示させるエレメントです。

• タイトル：プログレスバーのタイトル
• タイプ：バーの種類(「デフォルト」、「情報」、「成功」、「警告」、「危険」から選択)
• パーセント：進歩度合い(0~100の間で選択)
• パーセント表示：パーセントを表示するかどうかの設定
• 内部テキスト：バーの中のテキスト

お客様の声ウィジェットの使い方

「お客様の声」は、レビューです。

• コンテンツ：レビュー文章
• 画像の選択：お客様の画像
• 画像サイズ：お客様画像のサイズ
• 名前：お客様の名前
• タイトル：お客様の肩書き
• リンク：お客様画像と名前・タイトルに埋め込むリンク
• 画像位置：画像と名前・タイトルの位置(「アサイド」は横並び、「上」は縦並び)
• 配置：コンテンツと画像、名前・タイトルの位置

タブウィジェットの使い方

タブウィジェットは、ナビゲーションに説明文がついたようなものです。複数用意して、タブを切り替えることができます。

アコーディオン・切り替えウィジェットの使い方

Elementorのアコーディオンウィジェットと切り替えウィジェットは、ほぼ同じ機能です。どちらも、アコーディオンのように伸び縮みし、タイトルをクリックするとテキストが表示されるようになります。例えば、FAQやQ&Aなどで使います。

ソーシャルアイコンウィジェットの使い方

「ソーシャルアイコン」では、SNSのアイコンを表示することができます。

アラートウィジェットの使い方

「アラート」では、色付きのボックスの中にテキストを入力して、訪問者に何かを宣伝したい時とかに使います。

SoundCloudウィジェットの使い方

SoundCloudウィジェットでは、SoundCloudという音楽配信サービスの音楽を埋め込むことができます。

ショートコードウィジェットの使い方

ショートコードウィジェットでは、例えば、コンタクトフォームのプラグインでショートコードが必要になるんですけど、そのコードをここに入力します。テキストでもできそうですが、テキストだと反応しませんので、ショートコードを使いたい場合は、このエレメントを使いましょう。

HTMLウィジェットの使い方

HTMLウィジェットでは、HTMLコードが入力できます。

メニューアンカーウィジェットの使い方

メニューアンカーウィジェットでは、ユニークなIDを割り振っておくことで、ページ内リンクの設定ができます。リンクに「#（ID）」と入力すると、メニューアンカーが追加されたセクションに飛ばされます。使い方としては、ページのトップにボタンを設置しておいて、クリックされたらページの下の方にあるセクションに飛ばすみたいな感じです。ページ内での移動ができます。

サイドバーウィジェットの使い方

サイドバーウィジェットでは、サイトのサイドバーのコンテンツを表示することができます。テーマによって異なりますが、「サイドバーの選択」でサイドバーやフッターなどのウィジェットを選択することができます。

Read Moreウィジェットの使い方

このウィジェットを使うと、Read More（続きを読む）表示ができます。ただし、アーカイブページで「the_content」があるWordPressテーマでのみ使えます。

WORDPRESSウィジェットの使い方

• 固定ページ
• カレンダー
• アーカイブ
• 音声
• 画像
• ギャラリー
• 動画
• メタ情報
• 検索
• テキスト
• カテゴリー
• 最近の投稿
• 最近のコメント
• RSS
• タグクラウド
• ナビゲーションメニュー
• カスタム HTML

Elementor（エレメンター）でページを作成する方法

ここまでは、Elementorの基本的な設定や使い方についてご紹介してきましたが、ここからはより実践的に、Elementorを使ったページの作り方をご紹介していこうと思います。

お問い合わせページを作成する方法

まずは、お問い合わせページの作り方です。実は、Elementor単体では、お問い合わせページは作成できません。じゃあ、どうすれば良いかというと、Contact Form7というお問い合わせフォームを作成するプラグインを併用します。そして、Contact Form7で生成されるショートコードをElementorの編集画面で埋め込んでいきます。

オプトインページを作成する方法

オプトインページというのは、Eメールアドレスを取得する専用のページです。これも、Elementor単体で作成することはできません。別途、Eメールサービスを契約し、そちらでオプトインフォームというものを作って、コードをElementorの方に埋め込んでいく必要があります。Eメール配信サービスもオプトインページを作成する機能がある場合もありますが、Elementorであれば、ドラッグ&ドロップでかっこいいオプトインページが作成できるので、非常にオススメです。

セールスページを作成する方法

セールスページは、商品を販売するページのことです。お問い合わせページやオプトインページのように、フォームを作成するツールなど、デザイン面で欠けてしまうものはありませんが、決済機能は用意しておく必要はあります。WooCommerceを使ったり、外部の決済専用のページに飛ばしたりというのが必要になってきます。セールスページをデザインするだけであれば、Elementorだけで十分です。

Envatoのプラグインもおすすめ！

Elementorにはたくさんのテンプレートが用意されていますが、もっとたくさんのテンプレートが使いたいということがあると思います。その場合は、Envatoのプラグインを使ってみてください。Envatoは、ストックフォトなどをダウンロードできるサイトですが、Elementorのテンプレートも提供するようになりました。基本的に無料で使うことができます。ただし、制限があって、Envato Elementsを契約しないと、豊富に用意されているプレミアムテンプレートが使えるようになりません。