(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | コメント0件

Elementor Pro レビューウィジェット

Elementor Proのレビューウィジェットは、レビューが表示できるウィジェットです。レビューしてくれた人の名前やレビュー本文はもちろん、星の評価、ツイッターに投稿するためのClick To Tweetも表示できます。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのスライド設定

Elementor Pro レビューウィジェット コンテンツ スライド

デフォルトで「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

レビューの幅を設定します。

コンテンツの追加オプション設定

Elementor Pro レビューウィジェット コンテンツ 追加オプション

矢印

「SHOW」にするとウィジェットの両端に矢印が表示されます。これをクリックすると、スライドをスワイプすることができます。

Pagination

ページの表記を「None」、「Dots」、「Fraction」、「Progress」の4つから選択します。

トランジション所要時間

トランジションにかかる時間の長さを設定します。ミリ秒なので、1000で1秒を表します。

自動再生

「はい」にするとスライドが自動でスクロールします。

自動再生速度

「Autoplay」を「はい」にした場合、どのくらいのスピードでスクロールするか設定します。

無限ループ

「はい」にすると、無限にスクロールが続きます。

Pause on Interaction

「はい」にすると、読者が矢印やページ表記をクリックした際に、自動スクロールが停止します。

画像サイズ

画像のサイズを設定する項目ですが、変更しても、大きさが変わらないみたいです。スタイルの「Image」にある「Size」で設定しましょう。

スタイルのスライド設定

Elementor Pro レビューウィジェット スタイル スライド

スペースの間隔

1つのウィジェットで2つ以上のスライドを表示させる場合、そのスペースを設定します。

背景色

スライドの背景色を設定します。ウィジェット全体ではなく、レビューカードの背景色の設定になります。

Border Size

ウィジェット全体ではなく、レビューカードのボーダーの太さを設定します。

ボーダー丸み

ボーダーの丸みを設定します。

ボーダー色

ボーダーの色を設定します。

パディング

ボーダーとコンテンツのスペースを調整します。

Headerの背景色

レビューカードのヘッダーの背景色を設定します。

Headerのすき間

ヘッダーとその下のレビュー本文のセクションとのスペースを調整します。

区切り

「SHOW」にすると、ヘッダーとレビューセクションの区切り線が表示されます。「HIDE」にすると、非表示になります。

区切り線の色を設定します。

サイズ

区切り線の太さを設定します。

スタイルのテキスト設定

Elementor Pro レビューウィジェット スタイル テキスト

ここでは、「名前」と「タイトル」、「Review」のテキストを設定していきます。

テキストの色を設定します。

書体

テキストの書体を設定します。

スタイルの画像設定

Elementor Pro レビューウィジェット スタイル 画像

ここからは、「スタイル」の「画像」の設定をしていきましょう。

サイズ

画像の大きさを調整します。

すき間

画像と名前・レビューの星・肩書きとのスペースを設定します。

ボーダー丸み

画像の丸みを調整します。

スタイルのアイコン設定

Elementor Pro レビューウィジェット スタイル アイコン

ドロップダウンからアイコンの色を設定します。「Official Color」か「Custom」かが選択できます。

「Custom」を選択すると、これが表示されます。アイコンの色を設定します。

サイズ

アイコンの大きさを調整します。

スタイルのRating設定

Elementor Pro レビューウィジェット スタイル Rating

ここからは、「スタイル」の「Rating」の設定をしていきます。

アイコン

レビューの星のタイプを選択します。「Font Awesome」と「Unicode」の2種類あります。

Unmarked Style

マークされていない星を「Solid-塗りつぶし」で表示するか「Outline-枠」で表示するか選択します。

サイズ

レビューの星の大きさを設定します。

スペース

それぞれの星とのスペースを調節します。

星を塗りつぶす際の色を選択します。

Unmarked Color

マークされていない星の色を設定します。

スタイルのナビゲーション設定

Elementor Pro レビューウィジェット スタイル ナビゲーション

ここでは、ナビゲーション矢印とページ表記の設定をしていきます。どちらも設定項目は同じです。

サイズ

矢印/ページ表記の大きさを設定します。

Color

矢印/ページ表記の色を設定します。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

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

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?