堆疊排版以在 Divi 中創建 5 個獨特的標題設計

堆疊排版是一種在 Divi 中創建漂亮標題設計的簡單有效的技術。 排版通常被嚴格用作抽象的設計元素，其方式對搜索引擎閱讀的內容沒有真正的幫助。 但是您也可以通過一些 Divi 技術來設計實際標題（h1、h2 等）。

在本教程中，我將使用 Divi 創建 5 種不同的堆疊式標題設計。 希望您能夠將這些設計用作您自己的標題設計的靈感。

讓我們開始吧。

搶先看

這是 5 種設計的一瞥。

設計#1

設計#2

設計#3

設計#4

設計#5

入門

我們將從頭開始構建這些設計。 因此，首先，創建一個新頁面，為頁面指定標題，然後部署 Visual Builder。 選擇“從頭開始構建”選項，您就可以開始構建了。

為了簡化創建 5 個設計中的每一個的過程，我將復制部分以在下一個設計中搶占先機。 因此，最好從第一個設計開始，按順序創建這些設計。

標題設計#1

對於第一個設計，我將向您展示如何垂直堆疊標題文本並將其居中放置在行的中間。 我還將在背景圖像上添加兩層漸變（一層在部分上，一層在行上），以提供平衡的半透明白色疊加層，與白色頁面背景完美融合。 結果很微妙，但非常獨特和乾淨。

在我們添加我們的文本模塊之前，讓我們首先處理部分和行設置。 這將使以後更容易調整模塊。

轉到部分設置並更新以下內容：

添加背景圖片（至少 1920px 寬）
背景漸變左顏色：#ffffff
背景漸變右側顏色：rgba(255,255,255,0)
將漸變放在背景圖像上方：是

接下來，按如下方式更新行設置：

背景漸變左顏色：rgba(255,255,255,0)
背景漸變右顏色：#ffffff
自定義寬度：100%
自定義填充：0px 頂部，0px 底部

現在我們可以將文本模塊添加到三列行的中間列。 然後更新文本模塊設置如下：

將內容框中的模擬內容替換為一個 h2 標頭，其內容為“設計”，如下所示：

<h2>design</h2>

然後按如下方式更新其餘設置：

標題 2 字體：Cairo
標題 2 字體粗細：常規
標題 2 字體樣式：大寫 (TT)
標題 2 文字大小：8vw
寬度：58%（桌面）、16%（平板電腦）、18%（智能手機）
模塊對齊：居中
自定義邊距：-10vw 頂部，-10vw 底部

自定義寬度值與 8vw 標題文本大小相結合是進行此設計的關鍵。 自定義寬度會擠壓文本，使每個字母堆疊在一起。 由於包含文本模塊的列大小從 1/3 變為全角，因此平板電腦上的寬度百分比值發生了巨大變化。 將標題文本設置為 vw（視口寬度）長度單位將允許文本與瀏覽器窗口大小完美縮放。

最後，讓我們用左右兩側的邊框來完成設計。

右邊框寬度：4px
左邊框寬度：4px

這是最終結果。

標題設計#2

對於下一個示例，我將稍微調整設計，以便將標題文本分成兩半並堆疊，而不是將每個字母單獨堆疊。 我還將在主標題下添加一個副標題以供再看。

在內容框中添加以下 h3 標題：

<h3>our process</h3>

然後給模塊添加一個白色背景：

背景顏色：#ffffff

在設計選項卡下，更新以下內容：

標題 2 文字大小：10vw
寬度：100%（桌面）、32%（平板電腦）、33%（智能手機）
標題 3 字體：Ubuntu Condensed
標題 3 文本對齊：居中
標題 3 文字大小：32 像素（桌面）、20 像素（平板電腦）、16 像素（智能手機）

然後更新文本模塊的間距以使其在移動設備上更具響應性：

自定義邊距（平板電腦）：-5vw 頂部，-10vw
自定義保證金（智能手機）：-5vw 頂部，-12vw

現在取出部分和行中的背景漸變。

