Diviを使用して要素にカーソルを合わせるときにカーソルをボタンに変える方法

公開: 2021-05-07

ページにクリックスルーアイテムを表示するときは、アイテムを選択してクリックできることをユーザーに確実に知らせることが重要です。 これを行う最も明白な方法の1つはボタンを含めることですが、ページのクリックスルーを促進するための追加のインタラクティブな方法を探している場合は、このチュートリアルをお楽しみください。 今日は、画像などの特定のクリック可能な要素にカーソルを合わせたときに、カーソルをボタンに変える方法を紹介します。 これはあなたの訪問者に追加のインセンティブを追加し、美しいページの相互作用をもたらします。 JSONファイルも無料でダウンロードできます！

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

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

カーソルボタン

モバイル

カーソルボタン

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

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

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

無料でダウンロード

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

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

1.要素構造を作成します

新しいセクションを追加

背景色

このチュートリアルは、Diviページ内に要素構造を構築することから始めます。 新しいセクションを追加し、白い背景色を使用します。

  • 背景色：#ffffff

カーソルボタン

間隔

セクションの[デザイン]タブに移動し、次のように間隔設定を変更します。

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

カーソルボタン

新しい行を追加

カラム構造

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

カーソルボタン

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定で最大幅を変更します。

  • 最大幅：2580px

カーソルボタン

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

カーソルボタン

列1に画像モジュールを追加

画像をアップロード

列1の画像モジュールから始めて、モジュールを作成しましょう。選択した画像をアップロードします。

カーソルボタン

リンクを追加

次に、画像モジュールへのリンクを追加します。

カーソルボタン

ホバースケール

次に、[デザイン]タブに移動し、モジュールのホバースケール設定を変更します。

  • 両方：90％

カーソルボタン

CSSクラス

[詳細設定]タブで次のCSSクラスを適用して、モジュール設定を完了します。

  • CSSクラス：image-cursor

カーソルボタン

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

H3コンテンツを追加する

次のモジュールに進みます。これは、選択したH3コンテンツを含むテキストモジュールです。

カーソルボタン

H3テキスト設定

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

  • 見出し3フォント：俳優
  • 見出し3テキストの色：＃000000
  • 見出し3テキストサイズ：
    • デスクトップ：35px
    • タブレット：28px
    • 電話番号：22px
  • 見出し3行の高さ：1.4em

カーソルボタン

間隔

次に下マージンを追加します。

  • 下マージン：15px

カーソルボタン

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

コンテンツを追加する

次に、前のテキストモジュールのすぐ下に、選択した説明コンテンツを含む別のテキストモジュールを追加します。

カーソルボタン

テキスト設定

モジュールのテキスト設定を次のように変更します。

  • テキストフォント：俳優
  • テキストの色：＃75baff
  • 文字サイズ：
    • デスクトップ：22px
    • タブレット：18px
    • 電話番号：15px
  • テキスト文字の間隔：0.5px
  • レターラインの高さ：2em

カーソルボタン

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

コピーを追加

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

カーソルボタン

ボタンの設定

モジュールの[デザイン]タブに移動し、それに応じてボタンの設定を変更します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストの色：＃000000
  • ボタンの境界線の幅：0px
  • ボタンの境界線半径：1px

カーソルボタン

  • ボタンフォント：俳優
  • ボタンアイコンを表示：はい
  • ボタンアイコンの配置：左
  • ボタンのホバー時にアイコンのみを表示：いいえ

カーソルボタン

間隔

いくつかのカスタム間隔値も追加します。

  • 下マージン：80px
  • ボトムパディング：20px
  • 右パディング：30px

カーソルボタン

ボックスシャドウ

そして、次のボックスシャドウ設定を適用して、モジュール設定を完了します。

  • ボックスシャドウの水平位置：0px
  • ボックスシャドウの垂直位置：2px
  • 影の色：＃000000

カーソルボタン

列2を削除する

最初の列とその中のすべてのモジュールを完了したら、行の空の2番目の列を削除します。

カーソルボタン

クローン列1

そして、最初の列を1回複製して再利用します。

カーソルボタン

行全体のクローンを作成する

行全体を1回複製して続行します。

カーソルボタン

重複するコンテンツ、画像、リンクをすべて変更する

次に、重複する各列のすべてのコンテンツ、画像、リンクを変更してください。

カーソルボタン

2.カーソルを追加します

セクションに新しい行を追加

カラム構造

要素構造が整ったので、カーソルデザインを作成します。 これを行うには、次の列構造を使用してセクションに新しい行を追加します。

カーソルボタン

間隔

行設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

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

カーソルボタン

新しい行の列にカーソルテキストモジュールを追加する

コンテンツを追加する

次に、テキストモジュールを新しい行に追加します。 このテキストモジュールは、カーソルボタンのデザインの作成に専念します。 コンテンツボックス内に選択したコピーを追加します。

カーソルボタン

背景色

次に、背景色を追加します。

  • 背景色：＃47669b

カーソルボタン

テキスト設定

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

  • テキストフォント：俳優
  • テキストフォントの太さ：太字
  • テキストフォントスタイル：大文字
  • テキストの色：#ffffff
  • テキスト文字の間隔：2px
  • テキストの配置：中央

カーソルボタン

サイジング

次に、幅と高さの値をサイズ設定に追加します。

  • 幅：150px
  • 高さ：150px

カーソルボタン

国境

境界線の設定を変更することで、このモジュールを円に変えています。

  • すべてのコーナー：100px

カーソルボタン

ボックスシャドウ

微妙なボックスシャドウも追加します。

  • ボックスシャドウブラー強度：0px
  • ボックスシャドウスプレッド強度：20px
  • 影の色：rgba（7,213,255,0.14）

カーソルボタン

CSSクラス

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

  • CSSクラス：カーソル

カーソルボタン

主な要素CSS

モジュールのメイン要素にもいくつかのCSSコード行を追加しています。 

transition: all .1s linear;
pointer-events: none;

display: flex;
justify-content: center;
align-items: center;

カーソルボタン

ポジション

そして、[詳細設定]タブの位置を変更して、モジュールの設定を完了します。

  • 位置：固定
  • 場所：左上
  • Zインデックス：2

カーソルボタン

テキストモジュールの下にコードモジュールを追加

カーソルを設計したので、次は機能を動作させます。 そのために、カーソルのテキストモジュールのすぐ下に新しいコードモジュールを追加します。

カーソルボタン

スタイルとスクリプトタグを追加する

コードモジュールにいくつかのスタイルタグとスクリプトタグを追加します。

カーソルボタン

CSSコードを追加する

スタイルタグの間に次のCSSコード行を挿入します。 

.hide-cursor {
cursor: none;
}

.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;

visibility: hidden;
opacity: 0;
}

.show-cursor {
visibility: visible !important;
opacity: 1;
}

カーソルボタン

JQueryコードを追加する

また、スクリプトタグの間に次のJQueryコード行を使用します。 

jQuery(document).ready(function($){

var cursor = $('.cursor');

$('.image-cursor').mousemove(function(e){

cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');

});

$('.image-cursor').mouseleave(function() {

cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');

});

});

カーソルボタン

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

カーソルボタン

モバイル

カーソルボタン

最終的な考え

このチュートリアルでは、ページ上のクリック可能な要素にインタラクションを追加する方法を示しました。 具体的には、選択した要素を誰かがホバーしたときにカーソルボタンをトリガーする方法を示しました。 これにより、ページデザインに追加のインタラクションが追加され、クリック率の向上に役立つ可能性があります。 JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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