Diviでクールホバー効果を使用してカテゴリレイアウトで最近の投稿をデザインする方法

私たちは皆、最近の投稿がWebサイトに表示されるのを見るのに慣れています。 これらは通常、WordPressの最近の投稿ウィジェットまたはプラグインを使用して生成され、ブログで最近公開された記事を表示します。 そして、それらは通常、ブログページ、投稿の下部、サイドバー、またはランディングページの注目セクション（このようなもの）として表示されます。

このチュートリアルでは、最近の投稿をカテゴリ別に表示する方法を紹介します。 Divi Builder（およびいくつかのブログモジュール）のみを使用して、4つの異なるカテゴリからの最新の投稿を表示するセクションを作成します。 カテゴリ別のこの最近の投稿には、固有のカテゴリタグ、アニメーション、ホバー効果が含まれます。これらはすべてプラグインなしで行われます。

見てみな！

スニークピーク

これは、一緒に構築するカテゴリレイアウト別の最近の投稿のデザインと機能の概要です。

カテゴリレイアウト別の最近の投稿を無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 iresubscribediになったり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. また、最近の投稿セクションの機能は、カテゴリが割り当てられた実際のブログ投稿がサイトにあるかどうかによって異なります。 したがって、テストサイトを使用している場合は、いくつかの模擬ブログ投稿が設定されていることを確認してください。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviのカテゴリセクションごとに最近の投稿を作成する

4列の行を作成する

Divi Builderで作業を開始するには、4列の行を作成します。

ブログモジュール1の作成

4つの列のそれぞれは、個別のブログモジュールを保持します。 最初のブログモジュールを列1に追加します。

各ブログモジュールには、デフォルトでサイトからの最新の投稿が表示されます。 これから行うのは、特定のブログモジュールに含める特定のカテゴリを選択することだけです。 次に、投稿数を1に制限して、1つの投稿のみが表示されるようにします。 これにより、そのカテゴリの最新のブログ投稿が動的に提供されます。

ブログコンテンツ

ブログコンテンツオプションを次のように更新します。

• 投稿タイプ：投稿
• 投稿数：1
• 含まれるカテゴリ：ニュース（または独自のニュース）
• 投稿の抜粋を使用する：いいえ
• 抜粋の長さ：120

要素オプション

次に、要素オプションを次のように更新します。

• カテゴリを表示：いいえ
• 抜粋を表示：いいえ（デスクトップ）、はい（ホバーとタブレット）
• ページ付けを表示：いいえ

ブログデザイン

次に、次のようにデザインを更新します。

• 背景色（デスクトップ）：＃ffffff
• 背景色（ホバー）：＃8ac829
• タイトルフォントの太さ：半太字
• タイトルフォントスタイル：TT
• タイトルテキストサイズ：24px
• タイトル文字の間隔：1px
• タイトルラインの高さ：1.4em
• 本文の色：#ffffff
• メタフォントの太さ：軽い
• メタ文字の間隔：3px

• 最小の高さ：450px（デスクトップ）、自動（タブレット）
• パディング：上5％、下5％、左5％、右5％
• ボックスシャドウ：スクリーンショットを参照
• アニメーションスタイル：ズーム

これで、最初のブログモジュールのデザインが処理されます。 次に、カスタムカテゴリタグを作成する必要があります。

カテゴリタグの作成1

タグを作成するには、ブログモジュールの下に新しいテキストモジュールを追加してから、ブログモジュールの上にドラッグします。

テキストコンテンツ

ブログモジュール用に選択したカテゴリの名前で本文のコンテンツを更新します。 私の例では、ニュースカテゴリの最近の投稿を表示しているので、本文のコンテンツに「ニュース」という単語を追加します。

カテゴリタグのデザイン

テキストデザイン設定で、以下を更新します。

• 背景色：＃8ac829
• テキストフォントの太さ：超太字
• テキストテキストの色：#ffffff
• テキストの配置：中央
• 幅：120px
• マージン：上80px、下-80px
• パディング：上10px、下10px
• アニメーションスタイル：フェード
• アニメーションの遅延：1000ms
• Zインデックス：1

負のマージンを使用してタグをブログカードの上にドロップしているため、タグがブログモジュールの上にとどまるように、zインデックスを1に設定する必要があります。

