使用 Divi 創建獨特框架設計的可重用佈局

使用 Divi 為您的行構建獨特的框架設計可能是一種有用（且有趣）的方式來創造性地展示您的頁面內容。 通過將 Divi 的部分分隔符與緊湊的行結構相結合，您可以探索無數的設計可能性來構建您的內容。 您可能已經在之前的教程或我們的一些預製佈局中看到了這種技術。 但是，今天，我想我會向您展示一種簡單的方法來自己探索這種設計技術。 在本教程中，我將向您展示如何快速構建可保存到庫中的可重用部分佈局。 然後您可以使用該佈局來探索新的框架設計和配色方案。 佈局的工作原理是使用獨特的設計來構建您的行，因此所有列結構和模塊都可以在行內使用。

讓我們開始吧。

創建可重複使用的框架設計佈局

首先，讓我們創建一個具有單列佈局的新部分。 此時我們不需要添加任何模塊。 相反，我們將首先設計我們的行和部分，以便我們可以稍後用我們想要的任何內容填充我們的行。

設計行

更新行設置如下：

背景顏色：#333333
行對齊：居中
自定義寬度：775px
天溝寬度：2
自定義填充：頂部 130 像素，底部 130 像素，左側 50 像素，右側 50 像素
自定義邊距：0px 頂部，0px 底部

設計剖面

更新部分設置如下：

背景顏色：#ffffff
頂部分隔線樣式：見截圖
頂部分隔線顏色：#ffffff
底部分隔線樣式：見截圖
底部分隔線顏色：#ffffff

接下來，您要將頂部和底部填充設置為 0px 並使用邊框創建一些頂部和底部空間，如下所示：

自定義填充：0px 頂部，0px 底部
頂部邊框寬度：5vw
頂部邊框顏色：#ffffff
底部邊框寬度：5vw
底部邊框顏色：#ffffff

使用頂部和底部邊框為節創建間距將使與行重疊的節分隔符的可用空間最大化。 這樣您就可以為您的設計選擇任何分隔高度。

將佈局保存到您的庫中

這就是框架行設計的基本佈局結構。 此時我們要將此部分保存到 Divi 庫中，以便在將來的設計中使用該部分佈局。

單擊部分菜單中的保存到庫圖標。

然後輸入佈局的名稱（類似於“行框架佈局”）並單擊“保存到庫”按鈕。

完成框架設計#1

現在我們已經保存了我們的部分佈局以備將來使用，讓我們向行中添加一些內容以完成第一個設計示例。

更改列結構

對於這個設計，我認為添加一個六列圖片庫會很好。 小列結構將允許我們創建一小群圖像，這些圖像在窄行內很好地框起來。

為此，首先將行結構更改為六列佈局。

向行添加內容

然後向每列添加三個圖像模塊（帶有圖像）。 我正在使用具有不同尺寸/尺寸的更多縱向（而不是橫向）圖像。

這是最終的設計。

獎金設計技巧

在我們繼續探索更多框架設計的可能性之前，我想指出一個將框架擴展到頁面一側的簡單技巧。 為此，請轉到部分設置並添加背景漸變，如下所示：

背景漸變左顏色：#333333
背景漸變右顏色：#ffffff
梯度方向：90度
起始位置：50%
結束位置：0%

看看這個設計。

自定義不同框架設計和內容的佈局

至少可以說，這種簡單佈局的令人興奮的可能性有很多。 通過自定義配色方案、分隔樣式、列佈局和模塊內容，您可以創建各種不同的佈局設計。 此外，您可以使用“查找和替換”等酷炫的 Divi 功能，只需單擊幾下即可進行廣泛的配色方案更改。

以下是更新佈局的基本過程：

1. 將保存的部分佈局加載到頁面
2. 使用“查找和替換”更新該部分的配色方案。
3. 更改分隔線樣式
4. 使用新的背景和列結構自定義行。
5. 將模塊添加到您的列

通過這個過程，探索新設計應該會很有趣！ 讓我們繼續。

框架設計#2

對於下一個設計，我們將使用我們之前創建的保存的截面佈局。 為此，請單擊以在可視化構建器中添加新部分。 然後選擇從庫添加選項卡並從列表中單擊分區佈局。

現在我們準備為新設計定制該部分。

為了更改用於此佈局的配色方案，我們可以通過使用“查找和替換”功能來召喚一些 Divi 設計能力。 轉到復制部分的部分設置並右鍵單擊背景顏色並選擇“查找和替換”。

在“查找和替換”模式中，更新以下內容：

內：本節
替換為：#443850
選擇全部替換

這將用新顏色替換用於部分背景、邊框和分隔線的白色。

現在使用新的分隔線樣式更新部分設置：

然後使用白色背景色和框陰影更新行設置以完成行的新框架設計。

對於內容，讓我們嘗試帶有一些簡介的五列佈局。 繼續將您的行的列佈局更新為五列佈局。

然後在第一列添加一個簡介。 取出默認的內容文本，只留下標題文本。 然後用星形圖標替換模糊圖像。 更新設計設置如下：

圖標顏色：#7d8491
圖標字體大小：80px
文字方向：居中

複製模糊模塊並更新設置如下：

圖標顏色：#8cd845
圖標字體大小：50px

現在將這兩個模塊複製或複制並粘貼到整個五列中的模式中，每列中包含三個模塊。

這是最終的設計。

框架設計#3

對於第三個框架設計，我們首先需要像之前為第二個設計所做的那樣加載我們保存的部分佈局。

之後，我們可以在部分背景顏色上使用查找和替換（就像我們在之前的設計中所做的那樣）將用於部分背景、分隔線和邊框的白色替換為漂亮的藍色。 為此，請轉到部分設置，右鍵單擊背景顏色，然後選擇查找和替換。 然後更新以下內容：

內：本節
替換為：#1e3888
選擇全部替換

然後使用新的頂部和底部分隔線樣式（雲）更新部分分隔線：

接下來，轉到行設置。 為該行設置漸變背景，如下所示：

背景漸變左顏色：默認（#2b87da）
背景漸變右顏色：#1E3888（與部分背景顏色相同）
漸變類型：徑向（使行變得圓潤“雲狀”感覺）
結束位置：83%（稍微隱藏行邊緣）

現在，我們需要做的就是向我們的框架行添加一些內容。 讓我們向該行添加一個 Call To Action Module 並按如下方式更新設置：

在鏈接輸入框中添加“#”以顯示按鈕
使用背景顏色：否

標題文字顏色：#ffc338
按鈕文字顏色：#ffc338

這是最終的設計。

手機呢？

萬一你想知道。 這是設計在移動設備上的樣子。

最後的想法

本教程中創建的框架設計旨在突出設計可能性，而不是展示完全拋光的設計作品。 出於這個原因，我專注於框架設計並使用了內容的基本示例。 希望它們至少會激發您通過使用不同的部分分隔符、配色方案和內容來探索新設計。

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

乾杯!