Diviプラグインのハイライト：DTS Filterable Portfolio Grid Pro

公開: 2017-10-01

Diviのフィルター可能なポートフォリオモジュールを使用すると、フルスクリーンまたはグリッドでポートフォリオを構築できます。グリッド内の3列または4列のボタンと選択肢を追加する別の外観が必要な場合はどうなりますか？これはまさに、DTS Filterable Portfolio GridProと呼ばれるサードパーティのプラグインが行うことです。

DTS Filterable Portfolio Grid Proは、DiviBuilderに新しいモジュールを追加します。プラグインはポートフォリオに新しい外観を与え、グリッド内の3列または4列のオプションがあります。プロジェクトの投稿タイプが表示されます。カスタムボタンテキストとカスタム詳細オプションが含まれています。

プラグインは開発者のWebサイトから入手できます。

このプラグインのハイライトでは、DTS Filterable Portfolio Grid Proを見て、何ができるかを見ていきます。画像はUnsplash.comから取得されます。

DTS Filterable Portfolio GridProのインストール

通常どおりプラグインをアップロードしてアクティブ化します。プラグインをアクティブ化したら、ダッシュボードの[設定]に移動し、[ DTS Filterable Portfolio Grid ProActivation ]を選択します。 APIキーとメールアドレスを入力し、変更を保存します。

モジュール設定

プラグインは、DiviBuilderに新しいモジュールを追加します。青いので見逃せません。

コンテンツ設定には、投稿数、カテゴリの選択、タイトル、カテゴリ、ページネーション、背景、カスタムボタンテキストの表示が含まれます。

[デザイン]タブには、レイアウト、色、フォント、アイコン、オーバーレイ、境界線、およびアニメーションの設定が含まれています。

例–グリッド

デフォルト設定では、3列のグリッドを使用します。中央のタイルにホバーアニメーションが表示されます。タイルには、タイトルセクションと中央に配置されたボタンのある画像が含まれています。下部にカテゴリが表示されます。タイルには、ホバーすると離れる影が表示されます。ご想像のとおり、これらの各要素はカスタマイズ可能です。

この例では、グリッドを4列に変更し、ボタンの背景色、ボタンの背景のホバー色、およびボタンのフォントのホバー色を調整しました。 4列のレイアウトは、それに合わせて画像サイズを変更します。

これでは、ボタンの半径を小さくし、ボタンのフォントサイズを大きくし、ホバーアイコンとその色を変更し、ホバーオーバーレイの色を変更しました。これらの調整はすべてシンプルで直感的です。

この例では、ボタンの正方形のコーナーを作成するために、境界線の半径を0にしました。ボタンテキスト、タイトルテキストのフォントサイズを大きくし、フォントスタイルを変更しました。また、ホバーオーバーレイを黒にして、画像が透けて見えるように十分な不透明度を設定し、ホバーアイコンを変更しました。

これは、タイトルの行の高さを減らします。また、フォントの色を暗くし、文字間隔を大きくしました。カテゴリフォントをデフォルトに戻し、斜体に設定しました。ボタンの半径は100に設定されており、独自のボタンテキストを追加しました。また、オーバーレイの色を変更し、別のアイコンを選択して、その色を白に変更しました。この例では、赤と2ピクセル幅に設定された境界線も使用しています。境界線のオプションには、色、幅、スタイルが含まれます。

タイトルの背後に暗い背景を使用している場合に備えて、モジュールには明るい色と暗い色のテキストカラーオプションがありますが、現在、タイトルの背後にある背景を変更するオプションはありません。これは今後の機能だと思います。

背景設定（標準の色、グラデーション、画像、およびビデオ）は、モジュールの背後に適用されます。カードは背景色の端に触れており、モジュール内でパディングの調整はありません。

これにより、背景がぎこちなく見えますが、簡単な解決策がいくつかあります。この記事のすべての画像で行ったように、セクションまたは行にパディングを追加することも、CSSを使用してモジュールにパディングを追加することもできます。

これが、モジュールの[メイン要素]セクションの[詳細設定]タブに追加したCSSです。 4つの場所すべてにパディングを追加するようにDiviに指示するだけです。値は、行およびモジュールのパディングフィールドと同じ順序（上、右、下、左）で適用されます。これは、上のパディングに40の値、右のパディングに30の値、下のパディングに20、左のパディングに30を指定したことを意味します。

結果はまさに私が望んでいたものです–4つの側面すべてに異なるレベルのパディングがあります。これにより、バックグラウンド機能がより使いやすくなり、実装が簡単になります。

例–フィルター

これはフィルター可能なポートフォリオであるため、フィルターもカスタマイズ可能であるのは当然です。予想どおり、フォントスタイル、サイズ、配置、色、間隔、および高さの調整があります。これまで、デフォルト設定のフィルターを見てきました。

この例では、赤のAmaticSCフォントを使用しています。フォントサイズを大きくしましたが、間隔と高さはデフォルトのままにしました。

これはBevanと呼ばれるフォントを使用しています。濃い赤を使用しています。フォントサイズは前のフォントと同じです。

これはArvoを使用しています。フォントサイズを小さくして、濃い灰色を選択しました。

アニメーション

Diviのアニメーションは、モジュールの設定でも利用できます。なし、フェード、スライド、バウンス、ズーム、フリップ、フォールド、ロールを選択します。アニメーションを調整して、1回だけ繰り返すかループするか、方向、継続時間、遅延、強度、開始不透明度、速度曲線を選択することもできます。

この例ではRollを使用しています。私は他のすべてをデフォルトのままにしました。

レイアウト内でのポートフォリオグリッドの使用

DTS Filterable Portfolio Grid Proは、レイアウト内で見栄えがします。ブログ、ポートフォリオ、お問い合わせフォームを使用した写真のレイアウトの例を次に示します。ポートフォリオグリッドのデフォルト設定を使用していますが、うまくブレンドされています。

Extraでポートフォリオグリッドを使用する

DTS Filterable Portfolio GridProはExtraとも互換性があります。上記のDiviレイアウトと同様のレイアウトを見てみましょう。これもデフォルト設定を使用します。画像サイズが一致しない3列のグリッドを使用しています。これは簡単な修正です。同じサイズの画像を使用するだけです。

ライセンス

選択できるライセンスオプションは、単一サイトと拡張の2つです。どちらにも、ライフタイムアップデートと6か月のサポートが含まれています。

最終的な考え

DTS Filterable Portfolio Grid Proは使いやすく、ポートフォリオを際立たせるためのエレガントなスタイリングを多数提供します。タイトルやメタ背景色など、追加してほしい機能がいくつかありますが、それでも十分な機能を備えているため、簡単に推奨できます。標準のDiviモジュールを超えるスタイリングを備えたフィルター可能な背景グリッドモジュールに興味がある場合は、DTSフィルター可能なポートフォリオグリッドプロを一見の価値があります。

我々はあなたから聞きたい！ DTS Filterable Portfolio Grid Proを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

AFスタジオ/shutterstock.com経由の注目の画像