如何為 Divi 中的內容創建浮動角設計

創建浮動角設計是一種向 Divi 模塊添加一點創意風格的簡單而簡單的方法，您可能認為沒有自定義代碼是不可能的。 好消息！ 使用 Divi，您可以使用 Divi 的內置選項使用分隔線和宣傳語來設置模塊的四個角的樣式。 而且，嘗試不同的可能性會非常有趣。

在本教程中，我將向您展示如何在 Divi 中為您的內容創建浮動角設計。 一旦你有了元素，你就可以用無數的形狀、圖標和顏色來設計這些角落！

讓我們開始吧！

搶先看

這是本教程中可能的浮動角設計的先睹為快。

免費下載浮動邊框設計示例佈局

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

現在讓我們進入教程吧？

入門

本教程唯一需要的是 Divi。 我們將在 Divi Builder 的前端從頭開始構建這些示例。

首先，創建一個新頁面並為您​​的頁面命名。 單擊以使用前端的 Divi Builder，然後選擇“從頭開始構建”選項。

現在你準備好了！

創建浮動角設計佈局模板

由於此設計將有無數的設計可能性，因此創建基本佈局（或模板）以進行工作是有意義的。

對於此模板，我們將在文本模塊的每個角添加四個分隔線。 然後，一旦佈局到位，您將能夠探索新的方法來為獨特的設計定制這些分隔線。

首先，創建一個具有一列行的新常規部分。

在我們添加文本模塊之前，更新行設置如下：

自定義寬度：640px
自定義填充：0px 頂部，0px 底部

然後向該行添加一個文本模塊並更新以下內容：

文字文字大小：20px
文本行高：1.8em
自定義邊距：-25px 頂部，-25px 底部，25px 左，25px 右
自定義填充（桌面）：頂部 10%，底部 10%，左側 10%，右側 10%
自定義填充（電話）：頂部 20%，底部 20%
邊框寬度：4px
邊框顏色：#eeeeee

自定義邊距和填充將有助於對齊我們將很快添加的分隔器模塊。 由於分隔線的高度和寬度為 50 像素，-25 像素的頂部和底部邊距會將這些分隔線拉入文本模塊的一半，以獲得漂亮的對稱設計（您會看到）。

添加前兩個浮動角分隔線

文本模塊到位後，我們可以開始使用分隔模塊添加頂部的兩個浮動角設計。

創建一個新的分隔線模塊並將其拖到文本模塊的頂部。

然後按如下方式更新分隔線設置：

顯示分隔線：否

背景顏色：#7cda24（或您想要的任何顏色）
高度：50px
寬度：50px

50px 的高度和寬度為我們提供了可以用於浮動邊框的完美正方形。

現在，向分隔線添加框陰影以創建如下浮動效果：

盒子陰影：見截圖
框陰影垂直位置：0px
框陰影模糊強度：0px
框陰影傳播強度：20px
陰影顏色：#ffffff

為了確保分隔模塊保持在文本模塊上方（並且不會隱藏在它後面），我們需要向主元素添加一個 CSS 片段，如下所示：

主要元素 CSS：

position: relative

然後將 Z 索引更新為 1。

接下來複製分隔器模塊並更新復制的分隔器設置，如下所示：

模塊對齊：右
自定義邊距：-50px 頂部

這會將分隔器對齊到右側，並將其向上拉到位於其上方的分隔器模塊的確切高度。 這將創建我們正在尋找的確切角落位置。

添加底部角分隔線

要添加兩個底角分隔線，請部署線框視圖模式並複制您剛剛創建的左右分隔線並將它們粘貼到文本模塊下方（確保左分隔線保持堆疊在右分隔線的頂部，如圖所示以下）。

就是這樣！ 讓我們來看看我們的基本佈局的最終設計。

探索新的浮動角設計

有了這個模板，我們可以探索一些可能的不同設計。 您可以將整個部分保存到 Divi 庫中，以便您可以將其作為模板繼續使用。 但是現在，讓我們複製該部分並探索新設計。

