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

『Testimonial Carousel』(テスティモニアル カルーセル)のTestimonialとは『お客様の声』や『証言』という意味で、Carouselとは『メリーゴーラウンド』という意味です。
つまりショッピングサイトなどで顧客レビューなどを、コメント・画像・名前・役職名などのオプションが一つにまとまった画面がメリーゴーラウンドの様にスライドしながら表示させることのできるウィジェットになります。
またTestimonial Carouselウィジェットは、Elementor Proのみに搭載されています。

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

Testimonial Carouselウィジェットの挿入

Testimonial Carouselウィジェットの挿入

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

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

こちらは、Testimonial Carouselウィジェットをカラムに挿入した後の表示画面です。
文章・写真・名前・役職が記載された状態がデフォルトとして上記画面の様に表示され、一定の秒数の間隔で画面左が左にスライドします。

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

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

スライド

スライドの説明

『スライド』では、画面に表示されている、コメント・写真・名前・役職名の全ての項目を書き換えることができます。
※デフォルトでは項目は1から3まですでに挿入されています。

例えば項目1を編集したい場合は編集タブの『項目 #1』と書いてある部分をクリックします。

項目の編集

するとこの様に編集タブが更に開き新たな編集項目が表示されます。

コンテンツ

コンテンツの編集

『コンテンツ』ではコメント部分の文の変更ができます。

画像

画像の挿入

『画像』はファイルをアップロードし挿入、またはメディアファイルより画像を選択し挿入することができます。

名前

名前の編集

『名前』も自由に変更ができます。

タイトル

タイトル(役職名)の変更

『タイトル』では名前の下の役職名の変更が可能です。

項目の追加の仕方

項目の追加の仕方

新たな項目を追加するには、編集タブの最終項目の下の『+項目を追加』をクリックします。
項目は何個でも追加することが可能です。

スキン

スキンの説明

『スキン』はコメント部分の表示形態のを以下より選択します。

  • デフォルト
  • Bubble

Bubble

『Bubble』を選択すると、コメント部分に吹き出しが付きます。

レイアウト

レイアウトの説明

『レイアウト』は、Testimonial Carousel全体のレイアウトを以下より選択ができます。

  • Image Inline(デフォルト)
  • Image Stacked
  • Image Above
  • Image Left
  • Image Right

Image Stacked

Image Stackedを選択時の表示画面

Image Above

Image Aboveを選択時の表示画面

Image Left

Image Leftを選択時の表示画面

Image Right

Image RIghtを選択時の表示画面

配置

配置・中央

『配置』は以下より選択します。

  • 中央(デフォルト)

上記は配置を『中央』にした時の表示画面です。

配置・左

配置を『左』に選択すると、コメントの文頭と画像の左端がカラムの左端に整列します。

配置・右

配置を『右』に選択するとコメントの文末と画像の右側がカラムの右端に整列します。
お気づきかとは思いますが、配置の『右』の選択時のみ自動的に画像の位置が名前と役職名の右側に配置されます。

Slides Per View

Slides Per Viewの説明

『Slides Per View』は1ページにTestimonial Carouselのコメント一式を何個載せるかの設定になります。
デフォルトは『1』で設定されています。

Slides Per Viewを『2』に設定した時の表示画面

上記はSlides Per Viewを『2』に設定した時の表示画面です。
2つのTestimonial Carouselのコメントが1ページに表示されました。

Slides Per Viewは最大で『10』まで設定することが可能です。

スクロールするスライド

スクロールするスライドの説明

『スクロールするスライド』は1回のスライドで何コメントスライドさせるかの設定になります。
デフォルトは『1』に設定されているので、1スライド毎に1コメントずつスライドします。

こちらはスクロールするスライドをデフォルトのままスライドさせている時のサンプル動画です。

こちらはスクロールのスライドを『2』に設定した時のサンプル動画です。
2コメントずつスライドしていくのがお分かりいただけると思います。

Testimonial Carouselの数とスクロールのスライドの数の兼ね合いによって、表示されなくなってしまうコメントができてしまうこともありますのでスクロールのスライドの設定はお気をつけください。

Testimonial Carouselの横幅の説明

『幅』はTestimonial Carouselの幅をカーソルを左にスライドさせることにより幅を縮めることができます。
上記はデフォルトの幅が『100』(最大値)の時の表示画面です。
全角49文字を超えると文章が改行されます。

幅を最小値に設定した時の表示画面

上記は幅の値を『50』(最小値)にした時の表示画面です。
全角22文字分の幅になります。
幅が狭まった分、コメントの文章が途中で改行されているのがお分りいただけると思います。

コンテンツタブ・追加オプション

コンテンツタブ・追加オプション

コンテンツタブの『追加オプション』の内容は、【Elementor Pro 『Media Caroucel』ウィジェットの使い方】の記事の同セクションで詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・スライド

スタイルタブ・スライド

スペースの間隔

スペースの間隔の説明

『スペースの間隔』はSlide Per Viewを『2』以上に設定した時にこちらの設定は反映します。
コメントとコメントの間のスペースをカーソルをスライドさせることにより間隔の拡張・縮小をすることができます。
※スペースの間隔のデフォルトは『10』に設定されています。

スペースの間隔を最大値にした時の表示画面

