5 個使用 Divi 創建的編輯風格部分佈局示例
已發表: 2017-11-05新的 Divi 選項提供了大量的可能性。 模塊、行和列比以往任何時候都更能在通往令人驚嘆和用戶友好的網頁設計的道路上相互促進。 它可以做的一件事就是創建出色的編輯風格部分。 這正是我們將在這篇文章中向您展示的內容； 您可以在不同的網站中使用 5 種不同的編輯風格部分佈局。 最好的部分？ 該帖子是通過僅對每個模塊、行和列使用正確的設置來製作的。
讓我們看一下我們將向您展示如何創建的五個示例。
第一個例子
桌面
移動的
第二個例子
桌面
移動的
第三個例子
桌面
移動的
第四個例子
桌面
移動的
第五個例子
桌面
移動的
5 個使用 Divi 創建的編輯風格部分佈局示例
訂閱我們的 YouTube 頻道
開始創建第一個示例
讓我們開始創建我們的第一個編輯器樣式佈局。
添加新部分
添加一個新頁面，啟用 Divi Builder 並切換到 Visual Builder。 進入 Visual Builder 後，添加一個標準部分。
添加三列行
在該標準部分中，我們將需要一個三列的行。
漸變背景
打開行設置並向其添加以下漸變背景：
- 第一種顏色：#636363
- 第二種顏色：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：0%
- 最終位置：47%
第 2 列背景顏色
我們還需要將“#d8d8d8”設置為第 2 列的背景顏色。
漿紗
轉到“設計”選項卡，並為“尺寸”子類別使用以下設置：
- 使用自定義寬度：是
- 自定義寬度：100%
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
打開 Spacing 子類別並將“50px”添加到第二列的頂部、右側、底部和左側填充。
第一列圖像模塊
漸變背景
將圖像添加到行的第一列並為其使用以下漸變背景：
- 第一種顏色：rgba(255,255,255,0)
- 第二種顏色：#086191
- 漸變類型：線性
- 梯度方向：107deg
- 起始位置：60%
- 結束位置：60%
結盟
轉到“設計”選項卡，使用左圖像對齊並啟用“移動設備上的始終居中圖像”選項。
間距
然後，打開間距子類別並使用以下邊距和填充設置：
- 上邊距：100px（桌面），0px（平板和手機）
- 頂部填充：20px
- 底部填充：20px
第二列文本模塊
文字設置
接下來，將文本模塊添加到該行的第二列。 轉到“設計”選項卡並為“文本”子類別使用以下設置：
- 文字字體大小：12px
- 文字顏色：#000000
- 文字方向：居中
漿紗
打開 Sizing 子類別，使用“84%”的寬度並選擇中心模塊對齊。
間距
最後，將“50px”添加到頂部和底部邊距。
第三列圖像模塊
漸變背景
將另一個圖像模塊添加到第三列並使用以下漸變背景：
- 第一種顏色：#a36100
- 第二種顏色：rgba(255,255,255,0)
- 漸變類型：線性
- 梯度方向：73deg
- 起始位置：40%
- 結束位置：40%
結盟
轉到“設計”選項卡，選擇左圖像對齊並啟用“在移動設備上始終居中圖像”選項。
間距
最後，添加以下自定義邊距和填充：
- 上邊距：300px（桌面），0px（平板和手機）
- 頂部填充：20px
- 底部填充：20px
結果
讓我們再看看桌面上的結果：
在手機上：
開始創建第二個示例
第二個例子在桌面上看起來像這樣：
添加新部分
首先，添加一個新的標準部分。
添加兩列行
然後，向其添加兩列行。
第 2 列背景顏色
打開行設置並添加“#ededed”作為第 2 列的背景顏色。
漿紗
轉到“設計”選項卡，並對“大小調整”子類別進行以下更改：
- 使用自定義寬度：是
- 自定義寬度：100%
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
第一列圖像模塊
結盟
將圖像模塊添加到第一列，使用左側圖像對齊並啟用“始終居中移動圖像”選項。
間距
打開間距子類別並使用以下設置：
- 上邊距：100px（桌面），0px（平板和手機）
- 頂部填充：0px
- 底部填充：0px
第二列文本模塊
文字設置
然後，將文本模塊添加到第二列並將以下設置應用於文本子類別：
- 文字字體：Lato
- 文字字體大小：12px
- 文字顏色：#000000
- 文本行高：2.2em
- 文字方向：居中
漿紗
打開 Sizing 子類別並應用“75%”的寬度。
間距
最後，確保以下設置適用於間距子類別：
- 上邊距：120px（桌面），-80（平板和手機）
- 左邊距：-240px（桌面）、80（平板）、45（手機）
- 頂部、右側、底部和左側填充：50px（桌面和平板電腦），20px（手機）
結果
完成後，您會注意到桌面上的以下設計：
在手機上：
開始創建第三個示例
接下來，我們有以下示例，如下所示：
添加新部分
再次添加一個新的標準部分。
添加兩列行
這一行我們需要的列結構如下：
第 1 列背景顏色
打開行設置並使用“#e8e8e8”作為第 1 列的背景顏色。
第 2 列漸變背景
第二列所需的漸變背景如下：
- 第一種顏色：#e8e8e8
- 第二種顏色：rgba(255,255,255,0)
- 第 2 列梯度類型：線性
- 第 2 列梯度方向：147deg
- 第 2 列起始位置：25%
- 第 2 列結束位置：9%
漿紗
打開 Sizing 子類別並使用以下設置：
- 使用自定義寬度：是
- 自定義寬度：100%
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
最後，將“70px”添加到第一列的頂部和底部填充。
第一列圖像模塊
結盟
將圖像模塊添加到第一列，使用左側圖像對齊並啟用“始終居中移動圖像”選項。
間距
打開間距子類別並在左邊距中添加“-300px”。 
第二列文本模塊
背景顏色
將文本模塊添加到第二列並使用“#3d3d3d”作為背景顏色。
文字設置
轉到“設計”選項卡並為“文本”子類別使用以下設置：
- 文字字體：Lato
- 文字字體大小：12px
- 文字顏色：#FFFFFF
- 文本行高：2.2em
- 文字方向：居中
漿紗
打開 Sizing 子類別並使用“75%”作為寬度。
間距
最後，對間距子類別使用以下設置：
- 上邊距：130px（桌面），-200（平板和手機）
- 左邊距：-180px（桌面）、80（平板）、50（手機）
- 頂部、右側、底部和左側填充：50px（桌面和平板電腦），20px（手機）
結果
完成後，桌面上的結果將如下所示：
在手機上是這樣的：
開始創建第四個示例
我們將創建的第四個示例如下所示：
添加新部分
首先向您正在處理的頁面添加一個標準部分。
添加兩列行
然後，向其添加兩列行。
漿紗
打開 Sizing 子類別並進行以下更改：
- 使用自定義寬度：是
- 自定義寬度：60%
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
第一列第一圖像模塊
結盟
將圖像模塊添加到第一列，使用正確的圖像對齊並啟用“在移動設備上始終居中圖像”選項。
漿紗
轉到該圖像模塊的 Sizing 子類別，使用“89%”的寬度並選擇正確的模塊對齊方式。
能見度
轉到高級選項卡並禁用手機和平板電腦上的圖像模塊。 我們將對正在使用的 3 個圖像模塊執行此操作。 您可以自己決定要在平板電腦和手機上顯示哪一個，在我們的例子中，這將是右上角的圖像。
第一列第二圖像模塊
結盟
添加另一個圖像模塊，使用正確的圖像對齊並啟用“移動設備上的始終居中圖像”選項。
邊界
向下滾動並使用以下邊框：
- 使用邊框：是
- 邊框顏色：#FFFFFF
- 邊框寬度：5px
- 邊框樣式：純色
能見度
最後，轉到高級選項卡並禁用手機和平板電腦上的圖像模塊。
第二列第一圖像模塊
結盟
將下一個圖像模塊添加到第二列，使用左圖像對齊並啟用“移動設備始終居中圖像”選項。
邊界
向下滾動，打開 Border 子類別並應用以下設置：
- 使用邊框：是
- 邊框顏色：#FFFFFF
- 邊框寬度：4px
- 邊框樣式：純色
第二列第二圖像模塊
結盟
將最後一個圖像模塊添加到第二列，使用左側圖像對齊並啟用“移動設備上的始終居中圖像”選項。
漿紗
然後，打開調整子類別，使用“89%”的寬度並選擇左側模塊對齊。
能見度
在手機和平板電腦上也禁用此圖像模塊。
添加一列行
完成前一行後，繼續添加另一行。 這一次，該行只需要一列。
漿紗
轉到行設置的“設計”選項卡，啟用“使用自定義寬度”選項並使用“581px”作為自定義寬度。
文本模塊
背景顏色
將文本模塊添加到該新行並選擇“rgba(255,255,255,0.92)”作為背景顏色。
文字設置
轉到“設計”選項卡，並將以下設置應用於“文本”子類別：
- 文字字體：Lato
- 文字字體大小：12px
- 文字顏色：#000000
- 文本行高：2.2em
- 文字方向：居中
漿紗
然後，打開 Sizing 子類別，將 '75%' 添加到 Width 並選擇中間的 Module Alignment。
間距
最後，將以下設置應用於間距子類別：
- 上邊距：-580px（桌面），-200（平板和手機）
- 左邊距： – 180px（桌面）、80（平板）、50（手機）
- 頂部、右側、底部和左側填充：50px
結果
完成後，您將能夠在桌面上看到以下結果：
以及手機上的以下內容：
開始創建第五個示例
我們將向您展示如何重新創建的最後一個示例如下：
添加全角部分
首先向頁面添加全角部分。
全寬圖像模塊
在該 Fullwidth 部分中，添加一個 Fullwidth Image Module。
添加新部分
在上一節的正下方，添加另一節。 這一次，該部分必須是標準的而不是全角的。
添加三列行
向該新標準部分添加一個三列行。
第 1、2 和 3 列背景顏色
打開行設置並為列分配以下背景顏色：
- 第 1 列：#eaeaea
- 第 2 列：rgba(12,113,195,0.17)
- 第 3 列：rgba(131,0,233,0.09)
漿紗
轉到“設計”選項卡並對“尺寸”子類別進行以下更改：
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
然後打開間距子類別，將“-60px”添加到每列的頂部邊距和“50px”到每列的底部填充。
第一列文本模塊
背景顏色
繼續將文本模塊添加到第一列並使用“rgba(255,255,255,0.89)”作為其背景顏色。
文字設置
轉到“設計”選項卡並將以下設置應用於“文本”子類別：
- 文字字體：Lato
- 文字字體大小：12px
- 文字顏色：#000000
- 文本行高：2.2em
- 文字方向：居中
邊界
打開 Border 子類別並使用以下設置：
- 使用邊框：是
- 邊框顏色：#FFFFFF
- 邊框寬度：17px
- 邊框樣式：純色
漿紗
然後，使用“75%”的寬度並在“大小調整”子類別中選擇中心模塊對齊。
間距
最後，打開間距子類別並應用以下設置：
- 上邊距：-300px（桌面），0px（平板和手機）
- 頂部、右側、底部、左側填充：50px（桌面和平板電腦），20px（手機）
克隆文本模塊兩次並放置在其他兩列中
繼續克隆文本模塊兩次。 然後，將每個克隆放入剩餘的兩列中。
更改間距第二列文本模塊
我們必須將放置在第二列中的文本模塊的頂部邊距更改為“-220px”。
更改間距第三列文本模塊
第三列中文本模塊的計數相同，但值改為“-140px”。
結果
在這裡你可以在桌面上看到結果：
在手機上：
最後的想法
在這篇文章中，我們向您展示了一些漂亮而有趣的編輯風格部分佈局，您可以在整個網站中使用它們。 這些示例顯示了 Divi 的選項是多麼靈活，以及您可以獲得多少創意。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！
請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！
特色圖片由朱莉婭蒂姆/shutterstock.com