スタイル付きおよび反転カーソルをDiviページに追加する方法

Webサイトで訪問者と対話する最も速い方法の1つは、カーソルを使用することです。 それが通常すべての始まりです。 デスクトップでのユーザーインタラクションは、訪問者がカーソルを使用してページをナビゲートする方法にほぼ完全に基づいています。 それがホバー効果であろうとクリックであろうと、それは彼らがイベントをトリガーすることを可能にする一つのことでもあります。 そのため、特定の目標を念頭に置いてカーソルをカスタマイズするWebサイトがたくさんあります。 たとえば、行動の呼びかけを強調したい場合は、カーソルのスタイルを設定すると便利です。 今日は、Divi内でそれを行う方法を紹介します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1.新しいページを作成する/既存のページを開く

新しいページを作成するか、既存のページを開きます

新しいページを作成するか、既存のページを開くことから始めます。

お好みのレイアウトをアップロード

このチュートリアルの本質に焦点を当てるために、Bike Repair Layout Packを使用しますが、他の任意のレイアウトを自由に使用してください。

ページの下部に新しいセクションを追加

レイアウトがアップロードされたら、ページの下部に移動して、新しいセクションを追加します。 このセクションを使用してカーソルを作成します。

間隔

カスタムカーソルを作成するには、チュートリアルの後半でテキストモジュールを追加します。 このモジュールはセクション内に配置されますが、実際のセクションコンテナがデザインに表示されることは望ましくありません。 セクションが表示されないようにするために、間隔設定のデフォルトの上部と下部のパディングを削除します。

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

新しい行を追加

カラム構造

次の列構造を使用して、セクションに行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定ですべてのカスタムガター幅を削除します。

• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

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

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

テキストモジュールの追加（カーソル）

コンテンツボックスを空のままにします

テキストモジュールを追加します。これについては、後でカーソルとして使用します。 コンテンツボックスは空のままにします。

サイジング

[デザイン]タブに移動し、さまざまな画面サイズでカスタムの幅と高さを使用してモジュールを形成します。

• 幅：
  • デスクトップ：100px
  • タブレット：60px
  • 電話番号：40px
• 身長：
  • デスクトップ：100px
  • タブレット：60px
  • 電話番号：40px

国境

この投稿のプレビューでわかるように、カーソルを円に変えるために、丸い角と境界線を使用します。

• すべてのコーナー：100％
• ボーダー幅：3px
• ボーダーカラー：#ffffff

ブレンドモード

この投稿のプレビューでは、特にボタンモジュールにカーソルを合わせると、カーソルが反転した効果に気付くことがあります。 この効果を実現するために、テキストモジュールにブレンドモードを使用します。

• ブレンドモード：違い

主な要素CSS

次のCSSコード行をモジュールのメイン要素に追加することで、将来カーソルとして使用できるようにモジュールを準備するのに役立ちます。

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

ポジション

モジュールにも固定位置を使用します。

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

CSSクラス

そして、[詳細設定]タブでカスタムCSSクラスを割り当てて、モジュール設定を完了します。

• CSSクラス：カーソル

2.機能を追加する

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

カーソルテキストモジュールが配置されたので、次は機能に焦点を当てます。 新しいセクションのカーソルテキストモジュールのすぐ下にコードモジュールを追加します。

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

CSSとJQueryコードを少し組み合わせますので、先に進んで、コードモジュールにスタイルタグとスクリプトタグを追加します。

JQueryコードオープニング

次に、スクリプトタグの間に次のJQueryコードの開始行をコピーして貼り付けます。

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

カーソルテキストモジュールの再配置

コードモジュール内の基盤が作成されたので、ステップバイステップで進みます。 最初に行うことは、作成したテキストモジュールをビルダーの内部コンテンツの後に配置することです。 これにより、ページ全体でカーソルを使用できるようになります。

$('.cursor').insertAfter('.et_builder_inner_content');

ページのデフォルトカーソルを削除する

次に、スタイルタグの間に配置するカスタムCSSコードを使用して、ページのデフォルトカーソルを削除します。

body {
cursor: none;
}

カーソルテキストモジュールをカーソルとして設定

次に、JQueryコードの次の行を使用して、カーソルが訪問者の動きを追跡できるようにします。

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

特定のモジュールにカーソルを合わせたときのトグル効果

CSSクラスの増加を追加

この投稿のプレビューでわかるように、ボタンモジュールにカーソルを合わせると、カーソルのスタイルが変わります。 これを実現するために、スタイルタグの間に新しいCSSクラスを追加します。

.increase-size {
transform: scale(5);
background-color: white;
}

すべてのボタンモジュール

いくつかのJQueryコードを使用してこのCSSクラスを切り替えます。 以下のコードは、Diviページ内のすべてのボタンモジュールを1つずつ対象としています。

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

特定のボタンモジュール

特に1つのモジュールに効果を適用したい場合は、別のアプローチが必要です。 まず、エフェクトを適用するボタンモジュールを開き、カスタムCSSクラスを含めます。

• CSSクラス：カーソルボタン

次に、前の手順で使用したコードのCSSクラスを置き換えます。 それでおしまい！

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviページのカスタムカーソルを作成する方法を紹介しました。 また、このカスタムカーソルを使用して、誰かがページ上でアクションの呼び出しをホバーしたときにホバー効果をトリガーする方法も示しました。 カスタムカーソルを作成する方法を習得すると、あらゆる種類のデザインや効果を作成できるようになります。 JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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