Diviのホバーオプションを使用したアニメーションタイトルの作成

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。 今週は、進行中のDiviデザインイニシアチブの一環として、DiviのホバーオプションとDriving School LayoutPackを使用してアニメーションタイトルを作成する方法を紹介します。 これは、コピーのさまざまな部分にスポットライトを当ててアクションをトリガーするための優れたアプローチです。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、結果を簡単に見てみましょう。

自動車教習所の着陸ページをアップロードする

このチュートリアルを作成するには、Driver School LayoutPackのランディングページを使用します。 したがって、先に進んで新しいページを追加し、ビジュアルビルダーを有効にして、事前に作成したレイアウトからランディングページを選択します。

アニメーションタイトル＃1を作成する

セクションのグラデーションの背景を変更する

最初の例の作成を始めましょう！ このアニメーションタイトルをページのヒーローセクションに追加します。 ただし、そこに到達する前に、ヒーローセクションの設定を開き、グラデーションの背景オーバーレイの色を変更してください。

• 色1：rgba（0,0,0,0.94）
• 色2：rgba（12,12,12,0.63）

ヒーローセクションの最後の2行を削除する

セクションの最後の2行を削除して続行します。

仕切りの配置を変更する

私たちはまだそこにある列を維持しています。 変更する必要があるのは、Dividerモジュールのモジュール配置だけです。

• モジュールの配置：中央

新しい行を追加

カラム構造

前の行のすぐ下で、次の列構造を使用して新しい行を追加します。

間隔

次に、行のデフォルトのカスタムパディングを削除します。

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

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

コンテンツを追加する

必要なモジュールはテキストモジュールだけです。 見出しと段落リンクの2つの異なるテキストタイプを使用しています。 先に進み、選択したコピーを追加し、各文の中央でShift + Enterを押して、コピーが2行に表示されることを確認します。

デフォルトの背景色

次に、背景設定に移動し、デフォルトの背景色をテキストモジュールに追加します。

• 背景色：rgba（255,255,255,0）

背景色にカーソルを合わせる

ホバー時に背景色を変更します。

• 背景色：＃ffa53b

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

次に、全体的なテキスト設定でテキストの向きを変更します。

• テキストの向き：中央

デフォルトのリンクテキスト設定

リンクタブに切り替えて、リンクコピーの外観を変更します。

• リンクフォントの太さ：超太字
• リンクフォントスタイル：斜体、大文字、下線
• リンクの下線の色：rgba（255,255,255,0.3）
• リンクテキストサイズ：0px
• リンクラインの高さ：0em

ホバーリンク設定

次にホバーして変更を加えます。

• リンクテキストサイズ：40px
• リンクラインの高さ：1.8em

デフォルトの見出しテキスト設定

見出しのテキスト設定にもいくつか変更を加えます。

• 見出しフォントの太さ：超太字
• 見出しフォントスタイル：大文字
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：70px（デスクトップ）、40px（タブレット）、30px（電話）
• 見出し線の高さ：1.4em

見出しのテキスト設定にカーソルを合わせる

ホバーにいくつかの小さな調整を加えます。

• 見出しのテキストの色：rgba（255,255,255,0）
• 見出しテキストサイズ：0px

デフォルトの間隔

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

• トップパディング：40px
• ボトムパディング：0px
• 左パディング：20px
• 右パディング：20px

ホバー間隔

カスタムパディング値は、ホバー時に少し異なります。

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

国境

ボーダーも使用しています。

• ボーダー幅：10px
• ボーダーカラー：＃ffa53b

トランジション

また、[詳細設定]タブで遷移期間を変更して、高速遷移を追加します。

• 移行時間：0ms

アニメーションタイトル＃2を作成する

新しいセクションを追加

背景色

次の例に移りましょう！ ヒーローセクションのすぐ下に新しいセクションを追加し、背景色を追加します。

• 背景色：#efefef

間隔

次に、間隔の設定に移動し、さまざまなマージンとパディングの値を試してみてください。

• 下マージン：100px
• 右マージン：200px（デスクトップ）、100px（タブレット）、50px（電話）
• トップパディング：54px
• ボトムパディング：54px

ボックスシャドウ

このセクションをレイアウトパックに一致させるために、微妙なボックスシャドウも追加しています。

• ボックスシャドウの水平位置：30px
• ボックスシャドウの垂直位置：30px
• ボックスシャドウスプレッド強度：-10px
• 影の色：＃ffa53b

新しい行を追加

カラム構造

このセクションに追加する行には、次の列構造が必要です。

テキストモジュールを追加

コンテンツを追加する

見出しと段落のリンクをもう一度使用して、選択したコンテンツを追加します。 また、訪問者がWebサイトのさまざまな部分を簡単にナビゲートするのに役立つリストを利用しています。

デフォルトのリンクテキスト設定

リンクテキスト設定に移動し、リンクコピーの外観にいくつかの変更を加えます。

• リンクフォントスタイル：下線
• リンクテキストの色：＃000000
• リンクテキストサイズ：0px（デスクトップ）、20px（タブレット）、13px（電話）
• リンクラインの高さ：0px（デスクトップ）、1.8em（タブレットと電話）

リンクテキスト設定にカーソルを合わせる

ホバーでいくつかの小さな調整を行います。

• リンクテキストサイズ：30px
• リンクラインの高さ：2.8em

デフォルトの見出しテキスト設定

選択した見出しも変更する必要があります。

• 見出し2フォントの太さ：超太字
• 見出し2フォントスタイル：大文字
• 見出し2テキストサイズ：30px（デスクトップとタブレット）、20px（電話）
• 見出し2文字の間隔：1px

見出しのテキスト設定にカーソルを合わせる

ホバー時にテキストサイズを変更します。

• 見出し2テキストサイズ：0px

デフォルトの間隔

間隔の設定に移動し、いくつかのカスタムマージンとパディング値を追加して続行します。

• 左マージン：0px（デスクトップ、タブレット、電話）
• トップパディング：40px
• 左パディング：50px

ホバー間隔

ホバー時に左マージンを変更します。

• 左マージン：200px

デフォルトの境界線

次に、テキストモジュールに左の境界線を追加します。

• 左ボーダー幅：5px
• 左ボーダーの色：＃ffa53b

ホバーボーダー

ホバー時にすべての境界線の幅を削除します。

• 左ボーダー幅：0px

トランジション

大事なことを言い忘れましたが、わずかに長い移行期間を使用してスムーズな移行を作成します。

• 移行時間：500ms

プレビュー

すべての手順を完了したので、最終結果を最後に見てみましょう。

最終的な考え

このユースケースの投稿では、Diviの組み込みオプションのみを使用してホバーでアニメーションタイトルを作成する方法を示しました。 これは、コピーの特定の部分にスポットライトを当て、創造的な方法で訪問者からのアクションをトリガーするための優れた方法です。 ご不明な点がございましたら、下のコメント欄にコメントを残してください！