ホバー時にコンテンツを変更してDiviで独自のCTAを作成する方法（3つの方法）

公開: 2019-09-04

Diviの組み込みのホバーオプションを使用すると、ホバー時にモジュールのコンテンツを簡単に変更できます。ホバー時に背景画像、色、さらにはテキストを変更できます。これにより、ユーザーの注意を引き付け、コンバージョンを向上させるための行動を促すクリエイティブな方法への扉が開かれます。

本日は、Diviでホバーしたコンテンツを変更して、独自の行動を促す方法を紹介します。ホバー時にボタンのテキスト（およびアイコン）を変更する巧妙な方法を紹介します。ホバー時に召喚状モジュール内のタイトルとボタンのテキストをエレガントに変更する方法を示します。また、カスタムCSSをいくつか投入して、独自の遷移効果（ボタンアイコンの切り替えや反転など）も追加します。

見てみな！

スニークピーク

これが、今日作成する3つのデザインの概要です。

＃1ボタンのホバーでコンテンツを変更する方法

diviはホバーでコンテンツを変更します

＃2テキストモジュールの背景と本文の内容を変更する方法

diviはホバーでコンテンツを変更します

＃3 Call toActionモジュールを使用して複数の要素のホバーでコンテンツを変更する方法

diviはホバーでコンテンツを変更します

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

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

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

始めるために必要なもの

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
Cake Maker LandingPageの既成のレイアウトをページにロードします。このレイアウトをデザインに使用します。 Divi Builderのデプロイ時にプロンプトが表示されたら、「Choose a Premade Layout」を選択して、レイアウトをロードできます。または、DiviBuilderの設定メニューから「ライブラリからロード」プラスアイコンを選択することもできます。事前に作成されたレイアウトをページにロードする方法の詳細については、ビデオをご覧ください。

diviはホバーでコンテンツを変更します

その後、Diviで設計を開始する準備が整います。

＃1ボタンのホバーでコンテンツを変更する方法

Cake Maker Landing Pageの既成のレイアウトをページにロードしたら、ページの上部ヘッダーにあるメインボタンのCTAを見つけて、ボタンモジュールのデザイン設定を開きます。

diviはホバーでコンテンツを変更します

ホバー時のボタンテキストの変更

[コンテンツ]タブで、ボタンのテキストを次のように更新します。

ボタンテキスト：「今すぐ購入」

diviはホバーでコンテンツを変更します

次に、ボタンテキストのホバーオプションを展開し、次のようにホバータブの下に置換ボタンテキストを入力します。

ボタンテキスト（ホバー）：「Let'sGo」

diviはホバーでコンテンツを変更します

ボタンにカーソルを合わせると、ホバーボタンのテキストの下のテキストがデフォルトのボタンのテキストに置き換わります。

diviはホバーでコンテンツを変更します

ボタン幅

ただし、ボタンはinline-blockため、ボタン/リンクの幅は、ボタンに含まれるコンテンツ（文字またはスペース）の量に応じて変化します。これは、このホバー効果ではうまく機能しません。置換テキストが小さいと、ボタンの幅が狭くなり、ボタンの端にカーソルを合わせるとジャンプやグリッチが発生するためです。これを修正するには、ボタンに設定された幅を適用する必要があります。これは、CSSの単一のスニペットで簡単です。次のCSSをボタンモジュールのメイン要素に追加します。

width: 200px;

diviはホバーでコンテンツを変更します

結果は次のとおりです。

diviはホバーでコンテンツを変更します

追加の変更とホバー効果

ホバーの内容を変更するだけでなく、さまざまなホバー効果の組み合わせでボタンにスパイスを加えることもできます。

現在、ボタンアイコンは、ホバー時に展開される右矢印です。これは、ホバーボタンのテキスト「Let'sGo」で非常にうまく機能します。

ホバーでボタンアイコンを反転する

ただし、ボタンアイコンに素敵なフリップホバー効果を追加することもできます。これを行うには、最初に以下を更新して、アイコンを常に（ホバー時だけでなく）表示するようにします。

ボタンのホバーにアイコンのみを表示：いいえ

diviはホバーでコンテンツを変更します

次に、次のようにCSSクラスをボタンモジュールに追加します。

CSSクラス：フリップボタンアイコン

diviはホバーでコンテンツを変更します

次に、ページ設定を開き、次のカスタムCSSを追加します。

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

