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

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

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

Elementor ProのTestimonial Carouselウィジェットは、お客さんのレビューをスライドショー形式で表示できるウィジェットです。特に、オプトインページやセールスページなどで使用する機会が多いと思います。それでは、詳しい使い方を確認していきましょう。

【限定】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番目のレビューが表示されるようになります。

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

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

Testimonial Carousel コンテンツ 追加オプション

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

矢印

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

Pagination

  • None
  • Dots
  • Fraction
  • Progress

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

トランジション所要時間

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

自動再生

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

自動再生速度

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

無限ループ

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

Pause on Interaction

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

画像サイズ

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

スタイルのスライド設定

Testimonial Carousel スタイル スライド

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

スペースの間隔

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

背景色

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

Border Size

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

ボーダー丸み

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

ボーダー色

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

パディング

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

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

Testimonial Carousel スタイル コンテンツ

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

すき間

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

文字色

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

書体

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

名前の文字色

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

名前の書体

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

タイトルの文字色

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

タイトルの書体

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

スタイルの画像設定

Testimonial Carousel スタイル 画像

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

サイズ

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

すき間

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

ボーダー

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

ボーダー色

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

ボーダー幅

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

ボーダー丸み

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

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

Testimonial Carousel スタイル ナビゲーション

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

矢印のサイズ

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

矢印の色

矢印の色を設定します。

Paginationのサイズ

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

Paginationの色

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

スタイルのBubble設定

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

Background Color

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

Padding

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

Border Radius

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

Border

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

Border Color

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

Border Width

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

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

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

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

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

・テンプレートの使い方

 

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

0コメント

コメントを提出

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

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

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

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