背景にグラデーションを入れたい Divi ホバリングすると変わる？
ウェブサイトを構築することは、すべての詳細が正しいことを確認することです。 デザインの細部に注意を払うことで、デザインの品質がすぐに向上します。 サイトのWeb.
の新しいホバーオプションで Divi、小さなインタラクションを簡単に追加できます サイトのWeb. ホバー オプションは、ほぼすべての設計パラメータに適用されます。 たとえば、ホバー時にグラデーションの背景を間接的に変更して、素敵なトランジションを作成できます。
これはまさにこのチュートリアルで説明する内容です。 グラデーショントランジションを作成するだけでなく、あらゆるタイプの用途に自由に使用できる素晴らしいデザイン例も一から作成します。 サイトのWeb あなたが作成するもの。
行こう！
概要
チュートリアルに入る前に、最終結果を見てみましょう。
Diviでデザインを始めましょう
セクション1を追加
スペーシング
最初に行う必要があるのは、新しいページを作成するか、既存のページを開いて新しい通常のセクションを追加することです。 設定を開き、カスタムの上マージンと下マージンを追加します。
- パディング（上下）：100px
1行目を追加
カラムの構造
次の列構造を使用して、新しい行を追加して続行します。
列 1 のデフォルトの背景色 (デスクトップ)
まだモジュールを追加せずに、行の設定を開き、次のデフォルトの背景色を列 1 に追加します。
- 背景 (デスクトップ): #e7ffa0
ホバー時の列 1 の背景色
ホバー時にこの背景色を変更します。
- 背景: #00020c
列 1 の背景グラデーション
また、列 1 にグラデーションの背景色を追加します。完全に透明な色を使用していることに注意してください。 この色により、背景色が透けて見えるようになり、ホバー時に変化します。
- カラー 1 (20%): rgba(255,255,255,0)
- カラー 2 (100%): rgba(16,0,201,0.8)
- グラデーションの種類: 線形
- グラデーションの方向: 50 度
列 2 の背景色
また、列 2 に背景色を追加します。
- 背景: #ffffff
サイズ剤
次に、タブに移動します 設計 オプションでサイズ設定を変更します サイジング.
- カスタムガター幅を使用: はい
- ガター幅: 1
- 幅: 2000ピクセル
スペーシング
間隔設定でカスタム パディング値を追加して続行します。
- パディング（上下）：0px
間隔 (列 2)
- パディング (上下): 6vw (デスクトップ)、120px (タブレットとスマートフォン)
- パディング (左右): 5vw (デスクトップ)、80px (タブレット)、50px (スマートフォン)
ボックスシャドウ
また、行に微妙なボックスの影を付けます。
- ボックスシャドウブラー強度：100px
- ボックス シャドウの拡散強度: -10px
トランジション
最後に、タブのトランジション時間を長くして、滑らかなグラデーションの背景トランジションを作成します。 高機能.
- 遷移時間: 1100ms
列1に画像モジュールを追加します
画像をアップロードする
モジュールの追加を開始する時が来ました! Image モジュールを最初の列に追加します。
グラデーションの背景
この画像モジュールの背景設定に移動し、グラデーションの背景を追加します。 ここでも完全に透明な色を使用して、他の色が透けて見えるようにしています。
- 色 1(57%): rgba(50,217,255,0.66)
- 色 2(100%): rgba(255,255,255,0)
- グラデーションの種類: 円形
- グラデーションの位置: 上
スペーシング
次に、カスタムのトップ パディングをモジュールに追加します。
- パディング (トップ): 14vw
テキストモジュールを列2に追加します
コンテンツを追加する
XNUMX列目にいきましょう！ 最初に必要なモジュールは、タイトルのテキスト モジュールです。 さあ、追加してください コンテンツ 選んだタイトル。
ヘッダーテキストの設定
次に、ヘッダー テキストの設定に移動し、いくつかの変更を加えます。
- フォント: Abril Fatface
- 文字色：#000000
- テキスト サイズ: 4 vw (デスクトップ)、60 px (タブレット)、40 px (スマートフォン)
2 番目のテキスト モジュールを列 XNUMX に追加します。
コンテンツを追加する
XNUMX 番目に必要なモジュールは、別の Text モジュールです。 いくつか追加してください コンテンツ 選択の。
テキスト設定
次に、テキスト設定に移動し、テキストの配置を変更します。
- テキストの配置: 両端揃え
サイズ剤
また、サイズ設定で幅を調整します。
- 幅: 73% (デスクトップ)、100% (タブレットとスマートフォン)
スペーシング
最後に、カスタムの上マージンと下マージンをモジュールに追加してスペースを作成します。
- 余白 (上下): 2,5 vw (デスクトップ)、50 px (タブレットとスマートフォン)
列 2 にボタン モジュールを追加します。
説明を追加
XNUMX 番目の列で必要な XNUMX 番目で最後のモジュールは、ボタン モジュールです。 選択したコピーを追加します。
ボタン設定
次に、ボタンの設定を変更します。
- ボタンにカスタム スタイルを使用する: はい
- ボタンのテキスト サイズ: 1,2 vw (デスクトップ)、14 px (タブレットと電話)
- ボタンのテキストの色: #ffffff
- 勾配停止 1 (0%): #9ea6ff
- グラデーション ストップ 2 (100%): rgba(16,0,201,0.8)
- ステアリング: 78度
- ボタンの境界線の幅: 0 ピクセル
- ボーダー半径: 30px
- 文字間隔: -1px
- フォントの太さ: 超太字
- フォント スタイル: TT -(大文字)
スペーシング
カスタム塗りつぶし値も追加します。
- パディング（上下）：10px
- パディング（左右）：40px
ボックスシャドウ
ボタンに微妙なボックス シャドウを適用します。
- ボックス シャドウのぼかしの強さ: 40px
セクション2を追加
スペーシング
最初のセクションが完了したので、次のセクションに進みます。 次のカスタム パディング値を使用して、新しい通常のセクションを追加します。
- パディング（上下）：100px
XNUMXつの列に行を追加します
カラムの構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
列 1 の背景
まだモジュールを追加せずに、行の設定を開き、次の背景色を列 1 に追加します。
- 背景: #ffffff
列 2 背景 (デスクトップ)
次の背景色を列 2 に追加します。
- 背景 (デスクトップ): #ffffff
ホバー時の列 2 の背景色
ホバー時にこの背景色を変更します。
- 背景 (ホバー): #3d02ff
2 列のグラデーションの背景
また、列にグラデーションの背景を追加します。
- 勾配停止 1 (20%): rgba(255,255,255,0)
- 勾配停止 2 (100%): #ff7700
サイズ剤
次に、サイズ設定に移動し、いくつかの変更を加えます。
- カスタムガター幅を使用：はい
- ガター幅: 1
- 幅: 2000px
間隔 (行)
間隔設定でカスタム パディング値を追加して続行します。
- パディング（上下）：0px
間隔 (列 1)
列 1 の間隔設定を変更する
- パディング (上下): 6vw (デスクトップ)、120px (タブレットとスマートフォン)
- パディング (左右): 5vw (デスクトップ)、80px (タブレット)、50px (スマートフォン)
ボックスシャドウ
また、この行に微妙なボックス シャドウを追加します。
- ボックス シャドウのぼかしの強さ: 100px
- ボックス シャドウの拡散強度: -10px
トランジション
最後に、タブでトランジション時間を長くして、スムーズなトランジションを作成します 高機能.
- 遷移時間: 1100 ミリ秒
ライン 1 モジュールの複製
前のセクションで必要なモジュールがすべて揃っているので、それらを複製することで時間を節約できます。
重複を行 2 列に配置する
そして、次のように複製を新しい行に配置します。
コンテンツの編集
必ず変更してください コンテンツ モジュールの。
ボタンのグラデーションの背景を変更する
ボタンの背景のグラデーションも変更します。
- 勾配停止 0%: #ff653f
- 勾配停止 100%: #0066ff
- ステアリング: 39度
画像を変更する
画像を差し替えます。
背景のグラデーションを変更する
最後に、Image モジュールの背景グラデーションを変更します。
- 勾配停止 0%: rgba(0,2,12,0.66)
- 勾配停止 57%: rgba(255,255,255,0)
概要
すべての手順を完了したので、最終結果を最後に見てみましょう。
今すぐDIVIをダウンロード!!!
まとめ
この記事では、ホバー時にグラデーションの背景を変更する方法を説明しました。 Divi。 また、このアプローチを使用した優れた例を最初から作成しました。
作成するあらゆる種類の Web サイトにデザインとアートワークを自由に使用できます。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
