驚くほど直感的。初心者でもコード不要で本格的なページが作れる高機能プラグイン「Elementor」

WordPress初心者の方にとってオリジナルのレイアウトでページをレイアウトすることは少しハードルが高いでしょう。有料、無料を問わず何かしらのテーマを適用してある程度形の決まったレイアウトの中で構築されている方も多いと思います。HTMLやCSSを勉強してもWordPressを使いこなすには少し慣れが必要ですし、不慣れな方が好みのレイアウトでページを完成させるには、かなり時間がかかるかもしれません。

というわけで今回は直感的にページを構築できるプラグイン「Elementor」をご紹介いたします。このプラグインは初心者だけでなく、ある程度WordPressを使いなれている方にとっても、便利で作業効率を上げることができるのでオススメです。有料版もありますが、今回は無料版について解説いたします。

「Elementor」とは

一言でいうと、WordPressのページを自由自在に構築できるプラグインになります。そのほとんどの作業が見やすいUIで直感的に操作でき、ドラッグ&ドロップで並び替えるなど、感覚的な操作が可能です。ややこしいコードを調べて応用する手間も省くことができ、サイト構築の作業効率が圧倒的に変わります。

主な機能概要は、以下の通りです。

• 有効化するとElementor独自のエディターが実装される
• 直感的に操作できるWordPressを初めて使う方にも使いやすいUI
• WordPressに適用しているテーマのデザインにかかわらず、自由にページレイアウトを変更できる

「Elementor」のインストール

WordPressの管理画面から、プラグインの新規追加をクリックして「Elementor」と検索するか、下記ボタンよりダウンロードできます。

Elementor

「Elementor」の基本

作りたいページのベースを決める

有効化し、まずは固定ページをクリックしてみましょう。新規作成をクリックすると下記のような画面が表示されます。

最初に以下の3つを設定します。

• タイトル
• パーマリンク
• テンプレート

後からでもタイトルは変更できますが、パーマリンクとテンプレートは変更しない方がベターなので、コンテンツにあったものを最初から選択しておきましょう。

パーマリンクの設定については、こちらを参考にご覧いただけます。

テンプレートは、WordPressに適用しているテーマによっても変わってきますが、基本的に主に以下の3種類を活用できます。

• デフォルトテンプレート（ヘッダー、タイトル、サイドバー、フッターが有る基本的な固定ページ）
• Elementor キャンバス（ヘッダー、タイトル、サイドバー、フッター無しのランディングページ向け）
• Elementor 全幅（デフォルトテンプレートのサイドバー無しバージョン）

ランディングページについては、下記の記事を参考にご覧いただけます。

ここまでで、作りたいページのベースになる形を用途に合わせて設定するということです。

セクションとカラムの概念

実際にエディターを使う前に、セクションとカラムについて理解しておきましょう。Elementorのエディターではセクションとカラムを組み合わせてページを作り上げていきます。

セクションは以下のように横につながっているワンブロックです。一方で、カラムはその中に入っている一つ一つの箱というイメージです。下記では、視覚的にわかりやすく3カラムのセクションに画像のエレメントを3つ並べて設置した状態です。設置方法やエレメントについては、後述の説明を参考にご覧ください。

それぞれコピーや並び替えが直感的に可能ですが、カラムをコピーするとセクション内の一つの箱がコピーされ、セクションをコピーするとセクション内のすべてがコピーされます。セクションを削除するとセクション内のすべてのカラムが削除されるの注意して確認しておきましょう。

カラムやセクションの隙間や背景などは後ほど解説する各エレメントのスタイルタブから詳細に設定することができます。

Elementorのエディターを使ってページを構築していく

作りたいページのベースが決まり、セクションとカラムの概念を理解したら、「Elementorで編集」をクリックしてみましょう。Elementor独自のエディターが表示されるので、このエディターを使ってページを組み立てていきます。

上記のように左のエレメントが並んでるエリアから右にドラッグしてページを作りますが、最初に＋をクリックして、そのセクションのカラム数を決定します。基本はセクションのカラム数を決めて新しいセクションを追加、その中に左のエレメントを追加していくという流れの繰り返しで、ページを作り上げていきます。上記の例では、ワンカラムのセクションを選択して、「見出し」のエレメントを設置した状態です。

一通り作り上げた後からでもセクションごとにドラッグ&ドロップで自由に並び替えが可能です。

