如何向您的 Divi 頁面添加樣式和反向光標

已發表: 2021-03-03

與您網站上的訪問者互動的最快方式之一是通過他們的光標。 這通常是一切開始的地方。 桌面上的用戶交互幾乎完全基於訪問者使用光標瀏覽頁面的方式。 這也是允許他們觸發事件的一件事，無論是懸停效果還是點擊。 這就是為什麼您會遇到大量網站，這些網站根據特定目標自定義光標。 例如，如果您想突出顯示號召性用語，則設計光標樣式會很有幫助。 今天，我們將向您展示如何在 Divi 中做到這一點。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

光標

移動的

光標

免費下載佈局

要使用免費佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 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 頁面中的所有按鈕模塊。 

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

光標

特定按鈕模塊

如果您希望效果特別適用於一個模塊，則需要一種不同的方法。 首先，打開要應用效果的按鈕模塊並包含自定義 CSS 類。

  • CSS 類：光標按鈕

光標

然後，替換您在上一步中使用的代碼中的 CSS 類。 就是這樣！ 

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

光標

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

光標

移動的

光標

最後的想法

在這篇文章中，我們向您展示瞭如何為您的 Divi 頁面創建自定義光標。 我們還向您展示瞭如何使用此自定義光標在有人將號召性用語懸停在您的頁面上時觸發懸停效果。 一旦掌握了創建自定義光標的方法，您就可以創建任何類型的設計或效果！ 您也可以免費下載 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。