Diviを使用して要素にカーソルを合わせながらカーソルをクリエイティブボタンに変える方法

Rifat Divi Tutorials Oct 16, 2021

要素の上にマウスを置いてボタンになり、クリックすると別のページにリダイレクトされるとどうなりますか? 多くの場合、画像ギャラリーまたは記事/製品タイルの下部または側面にボタンを設定して、その要素の詳細ページに移動します。 ボタンが視覚的に設定されていない場合はどうなりますか? マウスのホバリング効果を使用して設定し、マウスが画像または記事のタイルに着地し、特定の領域の任意の場所をクリックするとすぐにボタンになり、目的のページに移動します。 はい! Diviを使用すると、Webサイトをカスタマイズするための多くのオプションがあり、要素にカーソルを合わせたときにカーソルをクリエイティブボタンに変える方法に関する今日のチュートリアルがすべてあります。 わくわくしませんか?

それでは、これ以上待たずにチュートリアルに飛び込みましょう。

スニークピーク

先に進む前に、これが今日のデザインのようになります。

パート1:要素構造の構築

WordPressダッシュボードからページを追加し、DiviBuilderで開きます。 「最初から構築」で前進します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

追加:新しいセクション

背景色

最初のセクションに背景色として白を追加します。

  • 背景色:#ffffff

間隔

次に、[デザイン]タブから、セクションに間隔を追加します。

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

追加:新しい行

カラム構造

次に、セクションに2列の行を追加します。

サイジング

ここで、他のモジュールを追加する前に、この2列の行のサイズ設定を変更しましょう。

  • 最大幅:2580px

間隔

次に、間隔を変更します。

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

追加:列1への画像モジュール

画像を追加

次に、画像モジュールを列1に追加し、選択した画像を追加します。

リンクを追加

次に、この画像へのリンクを追加します。

ホバースケール

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

  • 両方:90%

CSSクラス

[詳細設定]タブからCSSクラスを追加します。

  • CSSクラス:image-cursor

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

H3コンテンツ

列1にテキストモジュールを追加し、必要に応じてH3コンテンツを追加します。

H3コンテンツ設定

デザインタブからH3コンテンツ設定を変更します。

  • 見出し3フォント:俳優
  • 見出し3テキストの色:#000000
  • 見出し3テキストサイズ:デスクトップ:35ピクセル、タブレット:28ピクセル、電話:22ピクセル
  • 見出し3行の高さ:1.4em

間隔

テキストモジュールに間隔を追加します。

  • 下マージン:15px

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

テキストコンテンツ

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、そのモジュールに説明的なコンテンツを追加します。

テキストコンテンツの設定

デザインタブからテキストコンテンツの設定を変更します。

  • 見出し3フォント:俳優
  • 見出し3テキストの色:#75BAFF
  • 見出し3テキストサイズ:デスクトップ:22ピクセル、タブレット:18ピクセル、電話:15ピクセル
  • テキスト文字の間隔:0.5px
  • 見出し3行の高さ:1.4em

追加:列1へのボタンモジュール

ボタンテキスト

最後に、ボタンモジュールを列1に追加し、関連するコピーを追加します。

ボタンのテキスト設定

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

  • ボタンにカスタムスタイルを使用する:はい
  • ボタンのテキストの色:#000000
  • ボタンの境界線の幅:0px
  • ボタンの境界線半径:1px
  • ボタンフォント:俳優
  • ボタンアイコンを表示:はい
  • ボタンアイコンの配置:左
  • ボタンのホバー時にアイコンのみを表示:いいえ

間隔

間隔の値を調整します。

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

ボックスシャドウ

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

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

コンテンツを複製する

ここでは、いくつかのことを行います。 まず、2番目の列を削除します。

次に、最初の列のクローンを作成します。

次に、行全体を複製し、内容を変更します。

パート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

追加:コードモジュール

最後のテキストモジュールの下にコードモジュールを追加します。 コードモジュール内にStyleタグとScriptsタグを追加します。

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コードを追加する

次のCSSコードをスクリプト内に貼り付けます

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');
 
});
 
});

最終結果

これが私たちの最終的なデザインがどのように見えるか、素晴らしいです!

結論

今日のチュートリアルは、よりインタラクティブなデザインをWebサイトに導入する方法に基づいています。 Diviは、デザインをすっきりとゴージャスにすることで、より多くの訪問者の注意をWebサイトに引き付ける大きな機会を提供します。 今日のチュートリアルが気に入っていただければ幸いです。気に入っていただければ、シェアは素晴らしいものになります。