ちなみにここで、＋の右側のファイルのアイコンを選択すると、あらかじめ用意されているページ単位のテンプレートを適用することもできます。無料版でもいくつか活用できるテンプレートがあり、レストランやホテルなど、ジャンルのわかる名前がついているで、初めてでも選択しやすいです。あなたの作りたいサイトにあったページテンプレートがあれば、テキストや写真を入れ替えるだけで簡単にページが完成します。

Elementorのエディタの使い方

ここからは、Elementorエディタの具体的な使い方を説明いたします。

ご覧の通り、左側のエレメントのエリアには、数多くのアイコンが並んでいます。そのどれもが直感的に操作できるのですが、よく使うエレメントからピックアップして基本的な操作方法をご紹介いたします。

見出し

右の画面の+マークでセクションを決めた後、左サイドバーの下記のボタンをクリックするとエレメント一覧が表示されます。

エレメント一覧から「見出し」エレメントをドラッグ&ドロップすると「見出し」の編集が可能です。

こちらには3種類のタブが用意されていて、クリックするとそれぞれ直感的に操作可能です。

コンテンツタブ

コンテンツタブでは、テキストを直接入力できて、サイズや適用しているHTMLタグをワンタッチで変更できたり、配置についてもワンクリックで編集完了です。

スタイルタブ

スタイルタブでは、文字色、書体に加えて、テキストシャドウなどをワンタッチで設定できます。ここに表示されているボタンモードという項目では、見出しに適用するエフェクトを設定できます。違いがわかりにくいので、背景画像を設定してから試してみてください。

それぞれの項目をクリックするとさらに細かい設定が可能です。例えば書体の項目をクリックすれば、フォントやサイズはもちろん、行の高さや、字間などもつまみをドラッグして変化をプレビューしながら設定できます。コードを用いることなく思い通りのページを作成可能ですね。

詳細タブ

詳細タブでは、マージンやパディングに加えて、モーションエフェクトなど、その他の詳細な設定もできます。見出し一つでもかなり詳細に設定していただけるということです。

通常ですと、デベロッパーツールを使いながら細かい変更箇所を確認した上で、CSSを調整する必要がありますが、Elementorではプレビューを確認しながら、そのまま更新できるので効率的です。特にマージンやパディングの細かな調整には、慣れが必要ですからね。

モーションエフェクトも用意されているものの中から、プレビューを見ながら瞬時に設定できます。もちろん複雑なコードを用いる必要はまったくありません。以下のようにドロップダウンメニューから任意の動きを選択するだけです。

その他にもテキストの背景色をセットしたり、テキストを囲むボーダーを設定することも簡単な操作のみで完結します。カーソルホバー時に適用するデザインも合わせて設定可能です。初心者の方にとってもありがたい機能ですね。

背景やボーダーの項目では、ホバーした際により目立たせるようにホバー時のCSSを設定することもできます。コードはもちろん不要ですので、こちらで簡単に設定してみましょう。

レスポンシブの項目でスマホやタブレットなどのモバイル端末で閲覧時にどのように表示するかという設定が可能です。例えば、PCでは表示して、スマホでは表示しないなどの設定がワンタッチでできます。

要領の大きな動画を見せるのはPCのみで、モバイル端末では別のものを表示するなどの設定も簡単にできるということです。

ここでは「見出し」のエレメントを例に説明いたしましたが、その他のエレメントでも基本的に「スタイルタブ」か「詳細タブ」またはその両方が用意されているので、同様の細かい設定が簡単にできます。

画像カルーセル

こちらのエレメントで画像カルーセルスライダーを簡単に設定できます。任意の画像をこのように複数枚選択し、表示するスライド枚数やリンクの有無などを設定して実装完了です。

スタイルタブなどで、ユーザーをナビゲートするための画像下部にあるドットアイコン、画像の両サイドにある矢印のアイコンのサイズや位置、色まで詳細に設定できます。画像を囲む枠もお好みで設定可能です。画像を囲むボーダーの幅や、色、ボーダーの角の丸みなども数値を入力するだけで簡単に設定できます。

さらにコンテンツタブの追加オプションでは、スライドの自動再生の有無、アニメーションの効果や、速度や向きまで設定可能です。画像に合わせた設定がこの箇所だけで具体的に設定できますね。

ボタン

記事中にボタンを表示させることも簡単です。単なるテキストリンクより目立たせることもできますし、心理的に押したくなることもあります。もちろんこちらもコードを使わずに初心者でも簡単に設置可能です。

