Divi の Filterable Portfolio Module でページネーションのスタイルを設定する方法

Divi のフィルター可能なポートフォリオ モジュールは、作品やプロジェクトを Web サイトに表示する優れた簡単な方法です。 カテゴリを使用して、ポートフォリオ モジュール用のさまざまなフィルターを作成できます。これにより、Web サイトのデザインを毎回変更することなく、ポートフォリオを最新の状態に保つ簡単な方法が提供されます。 WordPress ダッシュボードに新しいプロジェクトを追加するだけで、適切に分類されている限り、Web サイトのポートフォリオ モジュールに自動入力されます。

このチュートリアルでは、Divi のフィルター可能なポートフォリオ モジュールでページネーションをスタイルする 3 つの異なる方法を紹介します。 このデザインをカスタマイズすることで、ポートフォリオ モジュールを Web サイトの全体的なデザインに適合させ、表示したい作品に注目を集めることができます。

始めましょう！

スニークピーク

これが私たちがデザインするもののプレビューです

ページネーション スタイル 1

ページネーション スタイル 2

ページネーション スタイル 3

始めるために必要なもの

Divi をインストールしてアクティブ化する

開始する前に、Divi テーマをインストールしてアクティブ化し、Web サイトに最新バージョンの Divi があることを確認してください。

ポートフォリオ プロジェクトの追加

ポートフォリオをページに追加すると、ポートフォリオにプロジェクトが入力されるようにするには、最初に WordPress ダッシュボードにプロジェクトを追加する必要があります。 WordPress ダッシュボードのサイドバーで [プロジェクト] を選択し、新しいプロジェクトを追加します。 フィルタリングできるように、プロジェクトに注目の画像とカテゴリがあることを確認してください。

これで、開始する準備が整いました。

Divi の Filterable Portfolio Module でページネーションのスタイルを設定する方法

既製のレイアウトで新しいページを作成する

まず、Divi ライブラリから事前に作成されたレイアウトを使用してみましょう。 このデザインには、Painter レイアウト パックの Painter ポートフォリオ ページを使用します。

ウェブサイトに新しいページを追加し、タイトルを付けて、Divi Builder を使用するオプションを選択します。

この例では、Divi ライブラリから事前に作成されたレイアウトを使用するため、[Browse Layouts] を選択します。

Painter Portfolio Page レイアウトを検索して選択します。

[このレイアウトを使用] を選択して、レイアウトをページに追加します。

これで、デザインを構築する準備が整いました。

フィルタリング可能なポートフォリオ モジュールを追加する

このページの既存のポートフォリオ コンテンツをフィルター可能なポートフォリオ モジュールに置き換えます。 まず、既存のポートフォリオ セクションを削除します。

次に、ページの「最近の作業」セクションの下に新しいセクションを挿入します。

次に、1 列の行をセクションに追加します。

フィルター可能なポートフォリオ モジュールを新しい行に追加します。

WordPress ダッシュボードのプロジェクト セクションにプロジェクトが追加されている限り、フィルタリング可能なポートフォリオにプロジェクトが表示されます。

フィルタリング可能なポートフォリオ設定

次に、フィルタリング可能なポートフォリオのデザインをカスタマイズしましょう。 モジュール設定を開き、投稿数を 6 に変更します。

• 投稿数: 6

要素の下で、カテゴリの表示を無効にします。

• カテゴリを表示: いいえ

[デザイン] タブに移動し、[レイアウト] 設定を開きます。 レイアウトをグリッドに設定します。

• レイアウト: グリッド

次に、オーバーレイ設定を開きます。 ズーム アイコンの色、ホバー オーバーレイの色、およびホバー アイコン ピッカーを次のように設定します。

• ズーム アイコンの色: #fdd23a
• ホバー オーバーレイの色: rgba(61,61,61,0.28)
• ホバー アイコン ピッカー: プラス アイコン

画像設定を開き、画像ボックスの影を追加します。

次に、影の色を設定します。

• 影の色: #f2f2f2

次に、タイトルのフォント設定を次のように変更します。

• タイトルのフォント: メリウェザー
• タイトルのフォントの太さ: 太字
• タイトル文字色#000000

タイトルのテキスト サイズと行の高さを設定します。

• タイトルのテキスト サイズ: 25px
• タイトル行の高さ: 2em

Filter Criteria Text セクションに移動し、次のようにフォント設定を変更します。

