如何將 Blurb 圖標設計為 Divi 內容的設計重點

使用模糊圖標作為設計重點可以為您的頁面佈局提供您以前可能從未想過的獨特設計。 除了定位模糊模塊的圖標以重疊文本模塊之外，您還可以使用文本模塊的背景和邊框來設置圖標的樣式。 這創造了一個很好的設計口音，在給你的圖標一個完全獨特的設計的同時框架內容。

在本教程中，我將向您展示如何將模糊圖標設置為 Divi 中內容的設計重點。

讓我們潛入吧！

搶先看

以下是我們將在本教程中構建的一些設計示例。

下載本教程的示例佈局

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

下載文件

免費下載

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

下載

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

從頭開始構建設計

首先，創建一個新頁面並為您​​的頁面命名。 然後在前端部署Divi builder。 添加具有一列行的常規部分。 在添加第一個模塊之前，使用以下內容更新行設置：

使用自定義裝訂線寬度：是
自定義天溝寬度：1

這將消除模塊之間的任何自定義邊距。

創建文本模塊

接下來在行內添加一個文本模塊。

使用以下填充文本更新文本模塊：

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

樣式化文本模塊

現在更新文本模塊設置的其餘部分，如下所示：

背景顏色：#ffffff

• 標題 2 字體：Nunito
• 標題 2 字體粗細：粗體
• 標題 2 字體樣式：TT
• 標題 2 文本顏色：#f24a5b
• 標題 2 文字大小：42 像素（桌面）、32 像素（平板電腦）、22 像素（手機）
• 標題 2 字母間距 [acing: 16px
• 標題 2 行高：1.3em

• 寬度：500px（桌面），490px（平板）
• 模塊對齊：居中
• 自定義填充（桌面）：頂部 40 像素，底部 40 像素，左側 50 像素，右側 50 像素
• 自定義填充（電話）：左 20 像素，右 20 像素
• 邊框寬度：10px
• 邊框顏色：#ffffff

由於我們將文本模塊與模糊圖標重疊，我們需要確保文本模塊以 z 空間順序位於圖標上方。 為此，我們必須首先將以下 CSS 片段添加到 Text 模塊的 Main Element CSS 框：

position: relative;

然後將 z-index 值設置為 1。

現在，此文本模塊將位於對設計很重要的任何其他重疊模塊之上。

創建模糊圖標

現在我們準備好創建第一個模糊圖標。 為此，我們必須首先添加一個模糊模塊並將其拖到文本模塊的頂部。 然後刪除模擬內容（標題文本和正文文本）並單擊以使用圖標而不是圖像作為簡介。

然後更新以下設計設置：

• 圖標顏色：#2ea3f2
• 使用圖標字體大小：是
• 圖標字體大小：100px
• 自定義邊距：0px 底部（這會去掉模塊之間的默認底部邊距；如果您使用的行間距寬度為 1，則不需要）

接下來，由於我們沒有在模塊中使用任何文本（只有圖標），我們可以去掉模糊圖標下的默認底部邊距。 為此，請將以下自定義 CSS 添加到 Blurb Image CSS 框中：

模糊圖像 CSS：

margin-bottom: 0px

複製 Blurb 圖標

在我們開始定位簡介之前，讓我們繼續複製簡介模塊並將副本拖到文本模塊下。 您現在應該在文本模塊的上方和下方有一個模糊圖標。

使用 Transform Translate 定位 Blurb 圖標

為了定位模糊圖標，我們將使用 Divi 的轉換選項，它允許我們將帶有圖標的模糊模塊放置在頁面上我們想要的任何位置。

定位模糊圖標 #1

要定位頂部簡介圖標，請打開簡介模塊設置並更新以下內容：

• Transform Translate X 軸（桌面）：-242px
• 變換 平移 Y 軸（桌面）：50px
• Transform Translate X 軸（手機）：-170px

定位模糊圖標 #2

在我們定位這個模糊圖標之前，讓我們把它放大一點。 為此，打開模糊模塊設置並將圖標字體大小更改為 150 像素。

然後通過更新以下變換選項來定位模糊圖標：

• Transform Translate X 軸（桌面）：242px
• 變換 平移 Y 軸（桌面）：-100px
• Transform Translate X 軸（手機）：190px

創建兩列行

要創建下一列，請複制現有行並將該行的列佈局更改為兩列佈局 (1/2 1/2)。

接下來，使用 Divi 的多選功能選擇左列中的所有三個模塊，然後將它們複製並粘貼到第二列中。

然後，刪除第一列中底部的模糊圖標。

對齊第 2 列中的模糊圖標

對於第 2 列中的 Blurb Icons，我們需要將頂部圖標向左移動，將底部圖標向右移動。 我們可以簡單地通過改變 Transform Translate X 軸值來做到這一點。

打開第 2 列中頂部模糊模塊的模糊模塊設置並更新以下內容：

• Transform Translate X 軸（桌面）：242px
• Transform Translate X 軸（手機）：170px

基本上，您所做的就是將這些值從負值更改為正值，以沿 x 軸向相反方向移動。

接下來，更新第 2 列中底部模糊模塊的變換轉換值，如下所示：

• Transform Translate X 軸（桌面）：-242px
• Transform Translate X 軸（手機）：-190px

更新第二行中的文本模塊樣式

第二行內容作為特色服務的子集。 因此，我們希望標題字體大小與我們的標題不同且更小。 要同時更新兩個文本模塊，請使用多選來選擇兩個文本模塊。 然後更新以下內容：

將 h2 標題內容更改為“服務”。

• 標題 2 文字大小：28 像素（桌面）、22 像素（平板電腦）、18 像素（手機）

保存設置。

現在打開第 2 列中文本模塊的設置模式並更新以下內容：

• 文字方向：右

調整佈局的間距

現在兩行內容之間的空白（或負）空間可能有點太多。 為了去掉一些空間，我們可以在頂行的底部模糊模塊中添加一個負底邊距，如下所示：

• 自定義邊距：-100px 底部

最後結果

現在讓我們來看看最終的結果。

嘗試其他圖標

要為您的佈局嘗試不同的圖標，您可以使用查找和替換功能。 打開包含您的圖標的宣傳語之一的宣傳語設置。 然後右鍵單擊設置模式中的圖標並選擇查找和替換。

在“查找和替換”彈出窗口中，更新以下內容：

• 內：本節
• 替換為：[選擇新圖標]

之後，單擊替換按鈕。

這將使用新的內容更改您部分中的所有內容。

以下是一些使用不同圖標的佈局示例。

最後的想法

在您的內容中添加模糊圖標作為設計重點是如何組合兩個模塊以創建完全獨特的設計的一個示例。 在這種情況下，文本模塊的背景和邊框用作周圍圖標的部分覆蓋。 結果是獨一無二的，為探索更多設計變化打開了大門。 隨意探索不同的圖標和顏色組合，為您自己的需要創造一些東西。

我期待在評論中收到您的來信。

乾杯!