Diviプラグインのハイライト–Diviポートフォリオグリッド

公開: 2017-06-05

Diviには、ポートフォリオを全幅またはグリッドレイアウトで表示するポートフォリオモジュールが含まれており、背景、フォント、色、境界線、オーバーレイ、アイコンなど、Diviモジュールに期待されるすべての基本機能が含まれています。複数列のデザインなどの異なるレイアウト、またはカスタマイズ可能なボタンなどの新機能？ Divi PortfolioGridと呼ばれるサードパーティのプラグインに興味があるかもしれません。

Divi Portfolio Gridは、Divi ThemeStoreのサードパーティプラグインです。標準のDiviモジュール機能を提供するだけでなく、2、3、および4列のレイアウトと新しいスタイリング機能を提供するため、独自のポートフォリオを作成できます。また、色を変更するためのテキストとホバー効果を備えたボタンを追加します。

この概要では、私が作成したサンプルポートフォリオを使用してDiviポートフォリオグリッドを見ていきます。ポートフォリオと背景で使用されているすべての画像は、Unsplash.comから取得されました。

Diviポートフォリオグリッドプラグインのインストール

プラグインをアップロードする前に、ダウンロードファイルを解凍する必要があります。 zipファイル内には、PDFクイックガイドとともにzipプラグインファイルがあります。クイックガイドは、インストールの手順とモジュールの使用方法の概要を説明するドキュメントです。ダウンロードファイル内にあるzip形式のプラグインファイルをアップロードし、通常どおりインストールしてアクティブ化します。

カスタムポートフォリオモジュールの機能

プラグインは、カスタムポートフォリオモジュールと呼ばれる新しいモジュールをDiviBuilderに追加します。このモジュールは、バックエンドの他のDivi Builderモジュールと同じように機能するため、任意の行にドラッグアンドドロップして、コンテンツ、デザイン、および詳細設定を調整できます。

背景色のカスタマイズ、背景画像の選択、レイアウトの選択、カスタムボタンテキストの作成、表示する投稿の数の選択、カテゴリの選択、メタの表示、色の選択など。

すべての標準設計機能もここにあります。色、フォント、ボタン、アイコン、オーバーレイなどを調整します。

例–Diviカスタムポートフォリオモジュールの使用

私の例では、ページを作成し、背景を追加して視覚的なフレアを与え、行を全幅にし、ポートフォリオグリッドモジュールを追加しました。それを見る前に、比較のために標準のDiviBuildingポートフォリオモジュールをざっと見てみましょう。

標準Diviポートフォリオモジュール

これは、標準のDiviポートフォリオモジュールを使用したページを示しています。グリッドレイアウトに設定し、フォントの色を明るい色に設定しました。他のすべての機能はデフォルトに設定されています。また、アイコン（グリッドモード）、境界線、背景、メタ、およびフォントスタイルを備えたホバーオーバーレイも含まれています。

プロジェクトの注目画像は、画像の下にプロジェクトのタイトルとカテゴリとともに表示されます。タイトルをクリックすると、プロジェクトに移動します。カテゴリタイトルをクリックすると、そのカテゴリのカテゴリページが開きます。また、グリッドレイアウトを使用する場合のオーバーレイカラーとアイコンオプションを備えたホバー効果も含まれています。

カスタムポートフォリオモジュールの例

選択可能な3つのレイアウトが含まれているため、ポートフォリオを2、3、または4列に設定できます。さまざまなカスタマイズと機能を備えた各レイアウトを見てみましょう。

2列のレイアウトを見てみましょう。プロジェクトの注目画像を表示し、画像の下のバーにクリック可能なタイトルとカテゴリを含め、画像とバーの上にテキスト付きのボタンを配置します。これはデフォルトの機能と色です。

画像には、標準のポートフォリオモジュールと同じホバー効果が含まれていますが、ボタンにはホバー効果も含まれています。この例では、デフォルトのボタン設定が紫の背景を赤に変更していることがわかります。

