5 個創意 Divi Blurb 模塊設計

已發表: 2018-10-22

在這篇文章中，我們將探索 Divi 最受歡迎的功能之一，即 Blurb 模塊。雖然看起來很簡單，但它具有許多可定制的功能，可以使您的網站元素栩栩如生。通常，Blurb 模塊用於服務、福利、聯繫信息等，但有了 Divi，可能性是無限的。

讓我們找點樂子吧！

搶先看

這是我將在本教程中創建的 5 種模糊模塊樣式的先睹為快。

5 個創意 Divi Blurb 模塊設計

訂閱我們的 YouTube 頻道

入門

首先，您需要創建一個新頁面。從您的 WordPress 儀表板，導航到頁面 > 添加新。然後給你的頁面一個標題並部署可視化構建器。選擇“從頭開始構建”選項。一旦視覺構建器加載到頁面上，您就可以開始設計了。

本教程旨在讓您可以輕鬆地單獨創建這些模糊樣式設計中的每一個，因此請隨時跳下帖子到您想要構建的設計。換句話說，您不必從第一個開始。

1. 帶有功能列表的彈出式模糊

在第一個示例中，我們將通過在行外擴展簡介以創建彈出效果來獲得一些樂趣。然後我們可以使用每個旁邊的相鄰列添加一些帶有左對齊圖標的簡介，作為特色列表項。

首先，創建一個具有四列結構的新節和一行。

然後繼續更新行設置，如下所示：

背景顏色：#2e3858
使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是
自定義邊距：5vw 頂部，5vw 底部
自定義填充：0px 頂部，0px 底部

保存設置。

然後在第一列中，添加您的第一個模糊模塊。

取出內容框中的最後一句話以稍微縮短文本量。然後選擇使用圖標而不是圖像並選擇一個圖標（任何人都會這樣做）。

然後更新以下內容：

背景顏色：#df4570
圖標顏色：#ffffff
文字方向：居中
標題字體：Encode Sans Semi Condensed
標題字體樣式：TT
標題字母間距：2px
自定義邊距（桌面）：-5vw 頂部，-5vw 底部
自定義邊距（平板電腦）：0px 頂部，0px 底部
自定義填充：5vw 頂部，5vw 底部，3vw 左，3vw 右
盒子陰影：見截圖
框陰影模糊強度：80px

使用右鍵菜單選項或 cmd+c 和 cmd+v 快捷鍵，複製您剛剛創建的模塊並將其粘貼到第 3 列中。然後使用另一種明亮（但互補）的背景色更新新的模糊模塊設置：

背景顏色：#24c4a3

現在是時候在我們剛剛創建的彈出式簡介旁邊添加列表項簡介了。

為此，在第 2 列中添加一個新的簡介。然後取出內容框中的模擬文本，以便僅保留標題文本。然後像以前一樣添加一個圖標來替換您的圖像。然後更新設計設置如下：

圖標顏色：#df4570
圖像/圖標放置：左
標題字體：Encode Sans Semi Condensed
自定義填充：頂部 20 像素，底部 20 像素，左 3vw，右 3vw

將簡介複製兩次，以便在列中獲得三個列表簡介。然後使用 Divi 的 Multiselect 功能選擇所有三個簡介，然後將它們複製並粘貼到第 4 列中。

您還可以使用多選來選擇第 4 列中的所有三個模糊，並批量編輯元素設置以將所有三個的圖標顏色更改為 #24c4a3。

就是這樣！創建彈出式宣傳語是一種有趣的方式，可以讓您的宣傳語脫穎而出，旁邊的相鄰列表宣傳語為您提供了一些更具創意設計的額外選項。

這是最終結果。

2. 帶有自定義背景圖像的宣傳模糊。

這種宣傳風格非常適合展示內容和促銷優惠，例如免費書籍。基本思想是將模糊內容放置在模塊的左側，以便為自定義背景圖像騰出空間。讓我們開始吧。

首先添加一個具有兩列行結構的常規部分。在左欄中添加一個新的模糊模塊。

更新標題文本並取出模擬內容的最後一句以減少文本量。然後使用書籍圖片（或產品圖片）更新您的圖片。一本書或其他東西的圖標也可以使用。

我正在使用 Travel Blog Layout Pack 中的圖像資源，因此可以通過抓取這些圖像來快速開始設計。

提示：您還可以向該模塊添加模塊鏈接 URL，以使整個模塊可點擊，因為它可以用作促銷。

接下來，向模塊添加背景圖像。確保背景圖像是像標題一樣的圖像，圖像的焦點在右側，這樣您就可以將內容添加到圖像的左側，而背景會分散文本的注意力。

