• 特徴
      メガメニュー

      豊富なメニューオプションによる容易なナビゲーション

      バリエーション・スウォッチ

      視覚的な商品選択が売上を加速させる

      ダイナミック・コンテンツ

      パーソナライズされたコンテンツがリアルタイムで適応

      スムーズスクローラー

      UXフローを改善するシームレススクロール

      ライブ・コピー・ペースト

      瞬時にコンテンツを複製し、時間を節約

      必須ショートコード

      パワフルなデザイン要素に素早くアクセス

      Template Library In Editor

      既製のテンプレートがデザインをスピードアップ

      ACFの統合

      柔軟なデータのための高度なカスタムフィールド

      デュプリケーター

      手間をかけずに簡単にサイトをクローン

      SVGサポート

      あらゆるスクリーンに対応する、鮮明でスケーラブルなグラフィック

      ホワイトレーベル・ブランディング

      ツールをリブランドしてプロフェッショナルな外観に

      視認性コントロール

      正確なコンテンツの表示・非表示

      パララックス/スクロール・エフェクト

      滑らかな動きで奥行きを魅せる

      表記

      明確なメモや注釈を簡単に追加

      ウィジェットツールチップ

      役立つヒントがユーザーとのインタラクションを向上

      トランスフォーム効果

      スタイリッシュなアニメーション

      セクション・スティッキー

      重要なセクションは常に見えるようにしておく

      カスタムCSS&JS

      カスタム・コードの微調整によるフル・コントロール

      アセット・マネージャー

      ファイルを最適化してサイトのスピードを上げる

  • テンプレート
  • 価格
  • Japanese
  • 特徴
      メガメニュー

      豊富なメニューオプションによる容易なナビゲーション

      バリエーション・スウォッチ

      視覚的な商品選択が売上を加速させる

      ダイナミック・コンテンツ

      パーソナライズされたコンテンツがリアルタイムで適応

      スムーズスクローラー

      UXフローを改善するシームレススクロール

      ライブ・コピー・ペースト

      瞬時にコンテンツを複製し、時間を節約

      必須ショートコード

      パワフルなデザイン要素に素早くアクセス

      Template Library In Editor

      既製のテンプレートがデザインをスピードアップ

      ACFの統合

      柔軟なデータのための高度なカスタムフィールド

      デュプリケーター

      手間をかけずに簡単にサイトをクローン

      SVGサポート

      あらゆるスクリーンに対応する、鮮明でスケーラブルなグラフィック

      ホワイトレーベル・ブランディング

      ツールをリブランドしてプロフェッショナルな外観に

      視認性コントロール

      正確なコンテンツの表示・非表示

      パララックス/スクロール・エフェクト

      滑らかな動きで奥行きを魅せる

      表記

      明確なメモや注釈を簡単に追加

      ウィジェットツールチップ

      役立つヒントがユーザーとのインタラクションを向上

      トランスフォーム効果

      スタイリッシュなアニメーション

      セクション・スティッキー

      重要なセクションは常に見えるようにしておく

      カスタムCSS&JS

      カスタム・コードの微調整によるフル・コントロール

      アセット・マネージャー

      ファイルを最適化してサイトのスピードを上げる

  • テンプレート
  • 価格
  • Japanese

common (28)

