Elementor Proのレビューウィジェットの使い方
Elementor Proのレビューウィジェットは、レビューが表示できるウィジェットです。レビューしてくれた人の名前やレビュー本文はもちろん、星の評価、ツイッターに投稿するためのClick To Tweetも表示できます。
コンテンツのスライド設定
デフォルトで「Slides」のなかに「Item」というレビューのコンテンツが3つ用意されています。「×」ボタンで削除したり、書類のアイコンで複製することができます。アイテムを新しく追加する場合は、「+ 項目を追加」ボタンをクリックします。「Item」をクリックすると、次の項目が表示されますでの、設定していきましょう。
画像
ライブラリーからレビューしてくれた人の画像を選択します。
名前
レビューしてくれた人の名前を記入します。
タイトル
レビューしてくれた人の役職や肩書きを記入します。
Rating
0.1刻みで星のレビューを設定します。0.0から最大5.0の間で記入します。
アイコン
レビューの右上に表示されるアイコンをドロップダウンメニューから選択します。
リンク
レビューに埋め込みたいURLを入力します。「Image」、「Name」、「Title」、「Icon」にリンクが埋め込まれます。「リンク設定(歯車のアイコン)」をクリックすると、次の項目が表示されます。
新しいウィンドウで開く
ここにチェックを入れると、リンクがクリックされた際、新しいウィンドウが開き、そこでページが表示されます。
Nofollowを追加
リンクをクローラーに追跡してもらいたくない場合は、ここにチェックを入れます。
Review
ここにレビューの本文を入力します。
Slides Per View
ウィジェット内で表示するレビューの数を決めます。1個から10個まで表示することができます。
Slides to Scroll
1回のスワイプでいくつのスライドがスクロールされるか1から10の間で設定します。例えば、「2」に設定したら、1つ目のスライドでスワイプすると3つ目のスライドが表示されます。
Width
レビューの幅を設定します。
コンテンツの追加オプション設定
矢印
「SHOW」にするとウィジェットの両端に矢印が表示されます。これをクリックすると、スライドをスワイプすることができます。
Pagination
ページの表記を「None」、「Dots」、「Fraction」、「Progress」の4つから選択します。
トランジション所要時間
トランジションにかかる時間の長さを設定します。ミリ秒なので、1000で1秒を表します。
自動再生
「はい」にするとスライドが自動でスクロールします。
自動再生速度
「Autoplay」を「はい」にした場合、どのくらいのスピードでスクロールするか設定します。
無限ループ
「はい」にすると、無限にスクロールが続きます。
Pause on Interaction
「はい」にすると、読者が矢印やページ表記をクリックした際に、自動スクロールが停止します。
画像サイズ
画像のサイズを設定する項目ですが、変更しても、大きさが変わらないみたいです。スタイルの「Image」にある「Size」で設定しましょう。
スタイルのスライド設定
スペースの間隔
1つのウィジェットで2つ以上のスライドを表示させる場合、そのスペースを設定します。
背景色
スライドの背景色を設定します。ウィジェット全体ではなく、レビューカードの背景色の設定になります。
Border Size
ウィジェット全体ではなく、レビューカードのボーダーの太さを設定します。
ボーダー丸み
ボーダーの丸みを設定します。
ボーダー色
ボーダーの色を設定します。
パディング
ボーダーとコンテンツのスペースを調整します。
Headerの背景色
レビューカードのヘッダーの背景色を設定します。
Headerのすき間
ヘッダーとその下のレビュー本文のセクションとのスペースを調整します。
区切り
「SHOW」にすると、ヘッダーとレビューセクションの区切り線が表示されます。「HIDE」にすると、非表示になります。
色
区切り線の色を設定します。
サイズ
区切り線の太さを設定します。
スタイルのテキスト設定
ここでは、「名前」と「タイトル」、「Review」のテキストを設定していきます。
色
テキストの色を設定します。
書体
テキストの書体を設定します。
スタイルの画像設定
ここからは、「スタイル」の「画像」の設定をしていきましょう。
サイズ
画像の大きさを調整します。
すき間
画像と名前・レビューの星・肩書きとのスペースを設定します。
ボーダー丸み
画像の丸みを調整します。
スタイルのアイコン設定
色
ドロップダウンからアイコンの色を設定します。「Official Color」か「Custom」かが選択できます。
色
「Custom」を選択すると、これが表示されます。アイコンの色を設定します。
サイズ
アイコンの大きさを調整します。
スタイルのRating設定
ここからは、「スタイル」の「Rating」の設定をしていきます。
アイコン
レビューの星のタイプを選択します。「Font Awesome」と「Unicode」の2種類あります。
Unmarked Style
マークされていない星を「Solid-塗りつぶし」で表示するか「Outline-枠」で表示するか選択します。
サイズ
レビューの星の大きさを設定します。
スペース
それぞれの星とのスペースを調節します。
色
星を塗りつぶす際の色を選択します。
Unmarked Color
マークされていない星の色を設定します。
スタイルのナビゲーション設定
ここでは、ナビゲーション矢印とページ表記の設定をしていきます。どちらも設定項目は同じです。
サイズ
矢印/ページ表記の大きさを設定します。
Color
矢印/ページ表記の色を設定します。