Diviのフィルター可能なポートフォリオモジュールで全幅レイアウトとグリッドを使用する

公開: 2022-08-26

Divi の Filterable Portfolio Module では、2 つのレイアウトオプションから選択できます。どちらのオプションにも利点があり、特定の目的に最適です。この投稿では、Divi のフィルター可能なポートフォリオモジュールの全幅レイアウトとグリッドレイアウトを比較して、Web サイトに必要なものを決定するのに役立てます。また、両方のレイアウトをスタイルして、Divi レイアウト内でどのように機能するかを確認します.

始めましょう！

フィルタリング可能なポートフォリオモジュールレイアウトオプションのプレビュー

まず、このチュートリアルで構築するものを見てみましょう。

グリッドポートフォリオアイテムデスクトップ

グリッドポートフォリオアイテム電話

全幅レイアウトポートフォリオアイテムデスクトップ

全幅レイアウトポートフォリオアイテム電話

フィルタリング可能なポートフォリオモジュールのレイアウトを変更する方法

デフォルトでは、Filterable Portfolio Module はレイアウトを全幅で表示します。レイアウトを変更して、ポートフォリオアイテムをグリッドに表示できます。まず、通常どおりモジュールの設定を開きます

レイアウトの変更方法

次に、[デザイン] タブを選択します。最初のオプションはレイアウトです。いくつかの選択肢があるドロップダウンボックスがあります。これを選択して、全幅とグリッドのいずれかを選択します。

レイアウトの変更方法

現在選択されていないオプションを選択すると、モジュールが再読み込みされ、ポートフォリオアイテムがそのレイアウトに表示されます。以下の例は、グリッドレイアウトを示しています。

レイアウトの変更方法

フィルタリング可能なポートフォリオモジュールレイアウトの比較

2 つのレイアウトは大きく異なりますが、いくつかの類似点があります。どちらも、モジュールの上部にフィルター、アイテム画像の下にタイトルとメタ、モジュールの下部にページネーションを表示します。

ここでは、それらがどのように異なるかを見てみましょう。

全幅レイアウト

[全幅] は、1 つのポートフォリオアイテムがポートフォリオエリアの全幅を占める大きな画像を表示します。画像が大きいため、より詳細に表示されますが、サイズが大きくなる可能性があります。画像はネイティブの形状で表示され、使用可能な幅に合わせて拡大されます。ポートフォリオ項目の間に多くのスペースを追加しません。投稿数を少数に制限することをお勧めします。以下の例は、投稿数が 2 の全幅レイアウトを示しています。

全幅レイアウト

グリッドレイアウト

グリッドレイアウトでは、1 行に最大 4 つのアイテムが表示されます。アイテム間にスペースを追加します。画像はトリミングされ、画像のサイズと形状に関係なく同じサイズのサムネイルが作成されます。

グリッドレイアウト

この例では、ページネーションを表示するために 4 つの投稿を表示するようにモジュールを制限しました。

グリッドレイアウト

フィルター可能な各ポートフォリオモジュールレイアウトをいつ使用するか

どちらのレイアウトにも利点があります。各レイアウトをいつ使用するかについてのヒントを次に示します。

全幅レイアウト

表示するアイテムが少ない場合、または少数のアイテムに焦点を当てたい場合は、全幅レイアウトを使用します。また、注目の画像を強調したり注目を集めたい場合にも、このレイアウトを使用します。

グリッドレイアウト

たくさんのアイテムを表示したい場合や、より多くのアイテムをより小さなスペースに表示するレイアウトが必要な場合は、グリッドレイアウトを使用します。

フィルタリング可能なポートフォリオモジュールレイアウトのスタイルを設定する方法

レイアウトを選択する方法、レイアウトがどのように機能するか、いつ使用するかを確認したので、両方のレイアウトのスタイルを設定する方法を見てみましょう。 Divi 内で利用できる無料の Painter Layout Pack のポートフォリオページを使用します。元のページはこちら。

レイアウトのスタイルを設定する方法

ポートフォリオを Filterable Portfolio Module に置き換え、同じ画像とタイトルを使用します。 2 つのバージョンを作成します。1 つは全幅レイアウトで、もう 1 つはグリッドレイアウトで、スタイルを設定します。

グリッドフィルター可能なポートフォリオモジュールレイアウトアイテムのスタイルを設定する方法

グリッドレイアウトから始めます。元のレイアウトの色とフォントを使用します。

コンテンツ

モジュールの設定を開き、 Post Countに 4 を入力します。モジュールに表示するすべてのカテゴリを選択します。

投稿数: 4
収録カテゴリー：各カテゴリー

グリッドポートフォリオアイテムのスタイルを設定する方法

レイアウト

次に、[デザイン] タブを選択し、[レイアウト] オプションから [グリッド] を選択します。

レイアウト: グリッド

グリッドポートフォリオアイテムのスタイルを設定する方法

画像

[画像] まで下にスクロールし、4^番目の [ボックスシャドウ] オプションを選択します。 影の色を rgba(0,0,0,0.05) に変更します。

ボックスシャドウ: 4^番目のオプション
影の色: rgba(0,0,0,0.05)

グリッドポートフォリオアイテムのスタイルを設定する方法

文章

次に、[テキスト] まで下にスクロールし、[配置]を [中央] に変更します。これにより、フィルター、タイトル、メタ、およびページネーションが中央に配置されます。

配置: 中央

グリッドポートフォリオアイテムのスタイルを設定する方法

タイトルテキスト

次に、 Title Textまでスクロールします。 フォントを Merriweather に変更し、色を黒に変更します。他の設定はデフォルトのままにします。

フォント: メリウェザー
色: #000000

グリッドポートフォリオアイテムのスタイルを設定する方法

フォントサイズをデスクトップの場合は 26 ピクセル、タブレットの場合は 20 ピクセル、スマートフォンの場合は 18 ピクセルに変更します。

サイズ: デスクトップ 26 ピクセル、タブレット 20 ピクセル、スマートフォン 18 ピクセル

グリッドポートフォリオアイテムのスタイルを設定する方法

フィルター基準テキスト

次に、 Criteria Textまで下にスクロールします。 フォントをモンセラートに変更します。 Weightを bold に、 Styleを TT に設定します。色を #fd6927 に、サイズを 12px に変更します。

フォント: モントセラト
重量: 太字
スタイル: TT
カラー: #fd6927
サイズ: 12px

グリッドポートフォリオアイテムのスタイルを設定する方法

メタテキスト

次に、 Meta Textまで下にスクロールします。 フォントを Montserrat に、色を #fd6927 に変更します。

フォント: モントセラト
カラー: #fd6927

グリッドポートフォリオアイテムのスタイルを設定する方法

サイズを 12px、文字間隔を 2px、行の高さを 1.2em に設定します。

サイズ: 12px
文字間隔: 2px
行の高さ: 1.2em

グリッドポートフォリオアイテムのスタイルを設定する方法

ページネーションテキスト

最後に、 Pagination Textまで下にスクロールし、 Fontを Montserrat に変更し、 Font Colorを黒に設定します。モジュールを閉じて、設定を保存します。

フォント: モントセラト
色: #000000

グリッドポートフォリオアイテムのスタイルを設定する方法

全幅レイアウトポートフォリオアイテムのスタイルを設定する方法

それでは、全幅レイアウトポートフォリオを設定しましょう。グリッドレイアウトと同じデザインキューを使用しますが、このレイアウトに適した微調整を行います。簡単な CSS を使用して微調整を行います。