バリエーション・スウォッチ
プロ 新しい ポピュラー
EDDプロファイル・エディター
プロ 新しい
スタッカー
プロ 新しい ポピュラー
読書タイマー
無料 新しい
カスタムJS
無料 新しい
EDD購入履歴
プロ 新しい
簡単デジタルダウンロード
プロ 新しい
ウェブフックフォーム
プロ 新しい
SVGブロブ
プロ 新しい ポピュラー
フローティング・ナレッジベース
プロ 新しい ポピュラー
暗号通貨チャート・カルーセル
プロ 新しい ポピュラー
暗号通貨チャート
プロ 新しい ポピュラー
暗号通貨ティッカー
プロ 新しい ポピュラー
暗号通貨カルーセル
プロ 新しい ポピュラー
暗号通貨リスト
プロ 新しい ポピュラー
暗号通貨グリッド
プロ 新しい ポピュラー
アドブロック検出器
プロ 新しい ポピュラー
リアルな影
プロ 新しい ポピュラー
コンテンツプロテクター
プロ 新しい ポピュラー
コンテンツ・スイッチャー
プロ 新しい ポピュラー
SVGマップ
プロ 新しい ポピュラー
マーキー
プロ 新しい ポピュラー
フェイスブック フィード カルーセル
プロ ポピュラー
フェイスブック・フィード
無料 ポピュラー
背景 拡大
プロ ポピュラー
製品カルーセル
無料 ポピュラー
製品グリッド
無料 ポピュラー
ポスト / ブログカルーセル
プロ
作戦検索したウィジェットが見つかりません!心当たりはありますか?もしあれば 投稿する こちら

Elementorを使ってWordPressにテスティモニアルスライダーを追加する方法

How to Add a Testimonial Slider in WordPress Using Elementor

お客様の声スライダーは、お客様の声を紹介し、訪問者との信頼関係を構築するスマートな方法です。あなたのWordPressサイトに信頼性とビジュアルアピールを追加する、クリーンな回転形式でレビューを表示します。.

このブログでは、Elementorの直感的なドラッグ&ドロップインターフェースを使って、お客様の声スライダーを作成する方法をご紹介します。また、あなたのブランドに合わせてカスタマイズし、あなたの声を簡単に目立たせる方法も学びます。.

Elementorサイトにテスティモニアル・スライダーを追加する最も簡単な方法

テスティモニアルスライダーを作成するために利用可能な様々な方法があります。また、プロフェッショナルで魅力的なElementorテスティモニアルスライダーを簡単に作成できる複数のウィジェットやプラグインもあります。.

Elementorページビルダーの可能性をさらに高め、デフォルトのオプションを超えて機能を拡張するために、Elementorアドオンをインストールすることができます。.

広く認知され、よく知られているアドオンは Element Pack. .この強力な拡張機能は、強化されたお客様の声ウィジェットを含む幅広い高度な機能を提供します。

Element Packを使用すると、より視覚的に魅力的でインタラクティブなお客様の声のセクションを作成することができます。また、視聴者との信頼関係を築き、お客様の声をプロフェッショナルかつ魅力的に表示することができます。.

Element Packは、300以上の高度なウィジェットをWordPressサイトにもたらすElementorのための広く使用されている無料のアドオンです。シンプルなセットアップ、柔軟なデザインオプション、すぐに使える豊富なエレメントがユーザーから高く評価されています。.

Element Packには、多くの専用証言ウィジェットが含まれています。例えば,

  • 証言カルーセル
  • 証言グリッド
  • お客様の声スライダー
  • レビューカード
  • レビューカードカルーセル
  • レビュー・カード・グリッド

これらのツールはユーザーフレンドリーで、高度なカスタマイズが可能なため、顧客からのフィードバックをきれいな回転形式で簡単に紹介することができます。.

内蔵のデザインコントロールで、色、レイアウト、タイポグラフィなどを調整できます。また、あなたの体験談スライダーがあなたのサイトのブランディングや全体的なスタイルにシームレスにフィットすることを保証します。.

Element Packを入手

Elementorウェブサイトにテスティモニアル・スライダーを追加する方法

それでは、Elementorウェブサイトにお客様の声スライダーを追加するためのステップバイステップガイドをご覧ください。.

必要なセットアップ:

  • ワードプレスのテーマがインストールされている
  • Elementor Page Builderプラグインを有効にする

