更新日: 2022 / 03 / 29

ElementorPro(有料版)で使えるウィジェットの機能まとめ

カテゴリー: elementor

ElementorPro(有料版)で使えるウィジェットの機能や使い方について解説します。ElementorProでは無料版にはなかった動的コンテンツの表示やフォームの作成機能など非常に便利なウィジェットが多数アンロックされます。

ここではElementorPro(有料版)で使えるウィジェットの機能や使い方について解説します。

Elementorのレイアウトやレスポンシブのやり方などについては「Elementorの使い方 初心者入門ガイド」にまとめているのでこちらもぜひご覧ください。

ElementorProウィジェット一覧

ElementorProウィジェットは全部で30本あります。かなり便利で使えるものからあまり使わないものまで全てのウィジェットをまとめてみました。

ポスト

ポストはクエリ(取得する記事の指定)を設定して取得した記事を動的に表示することができるウィジェットです。設定項目は非常に多く、次のような3つのメニューに分類されています。

  • レイアウト: 表示数や画像の位置などレイアウトを設定
  • クエリ: 投稿タイプや順序などの指定
  • ページネーション: 記事数が多い場合に次のページへのリンクを設定

「レイアウト」では記事を複数列に分けたり、画像のサイズを変更したり、タイトルや抜粋の表示/非表示ができます。

「クエリ」でどの記事を表示するかを指定でき、「ページネーション」では記事数が2ページ以上になる場合にページへのリンクをどのように表示するかを設定できます。

Elementor プロウィジェットの使い方 ポスト

ポートフォリオ

ポートフォリオもポストと同様クエリを設定して取得した記事を表示します。「ポスト」との違いは画像をメインにしたポートフォリオの作成を目的としていることです。ポートフォリオは以下のようなメニューがあります。

  • レイアウト: 表示する列数や画像サイズの指定
  • クエリ: 投稿タイプや順序などの指定、ポストと同じ
  • フィルターバー: 投稿の分類の表示設定

フィルターバーを設定すると、ポートフォリオの上に設定した分類(カテゴリやタグなど)の一覧が表示され、クリックするとその分類だけが表示されます。

Elementor プロウィジェットの使い方 ポートフォリオ

Wordpressにアップロードした画像を選択してギャラリーを表示できるウィジェットです。クリックすると画像が拡大表示されます。

  • レイアウト: 画像の指定や画像の間のスペースなどを設定
  • オーバーレイ: マウスオーバーのエフェクトを設定

Elementor プロウィジェットの使い方 Gallery

フォーム

フォームを作成できるウィジェットです。表示する項目の設定や、送信ボタンを押した後のアクションの設定など細かい設定が可能です。

  • フォームフィールド: フォームの項目を作成
  • ボタン: ボタンのレイアウトを設定
  • 送信後のアクション: 送信ボタンを押した後のアクションを設定
  • 送信内容: 送信内容ページへのリンク
  • メール設定: 送信先やCC、BCCの設定
  • ステップ設定: 複数ステップのフォームの表示方法を選択
  • 追加オプション: フォームIDなどの設定

Elementorのフォームでは複数ステップに分けることができます。フォームフィールドで「Step」を追加すると、追加した項目の前後を分割することができます。

送信後のアクションでは、送信内容を保存するだけでなくSlackなどのツールに送信することもできます。

Elementor プロウィジェットの使い方 フォーム

ログイン

デフォルトのWordpressログインページの代わりに固定ページにウィジェットを設置することでログインできるようになります。

  • フォームフィールド: レベルの表示やフォームのサイズを設定
  • ボタン: ボタンのレイアウトを設定
  • 追加オプション: リダイレクト先

ログイン後やログアウト後のリダイレクト設定が可能です。

Elementor プロウィジェットの使い方 ログイン

スライド

スライドショーを作成できるウィジェットです。無料版で使えるカルーセルとの違いは、画像の上にテキストやボタンを設置できるところです。

  • スライド: 画像やコンテンツの設定
  • スライダーオプション: 速度や左右の矢印の表示設定

Elementor プロウィジェットの使い方 スライド

ナビメニュー

メニューを表示できるウィジェットです。表示したいメニューの選択や、メニューのレイアウト設定が可能です。「Elementor Header&Footer」プラグインにあるナビメニューと同じ機能が使えます。

タブレットやモバイルでドロップダウン表示に切り替えることもできます。

Elementor プロウィジェットの使い方 ナビメニュー

アニメーションヘッドライン

アニメーションヘッドラインは見出しテキストの一部にアニメーションを加えることができるウィジェットです。

選択できるスタイルは、マーカーのようなエフェクトの「ハイライト」と、複数の文字を入れ替えることができる「Rotating」です。それぞれアニメーションが複数用意されています。

Elementor プロウィジェットの使い方 アニメーションヘッドライン

Hotspot

Hotspotは画像の上にマウスオーバーでメッセージを表示できるポイントを表示できるウィジェットです。画像の特定のポイントに説明文を追加するような使い方ができます。

Elementor プロウィジェットの使い方 Hotspot

プライスリスト

プライスリストは料金メニューのようなコンテンツを作成できるウィジェットです。画像を表示することも可能ですが、テキストと画像は縦に並べることはできません。

Elementor プロウィジェットの使い方 プライスリスト

プライステーブル

LPなどでよく使われるプランごとの料金を表示するウィジェットです。

  • ヘッダー: ヘッダーテキストの編集
  • 料金: 料金の表示を編集
  • 機能: 機能一覧を編集
  • フッター: フッターの表示を編集
  • リボン: リボンの表示や位置を編集

