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

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

ここがメインの設定で、スライドの追加や削除、コメントの入力などをしていきます。「+ 項目を追加」ボタンをクリックすると、新しくスライドを追加できます。削除する場合は「×」をクリックし、複製する場合は書類のアイコンをクリックします。

コンテンツ

テスティモニアル（レビュー）の本文を入力します。

画像

ライブラリーからレビューをしてくれた人の画像を選択します。

名前

レビューしてくれた人の名前を入力します。

タイトル

レビューしてくれた人の肩書きを入力します。

スキン

「Default」は通常の表記ですが、「Bubble」にするとテスティモニアルが吹き出しで表示されます。

レイアウト

テスティモニアルのレイアウト（画像の位置）を「Image Inline」、「Image Stacked」、「Image Above」、「Image Left」、「Image Right」の5種類から選択します。

配置

テスティモニアルの位置を「Left-左寄せ」、「Center-中央寄せ」「Right-右寄せ」から選択します。

Slides Per View

1つのウィジェットにいくつのテスティモニアルを表示するかを設定します。

スクロールするスライド

1回スクロールすると、いくつテスティモニアルを飛ばすかの設定をします。例えば、1つのウィジェットで1つのレビューを表示しているとすると、この「Slides To Scroll」で1と記入すると、1番目のレビューでスクロールしたら、次に3番目のレビューが表示されるようになります。

幅

それぞれのテスティモニアルの幅を調節します。 

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

このセクションでは、テスティモニアルの細かい設定をしていきます。

矢印

これは、矢印のことです。「SHOW」にするとウィジェットの両端に矢印が表示され、お客さんがクリックして、スクロールすることができるようになります。

Pagination

• None
• Dots
• Fraction
• Progress

ページ表記を上記の4タイプから選択します。それぞれ「None」はページ表記なし、「Dots」はドット表記、「Fraction」は分数表記、「Progress」はプログレスバーが表示されます。「None」と「Dots」、「Fraction」の3つは、ウィジェットの下部に表示されるもので、「Progress」に関しては、ウィジェット上部に表示されます。

トランジション所要時間

スライドが切り替わる際のトランジションの長さを設定します。単位はミリ秒になっているので、1000で1秒になります。

自動再生

「はい」にすると、スライドが自動でスクロールされます。「いいえ」にすると読者が手動で（矢印やページ表記をクリックして）スクロールする必要があります。

自動再生速度

「自動再生」で「はい」に切り替えた場合に設定します。これは、どれくらいの時間が経てば、スライドを自動でスクロールするかの設定です。ここもミリ秒単位なので、例えば1000と入力するとスクロールする挙動に1秒かかるということになります。

無限ループ

スライドを自動で、ずっと回転させたいという場合は、「はい」に切り替えましょう。自動スクロールが無限ループされます。

Pause on Interaction

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

画像サイズ

画像の大きさをドロップダウンから選択します。

スタイルのスライド設定

スタイルでは、スライドの色やボーダーなど外観を設定することができます。

スペースの間隔

ウィジェットにテスティモニアルが1つしか表示されていない場合は関係ありませんが、2つ以上表示する設定をしていると、それらのテスティモニアルの幅を調節することができます。

背景色

ここでは、テスティモニアルの背景色を設定します。16進数のカラーコードを入力することもできますので、ブランドカラーのコードがある場合はここで入力しても良いですね。

Border Size

デフォルトでは1つ1つのスライドにボーダーは付いていませんが、数値を上げていくと、ボーダーが付いて、さらにどんどん太くなっていきます。「値をまとめてリンク（チェーンのアイコン）」をクリックし、アイコンの背景が白くなると、ボーダーの4辺の太さを別々に設定することができます。

ボーダー丸み

この項目では、ボーダーの丸みを調整します。ツマミを右に持っていくと、ボーダーの角がどんどん丸くなり、左に持っていくと角ばったボーダーになります。

ボーダー色

ここは、そのままボーダーの色ですね。

パディング

このパディングというのは、テスティモニアルのコンテンツとボーダーとのスペースです。値を上げていくと、どんどん幅が広がっていきます。

スタイルのコンテンツ設定

このセクションでは、テスティモニアルのコンテンツ（テキストや画像）の色や書体などを設定していきます。

すき間

ここでは、テスティモニアルの本文と画像とのスペースを調節します。数値を上げると幅が広くなり、下げると狭くなっていきます。

文字色

レビュー本文の色が設定できます。

書体

本文の書体を設定します。フォントやサイズ（文字の大きさ）、太さ、変換（大文字・小文字など）、スタイル、装飾、行の高さ、字間の設定ができます。

名前の文字色

先ほどと同様に、テキストカラーが設定できます。

名前の書体

ここも同じく、細かい名前の書体を設定できます。

タイトルの文字色

まずは、肩書きのテキストカラーを設定します。

タイトルの書体

ここは、肩書きテキストの書体の設定ですね。

スタイルの画像設定

このセクションでは、画像の外観を設定していきます。

サイズ

「Size」は、そのままです。画像の大きさを調節します。

すき間

「コンテンツ」の「Layout」で「Inline Image」を選択した場合、画像と肩書きとのスペースを調節します。

ボーダー

「はい」にすると画像にボーダーが追加され、さらに「Border Color」と「Border Width」の項目が表示されます。

ボーダー色

「ボーダー」で「はい」を選択すると表示されます。ボーダーの色を選択します。

ボーダー幅

「ボーダー」で「はい」を選択すると表示されます。ボーダーの太さを設定します。

ボーダー丸み

「ボーダー」で「はい」を選んでも、「いいえ」を選んでも表示されます。ボーダーの角の丸みを調節します。

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

このセクションでは、テスティモニアルウィジェットに表示される矢印とページネーションの外観を設定します。

矢印のサイズ

矢印の大きさを調節します。

矢印の色

矢印の色を設定します。

Paginationのサイズ

まずは、ページ表記の大きさです。「Pagination」で「None」、「Dots」、「Fraction」のいずれかを選択した場合はそれぞれの大きさ、「Progress」を選んだ場合はプログレスバーの太さを調整します。

Paginationの色

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

スタイルのBubble設定

「コンテンツ」の「Slides」にある「Skin」で「Bubble」を選んだ場合、以下の項目を設定していきます。

Background Color

吹き出しの背景色を設定します。

Padding

吹き出しの枠とテスティモニアルの本文とのスペースを調節します。

Border Radius

吹き出しの枠の丸みを調節します。

Border

「はい」を選択すると、次の項目が表示されます。

Border Color

吹き出しの色を選択します。

Border Width

吹き出しのボーダーの太さを調節します。