Diviのフィルター可能なポートフォリオモジュールでカテゴリーフィルターをスタイルする方法

Divi の Filterable Portfolio Module には多くの要素が含まれており、それぞれを個別にスタイル設定できます。 フィルターは最も便利な要素の 1 つですが、見過ごされがちです。 この投稿では、Divi の Filterable Portfolio Module でカテゴリ フィルターのスタイルを設定する方法について説明します。 標準設定で何ができるかを確認し、CSS を掘り下げてさらにスタイルを設定する方法を確認します。

始めましょう！

プレビュー

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

デスクトップ カテゴリ フィルタの例 1

電話カテゴリ フィルタの例 1

デスクトップ カテゴリ フィルタの例 2

電話カテゴリ フィルタの例 2

デスクトップ カテゴリ フィルタの例 3

電話カテゴリ フィルタの例 3

プロジェクトをカテゴリに分割する

カテゴリ フィルターを最大限に活用するには、読者にとって最も意味のあるカテゴリにプロジェクトを分割する必要があります。 カテゴリを作成するには、WordPress ダッシュボードの [プロジェクト] > [カテゴリ]に移動します。

ここには、名前、スラッグ、親カテゴリ、および説明を追加するためのフィールドが表示されます。 また、編集可能なリストにカテゴリのリストが表示されます。

カテゴリを作成したら、読者にとって最も意味のあるカテゴリをプロジェクトごとに選択してください。 プロジェクトを作成するには、[プロジェクト] に移動し、メニューまたはページの上部にある [新規追加] をクリックします。

私の例では、住宅改修会社のプロジェクトを作成しました。 同社は住宅の改修に重点を置いていますが、企業向けの同様の作業も含まれており、ゼロから構築することができます. 家の場合、インテリアとエクステリアのカテゴリを使用しています。 他のすべての作業については、企業と建設を追加しました。

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

この例では、ポートフォリオ ページのポートフォリオ セクションを無料の Renovation Layout Pack から Filterable Portfolio Module に置き換えます。 まず、モジュールのスタイルを設定する方法を見てみましょう。 次に、3 つの異なる方法でフィルターのスタイルを設定します。 変更前のページはこちら。

画像の代わりに Filterable Portfolio Module を追加した後のページを次に示します。

まず、モジュールのスタイルを設定します。 3 つの例すべてでこれらの同じ設定を使用します。

コンテンツ

[コンテンツ] タブで、[投稿数] を 8 に設定し、含まれるカテゴリのリストからカテゴリを選択します。

• 投稿数: 8
• 含まれるカテゴリ: あなたの選択

要素

Elementsまで下にスクロールし、 Show Categoriesを無効にします。 タイトルのみを使用し、フィルタでカテゴリを表示できるようにします。

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

レイアウト

次に、[デザイン] タブに移動し、[レイアウト] の下の [グリッド] を選択します。 以前の画像で既に選択していましたが、モジュールはデフォルトで全幅表示されます。

• レイアウト: グリッド

文章

次に、[テキスト] までスクロールし、[テキストの配置]を [中央] に設定します。 これにより、フィルターとページネーションがモジュールに、タイトルがプロジェクト画像に集中します。

• テキストの配置: 中央

タイトルテキスト

次に、 Title Textまでスクロールします。 Fontを Kanit に変更し、 Weightを Semi Bold に設定します。 色を黒に設定します。

• フォント: カニット
• 重さ: セミボールド
• 色: #000000

フォント サイズをデスクトップの場合は 20 ピクセル、タブレットの場合は 18 ピクセル、スマートフォンの場合は 16 ピクセルに変更します。 行間隔を 1px に、行の高さを 1.3em に設定します。

• サイズ: デスクトップ 20px、タブレット 18px、スマートフォン 16px
• 文字間隔: 1px
• 行の高さ: 1.3em

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

次に、 Pagination Textまで下にスクロールし、フォントを Kanit に変更します。 色を黒に変更します。

• フォント: カニット
• 色: #000000

行間隔を 1px に変更します。 作業を保存します。 例のカテゴリ フィルターのスタイルを設定できるようになりました。

• 文字間隔: 1px

カテゴリ フィルタの例

これで、カテゴリ フィルターの例に移ることができます。 レイアウト パックのデザイン キューを使用しています。

カテゴリ フィルタの例 1

最初の例は、3 つの中で最も単純です。 基本的な設定を使用し、派手なことは何もしません。 レイアウトデザインとの相性も抜群です。

フィルター基準テキスト

