ディビ: 「フィルター可能なポートフォリオ」モジュールグリッドの要素をカスタマイズする方法

の Filterable Portfolio モジュールのグリッド要素をカスタマイズする方法を知りたいですか? Divi ? このチュートリアルに従ってください...

あなたのゾーンを持っていますサイトのWeb あなたの作品を紹介することは重要です。スタイリストの場合、複数のプロジェクトを作成できます。サイトのWeb あなたのコンセプトを披露するWordPress。あなたがブランドビルダーなら、ポートフォリオを使って作品を紹介できます。さらに、さらに進んで、プロジェクトにさまざまなカテゴリを追加することもできます。ここです Divi の Filterable Portfolio モジュールは何をしますか? .

このモジュールを使用すると、ハードワークを簡単かつ整理された方法で表示できます。

今日のチュートリアルでは、Filterable Portfolio モジュールの個々のグリッド要素をカスタマイズします。無料のレイアウトパックのレイアウトを使用します ディビ会議 et ディビオンラインヨガインストラクター を購入するたびに提供される Divi .

についてのすべてと同様に Divi、私たちのニーズや要望に合わせてこのモジュールをカスタマイズすることができます。ただし、スタイリングに入る前に、モジュールについてもう少し学びましょう。

Divi の Filterable Portfolio モジュールとは何ですか?

プロジェクトは、投稿と同じように機能するカスタム投稿タイプの一部です。それらは WordPress ダッシュボードで見つけることができます。

ここで、Filterable Portfolio モジュールに入力する個々のプロジェクトを作成します。このモジュールは、プロジェクトを表示する XNUMX つの方法を提供します。 グリッド形式で ou 全角形式で. ここでは、グリッド形式を使用してカスタマイズします。

Filterable Portfolio モジュールを使用すると、最新のプロジェクトを提示できます。サイトのユーザーには、ポートフォリオグリッドの上部にフィルターバーが表示されます。そこから、モジュールに表示できるさまざまなポートフォリオカテゴリを参照できます。

以下は、いくつかのサンプルプロジェクトを含むモジュールのグリッド構成の例です。

Divi のフィルタリング可能なポートフォリオを作成する際に考慮すべき領域

すべてのモッドのように Divi、Filterable Portfolio モジュールには、ニーズや要望に合わせてカスタマイズできる多くの機能が付属しています。したがって、モジュールに付属するほとんどの機能は、タブで変更できます。設計モジュール設定モーダルから。次の領域などを編集できます。

プロジェクト名
プロジェクトのカテゴリ
ビグネット
テキストをフィルタ
ホバー時のサムネイル
ページネーション

これは完全なリストではなく、CSS がこのモジュールにどのように詳細なカスタマイズを追加したかについても話し始めていません!

Divi の Filterable Portfolio モジュールをカスタマイズする方法

前述のように、このチュートリアルでは XNUMX つのレイアウトを使用します。 ディビ会議 et ディビオンラインヨガインストラクター. 以下に、このチュートリアルで行う作業の概要を示します。

「Divi Conference」レイアウトの要素の配置

Divi の Filterable Portfolio モジュールのグリッド要素をカスタマイズする

「Divi Online Yoga Instructor」レイアウトの要素の配置

両方のレイアウトを次のサイトから簡単にダウンロードできます。 Divi ビルダー。

それでは始めましょう！

参照：ディビ: Filterable Portfolio モジュールのグリッドと全幅レイアウトのどちらかを選択します

Divi の Filterable Portfolio モジュールのカスタマイズ: 「Divi Conference Edition」

まず、Divi Conference Layout Pack からイベントページテンプレートをインストールする必要があります。 WordPress で新しいページを作成し、Divi Builder を有効にした後、Divi ライブラリに入ります。

ディビレイアウトライブラリに入る

アイコンをクリックします « Load From Library ディビレイアウトライブラリに入る

Divi Layout Library でレイアウトを見つけます

Diviのレイアウトライブラリの検索機能を使って、探す処分」 カンファレンスイベントページ"。

インストールレイアウト

レイアウトを選択したら、「 このレイアウトを使用 ページにレイアウトをインストールします。

イメージモジュールの取り外しと交換