• フィルター条件のフォント: モントセラト
• フィルター条件 フォントの太さ: 太字
• フィルタ基準のテキストの色: #000000

モジュール設計のほとんどが完了したので、ページネーション スタイルのカスタマイズに進むことができます。

ページネーション スタイル 1

最初のページネーション スタイルでは、アクティブなページに別のフォントの色を設定します。 さらに、ホバー時にページネーションのテキスト サイズが大きくなるように設定します。 始めましょう。

フィルタリング可能なポートフォリオ設定内で、ページネーション テキスト設定を開きます。 次のようにフォントをカスタマイズします。

• ページネーションのフォント: Montserrat
• ページネーションのフォントの太さ: ボールド
• ページネーション テキストの配置: 右
• ページネーションのテキストの色: #000000

文字サイズを設定します。 それで。 ホバー設定を使用して、ホバー時のテキスト サイズを大きくします。

• ページネーションのテキストサイズ: 17px
• ホバー時のページネーション テキスト サイズ: 21px

最後に、[Advanced] タブに移動し、次のカスタム CSS を [Pagination Active Page CSS] セクションに追加します。 これにより、アクティブなページで黄色が有効になります。

color: #FDD23A !important;

最終設計

これが最初のデザインの最終的な外観です。

ページネーション スタイル 2

設計する 2 番目のページネーション スタイルには、ページネーションの背後にある背景色、いくつかのホバー カラー効果、およびアクティブなページの別の色が含まれます。

フィルタリング可能なポートフォリオ設定内で、ページネーション テキスト設定を開きます。 次のようにフォントをカスタマイズします。

• ページネーションのフォント: Merriweather
• ページネーションのフォントの太さ: ボールド
• ページネーション テキストの配置: 中央
• ページネーションのテキストの色: #9e9e9e
• ホバー時のページネーション テキストの色: #000000

次に、文字サイズと行の高さを設定します。

• ページネーションのテキストサイズ: 26px
• ページネーション行の高さ: 2em

[詳細] タブに移動し、次のカスタム CSS を [ポートフォリオ ページネーション CSS] セクションに追加します。 これにより、背景色が追加され、境界線が削除されます。

background:#f2f2f2;
border:none;

最後に、次の CSS を Pagination Active Page CSS セクションに追加して、アクティブなページに別のテキストの色を設定します。

color: #000000 !important;

最終設計

これが、2 番目のページネーション スタイルの最終的なデザインです。

ページネーション スタイル 3

ページネーションの最終的なデザインとして、アクティブなページの後ろに黄色の円を追加します。 また、アクティブなページとホバー時に異なるフォントの色を設定します。

フィルタリング可能なポートフォリオ設定内で、ページネーション テキスト設定を開きます。 次に、フォントを次のようにカスタマイズします。

• ページネーションのフォント: Merriweather
• ページネーションのフォントの太さ: ボールド
• ページネーション テキストの配置: 中央
• ページネーションのテキストの色: #000000
• ホバー時のページネーション テキストの色: #FDD23A
• ページネーションのテキストサイズ: 26px

[詳細設定] タブに移動し、次のカスタム CSS を [ポートフォリオのページ付け CSS] セクションに追加して境界線を削除します。

border:none;

最後に、次の CSS を Pagination Active Page CSS セクションに追加します。 この CSS は、アクティブなページに別のテキストの色と円形の背景を設定します。

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

最終設計

これが最後のレイアウトの最終的なデザインです。

最終結果

それでは、異なるページネーション スタイルを使用した 3 つの最終的なデザインすべてを見てみましょう。

ページネーション スタイル 1

ページネーション スタイル 2

ページネーション スタイル 3

最終的な考え

フィルタリング可能なポートフォリオ モジュールは、Web サイトのデザインに合わせて簡単にカスタマイズでき、WordPress ダッシュボードから新しいプロジェクトをすばやく追加して、ポートフォリオを最新の状態に保つことができます。 このモジュールは、デザイナー、アーティスト、写真家、その他のクリエイティブが、美しい画像と簡単なナビゲーションで自分の作品を披露するのに最適です。 よりユニークなポートフォリオ デザインのアイデアについては、ダイナミック ポートフォリオ プロジェクト テンプレートの作成に関するこのチュートリアルをご覧ください。 ウェブサイトでフィルタリング可能なポートフォリオ モジュールを使用したことがありますか? コメントでお知らせください！