• 主頁
  • 文章
  • 主題
  • 如何通過使用 Divi 模糊其他模塊來突出顯示懸停的模糊模塊

如何通過使用 Divi 模糊其他模塊來突出顯示懸停的模糊模塊

已發表: 2020-02-01

無論您正在構建哪種類型的網站，在某些時候，您都可能希望顯示不同服務、步驟等的列表。 以有吸引力的方式創建此類列表的最簡單方法之一是使用 Divi 的 Blurb 模塊。 Blurb 模塊允許您精美地構建列表內容，同時為您提供無限的設計可能性。

在今天的教程中，我們將更進一步，向您展示如何通過模糊您顯示的其他模塊來突出顯示懸停的 Blurb 模塊。 這是一次將注意力集中在一個模糊模塊上的好方法，而不會讓其他模糊模塊分散讀者的注意力。 一旦訪問者移動到另一個 Blurb 模塊，該模塊就會變成突出顯示的模塊。 您也可以免費下載佈局的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

懸停模糊模塊

移動的

懸停模糊模塊

免費下載 Hovered Blurb 模塊佈局

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

下載文件
免費下載

免費下載

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

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

讓我們開始重建吧！

添加新部分

背景顏色

首先向新頁面或您正在處理的頁面添加常規部分。 打開部分設置並更改背景顏色。

  • 背景色：#eaeaea

懸停模糊模塊

間距

也添加一些自定義邊距和填充值。

  • 最高利潤率：2vw
  • 底邊距：2vw
  • 左邊距：2vw
  • 右邊距：2vw
  • 頂部填充：0px
  • 底部填充：0px

懸停模糊模塊

邊界

通過添加一些邊框半徑來完成部分設置。

  • 所有角落：20px

懸停模糊模塊

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

懸停模糊模塊

漿紗

在不添加任何模塊的情況下，打開行設置並更改大小設置。 啟用“均衡列高”選項將有助於下一步對齊列內容。

  • 均衡柱高：是
  • 寬度：90%
  • 最大寬度：1580px
  • 最小高度：500px（桌面），自動（平板電腦和手機）

懸停模糊模塊

主要元素

通過向行的主要元素添加一行 CSS 代碼來對齊列內容。 

align-items: center;

懸停模糊模塊

將 Blurb 模塊添加到第 1 列

添加內容

我們在本教程中使用的唯一模塊是 Blurb 模塊，但您可以使用您選擇的任何模塊替換此模塊，只要您添加我們將在接下來的步驟中共享的 CSS 類。 將第一個 Blurb 模塊添加到第 1 列並插入您選擇的一些內容。

懸停模糊模塊

選擇圖標

接下來選擇一個圖標。

懸停模糊模塊

懸停漸變背景

然後，僅在懸停時使用漸變背景。

  • 顏色 1：#ffffff
  • 顏色 2：#0f1bff
  • 漸變類型：線性
  • 起始位置：20%
  • 結束位置：20%

懸停模糊模塊

默認圖標設置

轉到模塊的設計選項卡並按如下方式更改圖標設置：

  • 圖標顏色：#ffffff
  • 圓形圖標：是
  • 圓圈顏色：#ffffff
  • 圖像/圖標放置：頂部
  • 圖像/圖標對齊方式：左

懸停模糊模塊

懸停圖標設置

在懸停時更改不同的圖標顏色。

  • 圖標顏色：#0f1bff
  • 圓圈顏色：#f7f7f7

懸停模糊模塊

默認標題文本設置

繼續修改標題文本設置。

  • 標題字體：Source Sans Pro
  • 標題字體粗細：粗體
  • 標題字體樣式：大寫

懸停模糊模塊

懸停標題文本設置

在懸停時更改標題文本顏色。

  • 標題文字顏色：#ffffff

懸停模糊模塊

默認正文設置

接下來是正文設置。

  • 正文字體：Open Sans
  • 車身線高：2em

懸停模糊模塊

懸停正文設置

使用白色懸停文本顏色。

  • 正文顏色：#ffffff

懸停模糊模塊

間距

然後，轉到間距設置並添加一些自定義填充值。

  • 頂部填充：50px
  • 底部填充：50px
  • 左填充：50px
  • 右填充：50px

懸停模糊模塊

默認框陰影

我們也在使用框陰影。

  • 框陰影模糊強度：80px
  • 框陰影傳播強度：-20px
  • 陰影顏色：rgba(255,255,255,0.18)

懸停模糊模塊

懸停框陰影

更改懸停時的陰影顏色。

  • 陰影顏色：rgba(0,0,0,0.18)

懸停模糊模塊

CSS 類

為了實現模糊效果，我們需要為 Blurb 模塊分配一個 CSS 類。 在這篇文章的後面，我們將在一些 JQuery 代碼中使用這個 CSS 類。

  • CSS 類：blurb-item

懸停模糊模塊

克隆 Blurb 模塊兩次並在剩餘列中放置重複項

完成第 1 列中的 Blurb 模塊後，您可以將其克隆兩次並將重複項放置在該行的剩餘列中。

懸停模糊模塊

克隆整行

您可以根據需要最多克隆該行，具體取決於您希望在頁面上顯示多少個 Blurb 模塊。

懸停模糊模塊

單獨自定義 Blurb 模塊

當然，您需要修改每個 Blurb 模塊的單獨內容。

懸停模糊模塊

添加新行

列結構

使用以下列結構向該部分添加另一行：

懸停模糊模塊

間距

打開行設置並刪除所有默認的頂部和底部填充。 這將有助於減少該行佔用的空間。

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

懸停模糊模塊

將代碼模塊添加到列

插入 JQuery 和 CSS 代碼

將代碼模塊添加到行的列並插入一些 JQuery 和 CSS 代碼以實現效果。 不要忘記將 JQuery 代碼放在 script 標籤之間，將 CSS 代碼放在 style 標籤之間，如下面的打印屏幕所示。 

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

懸停模糊模塊

預覽

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

桌面

懸停模糊模塊

移動的

懸停模糊模塊

最後的想法

在這篇文章中，我們向您展示瞭如何使用您在網站上共享的 Blurb 模塊發揮創意。 更具體地說，我們向您展示瞭如何通過模糊您顯示的其他模塊來突出顯示懸停的 Blurb 模塊。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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