上記のようにボタンエレメントを追加すると簡単に設定されるので、各タブの項目をお好みで設定します。配置箇所やサイズの他、テキストシャドウやホバー時のアニメーションなどを一括で設定可能です。基本的にその他のエレメントと操作方法は同じですので、直感的に操作できるでしょう。

ボタンエレメント内には、さらに直感的に操作できるようにアイコンを設定できます。コンテンツタブの中からアイコンの項目をクリックすると下記のような画面が表示されます。

上記のICON LIBRARYに表示されている無数のアイコンの中から自由に挿入することが可能です。ボタンの用途に合わせたアイコンを選んで設定することによりクリックされやすくなり、コンバージョンに繋がります。有料版であれば、オリジナルのアイコンをアップロードすることも可能です。

タブ

記事内にタブエリアをつくって、スペースを有効活用することもできます。他のエレメントと同様にスタイルや詳細タブで細かい設定が可能です。

コンテンツタブでは、タブ内に入力するテキストはもちろん、メディアも挿入することができます。また、垂直か、水平タイプから任意にタブの形を選択できます。さらにコンテンツの数に合わせて任意の数だけタブを追加することもできて、タブ項目右端のアイコンをクリックしてタブに内容ごとコピーや、ドラッグ&ドロップで後から並び替えまで可能です。

アコーディオン

アコーディオンメニューを設置しスペースの有効活用をし、必要なユーザーにのみクリックして表示してもらうような情報を記載することもできます。上記のタブとの使い分け方についてですが、タブはいずれかのタブエリアが常に開いている仕様です。一方で、アコーディオンメニューならデフォルトでは閉じている仕様ですので、ユーザーがアクションを起こさない限り目隠しできるような使い方でできます。

スタイルタブや詳細タブで細かい設定ができる他に、タブエレメントのように並び替え、追加が自由自在で、クリックして展開するアイコンをICON LIBRARYから選択することができます。アイコンの位置やテキストとの間隔も自由に設定可能です。

動画

動画の挿入もワンタッチです。動画の取得元もYouTube, Vimeo, Dailymotionなどの主要な動画サイトのURLを入力するだけで可能な他に、独自のMP4動画を挿入することもできます。

便利なオプション機能として上記のように、自動再生や、ミュート、ループのON/OFF、プレイヤーコントロール、ダウンロードボタンの表示/非表示のスイッチが用意されています。

Google マップ

Elementorを活用すれば、Google マップも住所を入力するだけで表示可能です。ズーム具合や、高さなども見たままの操作で簡単に編集できます。

Elementorのレスポンシブモードで確認してみる

Webサイト制作では、スマホやタブレットなどのモバイル端末での閲覧を想定して、モバイル端末でどのような表示になるかを確認することも大切です。Elementorでは、エディターの画面左下部にレスポンシブモードが用意されています。下記箇所をクリックして、それぞれの端末での表示をプレビューして確認してみましょう。

この機能で瞬時にモバイル端末での表示が確認できます。

モバイル端末で2カラム表示にする方法

レスポンシブモードでスマホ端末での画面に設定すると、PC画面で2カラムの箇所が1カラムで縦に並んで表示される箇所があります。下記の例では、タブエリアとアコーディオンのエリアが縦に並んで表示されていますね。この箇所をPCと同じように横並びに表示させたい場合は、スマホ環境でのカラムの幅を50%にする必要があります。

下記のように横並びにしたいエレメントにカーソルを合わせて左上のアイコンをクリックします。表示されるカラム幅の横のアイコンがスマホのアイコンになっていることを確認し、50と入力してください。続いて横に並べたいもう一つのエレメントの同じ箇所にも同様に50と入力します。

以上の操作で、下記のように綺麗に横並びになるはずです。ただし、大前提としてPC環境でセクションの構造を2カラムに設定していることが条件です。セクションの構造についてはこちら

まとめ

WordPressを初めて使う人でもElementorを活用すれば、初心者が作ったとは思えない本格的なページを直感的に制作することができます。今回紹介した基本的な操作以外にも数多くのエレメントが用意されていて、正直その機能性は無料とは思えないレベルです。使い方に慣れ、さらに機能を拡張したい場合は有料版も用意されていますので、ぜひ活用してみてください。

追記：（2019/10/20）
「Elementor」はレイアウトに影響を及ぼすプラグインの為、テーマや他のプラグインとの緩衝が起きやすいプラグインでもあります。当方でも不具合が起きましたので、どのように対処したかを下記の記事に書いておきます。