[デザイン] タブで、[基準テキスト] まで下にスクロールします。 フォントを Kanit に変更します。 スタイルを TT に、カラーを黒に変更します。

• フォント: カニット
• スタイル: TT
• 色: #000000

行間隔を 1px に設定し、行の高さを 1.3em に設定します。 1つ目は以上です。 ここで、設定を保存してモジュールを閉じます。

• 文字間隔: 1px
• 行の高さ: 1.3em

カテゴリ フィルタの例 2

2 番目の例では、モジュールとページに単純な CSS を使用して、角を丸くし、ボックスの影を作成します。 これが一番違うようです。

フィルター基準テキスト

[デザイン] タブに移動し、[フィルター基準テキスト] まで下にスクロールします。 フォントを Kanit に変更します。 色を黒、サイズを 16px、行の高さを 1.5em に設定します。 フォント サイズはすべての画面サイズで適切に機能するため、タブレットや電話用に調整する必要はありません。

• フォント: カニット
• 色: #000000
• サイズ: 16px
• 行の高さ: 1.5em

モジュールCSS

次に、[詳細設定] タブに移動します。 Active Portfolio Filterまで下にスクロールし、背景色のCSSを追加して、モジュールを閉じます。 これにより、アクティブなフィルターの背景色が変更されます。 ユーザーがクリックしたフィルターはこの背景色に変更され、前のフィルターは通常の色に戻ります。

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

  background-color:#ffd000;

ページ設定 CSS

次に、ページメニューのページ設定を開きます。 ページ設定モーダルで、[詳細設定] タブを選択し、カスタム CSSをフィールドに貼り付けます。 この CSS は、フィルター アイテムから境界線を削除し、25px の境界線半径を作成し、アイテム間に 5px の余白を追加します。 また、アイテムの下部に小さなボックス シャドウを追加し、シャドウの色を変更します。 モジュールを閉じて、設定を保存します。

• カスタム CSS:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

カテゴリ フィルタの例 3

3 番目の例は、前の例と同様の CSS デザインのアイデアに従います。 丸みを帯びた角は含まれず、ホバー時にフォントと背景の色が変更されます。 また、モジュールとページの両方に CSS を使用します。

フィルター基準テキスト

[デザイン] タブに移動し、[フィルター基準テキスト] まで下にスクロールします。 Fontに Kanit を選択し、 Styleを TT に、 Colorを白に設定します。

• フォント: カニット
• スタイル: TT
• 色: #ffffff

次に、テキストの色のホバー オプションを選択し、色を黒に変更します。 これにより、ホバー時のフォントが処理されます。 背景は CSS で処理します。 文字間隔を 1px に、行の高さを 1.3em に変更します。

• ホバーカラー: #000000
• 文字間隔: 1px
• 行の高さ: 1.3em

モジュールCSS

次に、[ Advanced ] タブに移動し、[ Active Portfolio Filter ] まで下にスクロールします。 次のCSSを追加して、アクティブなフィルターの背景を変更します。 モジュールを閉じます。

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

  background-color:#ffd000

ページ設定 CSS

最後に、ページ設定を開きます。 [詳細設定] タブに移動し、次のカスタム CSSを入力します。 モジュールを閉じて、設定を保存します。 これにより、背景が黒に変更され、上下に 15 ピクセルのパディングが追加され、左右に 30 ピクセルのパディングが追加されます。 これにより、フィルタ アイテムのサイズが変更され、レイアウト内のボタンにぴったりと一致するようになり、ホバー効果の色の変化を作成するのに役立ちます。 ホバーすると背景が白に変わります。

• カスタム CSS:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

結果

デスクトップ カテゴリ フィルタの例 1

電話カテゴリ フィルタの例 1

デスクトップ カテゴリ フィルタの例 2

電話カテゴリ フィルタの例 2

デスクトップ カテゴリ フィルタの例 3

電話カテゴリ フィルタの例 3

終わりの思い

これが、Divi の Filterable Portfolio Module でカテゴリ フィルターのスタイルを設定する方法です。 カテゴリ フィルターには、他の要素と同じスタイリング ツールが含まれているため、任意の Divi レイアウトで動作するように簡単にスタイルを設定できます。 モジュールとページの両方に CSS を追加することで、多くのユニークな方法でカテゴリ フィルターをスタイルして、群集から際立たせることができます。

私たちはあなたから聞きたい。 Divi の Filterable Portfolio Module でカテゴリ フィルターのスタイルを設定しましたか? コメントでお知らせください。