の Filterable Portfolio モジュールを使用しますか? Divi どのレイアウトを選択すればよいかわかりませんか？
モジュール « フィルタリング可能なポートフォリオ 」へ Divi では、XNUMX つのレイアウト オプションから選択できます。 どちらのオプションにも利点があり、特定の目的では非常にうまく機能します。
この記事では、このモジュールの全幅レイアウトとグリッド レイアウトを比較して、モジュールに何が必要かを判断できるようにします。 サイトのWeb.
また、両方のレイアウトをカスタマイズして、XNUMX つのレイアウトでどのように機能するかを確認します。 Divi.
のは、始めましょう！
概要
まず、このチュートリアルで作成するものを見てみましょう。
グリッド レイアウトのデスクトップ バージョン
今すぐDIVIをダウンロードしてください!!!
グリッド レイアウトの電話バージョン
全幅レイアウトのデスクトップ版
全幅レイアウトの電話バージョン
フィルタリング可能なポートフォリオ モジュールのレイアウトを変更する方法
デフォルトでは、「フィルター可能なポートフォリオ」モジュールはレイアウトを全幅で表示します。 レイアウトを変更して、アイテムをグリッドに表示できます。 まず、 モジュールパラメータ.
次に、タブを選択します デザイン。 最初のオプションは レイアウト. いくつかの選択肢があるドロップダウン リストがあります。 それを選択して選択します 全角 et グリッド.
現在選択されていないオプションを選択すると、モジュールが再読み込みされ、ポートフォリオ アイテムがこのレイアウトに表示されます。 以下の例は、グリッド レイアウトを示しています。
フィルタリング可能なポートフォリオ モジュール レイアウトの比較
XNUMX つのレイアウトは大きく異なりますが、いくつかの類似点があります。 どちらも、モジュールの上部にフィルター、アイテム画像の下にタイトルとメタ、モジュールの下部にページネーションを表示します。
ここでは、それらがどのように異なるかを見てみましょう。
全幅レイアウト
[全幅] は、ポートフォリオ エリアの全幅を占めるポートフォリオ要素を含む大きな画像を表示します。 画像は元の形式で表示され、使用可能な幅に合わせて拡大されます。
財布のアイテムの間に多くのスペースを追加しません。 投稿数を少数に制限することをお勧めします。 以下の例は、2 つの投稿がある全幅レイアウトを示しています。
グリッドレイアウト
グリッド レイアウトでは、最大 4 つのアイテムが一列に表示されます。 要素間にスペースを追加します。 画像のサイズや形状に関係なく、同じサイズのサムネイルを作成するために画像がトリミングされます。
この例では、モジュールを XNUMX つの投稿を表示してページネーションを表示するように制限しました。
Filterable Portfolio モジュールの各レイアウトをいつ使用するか
どちらの配置にも利点があります。 ここでは、各レイアウトをいつ使用するかについてのヒントをいくつか紹介します。
全幅レイアウト
表示するアイテムが少ない場合、または少数のアイテムに注目したい場合は、全幅レイアウトを使用します。
また、注目の画像を強調したり注目を集めたい場合にも、このレイアウトを使用します。
グリッドレイアウト
多くの項目を表示したい場合や、より小さなスペースに多くの項目を表示するレイアウトが必要な場合は、グリッド レイアウトを使用します。
フィルタリング可能なポートフォリオ モジュール レイアウトをカスタマイズする方法
レイアウトの選択方法、機能、および使用するタイミングについて説明したので、これら XNUMX つのレイアウトをカスタマイズする方法を見てみましょう。
のポートフォリオページを使用します 無料のペインター レイアウト パック ディビで利用できます。 元のページはこちらです。
ポートフォリオを Filterable Portfolio モジュールに置き換え、同じ画像とタイトルを使用します。
全幅レイアウトのバージョンとグリッド レイアウトのバージョンの XNUMX つのバージョンを作成します。
フィルタリング可能なポートフォリオ モジュールのグリッド レイアウトをカスタマイズする方法
グリッドレイアウトから始めましょう。 元のレイアウトの色とフォントを使用します。
中身
それらを開く モジュールパラメータ に 4 を入力します。 投稿数. すべて選択 カテゴリ モジュールに表示したいもの。
- 投稿数: 4
- 含まれるカテゴリ: カテゴリを選択
配置
次に、タブを選択します 設計 そして選ぶ グリッド レイアウトオプションで。
- レイアウト: グリッド
画像
スクロールして 画像 オプションを選択します ボックスシャドウ。 それを変更 影の色 rgba(0,0,0,0.05)で。
- ボックス シャドウ: 4ème オプション
- 影の色: rgba(0,0,0,0.05)
テキスト
次に、下にスクロールして テキスト を変更します。 アラインメント 真ん中に。 これにより、フィルター、タイトル、メタ、およびページネーションが中央に配置されます。
- テキストの配置：中央
タイトルテキスト
次に、下にスクロールして タイトルテキスト 次の設定を変更します。
- タイトルフォント：メリウェザー
- タイトル文字色：#000000
のサイズを変更する 警察 デスクトップの場合は 26 ピクセル、タブレットの場合は 20 ピクセル、スマートフォンの場合は 18 ピクセルです。
- タイトルのテキスト サイズ: デスクトップ 26px、タブレット 20px、スマートフォン 18px
フィルタ基準テキスト
次に、下にスクロールして フィルター基準テキスト 次の設定を変更します。
- フィルター条件:
- フォント: モントセラト
- フォントの太さ：太字
- スタイル: TT
- テキストの色: #fd6927
- テキストサイズ: 12px
メタテキスト
次に、下にスクロールして メタテキスト. それを変更 警察 モントセラトと カラー #fd6927 で。
- メタ テキスト サイズ: モントセラト
- メタ テキストの色: #fd6927
をセットする タイユ 12 ピクセルでは、文字間隔 2 ピクセルで 横柄 1,2 em の行の。
- テキストサイズ: 12px
- メタ文字の間隔: 2px
- メタ行の高さ: 1,2 em
ページネーションテキスト
最後に、下にスクロールして ページネーションテキスト そしてそれを変更する 警察 モントセラトで、 カラー 黒地にフォント。 モジュールを閉じて、設定を保存します。
- ページネーションのフォント: Montserrat
- ページネーションのテキストの色: #000000
全幅レイアウトでフィルター可能なポートフォリオ モジュールをカスタマイズする方法
それでは、全幅レイアウトでモジュールを構成しましょう。
グリッド レイアウトと同じデザイン キューを使用しますが、このレイアウトに適したいくつかの変更を行います。 簡単な CSS を使用して微調整を行います。
中身
それらを開く モジュールパラメータ の数を変更します。 出版物 2.これにより、ページが小さくなり、大きな画像で管理しやすくなります。 すべて選択 カテゴリ モジュールに表示したいもの。
- 投稿数: 2
- 含まれるカテゴリ: カテゴリを選択
要素
スクロールして 要素 無効にする カテゴリを表示. その他は有効のままにします。 カテゴリは引き続きフィルターに対して有効になりますが、タイトルには表示されません。
- カテゴリーを表示: いいえ
配置
タブを選択します デザイン。 下 レイアウト、レイアウトをに設定したままにします 全角、これがデフォルト設定です。
- レイアウト: 全幅
画像
次に、下にスクロールして 画像 . オプションを選択してください ボックスシャドウ そしてそれを変更する カラー rgba の陰影 (0,0,0,0.05)。
- ボックス シャドウ: 4ème オプション
- 影の色: rgba(0,0,0,0.05)
テキスト
次に、下にスクロールして テキスト. 変更 アラインメント 真ん中に。 フィルター、タイトル、ページネーションは画像の中央に配置されます。
- テキストの配置：中央
タイトルテキスト
次に、下にスクロールして タイトルテキスト . それを変更 警察 Merriweather に変更し、 カラー 黒で。
- タイトルフォント：メリウェザー
- タイトル文字色：#000000
のサイズを変更する 警察 デスクトップの場合は 40 ピクセル、タブレットの場合は 20 ピクセル、スマートフォンの場合は 18 ピクセルです。
- タイトルのテキスト サイズ: デスクトップ 40px、タブレット 20px、スマートフォン 18px
フィルタ基準テキスト
次に、下にスクロールして フィルター基準テキスト 次の設定を変更します。
- フィルター条件:
- フォント: モントセラト
- フォントの太さ：太字
- スタイル: TT
- テキストの色: #fd6927
ページネーションテキスト
次に、下にスクロールして ページネーションテキスト. それを変更 警察 モントセラトでは、 ウェルター 半太字で設定します フォントの色 #fd6927 で。 モジュールを閉じて、設定を保存します。
- ページネーションのフォント: Montserrat
- カラー: #fd6927
- フォントの太さ: セミボールド
CSS タイトル テキスト
タブを開く 高機能 までスクロールします ポートフォリオのタイトル. デスクトップ アイコンを選択します。 以下のコードをコピーして、さまざまな画面サイズに合わせてください。 モジュールを閉じて、設定を保存します。
ポートフォリオのタイトル:
- デスクトップ
padding-bottom:40px- タブレット
padding-bottom:30px- 電話
padding-bottom:20px
結果
グリッド レイアウトのデスクトップ バージョン
グリッド レイアウトの電話バージョン
今すぐDIVIをダウンロードしてください!!!
全幅レイアウトのデスクトップ版
全幅レイアウトのスマートフォン版
今すぐDIVIをダウンロードしてください!!!
まとめ
これは、モジュール内の全幅レイアウトとグリッドの使用に関する私たちの見解です フィルター可能なポートフォリオ ディビの。 XNUMX つのレイアウト オプションの選択は簡単です。
各オプションには利点があり、お客様の環境に合わせて異なる方法で設計する必要があります。 サイトのWeb. モジュールがどのDiviレイアウトでもうまく機能するように、いくつかの調整を行うだけです.
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
