他のモジュールをDiviでぼかしてホバーされた宣伝モジュールを強調表示する方法

構築しているWebサイトの種類が何であれ、ある時点で、さまざまなサービスや手順などのリストを表示したくなる可能性が高くなります。 このようなリストを魅力的に作成するための最も簡単な方法の1つは、Diviの宣伝文句モジュールを使用することです。 宣伝文句モジュールを使用すると、リストコンテンツを美しく構成しながら、無限のデザインの可能性を提供できます。

今日のチュートリアルでは、さらに一歩進んで、表示した他の宣伝文をぼかして、ホバーした宣伝文モジュールを強調表示する方法を示します。 これは、他の宣伝文モジュールが読者の気を散らすことなく、一度に1つの宣伝文モジュールに焦点を合わせるための優れた方法です。 訪問者が別の宣伝文句モジュールに移動するとすぐに、そのモジュールが強調表示されたモジュールになります。 レイアウトのJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

ホバー宣伝文モジュールのレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

新しいセクションを追加

背景色

新しいページまたは作業中のページに通常のセクションを追加することから始めます。 セクション設定を開き、背景色を変更します。

• 背景Coor：#eaeaea

間隔

いくつかのカスタムマージンとパディング値も追加します。

• トップマージン：2vw
• 下マージン：2vw
• 左マージン：2vw
• 右マージン：2vw
• トップパディング：0px
• ボトムパディング：0px

国境

境界線の半径を追加して、セクションの設定を完了します。

• すべてのコーナー：20px

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。 [列の高さを均等化]オプションを有効にすると、列の内容を揃える次の手順に役立ちます。

• 列の高さを等しくする：はい
• 幅：90％
• 最大幅：1580px
• 最小の高さ：500px（デスクトップ）、自動（タブレットと電話）

主な要素

行のメイン要素にCSSコードを1行追加して、列の内容を揃えます。

align-items: center;

列1に宣伝文モジュールを追加する

コンテンツを追加する

このチュートリアル全体で使用しているモジュールはBlurbモジュールのみですが、次の手順で共有するCSSクラスを追加する限り、このモジュールを任意のモジュールに置き換えることができます。 最初の宣伝文モジュールを列1に追加し、選択したコンテンツを挿入します。

アイコンを選択

次にアイコンを選択します。

ホバーグラデーションの背景

次に、ホバーでのみグラデーションの背景を使用します。

• 色1：#ffffff
• 色2：＃0f1bff
• グラデーションタイプ：線形
• 開始位置：20％
• 終了位置：20％

デフォルトのアイコン設定

モジュールの[デザイン]タブに移動し、アイコンの設定を次のように変更します。

• アイコンの色：#ffffff
• 円のアイコン：はい
• 円の色：#ffffff
• 画像/アイコンの配置：上
• 画像/アイコンの配置：左

ホバーアイコンの設定

ホバー時にさまざまなアイコンの色を変更します。

• アイコンの色：＃0f1bff
• 円の色：＃f7f7f7

デフォルトのタイトルテキスト設定

タイトルテキストの設定を変更して続行します。

• タイトルフォント：Source Sans Pro
• タイトルフォントの太さ：太字
• タイトルフォントスタイル：大文字

タイトルテキスト設定にカーソルを合わせる

ホバー時にタイトルテキストの色を変更します。

• タイトルテキストの色：#ffffff

デフォルトの本文テキスト設定

次は本文の設定です。

• ボディフォント：Open Sans
• ボディラインの高さ：2em

本文のテキスト設定にカーソルを合わせる

白いホバーテキストの色を使用します。

• 本文の色：#ffffff

間隔

次に、間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• トップパディング：50px
• ボトムパディング：50px
• 左パディング：50px
• 右パディング：50px

デフォルトのボックスシャドウ

ボックスシャドウも使用しています。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-20px
• 影の色：rgba（255,255,255,0.18）

ホバーボックスシャドウ

ホバー時にシャドウの色を変更します。

• 影の色：rgba（0,0,0,0.18）

CSSクラス

また、宣伝文句の効果を実現するには、CSSクラスを宣伝文句モジュールに割り当てる必要があります。 投稿の後半で、このCSSクラスをいくつかのJQueryコードで使用します。

• CSSクラス：blurb-item

宣伝文句モジュールを2回クローンし、残りの列に複製を配置します

列1の宣伝文句モジュールを完了したら、それを2回複製して、行の残りの列に複製を配置できます。

行全体のクローンを作成する

ページに表示するBlurbモジュールの数に応じて、行を何度でも複製できます。

宣伝文モジュールを個別にカスタマイズする

もちろん、各宣伝文モジュールの個々のコンテンツを変更する必要があります。

新しい行を追加

カラム構造

次の列構造を使用して、セクションに別の行を追加します。

間隔

行設定を開き、デフォルトの上部と下部のパディングをすべて削除します。 これにより、この行が占めるスペースを減らすことができます。

• トップパディング：0px
• ボトムパディング：0px

コードモジュールを列に追加

JQueryとCSSコードを挿入する

行の列にコードモジュールを追加し、JQueryおよびCSSコードを挿入して効果を実現します。 以下の印刷画面に表示されているように、スクリプトタグの間にJQueryコードを配置し、スタイルタグの間にCSSコードを配置することを忘れないでください。

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Webサイトで共有する宣伝文モジュールを使用してクリエイティブにする方法を紹介しました。 具体的には、表示した他の宣伝文をぼかして、ホバーした宣伝文モジュールを強調表示する方法を示しました。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。