プライスリストもそうですが同じことは基本ウィジェット(見出しやテキスト、ボタンなど)を組み合わせればもっと自由なレイアウトで作成できるのであえて使う必要はないかなと思います。

Elementor プロウィジェットの使い方 プライステーブル

フリップボックス

マウスオーバーで表面と裏面を切り替えられるコンテンツを作成できます。

  • フロント: 表面のテキストを編集
  • バック: 裏面のテキストを編集
  • 設定: 高さやアニメーションのスタイルを設定

Elementor プロウィジェットの使い方 フリップボックス

コールトゥアクション

CTAコンテンツを作成できるウィジェットです。Webサイトにはほぼ必須と言っていいCTAコンテンツを簡単に作成することができます。

  • 画像: 画像の設定
  • コンテンツ: テキストやボタンの編集
  • リボン: リボンのテキストや位置を設定

基本ウィジェットを使えばデザインに忠実なCTAコンテンツを作成できますが、プロトタイプやワイヤーフレームとしては使えるかもしれません。

Elementor プロウィジェットの使い方 コールトゥアクション

リンク付きの画像スライダーを作成できるウィジェットです。スライドのレイアウトを変更することで、小さなサムネイル付きのスライドショーを作成することができます。テキストを乗せることはできませんが、バナーをスライドショーで表示する場合には便利です。

  • スライド: スライドを設定
  • 追加オプション: スライドの速度などを設定

Elementor プロウィジェットの使い方 Media Carousel

「お客様の声」のようなコンテンツを簡単に作成できるウィジェットです。

  • スライド: 表示内容の編集
  • 追加オプション: スライドの速度などを設定

Elementor プロウィジェットの使い方 Testimonial Carousel

レビュー

レビューウィジェットも「Testimonial Carousel」と同じような機能になっていて、こちらはアイコンを設定することができます。

  • スライド: 表示内容の編集
  • 追加オプション: スライドの速度などを設定

Elementor プロウィジェットの使い方 レビュー

Table of Content

目次を表示できるウィジェットです。ページに含まれるH1からH6までの見出しを目次として表示することができます。どの見出しを含むかを自由に選択することができます。

  • Table of Contents: タイトルや目次に含める見出しを設定
  • 追加オプション: 目次を折りたたむかどうかなどの挙動を設定

Elementor プロウィジェットの使い方 Table of Content

カウントダウン

設定した日付までのカウントダウンを表示してくれるウィジェットです。表示する項目はON/OFFできるので、時間と分と秒だけを表示することもできます。

Elementor プロウィジェットの使い方 カウントダウン

シェアボタン

シェアボタンを表示できるウィジェットです。現在のページや特定のページのシェアボタンを設置できます。スタイルも複数パターンが用意されていて、アイコンだけやテキストだけの表示も可能です。

Elementor プロウィジェットの使い方 シェアボタン

Blockquote

引用コンテンツを作成できるウィジェットです。ツイートボタンを設置することができます。

Elementor プロウィジェットの使い方 Blockquote

Facebookボタン

Facebookのいいねボタンを設置できるウィジェットです。ボタンのレイアウトはボックスやコメント付きボタンなどから選択できます。Facebookボタンを利用するには連携設定でFacebookアプリの設定が必要です。

Elementor プロウィジェットの使い方 Facebookボタン

Facebook Comments

ページにFacebookコメントを設置できるプラグインです。Facebookウィジェットを使ってブログに対するコメントができるようになります。こちらもFacebookアプリIDが必要です。

Facebook Embed

Facebookの投稿をページに表示できるウィジェットです。表示タイプの設定で投稿、動画、コメントを表示することができます。

Elementor プロウィジェットの使い方 Facebook Embed

Facebook Page

Facebookのページフィードを表示することができます。タイムラインで複数の投稿をスクロールで表示することができます。

Elementor プロウィジェットの使い方 Facebook Page

テンプレート

作成したテンプレートを埋め込むことができるウィジェットです。テンプレートはその場で編集することができないため、編集する場合はテンプレートの編集ページに移動する必要があります。

複数のページで共通のテンプレートを表示したい場合に使えそうです。

Elementor プロウィジェットの使い方 テンプレート

Lottie

Lottieはアニメーションファイルを設置できるウィジェットです。アニメーションのトリガーや開始位置などを細かく設定することができます。

Lottieのアニメーションファイル自体はAfterEffectsやLottiefilesなどのサイトでブラウザ上で作成することもできます。

Elementor プロウィジェットの使い方 Lottie

Code Highlight

ハイライトされたコードを表示することができるウィジェットです。行番号の表示やクリップボードにコピーする機能のON/OFFができます。

Elementor プロウィジェットの使い方 Code Highlight

Video Playlist

複数の動画のプレイリストを作成できるウィジェットです。リスト一覧が右側に表示され、クリックすることで再生することができます。

Elementor プロウィジェットの使い方 Video Playlist

Paypal Button

PayPalボタンを設置できるウィジェットです。設定した商品の決済を行うことができます。

Elementor プロウィジェットの使い方 Paypal Button

Progress Tracker

ページをどこまで読んだかがわかるバーを表示できるウィジェットです。

Elementor プロウィジェットの使い方 Progress Tracker

ElementorProで完全ノーコードでサイトを作る

Elementorは高機能なWebサイトビルダーですが無料版のままだと固定ページしか作れなかったり、記事一覧の表示ができないなど機能に制限があります。

ElementorProにアップグレードすることでWordpressの全ページをElementorでカスタマイズできるようになるため、完全にノーコードでWordpressサイトを構築することが可能です。このページで紹介したようなウィジェットも利用可能になります。