Diviで美しいグラデーションの背景ホバートランジションを作成する方法

最近、いくつかの追加のホバーオプションがDiviに追加されました。これにより、1行のコードに触れることなく、さらにクールな効果を作成できます。 たとえば、驚くべきグラデーションの背景ホバートランジションを作成できるようになりました。 列、行、セクションのグラデーションを組み合わせることで、独自のデザインを実現できます。 このチュートリアルでは、その方法を正確に説明します。 まず、いくつかの一般的な手順を実行します。 それが完了したら、3つの設計例に個別に焦点を当てます。 JSONファイルを無料でダウンロードすることもできます！

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

プレビュー

チュートリアルに入る前に、このチュートリアル全体で再現する3つの異なる例を簡単に見てみましょう。

例1

例2

例3

ヒーローセクションを無料でダウンロード

私たちのYoutubeチャンネルを購読する

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

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

無料でダウンロード

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

ダウンロード

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

一般的な手順

新しいセクションを追加

間隔

いくつかの一般的な手順を実行することから始めましょう。 作業中のページに新しいセクションを追加し、デフォルトのパディングをすべて削除します。 上部と下部のパディングをすべて削除すると、後で、列、行、セクションのグラデーションの背景を組み合わせるのに役立ちます。

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

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。

• 幅：100％
• 最大幅：100％

間隔

間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

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

テキストモジュール＃1を列に追加

H1コンテンツを追加する

モジュールの追加を始めましょう！ 最初に必要なのは、H1コンテンツを含むテキストモジュールです。

H1テキスト設定

[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。

• 見出しフォント：Montserrat
• 見出しテキストの配置：中央
• 見出しのテキストの色：＃000000
• 見出しのテキストサイズ：3vw（デスクトップ）、6vw（タブレットと電話）
• 見出し文字の間隔：0.7vw

サイジング

次にサイズ設定を開き、モジュールの配置に合わせて幅を変更します。

• 幅：48％（デスクトップ）、60％（タブレットと電話）
• モジュールの配置：中央

間隔

上マージンを追加して、モジュールの設計を完了します。

• トップマージン：10vw

Dividerモジュールを列に追加

可視性

次のモジュールへ！ Divider Moduleを追加し、[ShowDivider]オプションが有効になっていることを確認します。

• 仕切りを表示：はい

ライン

次に線の色を変更します。

• 線の色：＃000000

サイジング

サイズ設定に移動し、次の設定を適用します。

• 仕切りの重量：0.1vw
• 幅：10％（デスクトップ）、16％（タブレット）、25％（電話）
• モジュールの配置：中央

間隔

さまざまな画面サイズにカスタムパディング値を追加することもできます。

• トップパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• 下部のパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）

テキストモジュール＃2を列に追加

コンテンツを追加する

次のモジュール、つまり別のテキストモジュールに進みます。 選択した段落コンテンツを追加します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの配置：正当化
• テキスト行の高さ：2.3em

サイジング

次に、サイズ設定で幅とモジュールの配置を変更します。

• 幅：30％（デスクトップ）、54％（タブレット）、70％（電話）
• モジュールの配置：中央

ボタンモジュールを列に追加

コピーを追加

この列で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

配置

デザインタブに移動し、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

ボタンの設定も変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、2.8vw（電話）
• ボタンのテキストの色：＃000000
• ボタンの境界線の幅：1px
• ボタンの境界線半径：1px
• ボタンフォント：Montserrat

間隔

また、さまざまな画面サイズにカスタム間隔の値を追加します。

• トップマージン：2vw（デスクトップ）、8vw（タブレットと電話）
• 下マージン：10vw
• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）
• 右パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）

セクションを2回クローンする

セクションを完了したら、2回クローンを作成できます。 例ごとに1つ。

グラデーションの背景ホバートランジション＃1を再作成

セクション

デフォルトのグラデーションの背景

最初のホバートランジションの作成を始めましょう！ セクション設定を開き、次のデフォルトのグラデーションの背景を追加します。

• 色1：＃d1d1ff
• 色2：＃f7f7f7
• グラデーション方向：90度
• 開始位置：50％
• 終了位置：50％

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

ホバー時にグラデーションの背景を変更します。

• 色1：＃f7f7f7
• 色2：＃ffc1c7
• グラデーション方向：90度
• 開始位置：50％
• 終了位置：50％

行

デフォルトのグラデーションの背景

次に行設定を開き、次のデフォルトのグラデーション背景設定を適用します。

• 色1：＃7032ff
• 色2：rgba（255,255,255,0）
• グラデーション方向：90度
• 開始位置：10％
• 終了位置：10％

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

ホバー時にグラデーションの背景を変更します。

• 色1：rgba（255,255,255,0）
• 色2：＃ff324a
• グラデーション方向：90度
• 開始位置：90％
• 終了位置：90％

グラデーションの背景ホバートランジション＃2を再作成

セクション

デフォルトのグラデーションの背景

2番目の例に移ります！ セクション設定を開き、次のグラデーションの背景を追加します。

• 色1：＃f7f7f7
• 色2：#eceaff
• グラデーション方向：156度
• 開始位置：50％
• 終了位置：50％

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

ホバーに別のグラデーションの背景を追加します。

• 色1：#ffeaec
• 色2：＃f7f7f7
• グラデーション方向：204度
• 開始位置：50％
• 終了位置：50％

行

デフォルトのグラデーションの背景

次に行設定を開き、次のグラデーション背景設定を適用します。

• 色1：＃a932ff
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：左下
• 開始位置：14％
• 終了位置：14％

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

それに応じて、ホバーの行グラデーションの背景を変更します。

• 色1：＃ff324a
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：左上
• 開始位置：14％
• 終了位置：14％

桁

デフォルトのグラデーションの背景

列の設定に移動し、次のグラデーションの背景を追加します。

• 色1：＃a932ff
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：右上
• 開始位置：14％
• 終了位置：14％

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

ホバー時に列のグラデーションの背景を変更します。

• 色1：＃ff324a
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：右下
• 開始位置：14％
• 終了位置：14％

グラデーションの背景ホバートランジション＃3を再作成

セクション

デフォルトのグラデーションの背景

次の最後の例に移りましょう！ セクション設定を開き、次のグラデーションの背景を適用します。

• 色1：＃ffc1c7
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：上
• 開始位置：45％
• 終了位置：45％

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

ホバー時にセクショングラデーションの背景を変更します。

• 色1：＃ffc1c7
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：左
• 開始位置：20％
• 終了位置：20％

行

デフォルトのグラデーションの背景

次に行設定を開き、次のグラデーションの背景を追加します。

• 色1：＃d3dfff
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：下
• 開始位置：45％
• 終了位置：45％

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

それに応じてグラデーションの背景を変更します。

• 色1：＃d3dfff
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：右
• 開始位置：20％
• 終了位置：20％

桁

デフォルトのグラデーションの背景

最後になりましたが、列のグラデーションの背景を追加すれば完了です。

• 色1：＃f7f7f7
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：41％
• 終了位置：41％

プレビュー

すべての手順を完了したので、このチュートリアル全体で再作成した3つの例すべての結果を最後に見てみましょう。

例1

例2

例3

最終的な考え

この投稿では、Diviの追加のグラデーション背景ホバーオプションをクリエイティブに使用して、Diviの組み込みオプションのみで美しいホバートランジションを作成する方法を示しました。 いくつかの一般的な手順から始めて、3つの例のそれぞれを再作成することによって続けました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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