Elementor Pro Page Widgets

AD Area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

このページは、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. 背景画像
  2. キービジュアル
  3. テキスト
  4. ボタン

1-1. CTA(PRO)

下のサンプルは、セクション+内部セクション(2カラム)で構成したもの。セクションの背景に画像を選択し、内部セクションを使ってコンテンツを入れている。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

「スライド」ウィジェットを使ったFV。見出し/テキスト/ボタンもついているので構成的には問題なし。LP/SP以外のFV(例:コーポレートサイトのトップページ)なら、このパターンも良いだろう。セクションを全幅にすれば、若干の余白が発生するもののほぼ全幅のFVが出来上がる。

※余白(画像の赤字部分)が気になる場合は、セクションの背景をいじる必要がある。なお、下の画像では切れてしまっているが、問題になるのは「上下」ではなく「左右」だ。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

2. Call To Action (CTA・PRO)

CTAはElementor Pro専用ウィジェット。無料版にはないので注意。下記2つのタイプから選択可能。

2-1. Classic

クラシックパターンのCTA。画像とテキスト/ボタンが別になっている。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

2-2. Cover

こちらは一般的な画像/テキスト/ボタン一体型のCTA。Elementorの場合は、コンテンツ→スキン→「Cover」を選択。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

3. Multi-Column

Elementor Pro専用で、LP/SPに向いている装飾ウィジェットをチェックしてみたのだが、現時点ではカウントダウンくらいしか刺さらなかった。それでは無料版Elementorはどうかと言うと、個人的には物足りない。

よってこの辺のウィジェットは、アドオンのお世話にならざるを得ないのだろう。

3-1. 画像ボックス

画像ボックスに、ボタンを追加したパターン。
1から作るより圧倒的に簡単で早いこと。加えて、各ボックスごとのテキスト量が異なる場合でも縦位置が改行(Shift+Enter)だけで揃うのは大きなメリットだ。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

3-2. アイコンボックス

アイコンボックス。ベネフィットを伝えるセクションでよくみられる。
だが、Elementor純正ウィジェットの場合、そのまま使うとちょっと寂しい感がある。このウィジェットに関しては、他のアドオンの方が良いかもしれない。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

内部セクションを使ったアイコンボックスの設置例。
カラム幅を揃えつつ、色を付ける場合にはこちらの方が良さげ。ちなみに、画像ボックス同様縦揃えは改行だけでOKのようだ。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

3-3. アイコンリスト

本や講座などを売る場合、各パートやプログラムなどの説明が必要になる。その際に使えるのがブレットリストだと思う。

ここではElementor(無料版)のアイコンリストを表示している。内部セクションを使い、見出しとリストのセットにしてみた。だが、手間の割に出来はイマイチ…という感じを受ける。これも、他のアドオンでもっと良いものが無いか、探す対象になる。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

4. Price Table

価格や申込内容をまとめたウィジェットは、複数プランのオファーでどれが良いかを選択させるために使う。また、CTAそのものとして使う場合もある(その場で選択→決定まで一気に行動させたい場合)。使用頻度は高いので、使い出の良いものをチェックしておく必要がある。

4-1. Price List

価格表。有料プラグインの販売ページでよくみられる。
デザインがまとまっているので、このままでも問題ないくらい。価格表以外に使えるか否かは今後検証のこと。

【注記】タイトル見出しはHタグしか使えない。よって、見出しにデザインは入れないこと。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER

4-2. Event Box

価格表をウェビナーの日程表に流用したもの。これでも十分使えそう。
先述の通り、タイトル見出しはHタグしか使えない。よって、見出しにデザインは入れないこと。

Elementor Pro Page Widgets Demo2 by STRATEGY SUPPLIER
Recommends
Sleeping Puppy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Recent posts
This is the Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

BIOHAZARD®は株式会社カプコンの登録商標です。
Play Station®は株式会社ソニー・インタラクティブエンタテインメントの登録商標です。

もっと楽しみたい?それならこちらをチェック
あなたは、CAPCOMが運営する「バイオハザードポータル」をご存じだろうか? 最新情報はもちろん、世界中のプレイヤーのデータを見たり、オンラインイベント、ランキング、チャレンジへ参加したりと楽しい仕掛けが満載だ。 バイオハザードポータルの登録は無料。今すぐ下のボタンからアクセスして、詳細を確認して欲しい。
Shingo Matsuura
Shingo Matsuura

マーケター/コピーライター。STRATEGY SUPPLIER所属。お気に入りゲームは「バイオハザードシリーズ」。最近「バイオハザード0 HD」にどっぷりハマったのがきっかけで、このサイトの題材として取り上げることとしました。