Diviプラグインのハイライト：DPお客様の声スライダー

公開: 2018-12-17

お客様の声は、ビジネスWebサイトの最も重要な要素の1つです。お客様の声モジュール、宣伝文モジュール、テキストと画像の組み合わせなど、Diviを使用してエレガントなお客様の声を作成する方法はいくつかあります。もう1つのオプションは、DP Testimonials Sliderなど、お客様の声の管理と組み込みのレイアウトを提供するサードパーティのプラグインを使用することです。

DP Testimonials Sliderは、jvt_testimonialsという新しいカスタム投稿タイプを作成します。エディターでお客様の声を作成し、それらのお客様の声を表示するための3つのモジュールを提供します。すべての証言を表示するか、表示される数を制限するか、特定のカテゴリを表示するかを選択できます。各モジュールには、選択可能ないくつかのレイアウトが含まれており、スタイルを設定できます。

プラグインを見てみましょう。

DPの証言

Testimonialsと呼ばれる新しいメニュー項目がダッシュボードに追加されます。クリックすると、作成した紹介文のリストが表示されます。

[紹介文を追加]を選択すると、紹介文を作成できるエディターが表示されます。コンテンツ、カテゴリ、画像、紹介文の情報が含まれています。これは、グーテンベルクを使用しているかクラシックエディターを使用しているかに関係なく取得できるエディターです。

お客様の声のカテゴリは、投稿のカテゴリと同じように機能します。ここで、それらを作成および編集できます。

DPお客様の声スライダーモジュール

3つのモジュールがDiviBuilderに追加されます。

DP証言グリッドビュー

DP証言グリッドビューには、3つのオプションからレイアウトを選択し、引用アイコンを表示、表示、スタイル設定する証言の数を設定し、画像を表示し、引用リンクを表示し、カテゴリを選択し、ページネーションの色、リンクを調整するための設定が含まれています、 NS。

また、標準のデザインと詳細設定も含まれています。 CSSを使用すると、名前、会社名、および説明をターゲットにできます。各モジュールには、これらの設定が含まれています。

DPの声のリストビュー

DP証言リストビューには2つのレイアウトが含まれ、[注文方法]オプションが追加されており、紹介文の年齢、タイトル、またはランダムで注文できます。

DP証言スライダー

DP証言スライダーには56のレイアウトが含まれ、スライダーコントロールが追加されています。これには、順序付け、自動再生、速度、ページネーション、マウスホバーでのスライドの停止、コンテンツ制限の表示が含まれます。

DP証言グリッドビューの例

これは、3つの紹介文を示すレイアウト1です。丸で囲んだ画像を作成し、各紹介文をシャドウ効果のあるカードに表示します。他のすべてはデフォルト設定のままにしておきます。

この例では、レイアウト2で作業しています。これにより、グラデーションのある背景が追加されます。これはデフォルトのままにして、テキストの色、サイズ、太さ、およびアイコンの色を調整しました。また、紹介文をランダムな順序で表示するように設定しました。

公開されたビューでは、画像は円形であり、紹介文が含まれているボックスと重なっています。ここに表示されているように、画像にカーソルを合わせると画像が回転します。

DP証言リストビューの例

これはリストビューのレイアウト1です。すべてをデフォルト設定のままにしました。

レイアウト2は、画像のサイズを縮小し、2つの円形の角を持つエレガントなボックスデザインを追加します。ホバーに影の効果を示します。

DPの声スライダーの例

スライダーには、Classic DiviBuilderを使用する必要がありました。他の2つのモジュールとは異なり、このモジュールは、New DiviBuilderまたはVisualBuilderを使用している場合は表示されません。 54のレイアウトがあります。それらすべてを見る代わりに、いくつかを見ていきます。

これはレイアウト1です。円で囲まれた画像を作成し、スライドのナビゲーションは含まれていません。弾丸の色を調整できます。

これはレイアウト2です。背景から離れるようにボックスシャドウを追加し、テキストを50文字に制限しました。スタイリングがデフォルトです。

これはレイアウト3です。画像を削除します。前の例のボックスの影と文字数の制限を含めました。

