Diviプラグインのハイライト：証言

Testifyは、Divi Builderに新しいモジュールを追加して、お客様の声エディター内で作成したお客様の声や、訪問者がフォームからアップロードしたお客様の声を表示するサードパーティのプラグインです。

Testifyは、Diviの有無にかかわらず機能します。 Testifyには、カスタマイザーやアップロード機能など、Diviの外部で機能する他の機能がありますが、Diviモジュールを使用すると、それを際立たせるいくつかの機能が得られます。 この記事では、Diviモジュールとその機能について説明します。 Testifyバージョン1.3.0を使用しています。 例の画像はUnsplash.comから取得されています。

Testifyは、開発者のWebサイトから購入できます。

Testifyのインストール

まず、通常どおりプラグインをアップロードしてアクティブ化します。 これにより、DiviまたはExtraを使用している場合、DiviBuilderモジュールが自動的に追加されます。

次に、ダッシュボードの[証言]をクリックして、設定画面に移動します。 ライセンスキーを入力します。 これでプラグインを使用する準備が整いました。

メニューには以下が含まれます：

• すべての紹介文–作成したすべての紹介文を表示します。 ここでは、紹介文をクリックして編集またはプレビューできます。
• 新しい紹介文の追加–紹介文を作成するエディターを開きます。
• お客様の声のカテゴリ–お客様の声のカテゴリを投稿するのと同じように編集します。
• お客様の声のタグ–タグを投稿するのと同じように、お客様の声のタグを編集します。
• カスタマイズ–フロントエンドカスタマイザーへのリンク。
• 概要と手順–ショートコード（Diviには必要ありませんが、必要に応じて使用できます）を使用するためのクイックガイドと、詳細についてはWebサイトへのリンク。

証言の作成と管理

表彰状を作成するには、証言ダッシュボードメニューのナビゲートで、新しい推薦状を追加します。 WYSIWYGエディターを使用して投稿やページを作成するのと同じ方法で、紹介文を作成して公開します。 タイトルを付け、コンテンツ、作者の名前、ウェブサイト（ハイパーリンク付き）を追加し、カテゴリを指定し、タグを追加して、注目の画像を選択します。

[すべての紹介文]ページにあなたの紹介文が表示されます。 これで、WordPressの投稿、ページ、またはサイドバー内に（付属のウィジェットを使用して）証言を投稿し、WordPressカスタマイザーを使用してそれらをカスタマイズできます。 これらはすべて、Diviとは独立して機能します。 おなじみのツールを使用してお客様の声をカスタマイズするには、組み込みのDiviモジュールを使用できます。

DiviBuilderモジュールを証明する

Testifyと呼ばれる新しいモジュールがDiviBuilderに追加されました。 DiviとExtraの両方で動作します。 Testifyを使用するためにDiviBuilderは必要ありませんが、Divi Builderを使用することには利点があります。つまり、Diviのシャドウ機能とアニメーション機能を使用できます。 すべてのカスタマイズは、DiviおよびExtraユーザーが使い慣れたツールを使用してモジュールの設定から行われます。

コンテンツ設定には、表示する紹介文の数、順序、含めるカテゴリとタグ、配置、トランジションタイプ、アニメーション速度、自動再生時間が含まれます。

デザイン設定を使用すると、紹介文のテキストを調整したり、続きを読むリンクとテキストの調整を表示したり、続きを読むアイコン、作成者のテキスト、レイアウトデザイン、ナビゲーション設定、見積もりデザイン、区切り文字、紹介文の画像、サムネイルを表示したりできます。

7種類の引用符スタイルがあり、サイズと色を調整できます。 必要に応じてオフにすることもできます。 ナビゲーションには、サムネイル画像、矢印、ドットが含まれます。 必要に応じて、ナビゲーションを無効にすることができます。 シャドウエフェクトには、紹介文、作成者のテキスト、ボックスシャドウが含まれます。 エフェクトには、Diviアニメーションスタイルも含まれます。

証言の例

これは、単一のカテゴリを選択するときのデフォルト設定です。 お客様の声はスライダーとして表示され、テキストの上の円に著者の画像が表示されます。 お客様の声の作者は通常の画像として表示され、他の作者にはオーバーレイがあります。 この画像では、マウスを紹介文の上に置いてナビゲーション矢印を表示しています。 引用符はデフォルトでnoneに設定されています。

これはサムネイルナビゲーションを使用し、行ごとに8つを表示します。 お客様の声はスライドしますが、クリックすると特定のお客様の声を見ることができます。 画像の上にマウスを置くと画像が明るくなり、クリック可能であることを示します。 最初の引用符スタイルを選択しました。

この例でも画像ナビゲーションを使用しています。 引用符にスタイル2を選択し、サムネイルの境界線、引用符、区切り線の色を調整し、画像を120に設定して、正方形の画像を選択しました。

この例は上記の例と同じですが、ナビゲーションに画像の代わりにドットを使用しています。 サムネイルは円で表示されます。