1つの投稿が完了したので、ワイヤーフレームビューモードを展開し、それらのモジュールを他の列にコピーできます。

列1のテキストとブログモジュールをコピーして、列2、3、および4に貼り付け、各列にまったく同じモジュールが含まれるようにします。

重複するブログモジュールごとに、新しいブログカテゴリを指定し、背景色をホバーする必要があります。 また、重複するカテゴリタグごとに、ブログモジュール用に選択したカテゴリに対応するようにカテゴリ名を更新してから、ブログモジュールのホバー背景色と一致するように背景色を更新する必要があります。

列2のモジュールを更新します

ワイヤーフレームビューのままで、列2のブログモジュールの設定を開き、以下を更新します。

• 含まれるカテゴリー：ビジネス（またはあなた自身）
• 背景色（ホバー）：＃f64937

次に、列2のテキストモジュールの設定を次のように更新します。

• 本文：「ビジネス」
• 背景色：＃f64937

列3のモジュールを更新します

次に、列3のブログモジュールの設定を開き、以下を更新します。

• 含まれるカテゴリー：お金（またはあなた自身）
• 背景色（ホバー）：＃6529c7

次に、列3のテキストモジュールの設定を次のように更新します。

• 本文：「お金」
• 背景色：＃6529c7

列4のモジュールを更新します

次に、列4のブログモジュールの設定を開き、以下を更新します。

• 含まれるカテゴリー：コーチング（またはあなた自身）
• 背景色（ホバー）：＃f17809

次に、列4のテキストモジュールの設定を次のように更新します。

• 本文：「コーチング」
• 背景色：＃f17809

行設定の更新

設定された高さやカスタムのガター幅など、行に加える必要のある調整がいくつかあります。 次の行設定を更新します。

• カスタムガター幅を使用：はい
• 側溝幅：2
• 幅：94％
• 最大幅：1400px
• 高さ：540px（デスクトップ）、自動（タブレット）
• パディング：0px上、0px下

ブログカードにカーソルを合わせたときに行が拡大したり、ページ上の他のコンテンツを移動したりしないように、デスクトップでは行の高さを540pxに設定しています。 タブレットで高さを自動に設定して、コンテンツが非表示にならないようにしてください。

各列の設定を更新する

最近のブログ投稿に両方のモジュールに同時に適用されるホバー効果を与えるために、ブログ投稿を構成する2つのモジュールを含む列にホバー効果を追加できます。 各列の設定を開き、以下を更新します。

• 変換スケール（ホバー）：115％

次に、次のカスタムCSSをタブレットディスプレイのメイン要素にのみ追加します。

transform: none !important

この小さなスニペットは、モバイルの変換スケールホバー効果を無効にします。

これで、最近の投稿がすべて、対応するカテゴリタグと、カードにカーソルを合わせたときに表示される一致する背景色で設定されます。 また、カードが大きくなり、ホバーの抜粋も表示されます。

セクション設定の更新

このセクションでは、新しい背景のグラデーションといくつかのパディングを追加しましょう。 セクション設定を開き、以下を更新します。

• 背景のグラデーションの左の色：＃6529c7
• 背景のグラデーションの正しい色：＃f64937
• 勾配方向：270度
• パディング：10vw上部、10vw下部

最終結果

それでおしまい！ 最終結果を確認してみましょう。 この画像には、デザインを完成させるために簡単に追加できるタイトルが含まれています。

そして、これがアニメーションとホバー効果です。

最終的な考え

カテゴリレイアウトによる最近の投稿の作成は、ボックスの外側を少し考えれば、本当に簡単なプロセスです。 あなたが本当にする必要があるのはあなたが表示したいすべてのカテゴリーのためにブログモジュールを作成することです。 次に、そのモジュールを特定のカテゴリの最新の投稿のみを表示するように制限します。 その後、あなたはあなたの側でデザインの世話をするDiviの力を持っています。

このレイアウトは、テーマビルダーテンプレートを含め、サイトのどこでも使用できます。 したがって、移植性オプションを使用して、必要な場所に自由にインポートしてください。 それがあなたの次のプロジェクトに役立つか、少なくともそれらのホイールを回転させてさらに優れたDiviデザインを実現するための少しのインスピレーションを与えてくれることを願っています。

コメントでお返事をお待ちしております。

乾杯！