これは、デフォルト設定を使用したレイアウト4です。スタイリングで何ができるか見ていきます。

レイアウトを選択すると、そのレイアウトのスタイリングオプションがカラー設定に表示されます。別のレイアウトを選択し、その設定を調整して、任意のレイアウトに戻ることができ、その設定はまだそこにあります。

色がもう少し目立つように背景を追加しました。

これはレイアウト5です。セクションにわずかに灰色の背景を追加すると、スライダーがその背景を引き継ぎます。

これはレイアウト6です。スライドごとに2つの証言が表示されます。

これはレイアウト7です。完全な紹介文を表示しています。紹介文のボックスに重なる画像が好きです。

これはレイアウト8です。私はこのデザインが好きです。

これはレイアウト9です。レイアウトは8に似ていますが、独自のデザインキューがあります。

これはレイアウト10です。作成者の周りに素敵なボックスを作成し、2組の引用符を追加します。

このセットでは、2列のレイアウトを使用して2つのモジュールを表示しています。左側はレイアウト11、右側はレイアウト12です。レイアウト11は、標準スタイルのナビゲーションを追加します。

これはレイアウト14です。投稿ナビゲーションボタンも含まれています。

これは、左側にレイアウト53、右側にレイアウト54がある別の2列のレイアウトです。レイアウト54には、スライダーの興味深いアニメーションがあります。スライドが縮小し、別のスライドが所定の位置に来るとすぐに横に移動し、新しいスライドが拡大してスペースを埋めます。

これはレイアウト55です。コーナースタイルを追加し、名前のバナーを作成します。私は色の使用が好きです。これには、レイアウト54と同じアニメーションが含まれています。

これはレイアウト56です。画像を削除し、名前のバナーが付いた素敵なボックスを作成します。

Calderaフォームの統合

出版社のサイトには、紹介文の送信フォームを作成するためのCalderaFormsのテンプレートが含まれています。ダウンロード可能なドキュメントに含まれており、使用方法が記載されています。

このフォームを使用すると、誰でもフォームから紹介文を送信でき、レビュー用のドラフトとして保存されます。また、すべての情報を記載したメールを管理者に送信します。

ライセンスとドキュメント

DP Testimonials Sliderは、開発者のWebサイトから入手できます。利用可能なライセンスは3つあります。

1サイト– $ 30
5サイト– $ 40
無制限のサイト– $ 50

ドキュメントは、プラグインの販売ページでダウンロード可能なファイルとして提供されます。プラグインの使用方法、Caldera Formsでの使用手順、およびCalderaFormsテンプレートが含まれています。

終わりの考え

DPの声スライダーは、いくつかのエレガントな声を作成します。お客様の声を作成し、3つのモジュールを使用するのは直感的です。グリッドおよびリストビューモジュールは、新しいバックエンドエディタでうまく機能しました。スライダーモジュールについては、クラシックビルダーを使用する必要がありました。 3つのプラグインはすべて、クラシックビルダーでうまく機能するため、アクセスできる場合は、フロントエンド機能がスライダーモジュールに追加されるまで、これをお勧めします。

Caldera Formsテンプレートを使用しても、実質的に簡単でした。 JSONファイルをインポートしたところ、最初の試行で機能しました。

私が抱えていた唯一の問題は、モジュールに表示する背景を取得することでした。セクションと行の背景は、問題なくお客様の声とともに表示されました。また、ソーシャルリンクがお客様の声のどこで使用されるかは明確ではありませんでした。また、発行元のWebサイトのデモには表示されません。

スライダーモジュールのレイアウトの数に感銘を受けました。私も彼らのアニメーションが好きです。多くは横からスライドしますが、上から下へ、縮小、拡大など、他にも多くのスライドアニメーションがあります。今後のアップデートでは、ウィジェットとショートコードが追加されます。

お客様の声を管理し、モジュールで表示することに興味がある場合は、DPお客様の声スライダーを一見の価値があります。

我々はあなたから聞きたい。 DP証言スライダーを試しましたか？ コメントであなたの経験について教えてください。

Blan-k /shutterstock.com経由の注目の画像