カスタマイズする Filterable Portfolio モジュール用のスペースを確保するために、以下に示す Image モジュールを削除します。クリックしてください " 削除画像の上にカーソルを置いて写真を削除した後。

Divi の Filterable Portfolio モジュールを挿入する

Image モジュールを削除したので、Filterable Portfolio モジュール用のスペースを空けることができます。アイコンをクリックします。 モジュールの追加 (灰色のプラス記号) をクリックし、表示されるモジュールモーダルボックスでモジュールを選択します。

投稿数とポートフォリオのレイアウトを設定する

デフォルトでは、このモジュールはあなたの作品を 4 つの列に表示します。ただし、デフォルトで XNUMX 列のグリッドレイアウトを使用します。

そのため、ポートフォリオの投稿数として 4 の倍数 (4、8、12、16 など) を選択することをお勧めします。

このチュートリアルでは、グリッドで 12 個のプロジェクトを使用します。

post-count-portfolio-layout » BlogPasCher

Divi のフィルター可能なポートフォリオのカスタマイズを開始: タイトルとメタテキスト

プロジェクトがグリッドに表示されたので、選択したテンプレートのデザイン要素のいくつかをリンクしてみましょう。この場合、新しいモジュールで Divi Conference Layout Pack で提供されるスタイルを使用します。

テキストスタイル

テキストの配置: 中央揃え
テキストの色: ダーク

タイトルのテキストスタイル

タイトル見出しレベル: H2
タイトルフォント : Krona One
文字色：#000000

メタテキストスタイル

メタフォント: デフォルト (Open Sans)
メタテキストの色: #ff6651

title-styling-filterable-portfolio-module » BlogPasCher

styled-titles-within-module » BlogPasCher

ポートフォリオグリッド内のタイトルのスタイル設定が完了したので、プロジェクトのサムネイル自体の実際の形状に変更を加えてみましょう。

プロジェクトのサムネイル枠と角丸を変更

Divi Conference Layout パックでは、丸みを帯びたコーナーの独自の組み合わせを使用して、パック内のいくつかのキーフレームに独自の形状を与えています。このスタイルをモジュールのサムネイルに適用してみましょう。

画像

画像：
- 角丸: 50px 50px 50px 0px
- ボーダースタイル: すべて
- ボーダー幅: 3px
- カラー：#000000
- ボーダースタイル: 無地

これにより、サムネイルがレイアウトパック内の他の画像と一致する形状になります。

ホバーオーバーレイのカスタマイズ

スタイリングをさらに一歩進めて、このモジュールに付属するデフォルトのオーバーレイにわずかな変更を加えてみましょう。色だけでなく、すぐに使用されるアイコンも変更します。

重ね合わせ

ズームアイコンの色: #bcf5fd
ホバーオーバーレイの色: #ff6651
ホバーアイコンピッカー: ズーム

ご覧のとおり、このレイアウトのブランドカラーをオーバーレイに追加し、このモジュールのホバー時のオーバーレイ機能に Divi がデフォルトで提供するアイコンを変更しました。

hover-styling-effect-frontend » BlogPasCher

ページ付けのカスタマイズ

CSS の小さなスニペットを使用して、Filterable Portfolio モジュールにさらにカスタマイズを追加します。まず、このモジュールのページネーションをカスタマイズします。次に、その上に表示される境界線を XNUMX 行の CSS で削除します。

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

ページネーション:
- フォント: Krona One
- テキストの配置: 中央揃え
- テキストの色: #ff6651、#000000 (ホバー)

CSS では、タブに切り替えます。 高機能 私たちのモジュールの。次に、タブをクリックします カスタム CSS。 次に、次のコードスニペットを入力して、ページネーションの上の境界線を削除し、見た目をすっきりさせます。

ポートフォリオのページネーション

border-top: 0px;

Divi 設定と CSS を使用してフィルターテキストをカスタマイズする

フィルターテキストについては、ワンランク上のものにします。 CSS を使用して背景とホバー効果を変更します。

新しく追加されたモジュールとレイアウトパックのスタイルの間に完全な連続性を持たせたいと考えています。まず、フォントの Divi 設定を入力しましょう。

フィルター基準テキスト

フィルター条件:
- フォント: Krona One
- フォントの色: #ffffff、#000000 (ホバー)