具有漸變背景的鑽石形狀

複製我們的模板後，使用多選功能選擇所有四個分隔模塊。 然後單擊所選分隔線之一上的設置齒輪圖標以部署元素設置模式。 在此步驟中使用單擊模式可能會有所幫助。

在元素設置中，更新以下內容：

漸變背景左顏色：#7cda24
漸變背景右顏色：#edf000
梯度方向：45度

然後使用變換選項將分隔線旋轉成菱形。

Transform 旋轉 Z 軸：45deg

這是最終的設計。

偏斜的分隔線

您還可以使用變換傾斜選項來傾斜分隔線以獲得更加獨特的設計。 您可以為每個分隔線添加單獨的傾斜設計，或使用多選將所有四個分隔線的變換傾斜同時更新為 -37deg 在 X 和 Y 軸上。

這就是它的樣子。

深色背景設計

您甚至可以嘗試為文本模塊添加深色背景色，以獲得獨特的浮動角設計。 這是一個背景色為#002130 的文本模塊的示例，使用無變換旋轉或傾斜。

圓角邊角

要在設計上放置一些圓角，您可以簡單地將圓角添加到行中，如下所示：

圓角：20px

圓形浮角

要將這些方角變成圓形，您可以將以下自定義 CSS 片段添加到每個分隔線的主要元素：

border-radius: 50%;

由於分隔線為 50 像素 x 50 像素，這將創建一個完美的圓形設計。

正如您所看到的，您可以通過多種不同的方式為無數新的角設計調整這些元素。

現在，讓我們探索使用模糊圖標代替分隔模塊的浮動角。

使用 Blurb 圖標創建浮動角

將 Blurb 圖標添加到文本模塊的每個角落可以為您提供更加獨特的設計。 您可以使用我們在本教程開頭構建的相同佈局模板。 唯一的區別是使用模糊模塊而不是四個角的分隔模塊。

繼續並獲取部署的部分佈局模板的副本。

然後刪除文本模塊上方和下方的分隔線模塊。

添加前兩個模糊圖標角

由於我們只想使用模糊模塊來顯示單個圖標，因此我們需要確保並獲得正確的大小和間距。

在文本模塊上方添加一個blurb 模塊，並取出標題和正文文本。 然後單擊以使用圖標而不是圖像並選擇圓形 Facebook 圖標。

然後更新以下模糊設置（這些設置與我們在第一個示例中添加到分隔器模塊的設置非常相似）：

背景顏色：#ffffff
圖標字體大小：50px
寬度：50px
自定義邊距：底部 0px
圓角：50%
盒子陰影：見截圖
框陰影垂直位置：0px
框陰影模糊強度：0px
框陰影傳播強度：20px
陰影顏色：#ffffff

主要元素 CSS：

position: relative;

模糊圖像 CSS：

margin-bottom: 0px

Z指數：1

接下來，複製blurb 模塊以在當前blurb 下方創建另一個模塊並更新以下內容：

模塊對齊：右
自定義邊距：-50px 頂部

然後復制頂部的兩個簡介模塊並將它們粘貼到文本模塊下（確保左簡介保持堆疊在右簡介上方）。

然後您可以將每個簡介的圖標更新為您想要的任何內容。

這是最終的設計。

探索更多帶有 Blurb 圖標浮動角的設計

通過此設置，您可以探索許多獨特的設計。 您可以更改圖標，使用不同的顏色組合，甚至可以使用變換選項縮放或旋轉它們。

這是一個設計示例，文本模塊使用深色背景顏色和不同的圖標顏色。

適用於多列佈局

只要將元素保持在一起，就可以在多列中添加這些浮動角佈局。

包起來

在 Divi 中為您的內容創建浮動角設計確實展示了 Divi builder 的強大功能。 使用所有可用的內置選項，您可以從一個基本佈局模板創建無數設計變體。 我希望這會激發您探索自己的新設計的樂趣。

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

乾杯!