如何在使用 Divi 懸停元素時將光標變成按鈕

已發表: 2021-05-07

當您在頁面上顯示點擊項目時，重要的是要確保人們知道他們可以選擇一個項目並點擊它。 最明顯的方法之一是包含一個按鈕，但如果您正在尋找一種額外的交互方式來鼓勵在您的頁面上點擊，您會喜歡本教程。 今天，我們將向您展示如何在懸停特定的可點擊元素（例如圖像）時將光標變成按鈕。 這將為您的訪問者增加額外的激勵，並產生漂亮的頁面交互。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

光標按鈕

移動的

光標按鈕

免費下載佈局

要使用免費佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1. 創建元素結構

添加新部分

背景顏色

我們將通過在 Divi 頁面中構建元素結構來開始本教程。 添加一個新部分並為其使用白色背景色。

  • 背景顏色：#ffffff

光標按鈕

間距

移至該部分的設計選項卡並按如下方式更改間距設置：

  • 頂部填充：80px
  • 底部填充：0px

光標按鈕

添加新行

列結構

繼續使用以下列結構添加新行：

光標按鈕

漿紗

在不添加模塊的情況下，打開行設置並在大小設置中更改最大寬度。

  • 最大寬度：2580px

光標按鈕

間距

接下來刪除所有默認的頂部和底部填充。

  • 頂部填充：0px
  • 底部填充：0px

光標按鈕

將圖像模塊添加到第 1 列

上傳圖片

讓我們開始模塊，從第 1 列中的圖像模塊開始。上傳您選擇的圖像。

光標按鈕

添加鏈接

接下來添加到圖像模塊的鏈接。

光標按鈕

懸停比例

然後，轉到設計選項卡並更改模塊的懸停比例設置。

  • 兩者：90%

光標按鈕

CSS 類

通過在高級選項卡中應用以下 CSS 類來完成模塊設置：

  • CSS 類：圖像光標

光標按鈕

將文本模塊 #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

光標按鈕

  • 按鈕字體：Actor
  • 顯示按鈕圖標：是
  • 按鈕圖標位置：左
  • 僅在懸停按鈕時顯示圖標：否

光標按鈕

間距

添加一些自定義間距值。

  • 下邊距：80px
  • 底部填充：20px
  • 右填充：30px

光標按鈕

盒子陰影

並通過應用以下框陰影設置來完成模塊設置：

  • 框陰影水平位置：0px
  • 框陰影垂直位置：2px
  • 陰影顏色：#000000

光標按鈕

刪除第 2 列

完成第一列及其中的所有模塊後，刪除該行的空第二列。

光標按鈕

克隆列 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 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。