然後通過更新以下行設置為您的行添加一點填充：

自定義填充（桌面）：5vw 頂部，5vw 底部
自定義填充（平板電腦）：0vw 頂部，0vw 底部

這是最終結果。

標題設計#3

這次我們將向左偏移標題並返回垂直堆疊每個字母。 然後我將更改字體並為該行添加一個匹配的邊框以補充模塊邊框。

複製第二個設計部分，然後按如下方式更新模塊設置：

首先刪除內容框中的h3標題。

標題 2 字體：Ubunto Condensed
標題 2 文字大小：6vw
寬度：54%（桌面）、16.4%（平板電腦）、17.5%（智能手機）
模塊對齊：左（默認）

要針對移動設備進行調整，請更新以下間距：

自定義邊距（平板電腦）：-15vw 底部
自定義保證金（智能手機）：-17vw 底部

現在轉到行設置並更新以下內容以獲得正確的間距。

自定義填充：2vw 頂部，2vw 底部，10vw 左

然後向行添加邊框以補充模塊的邊框。

頂部邊框寬度：4px
底部邊框寬度：4px

現在剩下要做的就是將我們的模塊拖到行的左列中。

查看最終結果。

標題設計#4

對於最後的標題設計，我將使堆疊的標題完全左對齊，然後添加一些顏色和一個很酷的框陰影效果。

首先更新行設置以去除左填充。

然後更新文本模塊設置以包括以下內容：

背景顏色：#5b7796
文字顏色：淺
標題 2 字體：Cairo
標題 2 字體樣式：默認
標題 2 文字大小：10vw

文字文字大小：5vw
自定義填充：2vw 頂部，2vw 底部，4vw 左，4vw 右

將邊框樣式恢復為默認值，然後按如下方式更新新的邊框設置：

邊框右側寬度：0.2em
右邊框顏色：#ffffff

底部邊框寬度：0.2em
右邊框顏色：#ffffff

現在您可能會注意到，邊界的 0.2em 值可能看起來很小。 這是因為 em 值是基於 body 字體值的，為此我們特地將其更改為 5vw。 由於我們希望邊框寬度隨著標題的大小而調整，我們需要給正文文本一個 vw 長度單位值，該值將隨瀏覽器大小而縮放。

現在讓我們給它一個盒子陰影以獲得漂亮的破碎網格效果。

盒子陰影：見截圖
框陰影水平位置：20px
框陰影垂直位置：20px
陰影顏色：#5b7796
框陰影位置：外陰影

然後更新移動模塊的大小。

寬度：50%（桌面）、13%（平板電腦）、16%（智能手機）

最後一步，取出行的填充和邊框。

然後查看最終結果。

標題設計#5

對於最後一個標題設計，我們只需稍微調整間距以加寬文本模塊。 這將創建與標題設計#2 類似的設計。

首先，打開文本模塊並在 h2 標題下添加以下文本：

<h3>our process</h3>

然後更新設計設置如下：

標題 2 字體樣式：大寫 (TT)
寬度：94%（桌面）、29%（平板電腦）、29%（智能手機）

然後更新間距如下：

自定義邊距：-8vw 頂部，-5vw 底部
自定義填充：4vw 頂部，4vw 底部

這是最終結果。

反應靈敏

讓這些設計在移動設備上看起來很好的技巧是調整文本模塊的大小和邊距以隨著瀏覽器窗口的縮小而縮放。 因此，如果某些內容不能正確縮放，您可能必鬚根據自己的目的調整這些屬性。 這是設計在移動設備上的樣子。

最後的想法

我希望本教程中的 5 個標題設計至少能為您自己的設計提供一些很好的起點。 正如您所料，該設計最適合較短（一個詞）的標題，因為文本將垂直堆疊。 但是可以添加大量設計元素以使這些設計真正獨一無二。 隨意探索不同的字體、顏色和邊框，使其成為您自己的。

如需更多靈感，請查看此垂直文本佈局。 您可能還想了解如何使用更自定義的 css 方法創建橫向和縱向文本。

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

乾杯!