ステップ1:Element Packプラグインをインストールし、有効化する

  • WordPressの管理ダッシュボードから、次の場所に移動します。 プラグイン をクリックし 新規追加 をクリックして、新しいプラグインのインストールを開始します。.
  • 上部の検索バーに Element Pack をクリックしてプラグインを見つける。.
  • 次に、「今すぐインストール」をクリックして、Element Packプラグインのダウンロードを開始します。.
  • クリック アクティベート をクリックしてプラグインを有効にしてください。 
  • 次にプラグインを開き、必要なウィジェット(テスティモニアルスライダーウィジェットなど)を有効化します。コアウィジェットに移動し、Testimonial Carousel、Testimonial Grid、Testimonial Sliderを見つけ、有効化します。.

ステップ2:証言の追加

  • ウィジェットを有効にした後、ダッシュボードの「お客様の声」セクションからお客様の声を追加します。.
  • というわけで お客様の声 >> 新しいお客様の声の追加
  • 次に、証言者の名前、メッセージ、指定、会社名、評価、レビュー、その他の詳細を追加します。次に 出版 ボタンをクリックする。

ステップ3:証言ウィジェットを追加する

  • すべての証言を追加したら、証言スライダーを追加したいページを開きます。.
  • クリック Elementorで編集 をクリックしてください。.
  • 次に、左サイドバーの検索バーを使って、以下を探します。 お客様の声スライダー.
  • Element Pack Testimonial Sliderウィジェットをページに表示したいセクションにドラッグ&ドロップします。.
  • これでテスティモニアルスライダーウィジェットの追加は完了です。次は、あなたのサイトのスタイルとブランディングに合うようにカスタマイズする方法を探ってみましょう。.

ステップ 4: お客様の声ウィジェットのカスタマイズ 

証言スライダーウィジェットを追加したら、そのレイアウトとコンテンツを 内容 設定パネル。. 

各オプションでコントロールできる内容は以下の通り:

レイアウト

  • 肌だ: スライダーの全体的なスタイルまたはレイアウトのプリセットを選択します(デフォルト、サム、シングルなど)。.
  • 証言画像: レビュアーの写真またはアバターを表示するには、このトグルをオンにします。.
  • タイトル レビュアーの名前または見出しを表示または非表示にします。.
  • 会社名/住所 レビュアーの所属や所在地を表示することで、信頼性を高める。.
  • メタ・マルチライン メタ情報(名前や会社名など)を複数行に渡って表示するには、これを有効にします。.
  • タイトルの後にカンマを表示する: 書式をすっきりさせるために、レビュアーのタイトルの後にカンマを入れるかどうかを決める。.
  • テキストの制限: 整理されたレイアウトを維持するために、各証言の文字数制限を設定します。.
  • ストリップ・ショートコード: フォーマットの問題を避けるために、証言テキストから埋め込まれたショートコードを削除します。.
  • テキスト 続きを読む もっと読む」リンクで、ユーザーが長い証言を展開できるようにする。.
  • 格付け 星の評価を表示して、肯定的なフィードバックを視覚的に強化する。.
  • レビュープラットフォーム 証言の出典(Google、Facebook、Instagramなど)を表示する。.
  • メタ・ポジション メタ情報を表示する場所を、証言ブロックの上部または下部から選択します。.

スライダーの設定:

レイアウトをカスタマイズしたら、次はスライダー設定を微調整します。この設定で、ページ上でのテスティモニアル・スライダーの動作をコントロールすることができます。また、これらのオプションはスライダーの動き、タイミング、反応を管理するのに役立ちます:

  • オートプレイ: これを有効にすると、ユーザーの操作なしでスライダーが自動的に回転します。.
  • 自動再生速度: 各証言の表示時間(ミリ秒)を設定します。例:7000は7秒を意味します。.
  • ホバーで一時停止: ユーザーがスライダーの上にカーソルを置いたときに、スライダーの動きを止めるかどうかを選択します。.
  • アニメーションのスピード: スライド間のトランジションの速さをコントロールする。低い値 = 切り替えが速い。.
  • ループ: これをオンにすると、スライダーが連続的に回転し続ける。.
  • オートハイト: 各証言の内容に基づいてスライダーの高さを調整します。長さの異なるレビューが混在している場合に便利です。.

ナビゲーション

