このページは、Elementor Pro（一部、無料版Elementor含む）のウィジェットの中から、LP/SP作成で使うと思われるものを集めたデモページ。足りないウィジェットを明確にして、どのAddonを使うか見極めることを目的にアップした。
※【注記】投稿作成時に使えそうなウィジェットについては、「Posts」カテゴリー参照のこと。
0. Summary
Elementor Pro最大の特徴は何かと言えば、「テーマビルダー」機能だと思う。
自分の好きなようにサイト構築が出来るこの機能は、まさに「唯一無二の」機能だ。
テーマビルダーの話はさておき、LP/SP作成時に使えるウィジェットという観点で見ていくと、FVとCTA、価格表が挙げられる。これらは、無料版Elementorには設定されていないウィジェットだ。
但し、アドオンを見ていくとこれらのウィジェットはほぼ網羅されている。よって、Elementor Pro／アドオンのウィジェットを見比べつつ、その時々で最適なウィジェットをピックアップしていくことになるだろう。
1. FIRST VIEW（FV）
【Check!!】FVは、CTAとイコールではない。FVに要求されるのは、下記4つの要素全てを盛り込めることだ（一般的なCTAの場合、キービジュアルが入れられないものが多い）。
- 背景画像
- キービジュアル
- テキスト
- ボタン
1-1. CTA（PRO）
下のサンプルは、セクション＋内部セクション（2カラム）で構成したもの。セクションの背景に画像を選択し、内部セクションを使ってコンテンツを入れている。
1-2. CAROUSEL（PRO）
「スライド」ウィジェットを使ったFV。見出し／テキスト／ボタンもついているので構成的には問題なし。LP/SP以外のFV（例：コーポレートサイトのトップページ）なら、このパターンも良いだろう。セクションを全幅にすれば、若干の余白が発生するもののほぼ全幅のFVが出来上がる。
※余白（画像の赤字部分）が気になる場合は、セクションの背景をいじる必要がある。なお、下の画像では切れてしまっているが、問題になるのは「上下」ではなく「左右」だ。
2. Call To Action （CTA・PRO）
CTAはElementor Pro専用ウィジェット。無料版にはないので注意。下記2つのタイプから選択可能。
2-1. Classic
クラシックパターンのCTA。画像とテキスト／ボタンが別になっている。
2-2. Cover
こちらは一般的な画像／テキスト／ボタン一体型のCTA。Elementorの場合は、コンテンツ→スキン→「Cover」を選択。
3. Multi-Column
Elementor Pro専用で、LP/SPに向いている装飾ウィジェットをチェックしてみたのだが、現時点ではカウントダウンくらいしか刺さらなかった。それでは無料版Elementorはどうかと言うと、個人的には物足りない。
よってこの辺のウィジェットは、アドオンのお世話にならざるを得ないのだろう。
3-1. 画像ボックス
画像ボックスに、ボタンを追加したパターン。
1から作るより圧倒的に簡単で早いこと。加えて、各ボックスごとのテキスト量が異なる場合でも縦位置が改行（Shift＋Enter）だけで揃うのは大きなメリットだ。
3-2. アイコンボックス
アイコンボックス。ベネフィットを伝えるセクションでよくみられる。
だが、Elementor純正ウィジェットの場合、そのまま使うとちょっと寂しい感がある。このウィジェットに関しては、他のアドオンの方が良いかもしれない。
内部セクションを使ったアイコンボックスの設置例。
カラム幅を揃えつつ、色を付ける場合にはこちらの方が良さげ。ちなみに、画像ボックス同様縦揃えは改行だけでOKのようだ。
3-3. アイコンリスト
本や講座などを売る場合、各パートやプログラムなどの説明が必要になる。その際に使えるのがブレットリストだと思う。
ここではElementor（無料版）のアイコンリストを表示している。内部セクションを使い、見出しとリストのセットにしてみた。だが、手間の割に出来はイマイチ…という感じを受ける。これも、他のアドオンでもっと良いものが無いか、探す対象になる。
4. Price Table
価格や申込内容をまとめたウィジェットは、複数プランのオファーでどれが良いかを選択させるために使う。また、CTAそのものとして使う場合もある（その場で選択→決定まで一気に行動させたい場合）。使用頻度は高いので、使い出の良いものをチェックしておく必要がある。
4-1. Price List
価格表。有料プラグインの販売ページでよくみられる。
デザインがまとまっているので、このままでも問題ないくらい。価格表以外に使えるか否かは今後検証のこと。
【注記】タイトル見出しはHタグしか使えない。よって、見出しにデザインは入れないこと。
4-2. Event Box
価格表をウェビナーの日程表に流用したもの。これでも十分使えそう。
先述の通り、タイトル見出しはHタグしか使えない。よって、見出しにデザインは入れないこと。