また、ホバーしているカードの後ろに影を作成する素晴らしいホバー効果を見ることができます。タイトルはツールチップとして表示されます。ホバーオーバーレイもデフォルトの機能であるため、有効にする必要はありません。ホバー効果のトランジションは、トランジションが完了するまで、より重い影を表示します。

3列のレイアウトを見てみましょう。この例では、ボタンの背景とテキストの色を変更し、独自のメッセージを表示するようにテキストを変更しました。

ボタンには、シャドウホバー効果も含まれています。この例では、ボタンにカーソルを合わせるだけなので、画像にはホバー効果が表示されません。ボタンの背景とテキストの色が変わりました。

この例では、4列のレイアウトを使用しています。ボタンの半径を0に設定し、すべてのフォントスタイルを変更しました。

ホバー効果は、不透明度47％の青いオーバーレイ（奇数については申し訳ありませんが、マウスが停止した場所なので、マウスを使用しました）と赤いチェックボックスアイコンを配置します。ボタンは、明るいタブテキストのある濃い灰色から濃い灰色のテキストのあるオフホワイトに変わります。

この例では、タイトルとメタの背後に表示される背景を追加しました。幅2ピクセルの赤い境界線を追加しました（画像で見やすいように）。すべてのフォントと色を調整し、ボタンの背景色、ホバー色、アイコンの色を変更しました。タイトルとメタセクションの背後にある注目の画像領域と背景画像のコントラストを表示するために、デフォルトのホバーオーバーレイの色を残しました。

ボタンは、タイトルを表示している場合にのみ表示されます。この例では、カテゴリのみを表示しています。

この例では、プロジェクトのタイトルのみが表示されます。タイトルが表示されているので、ボタンも表示されます。

この例では、不透明度66の赤いオーバーレイを配置しました。ホバーアイコンを変更し、ボタンとそのホバー効果をカスタマイズしました。（灰色の空の）背景画像がタイトルの後ろに配置されます。これは異なるプロジェクトカテゴリを使用します。ボタンの半径は10に設定されています。

Diviポートフォリオグリッド–レスポンシブ

プラグインはレスポンシブです。これは、縦向きモードのiPad（Chromeの開発ツールでエミュレート）の3列のレイアウトです。 Google Chrome Developerツールの詳細については、「今すぐChromeDeveloperツールの使用を開始する必要がある理由」の記事を参照してください。

これは、ランドスケープモードの同じレイアウトです。

これは、ポートレートモードのGalaxyS5と同じレイアウトです。

そして、これがギャラクシーS5を使用したレイアウトがランドスケープモードです。

ライセンス、アップデート、およびドキュメント

ライセンスは無制限の使用をカバーし、生涯の更新が含まれています。ドキュメントは、zipフォルダーに含まれるPDFファイルで提供されます。これは短いドキュメントであり、開始するための画像を含むウォークスルーを提供します。これは使いやすいプラグインであり、すべてが直感的であることがわかりました。 Diviモジュールの使用に慣れている場合は、このモジュールに慣れているはずです。

Diviポートフォリオグリッドは、Diviテーマストアで購入できます。

最終的な考え

Diviポートフォリオグリッドは使いやすく、多くのユーザーが不可欠だと感じる標準のDiviポートフォリオモジュールに十分な追加機能を提供します。 2列、3列、4列のレイアウトが含まれ、ホバー効果のあるボタン、アイコンのオーバーレイ、高度なCSS機能など、必要なすべてのモジュールスタイルが追加されているため、独自のコードでカスタムスタイルを設定できます。標準のDiviポートフォリオモジュールを超える機能を備えたポートフォリオが必要な場合は、Diviポートフォリオグリッドが必要なモジュールになる可能性があります。

ご連絡をお待ちしております！ Diviポートフォリオグリッドを試しましたか？ 以下のコメントであなたの経験について教えてください。

2RAL /shutterstock.com経由の注目の画像