Diviでホバーのグラデーションの背景を変更する方法
公開: 2019-01-05ウェブサイトを作成することは、すべての詳細が正しいことを確認することです。 デザインの細部に注意を払うと、すぐにウェブサイトの品質が向上します。 Diviの新しいホバーオプションを使用すると、Webサイトに小さなインタラクションを簡単に追加できます。 ホバーオプションは、ほとんどすべてのデザイン設定に適用されます。 たとえば、ホバー時にグラデーションの背景を間接的に変更して、適切なトランジションを作成できます。 それがまさにこのブログ投稿でお見せするものです。 グラデーションの移行を実現するだけでなく、構築するあらゆる種類のWebサイトで自由に使用できる見事なデザイン例を最初から作成します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの最終結果を簡単に見てみましょう。
静的
ホバー
イラストを無料でダウンロード
ビデオゲームレイアウトパックからの無料イラストを手に入れるには、まず下のボタンを使用してイラストをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日と金曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
作り始めましょう！
私たちのYoutubeチャンネルを購読する
セクション＃1を追加
間隔
最初に行う必要があるのは、新しいページを作成するか、既存のページを開いて新しい通常のセクションを追加することです。 設定を開き、カスタムの上下マージンを追加します。
- トップパディング：100px
- ボトムパディング：100px
行＃1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
列1のデフォルトの背景色
モジュールをまだ追加せずに、行設定を開き、次のデフォルトの背景色を列1に追加します。
- 背景色：＃e7ffa0
列1ホバーの背景色
ホバー時にこの背景色を変更します。
- 背景色：＃00020c
列1のグラジエントバックグラウンド
列1にもグラデーションの背景色を追加します。 完全に透明な1色を使用していることに気付くでしょう。 この色により、背景色が透けて見え、ホバーすると変化します。
- 色1：rgba（255,255,255,0）
- 色2：rgba（16,0,201,0.8）
- 列1の勾配タイプ：線形
- 列1の勾配方向：50度
- 列1の開始位置：20％
列2の背景色
列2の背景色も追加します。
- 列2の背景色：#ffffff
サイジング
次に、[デザイン]タブに移動し、サイズ設定を変更します。
- カスタム幅を使用：はい
- ユニット：PX
- カスタム幅：2000px
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
間隔設定にいくつかのカスタムパディング値を追加して続行します。
- トップパディング：0px
- ボトムパディング：0px
- 列2の上部パディング：6vw（デスクトップ）、120px（タブレットと電話）
- 列2の下部パディング：6vw（デスクトップ）、120px（タブレットと電話）
- 列2の左パディング：5vw（デスクトップ）、80px（タブレット）、50px（電話）
- 列2の右パディング：5vw（デスクトップ）、80px（タブレット）、50px（電話）
ボックスシャドウ
また、行に微妙なボックスシャドウも付けます。
- ボックスシャドウブラー強度：100px
- ボックスシャドウスプレッド強度：-10px
トランジション
最後になりましたが、[詳細設定]タブでトランジションの期間を長くすることで、滑らかなグラデーションの背景トランジションを作成します。
- 移行時間：1100ms
列1に画像モジュールを追加
画像をアップロード
モジュールの追加を開始する時が来ました！ 最初の列に画像モジュールを追加し、この投稿の冒頭でダウンロードしたzipフォルダーにある「 divi-gradient-background-on-hover-illustration-1.png 」ファイルをアップロードします。
グラデーションの背景
この画像モジュールの背景設定に移動し、グラデーションの背景を追加します。 他の色が透けて見えるように、1つの完全に透明な色を再び使用しています。
- 色1：rgba（50,217,255,0.66）
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：上
- 終了位置：57％
間隔
次に、モジュールにカスタムトップパディングを追加します。
- トップパディング：14vw
タイトルテキストモジュールを列2に追加
コンテンツを追加する
2列目へ！ 最初に必要なモジュールは、タイトルのテキストモジュールです。 先に進み、選択した見出しコンテンツをいくつか追加します。
見出しテキストの設定
次に、見出しのテキスト設定に移動して、いくつかの変更を加えます。
- 見出しフォント：Abril Fatface
- 見出しのテキストの色：＃000000
- 見出しのテキストサイズ：4vw（デスクトップ）、60px（タブレット）、40px（電話）
説明テキストモジュールを列2に追加
コンテンツを追加する
必要な2番目のモジュールは別のテキストモジュールです。 選択したコンテンツをいくつか追加します。
テキスト設定
次に、テキスト設定に移動し、テキストの向きを変更します。
- テキストの向き：正当化
サイジング
サイズ設定でも幅を調整します。
- 幅：73％（デスクトップ）、100％（タブレットと電話）
間隔
最後に、モジュールにカスタムの上下の余白を追加して、空白を作成します。
- トップマージン：2.5vw（デスクトップ）、50px（タブレットと電話）
- 下マージン：2.5vw（デスクトップ）、50px（タブレットと電話）
ボタンモジュールを列2に追加
コピーを追加
2番目の列に必要な3番目で最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。
ボタンの設定
次にボタンの設定を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1.2vw（デスクトップ）、14px（タブレットと電話）
- ボタンのテキストの色：#ffffff
- グラデーションカラー1：＃9ea6ff
- グラデーションカラー2：rgba（16,0,201,0.8）
- グラデーション方向：78度
- ボタンの境界線の幅：0px
- ボタンの境界線半径：30px
- ボタンの文字間隔：-1px
- フォントの太さ：超太字
- フォントスタイル：大文字
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：10px
- ボトムパディング：10px
- 左パディング：40px
- 右パディング：40px
ボックスシャドウ
そして、ボタンに微妙なボックスシャドウを適用します。
- ボックスシャドウブラー強度：40px
セクション＃2を追加
間隔
最初のセクションが終了したので、次のセクションに進みます。 次のカスタムパディング値を使用して、新しい通常のセクションを追加します。
- トップパディング：100px
- ボトムパディング：100px
行＃2を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
列1の背景色
モジュールをまだ追加せずに、行の設定を開き、次の背景色を列1に追加します。
- 列1の背景色：#ffffff
列2のデフォルトの背景色
次の背景色を列2に追加します。
- 列2の背景色：#ffffff
列2ホバーの背景色
そして、ホバー時にこの背景色を変更します。
- 列2の背景色：＃3d02ff
列2グラジエントバックグラウンド
列にもグラデーションの背景を追加します。
- 色1：rgba（255,255,255,0）
- 色2：＃ff7700
- 列2の開始位置：20％
サイジング
次に、サイズ設定に移動して、いくつかの変更を加えます。
- カスタム幅を使用：はい
- ユニット：PX
- カスタム幅：2000px
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
間隔設定にカスタムパディング値を追加して続行します。
- トップパディング：0px
- ボトムパディング：0px
- 列1の上部パディング：6vw（デスクトップ）、120px（タブレットと電話）
- 列1の下部パディング：6vw（デスクトップ）、120px（タブレットと電話）
- 列1の左パディング：5vw（デスクトップ）、80px（タブレット）、50px（電話）
- 列1の右パディング：5vw（デスクトップ）、80px（タブレット）、50px（電話）
ボックスシャドウ
また、この行にも微妙なボックスシャドウを追加します。
- ボックスシャドウブラー強度：100px
- ボックスシャドウスプレッド強度：-10px
トランジション
最後になりましたが、[詳細設定]タブの遷移時間を長くして、スムーズな遷移を作成します。
- 移行時間：1100ms
行＃1の重複テキストモジュールとボタンモジュール
前のセクションで必要なすべてのモジュールがすでにあるので、それらを複製することで時間を節約します。
行＃2の列1に複製を配置します
そして、新しい行の最初の列に重複を配置します。
コンテンツの変更
モジュールの内容を必ず変更してください。
ボタンのグラデーションの背景を変更する
ボタンのグラデーションの背景も変更します。
- 色1：＃ff653f
- 色2：＃0066ff
- グラデーション方向：39度
行＃2のクローンイメージモジュール
前の行の最初の列にもあるイメージモジュールのクローンを作成します。
行＃2の列2に複製を配置します
そして、新しい行の2番目の列に複製を配置します。
画像を変更する
この投稿の冒頭でダウンロードしたzipフォルダーにある「 divi-gradient-background-on-hover-illustration-2.png 」ファイルに画像を変更します。
グラデーションの背景を変更する
最後になりましたが、画像モジュールのグラデーションの背景を変更します。
- 色1：rgba（0,2,12,0.66）
- 色2：rgba（255,255,255,0）
- 終了位置：57％
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの最終結果を最後に見てみましょう。
静的
ホバー
最終的な考え
この投稿では、Diviを使用してホバー時にグラデーションの背景を変更する方法を示しました。 また、このアプローチを使用して、見事な設計例をゼロから作成しました。 構築しているあらゆる種類のWebサイトのデザインとイラストを自由に使用できます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！