いくつかの単純なホバー効果でDiviで目を引くCTAを作成する方法

微妙な相互作用とホバー効果は、人目を引くCTA（Call to Action）を作成するのに役立ちます。 秘訣は、CTAをより魅力的で直感的にする効果を使用して、ユーザーが行動を起こす可能性を高めることです。 また、ほとんどのCTAの最終目標はリンクまたはボタンをクリックすることであるため、クリック可能なアイテムを最前線に表示するようにCTAを最適化することが重要です。

このチュートリアルでは、Diviを使用して、複数のホバー効果を使用してCTAの可視性を最適化する方法を紹介します。 ホバーにセクションディバイダーの背景を追加して、コントラストと読みやすさを向上させるためにCTAをステージングする方法を説明します。 そして、ホバー時にCTAを拡大してページの中央に移動し、それが主な焦点になるようにする方法を説明します。 これらのホバー効果は、行動を促すフレーズを目立たせ、できればユーザーエクスペリエンスを向上させるのに役立ちます。

始めましょう。

スニークピーク

これは、このチュートリアルで構築する人目を引くCTAホバー効果の概要です。

目を引くCTAホバーエフェクトレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
3. デザインビルドで使用される背景画像。 このチュートリアルでは、Veterinarian LayoutPackの1つを使用します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviで目を引くCTAホバー効果を実装する

この設計例では、左揃えまたは右揃えのアクションモジュールの呼び出しから始めます。 次に、モジュールをページの中央に移動し、行にカーソルを合わせたときに拡大縮小（または拡大）します。 行ホバー状態での行動の呼びかけをさらに目立たせるために、モジュールの後ろで閉じるセクション仕切りを追加して、コントラストを向上させることで、それをステージングします。

これがその方法です。

セクションと行の作成

まず、1列の行を持つ通常のセクションを作成します。

モジュールを追加する前に、セクション設定を開き、以下を更新してください。

左側にモジュールを追加したときに表示されたままになるように、画像の焦点が右側にある背景画像を追加します。

• 最大幅：1080px
• セクションの配置：中央

今のところ、これでセクションが処理されます。 セクション分割ホバー効果を追加するために、後でセクション設定に戻ります。

次に、行設定を開き、以下を更新します。

• 幅：100％
• 最大幅：100％
• パディング：上5％、下5％、右35％

右のパディングはコンテンツを左にプッシュするため、このデザインの鍵となります。 後で戻ってホバーオプションを追加し、後で行のコンテンツを中央に戻します。

召喚状モジュールの追加

これで、人目を引くCTAの主な焦点となるCall toActionモジュールを構築する準備が整いました。

先に進み、アクションモジュールの呼び出しを1列の行に追加します。

次に、次のように召喚状モジュールの設定を更新します。

コンテンツ

• タイトル：初回訪問割引
• ボタン：予約する
• ボタンリンクURL：＃

設計

• 背景色：#ffffff
• テキストの色：暗い
• タイトルフォント：Nunito
• タイトルフォントの太さ：太字
• タイトルテキストサイズ：36px

• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃154c87
• ボタンの境界線の幅：0px
• 最大幅：500px
• モジュールの配置：中央
• 丸い角：10px

このデザインの重要な特徴は、最大幅500pxです。 これにより、後でホバーしたときに行の右側のパディングを調整するたびに、モジュールの幅が変更されないようになります。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：30px
• ボックスシャドウブラー強度：100px
• ボックスシャドウスプレッド強度：-30px

行にカーソルを合わせたときの召喚状のスケーリングと中央揃え

これで、目を引くCTAホバー効果を追加する準備が整いました。 この時点で、行にカーソルを合わせたときに2つのことを実行したいと思います。 まず、CTAを中央に移動します。 次に、モジュールのスケールを大きくして（大きくして）、さらに見やすくしたいと思います。

これを行うには、行設定を開き、以下を更新します。

• パディング（ホバー）：0％右

次に、モバイルディスプレイのパディングを調整します。

• パディング（タブレット）：0％右
• パディング（電話）：左5％、右5％

CTAを拡大するには、ホバーの行に次の変換プロパティを追加します。

• 変換スケール（ホバー）：110％

変換スケールプロパティが行に適用されている場合でも、これは、モジュールを含む、行内のすべての子要素にも間接的に適用されます。 したがって、行にカーソルを合わせると、モジュールは110％にスケーリングされます。

セクションディバイダーを使用したホバーでのCTAのステージング

最後に、セクション/行にカーソルを合わせたときにctaをステージングするためにセクションディバイダーを追加する準備ができました。 ここで重要なのは、セクションと行が同じ高さと幅であることを確認して、ユーザーがギャップなしでセクションと行に同時にカーソルを合わせるようにすることです。 したがって、セクションのパディングを削除する必要があります。 次に、セクションにカーソルを合わせると高さが高くなる上部と下部のセクション仕切りを作成する必要があります。

これが何をすべきかです。

セクション設定を開き、以下を更新します。

パディング：0px上、0px下

• トップディバイダースタイル（デスクトップ）：スクリーンショットを参照
• トップディバイダースタイル（タブレットと電話）：なし
• トップディバイダーカラー：rgba（21,76,135,0.61）
• トップディバイダーの高さ（デフォルト）：0％
• トップディバイダーの高さ（ホバー）：120％
• トップディバイダーフリップ：水平

• ボトムディバイダースタイル（デスクトップ）：スクリーンショットを参照
• ボトムディバイダースタイル（タブレットと電話）：なし
• ボトムディバイダーカラー：rgba（21,76,135,0.61）
• ボトムディバイダーの高さ（デフォルト）：0％
• ボトムディバイダーの高さ（ホバー）：120％
• ボトムディバイダーフリップ：水平

仕切りがセクションの外側に表示されないようにするには、垂直および水平オーバーフローオプションを非表示に更新します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

それでは、最終結果を確認しましょう。

最終結果

そして、これがタブレットと電話のデザインです。

CTAの位置の変更

ホバー状態の前にCallto Actionモジュールの初期位置を変更する場合は、行間隔を簡単に更新できます。

右側から

ホバーする直前にモジュールを開始するとします。 次のように行設定を更新するだけです。

• パディング：残り35％
• パディング（ホバー）：0％左

左の焦点を持つように画像を更新する必要があります。 その後、これが結果です。

下から

または、必要に応じて、行の下からCTAポップアップを表示することもできます。 これを行うには、セクションに固定の高さを追加してから、上部のパディングを使用してモジュールを降ろす必要があります。

セクション設定を開き、セクションに最大の高さを指定して、オーバーフローを非表示に設定します。

• 最大高さ（デスクトップ）：415px
• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

次に、行の設定を開き、パディングを更新して、モジュールをセクションの下のビューから部分的に押し出します。 次に、ホバーの上部のパディングを取り外して、元に戻します。

• パディング（デスクトップ）：上25％、下5％
• パディング（ホバー）：5％トップ

結果は次のとおりです…

最終的な考え

Diviを使用すると、Webページのデザインにあらゆる種類のホバー効果を簡単に追加できます。 最高のホバー効果は、意図的で実際にユーザーエクスペリエンスを向上させる効果です。 この投稿で取り上げたいくつかの簡単なホバー効果は、見栄えが良く、ユーザーエクスペリエンスを向上させ、できればより多くのコンバージョンにつながる、人目を引くCTAの作成に役立つはずです。

その他のアイデアについては、ホバーオプションを使用してDiviでCTAを強調する3つの方法に関する投稿と、スライドインCTAの作成に関する投稿をご覧ください。

コメントでお返事をお待ちしております。

乾杯！