如何在 Divi 中使用 Blurb 圖標背景獲得創意

Blurb 模塊是您可以在 Divi 中找到的最通用的一些元素。 在這篇文章中，我們將向您展示如何更進一步並利用模糊圖標背景獲得創意。 我們將使用簡介模塊、文本模塊和號召性用語模塊的組合。 這些獨特的設計非常適合服務頁面和產品類別頁面。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

示例#1

桌面

移動的

示例#2

桌面

移動的

示例 #3

桌面

移動的

免費下載 Blurb 圖標背景示例

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

一般步驟

添加新部分

背景

要重新創建這些創意簡介背景設計，請打開一個新頁面或向現有頁面添加一個新部分。 在添加一行之前，為您的部分添加背景顏色。

• 背景顏色：#f7f7f7

間距

也向該部分添加一些自定義的頂部和底部填充。

• 頂部和底部填充：120px

添加新行

列結構

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

漿紗

在添加任何模塊之前，調整行的大小。

• 寬度：100%
• 最大寬度：100%

間距

然後，在間距設置中調整填充。

• 頂部填充：8vw
• 底部填充：15vw
• 左右填充：12vw

第 1 欄

完成修改行設置後，對第一列進行一些更改。

背景

首先，添加一個白色背景。

• 背景顏色：白色#ffffff

邊界

然後，添加一些邊框半徑。

• 圓角：2vw 所有四個角

盒子陰影

最後，添加一個框陰影。

• Box-Shadow：第一個選項
• 盒影模糊強度：47px

克隆行兩次

在我們開始添加模塊之前，還有最後一步。 克隆該行兩次。

重新創建示例 #1

將 Blurb 模塊添加到第 1 列

擦除默認內容

現在我們已經設置了行和列，我們可以開始向第一行的第 1 列添加模塊。 首先，添加一個模糊模塊並刪除所有默認標題和正文文本。

選擇圖標

然後，選擇一個圖標而不是圖像。

• 圖標：鏈接

背景

為模糊模塊添加黑色背景色。

• 背景顏色：黑色#000000

圖標設置

然後，更改圖標設置。

• 圖標顏色：黃色 #edf000
• 圖標位置：頂部
• 圖標字體大小：
  • 台式機：3vw
  • 平板電腦：11vw
  • 電話：13vw

漿紗

繼續調整模塊的大小。

• 內容寬度：100%
• 寬度：
  • 台式機：11vw
  • 平板電腦：19vw
  • 電話：22vw

間距

還要添加一些間距值。

• 最高利潤率：-5vw
• 底部邊距：0vw
• 左邊距：-1vw
• 頂部填充和底部填充：4vw

邊界

要使圖標具有獨特的形狀，請為除左下角之外的每個角添加一些邊框半徑。

• 圓角：50vw，左下角為0vw。

盒子陰影

最後，添加一個框陰影。

• Box-Shadow：第一個選項
• 盒影模糊強度：50px

自定義 CSS

默認情況下，該圖標附有一些底部邊距。 為了擺脫這種情況，我們將向模糊圖像自定義 CSS 框添加一行 CSS 代碼。

• 模糊圖像：邊距底部：0px；

margin-bottom: 0px;

將文本模塊添加到第 1 列

添加H3內容

在圖標下方，添加一個文本模塊，其中包含您選擇的一些 H3 內容。

背景

轉到背景設置並添加漸變背景。

• 背景：漸變
• 顏色一：透明
• 顏色二：黃色#edf000
• 梯度方向：180度
• 開始和結束位置：74%

標題文字

然後，設置 H3 文本的樣式。

• 標題文本標題級別：H3
• H3 字體：Josefin Sans
• H3 對齊：居中
• H3 字體顏色：黑色 #oooooo
• H3 文字大小：
  • 台式機：2.4vw
  • 平板電腦：3.4vw
  • 電話：4.8vw
• H3 字母間距：0em

漿紗

在大小設置中，調整平板電腦和手機的寬度。

• 寬度：
  • 平板電腦：50%
  • 電話：60%

間距

繼續轉到間距設置並調整邊距值。

• 左右邊距：5vw
• 頂部填充：1vw

轉變

最後，使用變換選項旋轉模塊。

• 變換翻譯：
  • x軸：-20vw
  • y軸：13vw
• 變換旋轉：第一個選項，280 度

將號召性用語模塊添加到第 1 列

刪除默認標題內容，添加按鈕和文本內容

我們在第 1 列中需要的下一個也是最後一個模塊是號召性用語模塊。 添加您選擇的一些內容並刪除標題副本。

添加鏈接