これは、200ピクセルに設定された正方形のサムネイルを使用しています。 線の色を変更し、見積もりにスタイル3を使用しました。 また、矢印を削除し、続きを読むボタンを追加し、フォントサイズを32に設定し、引用符を100文字に制限しました。 セパレータの厚さを2ピクセルから6ピクセルに増やし、濃い赤を使用しています。 表示するカテゴリを2つだけ選択しました。 これらのカテゴリには4つの紹介文しかないため、スペースを埋めるために自動的に間隔が空けられます。

これは1つの推薦状だけを示しています。 フォント、境界線、引用符のフォントと色を変更しました。 引用符はスタイル4で、サイズが38から28に縮小されています。サムネイルの幅は200に設定されています。

これはセクションの背景を使用しています。 モジュールに背景を追加して、テキスト領域を暗くしました。 テキストと引用は白で、続きを読むテキストは薄い灰色です。 サムネイルの背景は、セクションの背景と調和するように暗くなります。 サムネイルには、背景に合わせてオーバーレイがあります。 引用はスタイル5を使用しています。サムネイルを正方形にし、境界線を4に設定しました。また、これにさらに多くのアイコンを表示し、色を白に設定しました。

この例では、Diviに付属のチームレイアウトを使用しています。 色を変更し、紹介文のフォントサイズを20に設定し、紹介文の長さを100に設定し、続きを読むボタンを追加し、作成者のテキストに影を追加し、影の水平方向の長さを.56に増やし、スタイル6を選択しました。引用符を付け、区切り文字の幅を10に設定します。サムネイルに3の境界線を付け、正方形の画像を選択しました。

シャドウエフェクトで証言する

これは、Diviに組み込まれているシャドウエフェクトのいくつかを使用しています。 引用スタイル6を選択し、2番目の紹介文のテキストの影、3番目の作成者のテキストの影、および最初のボックスの影を選択しました。 ボックスシャドウのぼかしと広がりの強さは最大に設定されています。 他のすべてのシャドウ設定はデフォルトです。

これについては、3番目の紹介文の影を選択し、ぼかしの強さを増やしました。 また、デフォルト設定で5番目の作成者の影と6番目のボックスの影を選択しました。

追加でTestifyを使用する

Testifyは、Diviと同様にExtraでも機能します。 これは、サイドバー付きのデフォルトの追加レイアウト内に配置された上記の例の1つです。 Extraで背景を暗くしましたが、モジュールに変更を加えていません。

これは、DiviBuilderに付属するチームレイアウト内でのTestifyの外観です。

Testifyを見積もりスライダーとして使用する

Testifyは、見積もりスライダーとしても機能します。 Quoteというカテゴリを作成しました。 これは引用スタイル7を使用します。色はセスの背景色と一致します。 Testifyを使用するために他にどのような方法を考えることができますか？

ドキュメンテーション

ドキュメントは、Testifyダッシュボードメニュー内に提供されています。 このドキュメントはDiviをカバーしていません。 より広範なドキュメントは、開発者のWebサイトで提供されています。 Diviを使用している場合、Diviはショートコードを必要としないため、この情報は必要ありません。 もちろん、必要に応じてDiviで使用できます。

ここで、Diviモジュールに関する段落を少なくとも1つ見たいと思います。 ただし、すべての設定はDiviモジュールの標準であるため、DiviBuilderに精通している人なら誰でもTestifyのDiviモジュールを使用できます。

最終的な考え

プラグインの使用は非常に直感的です。 ほとんどの設定は標準のDiviです。 私にとって唯一紛らわしい設定は、サイズと行ごとのサムネイルの数に基づいた、行ごとのさまざまな画像の数でした。 たとえば、1行あたりのサムネイルの数を紹介文の数よりも多く設定すると、モジュールを開くたびに設定がデフォルトに戻ります。 何が起こっているのかを理解したら、設定に問題はありませんでした。

追加してほしいことがいくつかありました。 たとえば、ナビゲーションの矢印とドットの色を調整できるようにしたいと思います。 他のすべての機能には色のオプションがあるため、1つが欠けているとして際立っています。 複数の矢印とドットのスタイルも見たいです。

私が見たいもう1つの機能は、Divi Builderにアップロードフォームが追加されているため、カスタマイズが統一されます。 ただし、これらのカスタマイズはカスタマイザーで行うことができます。 また、デモではCSSを使用した紹介文が示されているので、ユーザーがそれらをコピーしてTestifyモジュールのCSS機能に貼り付けることができるように、ドキュメントに含まれているCSSを確認したいと思います。

Testifyについて私が最も気に入っていることの1つは、Diviの有無にかかわらず機能することです。 どのテーマでも使用できますが、DiviまたはExtraを使用している場合は、TestifyモジュールがDiviBuilderに自動的に追加されます。 Divi Builderを使用すると、シャドウ機能を含むDiviの設定を利用できます。 Divi Builderで使用できる紹介文のスライダーに興味がある場合は、Testifyに外観を与えることをお勧めします。

我々はあなたから聞きたい。 Testify for Diviを試しましたか？ コメントであなたの経験について教えてください。

Julia Tim /shutterstock.comによる注目の画像