現状では、私たちのフィルターはなくなっているようです。実際、デフォルトの状態では、白い背景に白いテキストです。ただし、これを XNUMX か所のカスタム CSS で変更します。

まず、フィルターテキストに背景を追加するページ設定に CSS スニペットを追加します。次に、タブを使用してアクティブなポートフォリオフィルターをカスタマイズします。 高機能 モジュールの。

アクセスするために ページ設定で、画面中央の XNUMX つのドットをクリックします。 その後 歯車アイコンを選択 ページ設定が開きます。次にあなた [カスタム CSS] タブに移動します フィルタテキストに背景を追加するには、次のように入力します。

カスタムCSS

この CSS スニペットでは、フィルターの背景色をターゲットにしています。また、そのホバー状態をターゲットにしてスタイルを設定します。次の議題では、モジュールに CSS を追加し、[アクティブフィルター] タブを強調表示します。

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

ポートフォリオフィルターのアクティブなタブスタイル

f のアクティブなタブポートフォリオフィルター ユーザーがアクセスしている現在のポートフォリオカテゴリにユーザーの注意を引き付けます。現在、このフィルターには白いテキストと明るい背景があります。

タブに移動します 高機能 Filterable Portfolio モジュールのテキストを追加し、この機能のデフォルトおよびホバー状態にテキストを追加します。デフォルトの状態で追加する CSS プロパティは次のとおりです。

background: #ff6651;
color: #ffffff !important;

ホバー時の状態

ホバーすると、背景が黒に変わります。

color: #000000!important;

「Divi Conference」を使用した Divi のフィルター可能なポートフォリオのデザインの最終的な外観

これが最終的な外観です！

ホバーするとこんな感じ！

Divi のフィルター可能なポートフォリオモジュールのカスタマイズ: 「Divi オンラインヨガインストラクター」

Divi Conference Edition と同様に、Divi Builder 内の Online Yoga Instructor Layout Pack でレイアウトを見つけてください。

このチュートリアルでは、ランディングページレイアウトを使用します。セクションというタイトルのセクションクラスセクションまでスクロールします。 すべての今後のクラス.

Filterable Portfolio モジュールの挿入

ここから、クラスを含む行を削除します。 点が XNUMX つある紫色のアイコンをクリックします。 。次に、 ワイヤーフレームビューを選択します。 最後に、XNUMX つの列を含む XNUMX つの行を削除します。

次に、それらを内側の行の単一の列に置き換えます。次に、Filterable Portfolio モジュールを追加します。

フィルター可能なポートフォリオを新しいレイアウトに挿入 » BlogPasCher

前の例のように、このモジュールのグリッドレイアウトを使用し、投稿数を 4 の倍数にします。

ここで、マップに表示する情報を少し変えてみましょう。

タブ内 コンテンツ、案内する要素選択解除 カテゴリを表示 . これは、ポートフォリオモジュールがプロジェクトの名前のみを表示し、そのプロジェクトが含まれるカテゴリの名前を表示しないことを意味します。

フィルター基準テキスト、プロジェクトタイトル、ページネーションテキストのカスタマイズ

モジュールのテキスト部分のスタイルベースを定義しましょう。このレイアウトの本文は、 オープンサン 主な見出しに使用されるフォントは チゼル. したがって、スタイリングプロセス全体でこれら XNUMX つのフォントの組み合わせを使用します。

テキスト

テキストの配置: 中央揃え
テキストの色：明るい

タイトルテキスト

タイトルフォント：Cinzel
タイトル文字色：#ffffff

フィルター基準テキスト

フィルター条件フォントの太さ: 太字
フィルター条件のテキストの色: #ffffff

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

ページネーションのフォントの太さ: ボールド

これは、フィルター可能なポートフォリオモジュールが現在どのように見えるかです。それほど多くはありませんが、ゆっくりと進んでいます。

半透明のホバーオーバーレイを作成する

このレイアウトのさまざまなモジュールと美しいグラデーションからインスピレーションを得ましょう。このために、半透明のホバーオーバーレイを作成し、ホバー時にも表示されるアイコンをカスタマイズします。

ズームアイコンの色: #323741
ホバーオーバーレイの色: rgba (255 201 165, 0,85)
ホバーアイコンピッカー: シートを検索し、上のアイコンを表示します