然後添加背景漸變作為位於內容後面的部分疊加層並疊加背景圖像以使文本更具可讀性。要添加背景漸變更新以下內容：

背景漸變左顏色：rgba(255,255,255,0.8)
背景漸變右側顏色：rgba(255,255,255,0)
梯度方向：90度
起始位置：40%
結束位置：70%
將漸變放在背景圖像上方：是

然後更新以下內容：

圖像框陰影：見截圖
標題字體：Noto Serif
標題文字大小：26px
正文字體：Noto Sans
正文文字大小：16px
圖片寬度：150px
內容寬度（桌面）：60%
內容寬度：（智能手機）：80%
自定義填充：2vw 底部，2vw 左，2vw 右

這裡的關鍵設計技術是為圖像和內容提供自定義寬度，以便稍後可以將內容定位到左側。

現在我們需要在模糊的頂部添加一個框陰影，以創建書籍圖像延伸到模塊上方的印象，以獲得很好的重疊效果。為此，請更新以下內容：

盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：50px
陰影顏色：#ffffff

最後一步涉及將模糊內容與模塊左側對齊所需的一小段自定義 CSS。為此，請轉到高級選項卡並在 Blurb Content 輸入框下添加以下自定義 CSS：

margin-left: 0;

現在看看結果！

提示：不要忘記可用的懸停選項。嘗試在懸停時為書籍圖像添加邊框，讓內容變得生動起來！

3. 使用背景漸變的圓形模糊樣式

這種簡單的宣傳語風格使用背景漸變作為宣傳語內容的圓形背景。這是使用自定義 CSS 將整個模糊模塊變成圓圈的有趣替代方法。

首先添加一個具有三列行結構的新常規部分。

然後在左欄中添加一個模糊模塊。

然後取出內容的最後一句以減少文本量。對於此設計，將文本量保持在較小的範圍內很重要，因為您將把它放在一個圓圈內。

然後添加背景漸變以創建圓形背景，如下所示：

背景漸變左顏色：#fa7f28
背景漸變右側顏色：rgba(255,255,255,0)
漸變類型：徑向
起始位置：60%
結束位置：0%
將漸變放在背景圖像上方：是

然後更新其餘的設計設置，如下所示：

文字方向：居中
標題字體：Oswald
標題字體樣式：TT
標題字母間距：1px
正文字體：機器人
正文字體重量：輕
正文文字大小：16px
寬度（平板電腦）：80%
模塊對齊：居中
自定義填充（桌面）：頂部 20%，底部 25%，左側 20%，右側 20%
自定義填充（智能手機）：頂部 20%，底部 25%，左側 10%，右側 10%

這裡的關鍵是正確調整自定義填充，使背景圓圈與中心的內容對齊。您可能需要根據您擁有的內容量調整這些設置。

現在您可以將該模塊複製並粘貼到其餘列中。

然後更新行設置，使其自定義寬度為 80%，裝訂線寬度為 1。

要完成設計，您可以向您的部分添加背景圖像和漸變，如下所示：

添加背景圖片
背景漸變左顏色：rgba(2,0,76,0.51)
背景漸變右顏色：rgba(2,0,76,0.84)
將漸變放在背景圖像上方：是

就是這樣！看看最終的設計！

對於額外的空間，您始終可以將模糊圖標的大小減小到 50 像素之類的大小，以防止圓圈在較小的瀏覽器寬度上發生碰撞。進行調整時，不要忘記利用 Divi 的多選功能一次對所有模塊進行批量編輯。

額外提示：使用自定義 CSS 使整個 Blurb 模塊成為一個圓圈

如果您想將整個模塊變成一個圓形（而不是使用背景漸變），請將漸變替換為常規背景顏色，並在模糊模塊設置的高級選項卡下添加此自定義 CSS：

在主要元素框中：

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

在模糊內容框中：

margin: auto;

此自定義 CSS 會覆蓋在模糊模塊設置中設置的填充，因此如果您想重新控制這些設置，則可能需要刪除該片段。此外，這個 css 使用 flex 來使圓圈內的模糊內容居中。這將派上用場。

如果應用於所有三個模塊，它將看起來像這樣。

4. 帶邊框和方框陰影的框架模糊

我最喜歡的 Divi 設計功能之一是框陰影。在我們之前創建重疊效果的宣傳片設計中，我們已經對框陰影進行了創造性的使用。但是您也可以使用框陰影作為一種創造性的方式來用破碎的網格設計來構建您的內容。在此設計中，我將向您展示如何以獨特的方式組合邊框和框陰影。

