如何使用 Divi 的新設計選項創建章節章節

在今天的 Divi 教程中，我們將向您展示如何為您的網站創建令人驚嘆的章節章節。 這些章節可作為訪問者的指南。 當他們進入頁面的另一部分時，它會顯示出來。 通常，章節在所有章節中都與一種特定的背景顏色結合使用。

如果您正在考慮在您的網站上使用章節章節，這篇文章可能是一個獲得靈感的好地方。 我們將向您展示 4 種風格的章節章節，您可以按照這篇文章輕鬆地重新創建這些章節。

結果

在我們進入四節章節樣式的實踐方面之前，讓我們先看看您對最終結果的期望。

第 1 節章節樣式

第 2 節章節樣式

第 3 節章節樣式

第 4 節章節樣式

如何使用 Divi 的新設計選項創建章節章節

訂閱我們的 YouTube 頻道

第 1 節章節樣式

行選項

首先向您正在處理的頁面添加一個兩列的行，然後在“設計”選項卡中選擇左行對齊方式。

向下滾動相同的選項卡並確保為頂部、右側、底部和左側填充選擇“0px”。 我們這樣做的原因是使行盡可能小，這樣它就不會在該部分佔據太多位置。

分頻器模塊

在我們所有的例子中，我們將只使用兩列之一（取決於行對齊）。 如果您將章節放在頁面的左側，請選擇左欄。 然後，添加一個分隔器模塊並啟用“內容”選項卡中的“顯示分隔器”選項。

轉到“設計”選項卡並使用“#000000”作為分隔線顏色。

然後，打開樣式子類別並選擇“虛線”作為分隔線樣式和“頂部”作為分隔線位置。

接下來，確保以下設置適用於 Sizing 子類別：

• 分隔線重量：3px
• 高度：23px
• 寬度：62%
• 模塊對齊：左

第一個文本模塊

添加分隔線模塊後，就該在其正下方添加第一個文本模塊了。 選擇章節號後，使用如下漸變背景：

• 第一種顏色：rgba(96,150,193,0.16)
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：51%
• 結束位置：51%

然後，轉到“設計”選項卡並對“文本”子類別進行以下更改：

• 文字字體：快樂猴子
• 文本字體大小：53（桌面和平板電腦），25（手機）
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

打開 Sizing 子類別，選擇寬度為“40%”並選擇中心模塊對齊。

這個文本模塊需要的最後一件事是以下自定義邊距和填充：

• 上邊距：-40px
• 頂部填充：40px
• 右填充：50px
• 底部填充：40px
• 左填充：50px

第二個文本模塊

添加另一個具有以下文本子類別設置的文本模塊：

• 文字字體：Arimo
• 文字字體大小：19px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

向下滾動相同的選項卡，使用“97%”的寬度並啟用中心模塊對齊選項。

最後，還要添加“-15px”的頂部邊距。

第三個文本模塊

該部分章節的最後一個文本模塊具有以下文本子類別設置：

• 文字字體：Arimo
• 文本字體樣式：粗體
• 文字字體大小：19px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

在 Sizing 子類別中，使用“99%”的寬度並選擇中心模塊對齊。

在本章中，您需要做的最後一件事是添加“-20px”的頂部邊距。

第 2 節章節樣式

行選項

第二個示例位於屏幕右側。 再一次，添加一個兩列的行，但選擇正確的行對齊方式。

打開間距子類別並將“0px”分配給頂部、右側、底部和左側的填充。

分頻器模塊

在右側的列中添加一個分隔器模塊並啟用“顯示分隔器”選項。

我們將為分隔線使用以下漸變背景：

• 第一種顏色：rgba(132,132,132,0.61)
• 第二種顏色：rgba(224,43,32,0.86)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：43%
• 結束位置：100%

移至“設計”選項卡並選擇“rgba(0,0,0,0.26)”作為分隔線顏色。

接下來，使用“Solid”作為分隔線樣式，使用“Top”作為分隔線位置。

然後，打開 Sizing 子類別並應用以下設置：

• 分隔線重量：3px
• 高度：11px
• 寬度：68%
• 模塊對齊：右

第一個文本模塊

第一個文本模塊具有以下文本子類別設置：

• 文字字體：康塔塔一號
• 文字字體大小：100px
• 文字顏色：#000000
• 文本行高：1.7em
• 文字方向：右

打開間距子類別並使用以下自定義邊距和填充：

• 上邊距：-95px
• 頂部填充：40px
• 右填充：50px
• 底部填充：40px
• 左填充：50px

第二個文本模塊

添加另一個文本模塊並改用以下文本子類別設置：

• 文字字體：Arimo
• 文字字體大小：20px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

接下來，添加“-50px”的頂部邊距。

第三個文本模塊