向按鈕添加相關鏈接。

背景

確保背景沒有顏色。

文章主體

然後，轉到設計選項卡並更改正文設置。

• 正文字體：深紅色文本
• 正文對齊方式：左
• 正文顏色：深灰色 #666666
• 正文大小：
  • 台式機：1.2vw
  • 平板電腦：2.6vw
  • 電話：3.1vw
• 車身線高：1.8em

按鈕

也修改按鈕樣式。

• 按鈕文字大小：
  • 台式機：1vw
  • 平板電腦：2vw
  • 電話：3vw
• 按鈕文字顏色：深灰色#3f3f3f
• 按鈕邊框顏色：深灰色 #3f3f3f
• 按鈕字體： Josefin Sans
• 按鈕邊距：3vw
• 按鈕頂部和底部填充：1vw
• 按鈕左右填充：3vw

間距

通過添加一些左右填充來完成模塊的設置。

• 左右填充：7vw

刪除第二列並克隆第一列

調整第 2 列中的設置

現在，返回行設置並刪除第二列。 緊接著，克隆第一列。 在接下來的步驟中，我們將調整重複列中的一些設置。

模糊模塊

首先更改模糊模塊的圖標顏色。

• 圖標顏色：Aqua #00ffd4

文本模塊

接下來更改文本模塊的漸變背景和副本。

• 背景顏色：Aqua #00ffd4
• 更改內容

重新創建示例 #2

將 Blurb 模塊添加到第 1 列

刪除默認內容

進入第二個例子！ 向第 1 列添加一個模糊模塊並刪除所有默認內容。

選擇圖標

然後，選擇一個圖標。

背景

現在，添加黃色背景色。

• 背景顏色：黃色#edf000

圖標

繼續修改設計選項卡中的圖標設置。

• 圖標顏色：白色#ffffff
• 圖標位置：頂部
• 圖標字體大小：
  • 台式機：3vw
  • 平板電腦：11vw
  • 電話：12vw

漿紗

設置顏色和背景樣式後，調整模塊的大小。

• 內容寬度：100%

間距

也修改間距設置。

• 底部邊距：0vw
• 左右邊距：3vw
• 頂部和底部填充：2vw

邊界

接下來為每個角添加一些邊框半徑。

• 圓角：2vw 所有四個角

盒子陰影

通過添加一個微妙的框陰影來完成模塊的設計。

• Box-Shadow：第一個選項

刪除第 1 列的框陰影和背景顏色

接下來打開第1列設置，去掉背景色和方框陰影。

自定義 CSS

通過向高級選項卡添加一行 CSS 代碼，刪除應用於模糊圖標的默認底部邊距。

• 模糊圖像：邊距底部：0px；

margin-bottom: 0px;

將號召性用語模塊添加到第 1 列

添加標題內容、正文內容和按鈕內容

在模糊模塊下方，添加一個號召性用語模塊並插入您選擇的一些內容。

添加鏈接

添加指向下一步按鈕的鏈接。

背景

繼續添加白色背景。

• 背景顏色：白色#ffffff

標題文字

在設計選項卡中，設置 H3 標題文本的樣式。

• 標題標題級別：H3
• H3 字體：Josefin Sans
• H3 字體顏色：深灰色 #3f3f3f
• H3尺寸：
  • 台式機：2vw
  • 平板電腦：4vw
  • 電話：6vw
• H3 線高：2.3em

文章主體

然後，設置正文的樣式。

• 正文字體：深紅色文本
• 正文對齊方式：左
• 正文顏色：深灰色 #666666
• 正文大小：
  • 台式機：1.1vw
  • 平板電腦：2.2vw
  • 電話：3.1vw
• 車身線高：1.8em

按鈕

轉到按鈕設置並按如下方式設置按鈕樣式：

• 按鈕文字大小：
  • 台式機：1vw
  • 平板電腦：2vw
  • 電話：3vw
• 按鈕文字顏色：深灰色#3f3f3f
• 按鈕字體： Josefin Sans
• 按鈕邊框寬度：2-x
• 按鈕邊框顏色：深灰色 #3f3f3f
• 按鈕頂部和底部邊距：3vw
• 按鈕頂部和底部填充：1vw
• 按鈕左右填充：3vw

間距

現在，調整間距。

• 底部邊距：-1vw
• 頂部填充：6vw
• 左右填充：7vw

邊界

然後，將邊框設置中的角變圓。

• 圓角：2vw

盒子陰影

最後，添加一個框陰影。

• Box-Shadow：第一個選項
• 盒影模糊強度：50px

刪除第二列並克隆第一列