diviはホバーでコンテンツを変更します

結果は次のとおりです。

diviはホバーでコンテンツを変更します

ホバーのボタンアイコンを変更する

ホバー時にボタンアイコンを完全に変更することもできます。本当に必要なのは、アイコンが存在する：after疑似要素のコンテンツを置き換えるCSSの小さなスニペットです。

cssを追加する前に、最初に表示する別のボタンアイコンを選択してから、CSSを使用して右矢印に変更できます。

CTAは「今すぐ表示」なので、ボタンアイコンをカートアイコンに更新します。

diviはホバーでコンテンツを変更します

次に、[詳細設定]タブに移動し、現在のCSS変換プロパティを360度ではなく180度の回転で更新します。そして、左矢印（“ \ 23”）を表示するコンテンツに新しいUnicodeを追加します。

新しいスニペットは次のようになります。

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

アイコンも180度回転するため、ボタンにカーソルを合わせると、カートアイコンの代わりに右矢印が表示されます。

最終結果

これが最終結果です。

diviはホバーでコンテンツを変更します

＃2テキストモジュールの背景と本文の内容を変更する方法

この次のデザインでは、ページレイアウトを下って「マイサービス」セクションに進みます。 2つのテキストモジュールを使用して、一番上の行の行設定を開きます。

diviはホバーでコンテンツを変更します

列設定の更新

行の設定で、列1の設定を開き、ホバー時に背景画像を列に追加します。

diviはホバーでコンテンツを変更します

これにより、デフォルトで存在する白い背景が置き換えられます。

また、ホバー時に背景画像の上にグラデーションを追加します。

背景グラデーションの左の色：rgba（255,255,255,0）
背景グラデーションの右の色：rgba（46,41,142,0.75）
開始位置：30％
背景画像の上にグラデーションを配置：はい

diviはホバーでコンテンツを変更します

これにより、ホバーの置換テキストが読みやすくなる優れたオーバーレイが提供されます。

その後、列をデフォルト設定に戻して、列のカスタムパディングを削除します。

diviはホバーでコンテンツを変更します

列1のテキストモジュールをカスタマイズします

列が更新されたら、設定を保存し、列1のテキストモジュールのテキストモジュール設定を開きます。次に、ホバー時にテキストモジュールの本文の内容を次のように更新します。

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

これは、ホバー時にリンクを使用して行動を促すフレーズを追加するための優れた方法です。

次に、背景を次のように更新します。

背景色：#ffffff;
背景色（ホバー）：rgba（255,255,255,0）;

これにより、列の背景画像が徐々に表示される優れた遷移要素が追加されます。

次に、次の設計設定を更新します。

高さ：260px

diviはホバーでコンテンツを変更します

パディング：上30px、左30px、右30px
パディング（ホバー）：90pxトップ

diviはホバーでコンテンツを変更します

これにより、テキストモジュールにカーソルを合わせると、テキストが徐々に下がる優れたトランジション効果が作成されます。

次に、次のようにテキストの色を白に更新します。

リンクテキストの色：#ffffff
見出し3テキストの色（ホバー）：＃ffffff

diviはホバーでコンテンツを変更します

ホバー効果の遷移を遅くするには、次のように遷移期間を更新します。

移行時間：500ms

diviはホバーでコンテンツを変更します

最終結果

次に、最終結果を確認します。

diviはホバーでコンテンツを変更します

＃3 Call toActionモジュールを使用して複数の要素のホバーでコンテンツを変更する方法

この次の設計では、ホバー時に複数のコンテンツ要素を変更する召喚状モジュールを使用します。これを行うには、ページを下に移動して[人気のあるコレクション]セクションに移動します。

diviはホバーでコンテンツを変更します

新しい召喚状モジュールを追加する

次に、専門セクションの一番上の行にある[今すぐ購入]ボタンの下に新しい召喚状モジュールを追加します。

diviはホバーでコンテンツを変更します

ホバー時にコンテンツを変更してCTAを更新する

次に、召喚状の内容を次のように更新します。

タイトル：「スペシャルオファー」
タイトル（ホバー）：「10％オフ」
ボタンのテキスト：「今すぐ購入」
ボタンのテキスト（ホバー）：「GetDeal」
本文：「カスタムカップケーキ」
ボタンリンクURL：＃

diviはホバーでコンテンツを変更します

今のところ設定を保存します。

レイアウトボタンスタイルのコピーと貼り付け

