Elementor Pro『レビュー』ウィジェットの使い方

『レビュー』ウィジェットはその名の通り個人の評価を入れられるウィジェットです。

これと同じようなウィジェットで『Testimonial Carousel』というウィジェットもあります。

正直言ってレビューウィジェットもTestimonial Corouselウィジェットもほとんど同じです。
異なる部分としてレビューウィジェットは、

  • Teitter等のSNSを紐付けできる
  • Rating(評価の星)の設定
  • レイアウト

の3点が異なります。
この記事ではレビューウィジェットのTestimonial Carouselウィジェットと異なる部分のみを詳しく説明していきます。
この記事にて紹介していない部分は全て【Elementor Pro『Testimonial Carousel』ウィジェットの使い方】の記事にて紹介済みですのでそちらを参考にしてください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

レビューウィジェットの挿入

レビューウィジェットの挿入

『レビュー』ウィジェットをドラッグ&ドロップでカラムに挿入します。

ウィジェット挿入後の表示画面

こちらはレビューウィジェット挿入後の表示画面です。

コンテンツタブ・スライド

コンテンツタブ・スライド

アイコン

アイコンの説明

『アイコン』ではデフォルトで既にTwitterのロゴが挿入されています。

アイコンの削除と変更について

アイコン『なし』にする場合は編集タブのアイコンの右上のゴミ箱ボタンを押せばアイコンの表示はなくなります。
また、Twitter以外のほとんどのSNSのアイコンは『アイコンライブラリー』で見つけることができます。

リンク

リンクの説明

『リンク』は設定したURLが『タイトル』と『アイコン』両方にリンクが付きます。
例えばレビューをしている人のTwitterアカウントを紐付けするならタイトル部分をTwitterのユーザーネームにするなど、カスタムは自由です。

Rating

Ratingの説明

『Rating』では評価の星を最小『0』から最大『5』まで付けることができます。

スタイルタブ・スライド

スタイルタブ・スライド

背景色

背景色の変更

『背景色』ではスライド全体の背景色を変更することができます。
こちらはTestimonial Carouselと同じですが以下の点が異なります。

Header / 背景色

Header / 背景色の変更

Headerのセクションの背景色を入れると、区切り線から上の部分の色を変更することができます。

区切り

区切りの説明

『区切り』はヘッダーとレビューを区切っている線のことです。
こちらは区切り線を表示させるかさせないかの設定になります。

色 / サイズ

区切り線の色/サイズの変更

『色』では区切り線の色をカラーピッカーより自由に変更ができます。
『サイズ』は区切り線の太さを最小0(事実上の非表示)から最大20の値まで変更することができます。
※デフォルトの値は『1』に設定されています。

スタイルタブ・アイコン

スタイルタブ・アイコン

アイコン・カスタムカラー

『色』ではアイコンの色を変更できます。
SNSのアイコンを使用している場合、デフォルトでは『Official』(公式カラー)に設定されていますが、『カスタム』を選択するとカラーピッカーより自由にアイコンの色を変更することができます。

サイズ

アイコンサイズの変更

『サイズ』はアイコンのサイズをカーソルを左右にスライドさせることにより縮小、拡大をすることができます。
上記はアイコンサイズを『100』の値にした時の表示画面です。
※デフォルトのサイズの値は『15』辺りに設定されています。

スタイルタブ・Rating

スタイルタブ・Rating

アイコン

Ratingアイコン・Fint Awesome

『アイコン』は星のスタイルを以下より選択できます。

  • Font Awesome(デフォルト)
  • Unicode

Unicode

Ratingアイコン・Unicode

『Unicode』は『Font Awesome』に比べるとシャープな印象です。

Unmarked Style

Unmarked Styleの説明

『Unmarked Style』はマークされていない星の表示スタイルを以下より選択することができます。

  • 直線:塗りつぶされた状態(デフォルト)
  • Outline:星にアウトラインがつき白抜きになった状態

Ratingアイコンのマークされている色の変更

『色』では、星にマークがついた部分の色をカラーピッカーより自由に変更することができます。

Unmarked Color

Ratingアイコンのマークされていない部分の色の変更

『Unmarked Color』は星にマークがついていない部分の色をカラーピッカーより自由に変更することができます。


『レビュー』ウィジェットはオンラインショッピングサイトなどで実際の顧客レビューなどの掲載する時などに役立ちますね!

この記事で紹介を省いた部分は全て【Elementor Pro『Testimonial Carousel』ウィジェットの使い方】の記事にて説明をしています。

またTestimonial Carouselウィジェットも、概ねレビューウィジェットと同じ機能を果たします。
どちらのウィジェットを使用するかは両者の特性を見極めて、自分のサイトに合うものを選択してくださいね!

またTwitterと連動させることのできる機能を持ったウィジェットに、【Elementor Pro『Blockquote』ウィジェットの使い方】があります。
こちらは名言や格言などのコメントをブラッシュアップして掲載することのできるウィジェットです。

よろしければぜひ参考にしてください!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通