カスタム CSS を使用してポートフォリオグリッド要素に境界線を追加する

最初の例と同様に、CSS を使用して Filterable Portfolio モジュールに関心を追加します。

ここで、ポートフォリオグリッドの個々のアイテムの周りに境界線を追加します。ページ設定のカスタム CSS 部分で以下の CSS スニペットを使用して、境界線を追加します。

また、このモジュールの CSS クラスとして「border」を使用します。

CSS クラス: ボーダー

カスタムCSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

これで、各グリッドアイテムの周りに素敵な境界線 (およびパディング) を持つ Filterable Portfolio モジュールができました。

ページネーションの境界線をスタイルする CSS を追加

前の例とは異なり、CSS を使用してページネーションの境界線に色を追加しましょう。これもエリアに入ります 設定 > カスタム CSS ページ .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

フィルター条件のテキストスタイル

Divi Conference Portfolio モジュールのスタイルと同様に、カテゴリフィルターにジャズを追加します。ここでも、提供されたテンプレートに既に存在するスタイルから描画したいと考えています。

カスタム CSS セクションに追加して、フィルターバーの背景とホバーをターゲットにする CSS を次に示します。

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

カスタム CSS へのこれら XNUMX つの新しい追加により、これが Filterable Portfolio モジュールの外観を形作るものです。

ただし、アクティブなポートフォリオフィルターが失われていることに注意してください。常に明るい背景に白いテキストが表示されます。モジュール設定に移動し、CSS を追加してそれを変更しましょう。

カスタムCSS

アクティブなポートフォリオフィルター:

background: #ffffff;
color: #323741 !important;

style-active-filter-with-css » BlogPasCher

モジュールのアニメーションを削除

よりクリーンなエクスペリエンスを提供するために、Filterable Portfolio モジュールに付属するデフォルトのアニメーションを削除します。このためには、最初にページ設定に戻り、ポートフォリオグリッド要素をターゲットにして削除する CSS を追加する必要があります。スライド遷移それはすぐに起こります。

カスタムCSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

また読みます： Divi：ブログの列数を変更する方法

ポートフォリオグリッドを XNUMX 列から XNUMX 列に変更

最新の CSS の追加により、Filterable Portfolio モジュールが XNUMX 列から XNUMX 列に変わります。これにより、プロジェクトを表示する余地が増えます。

また、モジュールに行を追加します。また、列を変換するために使用できる最新の CSS スニペットも見つかります。

カスタムCSS

この最後のスニペットでは、CSS ID を追加します #XNUMX列グリッド 私たちのモジュールに。以前の CSS クラスをそのまま維持します。

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

今すぐDIVIをダウンロードしてください!!!

まとめ

ほとんどのDiviモジュールと同様に、Diviに付属の設定はCSSでさらに開発できます. 自分の作品を紹介することは、オンラインビジネス、ブログ、またはブランドを運営する上で重要な部分です。

そのため、作品を整理して展示することが不可欠です。今日共有されたヒントを獲得して、Divi の Filterable Portfolio モジュールの独自のデザインジャーニーに参加してください。

このテクニックが、将来のプロジェクトに役立つ別の設計スキルを追加することを願っています。

このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。懸念や提案がある場合は、 コメントセクション それを議論する。

相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。

また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...

ディビ: 「フィルター可能なポートフォリオ」モジュールグリッドの要素をカスタマイズする方法

Divi の Filterable Portfolio モジュールとは何ですか?

Divi のフィルタリング可能なポートフォリオを作成する際に考慮すべき領域

Divi の Filterable Portfolio モジュールをカスタマイズする方法

「Divi Conference」レイアウトの要素の配置

「Divi Online Yoga Instructor」レイアウトの要素の配置

Divi の Filterable Portfolio モジュールのカスタマイズ: 「Divi Conference Edition」

ディビレイアウトライブラリに入る

Divi Layout Library でレイアウトを見つけます

インストールレイアウト

イメージモジュールの取り外しと交換

Divi の Filterable Portfolio モジュールを挿入する

投稿数とポートフォリオのレイアウトを設定する

Divi のフィルター可能なポートフォリオのカスタマイズを開始: タイトルとメタテキスト