調整第 2 列中的設置

與前面的示例類似，轉到行設置並刪除第二列。 複製第一列並調整一些設置。

模糊模塊

將模糊模塊的背景從黃色更改為淺綠色。

• 背景圖標顏色：Aqua #00ffd4

號召性用語模塊

更改號召性用語模塊的內容和鏈接。

• 更改標題內容
• 更改鏈接

重新創建示例 #3

將 Blurb 模塊添加到第 1 列

刪除默認內容

繼續下一個也是最後一個例子！ 向第 1 列添加一個模糊模塊並擦除默認內容。

選擇圖標

選擇一個圖標。

背景

為模塊添加亮黃色背景。

• 背景顏色：黃色#f7f426

圖標

使圖標變黑並調整其位置

• 圖標顏色：黑色 #000000
• 圖標位置：左
• 圖標字體大小：
  • 台式機：3vw
  • 平板+手機：8vw

漿紗

繼續修改模塊的寬度和高度。

• 內容寬度：100%
• 高度：23vw

間距

此外，調整間距設置。

• 左邊距：3vw
• 右邊距：25vw
• 頂部填充：2vw
• 左填充：1vw

邊界

也添加一些邊界半徑。

• 圓角：所有角落 2vw

盒子陰影

然後，添加一個框陰影。

• Box-Shadow：第一個選項

轉變

最後，使用自定義轉換轉換值重新定位模塊。

• x軸：-6vw
• y 軸：1vw

從第 1 列中刪除背景顏色和框陰影

轉到第 1 列設置並刪除背景顏色和框陰影。

將號召性用語模塊添加到第 1 列

添加標題、正文和按鈕內容

在模糊模塊下方，添加一個號召性用語模塊。 添加一些您選擇的內容。

添加鏈接

然後，添加指向按鈕的鏈接。

背景

要為號召性用語模塊設置樣式，請先添加黑色背景色。

• 背景顏色：黑色#oooooo

標題文字

接下來調整 H3 文本設置。

• 標題標題級別：H3
• H3 字體：Josefin Sans
• H3 字體顏色：亮黃色#f7f426
• H3 字體大小：
  • 台式機：2vw
  • 平板電腦：4vw
  • 電話：6vw
• H3 線高：2.3em

文章主體

也更改正文設置。

• 正文字體：深紅色文本
• 正文對齊方式：左
• 正文顏色：白色 #000000
• 正文大小：
  • 台式機：1.2vw
  • 平板電腦：2.2vw
  • 電話：3.1vw
• 車身線高：1.8em

按鈕

然後，按如下方式設置按鈕樣式。

• 按鈕文字大小：
  • 台式機：1vw
  • 平板電腦：2vw
  • 電話：3vw
• 按鈕文字顏色：Aqua #00ffd4
• 按鈕邊框顏色：Aqua #00ffd4
• 按鈕字體： Josefin Sans
• 按鈕上下邊距：3vw
• 按鈕頂部和底部填充：1vw
• 按鈕左右填充：3vw

漿紗

繼續調整大小設置並進行一些更改。

• 寬度：90%
• 模塊對齊：居中

間距

也修改間距設置。

• 最高邊距：-9vw
• 頂部填充：5vw
• 左右填充：7vw

邊界

接下來打開邊框設置並為每個角添加一些邊框半徑。

• 圓角：2vw

盒子陰影

我們也使用了一個微妙的盒子陰影。

• 框陰影：第一個選項

轉換 翻譯

最後，通過修改轉換轉換設置來重新定位號召性用語模塊。

• y 軸：-18vw

刪除第二列並克隆第一列

調整第 2 列中的設置

現在第一列已準備就緒，我們將刪除第二列並複制第一列。 之後，我們將調整一些內容和顏色細節。

模糊模塊

在模糊模塊設置中，將背景從黃色更改為淺綠色。

• 背景圖標顏色：Aqua #00ffd4

號召性用語模塊

在號召性用語模塊設置中，更改標題內容、標題顏色和按鈕顏色。 不要忘記更改按鈕鏈接，您就完成了！

• 標題文字顏色：Aqua #00ffd4
• 內容
• 按鈕顏色：#00ffd4

預覽

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

示例#1

桌面

移動的

示例#2

桌面

移動的

示例 #3

桌面

移動的

結論

正如您在這篇文章中看到的，宣傳語圖標背景可以使您的宣傳語設計更加有趣。 通過使用與號召性用語和文本模塊配對的簡介模塊，有許多創造性的可能性。 這些設計風格非常適合服務展示或產品部分。 你怎麼認為？ 在評論中告訴我們。