首先，添加一個具有三列行結構的新常規部分。然後將blurb 模塊添加到第一列。

將圖像添加到簡介中。然後通過更新設計設置為模糊圖像提供邊框和框陰影，如下所示：

圖像頂部邊框寬度：8px
圖像頂部邊框顏色：#2f3854
圖像左邊框寬度：8px
圖像左邊框顏色：#2f3854

圖像框陰影：見截圖
框陰影水平位置：-20px
框陰影垂直位置：-30px
陰影顏色：#f89da9

然後更新標題和正文字體和間距，如下所示：

標題字體：Yeseva One
正文字體：蒙特塞拉特
自定義邊距：50px 底部
自定義填充：2vw 底部

最後，為您的模糊模塊提供自定義邊框和框陰影以平衡框架設計，如下所示：

右邊框寬度：15px
右邊框顏色：#2f3854
底部邊框寬度：15px
底部邊框顏色：#2f3854

圖像框陰影：見截圖
框陰影水平位置：20px
框陰影垂直位置：35px
陰影顏色：#dddddd

現在復制並粘貼第 2 列和第 3 列中的模塊並更新模糊圖像以完成設計。

這是最終結果。

5. 將 Blurbs 樣式化為曲線列表

下一個設計是使用簡介創建列表的有趣方式。使用一些自定義邊距，您可以彎曲您的簡介列表項以環繞頁面上的元素。在此示例中，我將彎曲列表以環繞大簡介圖標的右側。你可以有點創意

首先，添加一個具有兩列行結構的新常規部分。

在添加任何模糊模塊之前，通過更新行設置為您的行提供自定義寬度和裝訂線寬度，如下所示：

自定義寬度：700px
天溝寬度：2

現在讓我們通過在左列中添加模糊模塊來創建大的模糊圖標。然後取出標題文本和內容。然後選擇燈泡圖標。現在只有圖標應該可見。接下來，更新圖標的顏色和大小，如下所示：

圖標顏色：#96a6bd
圖標字體大小（桌面）：400px
圖標字體大小（智能手機）：200px

在右欄中，添加一個新的模糊模塊。這將是構成我們列表的五個總簡介中的第一個。然後打開模塊設置，取出內容，只留下標題文字。然後為簡介選擇右箭頭圖標。

接下來更新設計設置，如下所示：

背景顏色：#bb7860
圖標顏色：#ffffff
圖像/圖標放置：左
使用圖標字體大小：是
圖標字體大小：30px
標題字體：Raleway
標題文字顏色：#ffffff
標題文字大小：20px
標題行高度：1.5em
自定義保證金：底部 5%
自定義填充：頂部 3%，左側 10%，右側 2%

將模塊複製四次，直到在右列中總共堆疊了五個簡介。

然後給第二個模糊一個新的顏色，自定義邊距將其推到右邊，並按如下方式創建圓角：

背景顏色：#393e56
自定義邊距（桌面）：左 10%，右 -10%
自定義邊距（平板電腦）：左 0%，右 0%
圓角：右上50px，左下50px

在離開此模塊之前，通過右鍵單擊簡介設置中的選項複製圓角。

然後保存模糊設置並右鍵單擊您創建的第一個（頂部）模塊並粘貼圓角樣式模塊。

現在讓我們繼續用適當的顏色、間距和圓角設計更新最後三個模塊。

對於列中的第三個簡介，更新以下內容：

背景顏色：#96a6bd
自定義邊距（桌面）：左 20%，右 -20%
自定義邊距（平板電腦）：左 0%，右 0%
圓角：右上角50px，右下角50px

對於第四個簡介，更新以下內容：

背景顏色：#393e56
自定義邊距（桌面）：左 10%，右 -10%
自定義邊距（平板電腦）：左 0%，右 0%
圓角：左上角 50px，右下角 50px

對於第五個宣傳片，只需複制第四個宣傳片中的圓角並將其粘貼進去。

就是這樣！讓我們看看最終的設計。

5 個創意 Divi Blurb 模塊設計

搶先看

5 個創意 Divi Blurb 模塊設計

入門

1. 帶有功能列表的彈出式模糊

2. 帶有自定義背景圖像的宣傳模糊。

3. 使用背景漸變的圓形模糊樣式

額外提示：使用自定義 CSS 使整個 Blurb 模塊成為一個圓圈

4. 帶邊框和方框陰影的框架模糊

5. 將 Blurbs 樣式化為曲線列表

更多模糊風格靈感