次に、その下にナビゲーション機能があります。これらのナビゲーションオプションは、ナビゲーションコントロールの外観と機能を調整するのに役立ちます:

  • ナビゲーション・タイプ: ユーザーがスライダーをどのようにナビゲートするかを選択します。オプションには、矢印、ドット、またはなしがあります。.
  • スクロールバーを表示する: 必要に応じてスライダーの下にスクロールバーを表示するには、これを切り替えます。.
  • 矢印の位置:ナビゲーションの矢印が表示される位置を設定します(中央、上部、下部など)。.
  • 矢印のアイコン: 矢印アイコンのスタイル、デフォルトまたはカスタムデザインを選択します。.
  • モバイルで矢印を隠す: これを有効にすると、小さい画面ではナビゲーションの矢印がなくなり、すっきりとしたモバイルレイアウトになります。.

これは、Elementorテスティモニアルスライダーウィジェットを追加、設定、スタイル設定する方法です。これらのすべての機能を使用すると、魅力的でユニークな、高度な証言スライダーを作成することができます。.

ボーナス:テスティモニアル・スライダー・デザインのヒント

効果的なテスティモニアルスライダーをデザインすることは、単に美しさだけの問題ではありません。信頼性、わかりやすさ、使いやすさが重要なのです。ここでは、それを正しく行うためのプロのヒントをいくつかご紹介します:

ベスト・テスティモニアル・ストラクチャー

  • 引用+名前+役割 シンプルで信頼できるものにしましょう。.
  • 画像+引用+評価 視覚的な信頼と社会的証明を加える。.
  • ロゴ+引用: B2Bやクライアントのショーケースに最適。.
  • ビデオ+テキストの要約: インパクトのある証言に最適。.

お客様の声デザインの標準サイズ

  • 画像サイズ: プロフィール写真は80~120pxの正方形。.
  • スライダーの幅: 100%レスポンシブ(最小300px、最大1200px)。.
  • テキストの長さ: 読みやすさを考慮して、証言1件につき30~60字。.

証言の掲載場所

  • ホームページ コール・トゥ・アクションや製品セクションの近く。.
  • ランディングページ 変換フォームの直前。.
  • サービスについて 信頼性を強化する。.
  • ブログ記事 サイドバースライダーやインラインプルーフとして。.
  • 価格のページ: 価格表の後。.

テスティモニアルの特徴

  • 星の評価 即座に視覚的な信頼を得ることができる。.
  • クライアント名と役割 信頼性を高める。.
  • 会社のロゴまたは写真: アイデンティティを強化する。.
  • 日付またはプロジェクト名 文脈を加える。.

ブランドに合ったスタイル

  • ブランドのフォントと色を使う。.
  • ボタンのスタイルとホバー効果を合わせる。.
  • スペーシングとタイポグラフィをサイトと統一する。.

コンテンツを変える

  • 短い引用と長い話を混ぜる。.
  • 異なる業界やユーザータイプを含める。.
  • 証言を動的に、またはカテゴリごとに回転させます。.

もう少し重要なことがある:

  • スライダーのセットアップと管理を簡単にするために、テスティモニアル・プラグインを使いましょう。.
  • スライダーがレスポンシブで、キーボードで操作できるようにする。.
  • ナビゲーションはシンプルに、ドット、矢印、またはスワイプジェスチャーで。.
  • 読みやすさと焦点のために空白を維持する。.
  • 常に応答性をテストする。.

結論

Element Packのテスティモニアルスライダーウィジェットは、顧客からのフィードバックを表示し、信頼性を構築し、コンバージョンを高めるための洗練された魅力的な方法です。.

このガイドのステップとヒントに従うことで、あなたのサイトのデザインと利用者に合ったテスティモニアルスライダーを簡単に追加、カスタマイズできるようになります。.

ダウンロード Element Pack 無料

もっとElementorの機能を知りたいですか?役立つチュートリアルをご覧ください:

返信を残す

目次

Copyright © 2026 Bdテーマ. 無断複写・転載を禁じます。

Money Transfer Logo