如何在 Divi 中使用分區分隔符創建令人驚嘆的文本設計

為您的網站創建獨特的文本設計可能具有挑戰性，特別是如果您不想使用大量 CSS 或訴諸於為您在 Photoshop 中設計的圖像補充 seo 友好的文本。 使用 Divi（以及一些“開箱即用”的思維），您可以創建一些獨特的文本設計，而無需任何外部 css 或自定義圖像。 訣竅是使用 Divi 的部分分隔符來覆蓋您的文本，以多種不同的方式添加中斷和紋理。 在本教程中，我將探索 Divi 分區分隔符的強大功能，以創建一些獨特的文本設計，將您的頁眉提升到一個新的水平。

讓我們開始吧。

搶先看

以下是使用此技術可能進行的文本設計的幾個示例：

入門

對於此設計，您需要使用可視化構建器創建一個新頁面。 從您的 WordPress 儀表板，導航到頁面 > 添加新。 然後給你的頁面一個標題並部署可視化構建器。 選擇“從頭開始構建”選項。 現在您可以開始了！

設計#1：帶有漸變高光的破碎文本

在第一個文本設計中，我將使用部分分隔符來拆分文本並使用漸變背景添加形狀獨特的突出顯示元素。 添加具有一列佈局的新部分。 此時您不需要添加模塊。 我們將首先自定義該部分​​。

部分設置

打開部分設置並更新以下內容：

背景漸變左顏色：rgba(124,218,36,0.66)
背景漸變右顏色：rgba(0,106,193,0.61)

寬度：80%
截面對齊：居中

頂部分隔線樣式：見截圖
頂部分隔線顏色：#ffffff
頂部分隔線高度：1.8vw
頂部分隔線水平重複：3x
頂部分隔線排列：在部分內容的頂部

底部分隔線樣式：見截圖
底部分隔線顏色：#ffffff
底部分隔線高度：1.8vw
底部分隔線水平重複：3x
底部分隔線排列：在部分內容的頂部

自定義邊距：5vw 頂部，5vw 底部
自定義填充：0px 頂部，0px 底部

由於文本的設計將使用節分隔符進行，因此重要的是保持節緊湊，沒有任何填充，以便分隔符以最小的分隔高度與文本重疊。 使用 vw 長度單位設置分隔線高度將確保分隔線樣式能夠很好地縮放，以在所有屏幕尺寸上實現一致的設計。 為該部分提供自定義邊距是可選的，但也有助於間距，因為我們將在我們的文本模塊上使用負邊距將其擴展到我們部分的上方和下方（這在稍後會更有意義）。

行設置

對於行，我們需要做的就是調整寬度和填充。 更新以下行設置：

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

由於我們的文本將被添加到行列中，因此我們需要去掉內邊距，以便我們的分隔線能夠緊貼文本的頂部和底部。

文本模塊設置

現在我們終於可以將文本模塊添加到一列行了。 在該行內，添加一個內容為“我們的工作”的文本模塊。 然後更新設計設置如下：

文字字體：Oswald
文字字體樣式：TT
文字文字顏色：#0c71c3
文字文字大小：10vw
文本行高：1em
文字方向：居中
自定義邊距：-5vw 頂部，-4vw 底部
自定義填充：2vw 頂部，2vw 底部

這裡的關鍵是使用自定義負邊距來擴展該部分上方和下方的文本。 這允許部分分隔符與文本內部重疊以創建破碎的設計效果。 並且背景漸變也給它一個很好的設計觸感。 結果可能是我最喜歡的文字設計之一，它為大量創意變化打開了大門。

這是最終的設計。

文字設計#2：具有垂直線條紋理的文字

對於第二個文本設計，繼續創建一個具有一列行的新部分。 然後在列中添加一個文本模塊。 我認為最好從文本模塊開始，而不是先自定義該部分​​，以便您可以更好地了解設計過程。

文字設置

在單列行中，添加內容為“我們的工作”的文本模塊。 然後更新設計設置如下：

文字字體： Poppins
文字字體粗細：超粗
文字字體大小：8vw
文本行高：1em
文字方向：居中
自定義邊距：0px 頂部，0px 底部

行設置

行設置將與第一個設計示例相同，因此您可以復制行樣式並將其粘貼到該行中。 或者只是更新行設置如下：

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

部分設置

更新部分設置如下：

寬度：70%

頂部分隔線樣式：見截圖
頂部分隔線顏色：#ffffff
頂部分隔線高度：8vw
頂部分隔線水平重複：150x
頂部分隔線排列：在部分內容的頂部

底部分隔線樣式：見截圖
底部分隔線顏色：#ffffff
底部分隔線高度：8vw
底部分隔線水平重複：150x
底部分隔線翻轉：垂直
底部分隔線排列：在部分內容的頂部

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

此設計的關鍵是分隔線水平重複選項。 將分隔線水平重複設置為 150 倍，高度等於文本的高度，會創建一系列重疊的垂直線，從該部分的頂部和底部延伸。 不要忘記將底部分隔線設置為垂直翻轉，以便“線條”向上延伸。

這是最終的設計。

設計 #3：頂部和底部帶有局部紋理的文本

為了加快下一個設計的過程，請繼續複製您剛剛在上面第二個設計示例中創建的部分。

更新部分設置

背景顏色：#e02b20

頂部分隔線樣式：見截圖
頂部分隔線顏色：#e02b20
頂部分隔線高度：3vw
頂部分隔線水平重複：30x

底部分隔線樣式：見截圖
底部分隔線顏色：#e02b20
底部分隔線高度：3vw
底部分隔線水平重複：30x

這裡的關鍵是確保您的分隔線顏色與部分背景顏色匹配，以便分隔線僅在與文本重疊的地方可見。

更新文本設置

現在剩下的就是更新文本顏色：

文字文字顏色：#ffffff

這是最終的設計。

一個有趣的設計替代設計 #3

在我離開這個設計之前，我想我想分享一下這個部分的底部分隔線是如何很容易地變成草的，這樣文本看起來就像坐在田野裡一樣。 為此，請按如下方式更新設置：

背景漸變左顏色：#68a4d8（天空）
背景漸變右顏色：#1c7503（草）
起始位置：82%
結束位置：0%
自定義填充：5vw 頂部
頂部分隔線樣式：雲（或氣泡？）
底部分隔線顏色：#1c7503

然後將文字顏色更新為#000835

這是結果。

手機呢？

因為在這些設計中都使用了 vw 長度單位，文本和分隔線樣式將在所有瀏覽器上很好地縮放，而無需在平板電腦和智能手機上分配額外的尺寸。 但是，如果您在智能手機上遇到文本縮小太少的問題，您可能需要增加文本大小 vw 長度單位值。

最後的想法

我希望您在嘗試使用部分分隔符進行獨特的文本設計時會玩得開心。 有了 Divi 中可用的所有不同字體、顏色和分隔線樣式，我相信您在為下一個項目創建一些看起來很棒的文本設計時不會遇到任何麻煩。

有關如何以創造性方式使用分區分隔符的更多靈感，請查看這些背景紋理、導航菜單框架和底部頁腳欄背景。

直到下一次，我期待在評論中收到您的來信。

乾杯!