上記はスペースの間隔を『50』(最大値)に設定した時の表示画面です。

背景色

スライドの背景色の変更

『背景色』は上記の様に各Testimonial Carouselを囲む様に背景色を入れることができます。

Border Size

Border Sizeの説明

『Border Size』のボーダーとは、背景を囲む枠線のことです。
Border Sizeでは値を+1以上にすると背景を囲むボーダーが入り、値を大きくするに連れてボーダーを太くすることが可能です。

ボーダーの丸み / 色

ボーダーの丸み、色の編集の仕方につきましては、【Elementorの『画像』ウィジェットの使い方】記事のスタイルタブの編集・『枠線の丸み』と『色』のセクションを参考にしてください。

パディング

パディングの説明

『パディング』では値を+1以上にすると反映します。
(マイナスの値ではパディングに変化は起きません。)
上記はパディングの値を『65』にした時の表示画面です。

スタイルタブ・コンテンツ

スタイル・コンテンツタブ

すき間

すき間(コンテンツ・画像間)の説明

『すき間』はコメントと画像上部・名前の間のスペースをカーソルを左右にスライドさせることにより拡張・縮小ができます。
上記はすき間の値を『100』(最大値)に設定した時の表示画面です。
※デフォルトの値は『25』に設定されています。

文字色 / 書体(各種)

コンテンツ・名前・タイトル(役職名)の文字色と書体の変更
  • コメント(文章)
  • 名前
  • タイトル(役職名)

上記の各パーツ毎に文字色・書体の変更が可能です。
書体の編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】記事のスタイルタブ編集のセクションにて詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・画像

コンテンツタブ・画像

サイズ

画像サイズの変更

『サイズ』ではカーソルを左右にスライドさせることにより画像サイズを拡大・縮小することができます。
上記はサイズを『130』の値にした時の表示画面です。
※デフォルトの値は『50』に設定されており、最大『200』まで変更が可能です。

すき間

すき間(画像・名前間)の説明

『すき間』は画像と名前・役職名の間のすき間をカーソルを左右にスライドさせることにより拡張・縮小することが可能です。
上記はすき間の値を『100』(最大値)にした時の表示画面です。
※デフォルトの値は『20』前後に設定されています。

ボーダー

画像のボーダーの有無

『ボーダー』は画像に枠線をつけるかつけないかの選択になります。
デフォルトでは『いいえ』に設定されていますが、『はい』にすると

  • ボーダー色
  • ボーダー幅

のエディターが追加で表示されます。
ボーダー色・ボーダー幅の編集の仕方の説明は割愛致します。

ボーダーの丸み

ボーダーの丸みの説明

『ボーダーの丸み』は枠線、または枠線は無くとも画像背景が透過されていない通常の画像であれば、値を50以下にすれば枠線、または画像の角に丸みをつけることができます。
上記はボーダーの丸みを『25』にした時の表示画面です。
※ボーダーの丸みの値を『0』にすると枠線または画像の角は直角になります。

コンテンツタブ・ナビゲーション

スタイルタブ・ナビゲーション

『ナビゲーション』の編集の仕方につきましては、【Elementor Pro 『Media Caroucel』ウィジェットの使い方】の同セクションにて詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・Bubble

スタイルタブ・Bubble

コンテンツタブのスキンを『Bubble』に設定するとスタイルタブに『Bubble』のエディターが追加されます。

背景色

Bubbleの背景色の変更

『背景色』では、吹き出しの背景色をカラーピッカーより自由に変更することができます。

パディング

Bubble内のパディングの変更

『パディング』は吹き出しの枠線と文章間のパディングを変更することができます。
上記はパディングの値を『50』に設定した時の表示画面です。
※デフォルトの値は『20』に設定されており、パディングはマイナスの値では特に反映しません。

ボーダーの丸み

ボーダーの丸みの説明

『ボーダーの丸み』では、吹き出しの角に丸みをつけることができます。
上記はボーダーの丸みの値を『100』にした時の表示画面です。
※デフォルトの値は『0』に設定されており、マイナスの値では反映しません。

ボーダー

ボーダー(吹き出しの枠線)を『はい』にした時の表示画面

『ボーダー』は、吹き出しに枠線をつけるかつけないかの選択になります。
デフォルトでは『いいえ』に設定されていますが、枠線をつけたい場合は『はい』にします。
しかし、ただ『はい』にしただけだと特に変化は起きません。
『はい』にすると

ボーダー色・ボーダー幅の編集
  • ボーダー色
  • ボーダー幅

の設定がエディターに追加されますので、それらを操作して吹き出しに枠線をつけることができます。

上記は『ボーダー色』・『ボーダー幅』をそれぞれ変更した時の表示画面です。
これらの操作についての詳しい説明はこちらでは割愛させていただきます。


Testimonial Carouselウィジェットは商品を販売するサイトや会社情報など、直接その商品を使ってみた人のレビューや実際にその会社で働いている人の会社の印象などを閲覧者に効率的に届けることができる便利なウィジェットですね。
スライド式で動きがあるので閲覧者の目を引きやすく、またページのスペースも節約するとこもできます。
ぜひWebサイト制作にTestimonial Carouselウィジェットを活用してみてはいかがでしょうか?

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

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

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。