「WEBデザイナーに依頼するほどの予算はないがおしゃれなサイトをつくりたい」
「WordPressテーマを購入したが、手軽にカスタマイズしていきたい」
WordPressでつくるWEBサイトは、デザインテンプレート（テーマ）がたくさんあるのでWEBデザイナーに頼らずに構築するという方も多くいらっしゃいます。そんなときに、部分的に表示を変えたい、もう少しデザインをカスタマイズしたいという気持ちになったときに役立つプラグインが「Elementor Page Builder」です。
ページごとにドラッグ&ドロップでパーツを組み合わせるようにしてデザインを完成させることができるデザイン用プラグインです。HTMLやCSSの知識が全くなくても、WordPressの初心者様であっても、思い通りのデザインがつくれるようになります。
過去の記事で「トップページをおしゃれに装飾するWordPressプラグイン5選」としてこのプラグインをご紹介しました。好評でしたので、この記事ではより詳細に使い方やオススメのパーツを解説していきます。
１．プラグイン「Elementor Page Builder」の概要
https://ja.wordpress.org/plugins/elementor/
■日本語対応（一部英語部分あり）
■無料（有料プロ版もありますが今回解説する機能は無料で使える範囲内です）
Elementor（エレメンター）を使うと、トップページだけでなく下層の固定ページ、ブログの記事(投稿)のレイアウトを自由に変更できます。
スライドショーを入れる、動画を入れる、見出しを追加するといった挿入はもちろん、画像を右に配置したい、カレンダーを上部に入れたいといった細かいレイアウトもドラッグしていくだけで配置ができます。
誰でも目で見ながらデザインができる便利なプラグインです。
無料ですがかなり高機能で、WEBページのデザインやレイアウトのためには使わない機能もあります。
今回はWEBサイトのトップページと下層の固定ページのデザイン・レイアウトをするために必要な機能の紹介と、基本の使い方の解説をします。皆様が必要とする部分をご参照ください。
２．プラグイン「Elementor Page Builder」でページをつくる基本の操作
トップページのデザインは、「固定ページ＞新規追加」で新しいページをつくってスタートします。
①右サイドバーの「ページ属性＞テンプレート＞全幅」を選ぶ
これでWEBサイトの幅いっぱいを使ってデザインできます。
トップページは横幅いっぱいを使うことが多いので、まずはこのテンプレートで始めてください。
②ページ内にある【Elementorで編集】をクリックしてデザインスタート
このプラグインを使ってデザイン・レイアウトしたいときは常にページ内に表示されている【Elementorで編集】ボタンをクリックして開始します。
③好きなパーツを組み合わせていく
左メニューに使えるパーツが表示されています。
「基本、プロ版、一般」とパーツにもカテゴリーがあるのですが、プロ版以外は使えます（もちろんプロ版へアップデートすれば全て使えます）。
ではここから基本のパーツとして準備されている10個についてそれぞれを解説していきます。使いたいパーツの解説を選んでご参照ください。
◆「Elementor Page Builder」を使ってスムーズにデザインを進めるコツ
作業をスムーズ進めるために、最初に以下の3点を準備しておくことをオススメします。
・デザインに使用する写真、動画ファイル
・WEBサイトに掲載する文章
・簡単なデザインの下書き
レイアウトやデザインはできるだけ一気に仕上げたほうが時短できます。
必要となりそうな写真や動画ファイルを1つのフォルダにまとめておいたり、文章はテキストファイルに事前に書いておいたり、準備しておくと手を止めずに完成まで進むので非常にスムーズです。
３．プラグイン「Elementor Page Builder」の基本パーツ「InnerSection」の使い方
ページをカラム（段組み）したいときに使う機能です。
「写真を右に、文章をその横に入れたい」「バナーをいくつか横並びにしたい」といったときには、この「InnerSection」を使います。
まず最初は画面が2分割されるのですが、その幅や余白などもメニューバーで設定できます。
垂直方向に整列させたり、背景の色を変えたり、枠を付けたり。
「こうしたい」と思っている通りに、目で見ながらデザイン調整ができます。
４．プラグイン「Elementor Page Builder」の基本パーツ「見出し」の使い方
これはパーツ名の通り、見出し／タイトルを挿入するために使います。
・タイトル（文言）
・リンク
・サイズ
・HTMLタグ
・配置
・色
・書体（フォント）
などの項目が左メニューから調整できます。
スタイルを選ぶと文字デザインが思いのまま。
枠線を付けたり、背景を入れたり、マウスオーバーで動きを付けたりなども可能です。
キャッチコピーを入れたり、トップページだけ見出しの文字サイズや色を変えたりと、WEBサイトにメリハリを付けられます。
５．プラグイン「Elementor Page Builder」の基本パーツ「画像」の使い方
画像を入れたいところにドロップするだけで、その画像に対する編集も全てできるようになります。サイズの変更、リンク追加、角を丸くする、透明度を変えるなど。画像を元のまま挿入して、Elementorで画像加工もできるので時短できます。
６．プラグイン「Elementor Page Builder」の基本パーツ「テキストエディタ」の使い方
画像と同じく、テキスト（文字）を入れるパーツをつくります。
文字の見た目は、パーツの上で右クリックすると編集可能に。見出しタグ（H1、H2など）の挿入もできます。
７．プラグイン「Elementor Page Builder」の基本パーツ「動画」の使い方
YouTubeにアップロードした動画なら、URLを入力するだけでOK。
動画ファイルをアップロードももちろんできます。
（NHKが公開しているサンプル動画でテストしました→NHKクリエイティブライブラリー）
動画ファイルをアプロードしても音量や再生時間のコントロールが可能な形で埋め込まれます。
・開始時間／終了時間
・ミュート
・ループ
など、初期設定できます。音声は急に流れると訪問者様のご迷惑になる可能性もありますので最初はミュートが良いでしょう。
動的なエフェクトを入れたい場合は、「高度な設定＞MotionEffect」からアニメーションの設定ができます。右や左からフェードインさせるなど動きを出すことで印象的な見せ方が可能となります。
８．プラグイン「Elementor Page Builder」の基本パーツ「ボタン」の使い方
資料請求や問い合わせフォームなど、訪問者様に何かしらのアクションをしてもらいたいときに使うリンクボタン。配置や色も自由につくることができます。
オススメの使い方は、左メニューにある”アイコンライブラリー”から、ボタンの中にイメージアイコンを入れること。とてもたくさんのアイコンが用意されていて、これを1つ入れるだけで洗練されたデザインになります。
９．プラグイン「Elementor Page Builder」の基本パーツ「区切り線」の使い方
WEBデザインではかなり重要な要素となる「区切り線」。余白をつくるためのものであったり、強調するためだったり、色々な使い方をします。このプラグインには26種類も線のデザインが用意されているので、使いたいものが見つかるはず！
幅や場所だけでなく、区切り線の間にテキストを入れることも。
WEBデザインのアクセントになるので、うまく活用したいパーツです。
１０．プラグイン「Elementor Page Builder」の基本パーツ「スペーサー」の使い方
スペーサーとは余白を調整する機能のことを指します。
ちょっと余白をもたせてゆったりと見せたいな、と思ったときに使えます。また、背景画像を設定することで、区切り線のようにも使うことができます。
１１．プラグイン「Elementor Page Builder」の基本パーツ「GoogleMAP」の使い方
アクセスの情報を入れるなら必須ともいえるGoogleMAPのパーツ。
店名や施設名、住所を入れるだけで、自動的にピンが立った地図が挿入されます。
店名や施設名がGoogleMAPに登録されていれば、登録されている情報やクチコミなどもリンクで表示されます。GoogleMAPのルートも出るので、すぐに行きたい方にも役立ててもらえます。
◯ズーム：数字が大きくなるほど細かく表示されます（1に設定すると世界地図）
◯高さ：地図の高さ
遠方から来られる方が多いならズームの数字は小さめ。地域の方々がよく来られるお店なら数字は大きめ（13〜15）くらいで設定すると見やすいと思います。
１２．プラグイン「Elementor Page Builder」の基本パーツ「アイコン」の使い方
これは↑「ボタン」でも使ったよなアイコンライブラリから画像を読み出して挿入する機能です。しかし、単独では使い勝手が悪いので、アイコンを入れたいときは「アイコンボックス」パーツの活用がオススメです。
「アイコンボックス」は、基本のパーツより下のメニューに表示されています。このパーツを使うとアイコンと見出し、テキストがセットで挿入できます。
ちょっとしたお知らせを入れたり、注意事項など読んでおいてもらいたいことを書いたりするスペースとして使いやすいです。アイコンが入るだけで目を引きますね。
１３．まとめ
非常に高機能なプラグインなので、基本パーツを紹介するだけでこれだけのボリュームがありました。他のパーツを使うとソーシャルボタンを入れたり、アイコンリストを入れたりすることができます。
使い勝手は基本のパーツとほぼ同じなので、慣れてしまえばどのパーツも直感的に使いこなせます。
WordPressのテーマを少しカスタマイズしたい…そんなときに便利なデザインプラグインですので、ぜひご活用ください。