此示例的第三個也是最後一個文本模塊具有以下文本子類別設置：

• 文字字體：龍蝦二
• 文字字體大小：43px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

最後，添加“-30px”的頂部邊距。

第 3 節章節樣式

行選項

對於第三個示例，我們將使用具有以下第 1 列漸變背景的兩列行：

• 第一種顏色：#edf000
• 第二種顏色：rgba(255,255,255,0)
• 第 1 列漸變類型：線性
• 第 1 列梯度方向：139deg
• 第 1 列起始位置：11%
• 第 1 列結束位置：36%

轉到“設計”選項卡並選擇左行對齊方式。

再一次，我們將使用“0px”作為頂部、右側、底部和左側邊距。

分頻器模塊

現在，向左列添加一個分隔器模塊並啟用“顯示分隔器”選項。

打開背景子類別並使用以下漸變背景：

• 第一種顏色：#4b61af
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：線性
• 漸變方向：161度
• 起始位置：18%
• 結束位置：38%

打開“設計”選項卡並選擇“#000000”作為分隔線顏色。

在樣式子類別中，使用“實體”作為分隔線樣式，使用“頂部”作為分隔線位置。

然後，確保以下設置適用於 Sizing 子類別：

• 分隔線重量：6px
• 高度：100px
• 寬度：70%
• 模塊對齊：左

第一個文本模塊

繼續在分隔模塊正下方添加第一個文本模塊並選擇以下漸變背景：

• 第一種顏色：rgba(131,0,233,0.58)
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：線性
• 梯度方向：151deg
• 起始位置：20%
• 結束位置：40%

轉到“設計”選項卡並使用以下文本子類別設置：

• 文字字體：Poiret One
• 文本字體樣式：粗體
• 文字字體大小：69px
• 文字顏色：#000000
• 文本行高：1.7em
• 文字方向：居中

打開 Sizing 子類別，使用“70%”的寬度並選擇左側的 Module Alignment。

最後，使用以下自定義邊距和填充：

• 上邊距：124px
• 頂部填充：60px
• 底部填充：150px
• 左填充：50px

第二個文本模塊

繼續添加另一個具有以下文本子類別設置的文本模塊：

• 文字字體：Arimo
• 文字字體大小：20px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

打開 Sizing 子類別，選擇“80%”的寬度，然後選擇左側的 Module Alignment。

最後，添加“-150px”的頂部邊距。

第三個文本模塊

將最後一個文本模塊添加到第一列，並確保應用以下文本子類別設置：

• 文字字體：Arimo
• 文本字體樣式：粗體
• 文字字體大小：20px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：居中

打開 Sizing 子類別，使用“80%”的寬度並選擇左側的 Module Alignment。

最後，選​​擇“-20px”的頂部邊距和“50px”的底部填充。

第 4 節章節樣式

行選項

對於最後一個示例，我們將再次使用正確的行對齊方式。

然後，打開 Spacing 子類別並將“0px”分配給頂部、右側、底部和左側的填充。

第一個文本模塊

最後一個示例不包含分隔線模塊，因此繼續向左列添加文本模塊。 完成後，選擇以下漸變背景：

• 第一種顏色：rgba(255,255,255,0)
• 第二種顏色：#92d84b
• 漸變類型：線性
• 梯度方向：55度
• 起始位置：25%
• 結束位置：100%

然後，轉到“設計”選項卡並確保應用以下文本子類別設置：

• 文字字體：康塔塔一號
• 文字字體大小：220（桌面和平板電腦），100px（手機）
• 文字顏色：#f2f2f2（與章節背景色匹配）
• 文本行高：1.7em
• 文字方向：右

打開 Sizing 子類別，使用“82%”的寬度並選擇正確的 Module Alignment。

最後，使用以下自定義填充：

• 頂部：60px
• 右：50px
• 底部：60px
• 左：50px

第二個文本模塊

添加另一個文本模塊並在文本子類別中使用以下設置：

• 文字字體：Arimo
• 文字字體大小：20px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：右

打開 Sizing 子類別，選擇寬度為“39%”並選擇中心模塊對齊。

最後，將“-130px”添加到頂部邊距。

第三個文本模塊

本章示例的最後一個文本模塊具有以下文本子類別設置：

• 文字字體：Dancing Script
• 文字字體大小：45px
• 文字顏色：#000000
• 文本行高：1em
• 文字方向：右

打開 Sizing 子類別，選擇寬度為“50%”並選擇中心模塊對齊。

最後但並非最不重要的一點是，選擇“-30px”的頂部填充就完成了！

最後的想法

在這篇文章中，我們向您展示瞭如何在您的網站上創造性地創建和設計章節章節。 這些章節部分允許您在部分之間創建分區，同時為每個部分使用相同的背景顏色。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片由 Kwok Design/shutterstock.com 提供