プロジェクトのサムネイル枠と角丸を変更

ホバーオーバーレイのカスタマイズ

ページ付けのカスタマイズ

Divi 設定と CSS を使用してフィルターテキストをカスタマイズする

ポートフォリオフィルターのアクティブなタブスタイル

「Divi Conference」を使用した Divi のフィルター可能なポートフォリオのデザインの最終的な外観

Divi のフィルター可能なポートフォリオモジュールのカスタマイズ: 「Divi オンラインヨガインストラクター」

Filterable Portfolio モジュールの挿入

フィルター基準テキスト、プロジェクトタイトル、ページネーションテキストのカスタマイズ

半透明のホバーオーバーレイを作成する

カスタム CSS を使用してポートフォリオグリッド要素に境界線を追加する

ページネーションの境界線をスタイルする CSS を追加

フィルター条件のテキストスタイル

モジュールのアニメーションを削除

ポートフォリオグリッドを XNUMX 列から XNUMX 列に変更

今すぐDIVIをダウンロードしてください!!!

まとめ

私はこれが好き：

類似したアイテム

コメントを投稿 Annulerラréponse

カテゴリー

ラチーム

ガイド

テーマ

プラグイン

資源

ディビ: 「フィルター可能なポートフォリオ」モジュール グリッドの要素をカスタマイズする方法

Divi の Filterable Portfolio モジュールとは何ですか?

Divi のフィルタリング可能なポートフォリオを作成する際に考慮すべき領域

Divi の Filterable Portfolio モジュールをカスタマイズする方法

「Divi Conference」レイアウトの要素の配置

「Divi Online Yoga Instructor」レイアウトの要素の配置

Divi の Filterable Portfolio モジュールのカスタマイズ: 「Divi Conference Edition」

ディビレイアウトライブラリに入る

Divi Layout Library でレイアウトを見つけます

インストールレイアウト

イメージ モジュールの取り外しと交換

Divi の Filterable Portfolio モジュールを挿入する

投稿数とポートフォリオのレイアウトを設定する

Divi のフィルター可能なポートフォリオのカスタマイズを開始: タイトルとメタ テキスト

プロジェクトのサムネイル枠と角丸を変更

ホバー オーバーレイのカスタマイズ

ページ付けのカスタマイズ

Divi 設定と CSS を使用してフィルター テキストをカスタマイズする

ポートフォリオ フィルターのアクティブなタブ スタイル

「Divi Conference」を使用した Divi のフィルター可能なポートフォリオのデザインの最終的な外観

Divi のフィルター可能なポートフォリオ モジュールのカスタマイズ: 「Divi オンライン ヨガ インストラクター」

Filterable Portfolio モジュールの挿入

フィルター基準テキスト、プロジェクト タイトル、ページネーション テキストのカスタマイズ

半透明のホバー オーバーレイを作成する

カスタム CSS を使用してポートフォリオ グリッド要素に境界線を追加する

ページネーションの境界線をスタイルする CSS を追加

フィルター条件のテキスト スタイル

モジュールのアニメーションを削除

ポートフォリオ グリッドを XNUMX 列から XNUMX 列に変更

今すぐDIVIをダウンロードしてください!!!

まとめ

この記事を共有する：

私はこれが好き ：

類似したアイテム

コメントを投稿 Annulerラréponse

カテゴリー

ディビ: 「フィルター可能なポートフォリオ」モジュールグリッドの要素をカスタマイズする方法

イメージモジュールの取り外しと交換

Divi のフィルター可能なポートフォリオのカスタマイズを開始: タイトルとメタテキスト

ホバーオーバーレイのカスタマイズ

Divi 設定と CSS を使用してフィルターテキストをカスタマイズする

ポートフォリオフィルターのアクティブなタブスタイル

Divi のフィルター可能なポートフォリオモジュールのカスタマイズ: 「Divi オンラインヨガインストラクター」

フィルター基準テキスト、プロジェクトタイトル、ページネーションテキストのカスタマイズ

半透明のホバーオーバーレイを作成する

カスタム CSS を使用してポートフォリオグリッド要素に境界線を追加する

フィルター条件のテキストスタイル

ポートフォリオグリッドを XNUMX 列から XNUMX 列に変更

私はこれが好き：