CTAのボタンの設計に飛びつきます。これを行うには、事前に作成されたレイアウトに付属のCTAモジュールの上にあるボタンモジュールのボタン設定を開きます。次に、ボタンオプショングループのトリプルドットアイコンをクリックして、[ボタンスタイルのコピー]を選択します。

diviはホバーでコンテンツを変更します

次に、設計中の召喚状モジュールで他のオプションメニューを開き、[ボタンスタイルの貼り付け]を選択します。

diviはホバーでコンテンツを変更します

次に、召喚状モジュールの設定を開き、ボタンのパディングを更新します。

ボタンのパディング：上15px、下15px、左40px、右40px
diviはホバーでコンテンツを変更します

テキストスタイルを更新する

その後、タイトルと本文のデザインを更新します。

タイトル見出しレベル：H4
タイトルフォント：Pacifico
タイトルテキストサイズ：9vw
タイトルラインの高さ：1.3em
ボディフォント：Open Sans
ボディフォントの太さ：太字
本文サイズ：18px
本文の文字間隔：1px

diviはホバーでコンテンツを変更します

最終設定

次に、パディングを更新します。

パディング：左0px、右0px

次に、モジュールにカスタムCSSクラスを指定します。

CSSクラス：fade-cta-title

次のカスタムCSSをプロモボタンCSS入力ボックスに追加して、ctaボタンを全幅にします。

そして、移行期間を更新します。

移行時間：800ms

diviはホバーでコンテンツを変更します

最後に、背景色を更新して、デフォルトで透明になり、ホバーすると色が変わるようにします。

背景色：なし（削除）
背景色（ホバー）：rgba（247,78,72,0.86）

diviはホバーでコンテンツを変更します

次に、Call to Actionモジュールの上の行にある2つのモジュールを削除して、レイアウトから元のctaを置き換えます。

これまでの結果

これがこれまでの結果です。召喚状モジュールにカーソルを合わせると、タイトルテキストとボタンテキストがどのように変化するかに注目してください。

diviはホバーでコンテンツを変更します

アニメーションでコンテンツの変化を和らげる

CTAの大きなタイトルの遷移を和らげたい場合は、CSSを使用して簡単なアニメーションを追加できます。すでにCSSクラスモジュールを追加しているので、必要なのはページ設定モーダルを開いて次のカスタムCSSを追加することだけです。

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

diviはホバーでコンテンツを変更します

最終結果

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

diviはホバーでコンテンツを変更します

そして、ここではモバイル上にあります。

diviはホバーでコンテンツを変更します

最終的な考え

このチュートリアルでは、Diviでホバー時にコンテンツを効果的に変更する方法の3つの例を示しました。コンテンツに組み込まれているホバーオプションにより、これは本当に簡単なプロセスになります。また、CSSのスニペットをいくつか使用すると、独自のトランジションを追加して、デザインを際立たせることができます。うまくいけば、これにより、より多くのコンバージョンとエンゲージメントのために、自分のサイトでの行動の呼びかけを後押しすることができます。

もっと欲しい？ CTAを次のレベルに引き上げるのに役立つすばらしい投稿がたくさんあります。

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

乾杯！

ホバー時にコンテンツを変更してDiviで独自のCTAを作成する方法（3つの方法）

スニークピーク

＃1ボタンのホバーでコンテンツを変更する方法

＃2テキストモジュールの背景と本文の内容を変更する方法

＃3 Call toActionモジュールを使用して複数の要素のホバーでコンテンツを変更する方法

レイアウトを無料でダウンロード

無料でダウンロード

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

始めるために必要なもの

＃1ボタンのホバーでコンテンツを変更する方法

ホバー時のボタンテキストの変更

ボタン幅

追加の変更とホバー効果

ホバーでボタンアイコンを反転する

ホバーのボタンアイコンを変更する

最終結果

＃2テキストモジュールの背景と本文の内容を変更する方法

列設定の更新

列1のテキストモジュールをカスタマイズします

最終結果

＃3 Call toActionモジュールを使用して複数の要素のホバーでコンテンツを変更する方法

新しい召喚状モジュールを追加する

ホバー時にコンテンツを変更してCTAを更新する

レイアウトボタンスタイルのコピーと貼り付け

テキストスタイルを更新する

最終設定

これまでの結果

アニメーションでコンテンツの変化を和らげる

最終結果

最終的な考え

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