您可以使用內置設置實現的 5 種創意 Divi 標題模塊樣式
已發表: 2019-01-06開箱即用，Divi Header Module 只需進行少量調整即可創建引人注目的標題設計。 這使它成為在 Divi 中為您的網站設計標題時非常流行的模塊。 通過一些開箱即用的思考，您可以僅使用內置設置（無自定義 CSS）創建一些真正獨特的設計。 因此，對於那些想要探索一些新標題設計的人，我將向您展示 5 種可能會激發您靈感的 Divi 標題模塊樣式。
享受！
5 種 Divi 標題模塊樣式的先睹為快
風格#1：抽象漸變
開始設計風格#1
風格#2：三重威脅
開始設計風格#2
風格 #3：圓形框架
開始設計風格 #3
風格 #4：混合左撇子
開始設計風格 #4
樣式 #5：大縮放類型
開始設計風格 #5
您需要什麼才能開始
要開始，您將需要 Divi 主題。 我將使用 Divi Builder 在前端構建設計。 您還需要一些圖像來完成本教程。 請記住，您始終可以導入預製佈局的圖像。 事實上，在本教程中，我將使用來自 Cleaning Company Layout Pack、Business Coach Layout Pack 和 Web Freelancer Layout Pack 的圖像。
讓我們開始吧！
訂閱我們的 YouTube 頻道
風格 #1：抽象的 Gadient
第一個 Divi 標題模塊設計是一種簡單的多用途設計，以創造性的方式使用漸變背景。
首先，添加一個帶有全角標題模塊的新全角部分。
使用新標題和標題圖像更新標題設置內容。
然後更新設計設置如下：
標題字體：Lato
標題文字大小：6vw
按鈕一背景顏色：#0c71c3
按鈕一邊框寬度：0px
自定義填充：8vw 頂部，8vw 底部
在我們添加我們的部分背景之前，我們必須首先使標題模塊背景透明並給它一個自定義漸變以在右下角創建我們的圓形。 返回內容選項卡並更新背景如下：
背景顏色：rgba(255,255,255,0)
背景漸變左顏色：#0096eb
背景漸變右側顏色：rgba(255,255,255,0)
漸變類型：徑向
徑向：右下
起始位置：25%
結束位置：0%
保存設置
接下來，我們需要將我們的背景設計添加到位於標題模塊後面的部分。 為此，請打開部分設置並更新以下內容：
背景漸變左顏色：#0096eb
背景漸變右顏色：#007ea1
漸變類型：徑向
徑向：左上角
起始位置：43%
結束位置：0%
設計提示：如果您正在尋找一些顏色來嘗試自己的標題漸變，我建議您使用您可能正在使用的標題圖像/圖形中使用的顏色。
為了給我們的抽象背景添加另一個微妙的設計元素，我們可以添加一個頂部和底部的分隔線。 為此，請轉到設計選項卡並添加以下分隔線：
頂部分隔線樣式：見截圖
頂部分隔線顏色：rgba(150,210,210,0.2)
頂部分隔線高度：8vw
頂部分隔線水平重複：0.7x
頂部分隔線翻轉：垂直
底部分隔線樣式：見截圖
底部分隔線顏色：rgba(150,210,210,0.2)
底部分隔線高度：10vw
底部分隔線水平重複：0.5x
底部分隔線翻轉：垂直
就是這樣！ 查看最終設計。
風格#2：三重威脅
下一個 divi 標題模塊樣式包括三個號召性用語，包括兩個按鈕和滾動到底部的圖標。 將按鈕圖標與滾動圖標相匹配有助於設計的對稱方面。 部分分隔線創建了一個漂亮的抽像三角形設計，引導用戶向下瀏覽頁面。
創建一個帶有全角標題的新全角部分。
然後更新標題、按鈕 #1 鏈接文本和按鈕 #2 鏈接文本的文本。
然後按如下方式更新設計的其餘部分：
背景顏色：#1a1844
文字和標誌方向：中心
圖標：見截圖
向下滾動圖標大小：20px
標題字體：Lato
標題字體粗細：重
標題文字大小：5vw（桌面）、40px（平板電腦）、30px（智能手機）
標題行高度：1.3em
按鈕二背景顏色：#fe4943
按鈕二邊框寬度：0px
按鈕二圖標：右箭頭（見截圖）
按鈕一背景顏色：#fe4943
按鈕一邊框寬度：0px
按鈕一圖標：左箭頭（見截圖）
按鈕一圖標位置：左
自定義填充：頂部 10vw，左側 10vw
現在我們要做的就是添加我們的部分分隔線來創建三角形背景設計。 打開截面設置並更新以下設計設置：
頂部分隔線樣式：見截圖
頂部分隔線顏色：rgba(255,255,255,0.3)
頂部分隔線高度：45vw
頂部分隔線樣式：見截圖
頂部分隔線顏色：rgba(255,255,255,0.1)
頂部分隔線高度：45vw
現在讓我們看看最終的設計：
額外設計提示：按鈕的移動調整
我知道我說過沒有自定義 CSS，但我認為你們中的一些人會喜歡這是一個不必要的額外繁榮。 您可能會注意到，對於帶有兩個按鈕的標題，第二個按鈕的左邊距與智能手機上的設計不符。 為了在智能手機上實現更簡潔的設計，您可以在頁面設置中添加一段自定義 CSS，以使按鈕具有相同的寬度並且沒有第二個按鈕邊距。
在Divi Builder中打開頁面設置並添加以下CSS
@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
display: block;
width: 100%;
margin-left: 0px;
}
}
現在看看手機上的設計。
風格 #3：圓形框架
這種圓形的 divi 標題模塊設計是構建背景圖像和標題內容的好方法，可以讓您更加關注行動號召。 所需要的只是對標題的邊框半徑、框陰影和一些自定義間距進行一些調整。
首先，創建一個帶有全角標題的新全角部分。
首先，讓我們通過添加標題、按鈕 #1 鏈接文本和徽標圖像來更新標題的內容元素。
接下來添加一個足夠大的背景圖像，以跨越標題的高度和寬度。 由於這將是一個圓形標題，請嘗試使用具有相同高度和寬度的圖像（例如 1000 像素 x 1000 像素）。
然後更新其餘的設計設置，如下所示：
保存設置。
然後打開section設置添加背景顏色和間距如下：
背景顏色：#000000
自定義填充：5vw 頂部，5vw 底部
現在看看最終的設計。
混合左撇子
這種接頭設計有一些獨特的設計特點。 標題模塊實際上已調整大小並左對齊以顯示部分背景圖像的右半部分。 並且頭部模塊內容具有混合效果，通過內容暴露背景圖像。 要做到這一點，您需要為您的部分提供正確類型的背景圖像。 通常，您會希望圖像具有較暗的元素，以便混合內容更加可見。
讓我們開始吧。
首先，創建一個帶有全角標題的新全角部分。
在我們開始更新標題樣式之前，首先跳到部分設置並添加以下背景：
添加背景圖像，圖像的焦點位於右側。
背景漸變左顏色：rgba(0,0,0,0.54)
背景漸變右側顏色：rgba(255,255,255,0)
梯度方向：90度
徑向：右下
起始位置：50%
結束位置：0%
將漸變放在背景圖像上方：是
漸變的目的是使圖像的左側更暗，這樣當我們混合頭模塊內容時，它會更具可讀性。 此外，您現在將無法看到部分背景，因為默認標題背景顏色仍處於活動狀態。 我們接下來會改變它。
打開標題設置並使用標題、按鈕 #1 鏈接文本和深色徽標更新內容。
現在將背景顏色更改為白色。
然後更新以下內容：
標題字體粗細：超粗
標題文字顏色：#000000
標題文字大小：8vw
標題行高度：1.1em
按鈕一文字大小：2.7vw
按鈕一文本顏色：#000000
按鈕一邊框寬度：0.2em
按鈕一邊框顏色：#edf000
字體粗細：超粗
寬度：50%（台式機、平板電腦和智能手機）
混合模式：屏幕
這是最終的設計。
樣式 #5：大縮放類型
這種 Divi 標題模塊設計引入了一種簡單有效的方法來創建隨瀏覽器窗口縮放的大文本，而不會影響設計。 由於我們使用的是全角標題模塊，因此我們需要稍微擴展我們的內容區域。 然後我們需要使用 vw 長度單位來調整我們的文本大小。 這種設計非常適合節標題。
首先，創建一個帶有全角標題的新全角部分。
在全角標題設置中，更新以下內容：
標題：諮詢
副標題文本：服務
按鈕 #1 鏈接文本：立即開始
刪除內容框中的默認文本。
然後添加一個淺色徽標圖像。
接下來，我們將增加標題容器的默認最大寬度，以便為標題創建更多的水平空間。 為此，請轉到高級選項卡並在 Header Container 下添加以下 CSS：
width: 100% ; max-width: 100% ;
現在更新其餘的設計設置，如下所示：
添加背景圖像。
文字和標誌方向：中心
標題字體：Cuprum
標題字體粗細：粗體
標題字體樣式：TT
標題文字顏色：#bfbfbf
標題文字尺寸：10vw
標題字母間距：0.1em
副標題字體： Cuprum
副標題文本對齊：右（這有助於將文本與字母間距居中）
副標題文字大小：3vw
副標題字母間距：7.8vw
按鈕一邊框寬度：0px
按鈕一字體：Cuprum
按鈕一圖標：見截圖
訣竅是對文本使用 vw 長度單位。 然後調整副標題字母間距以盡可能與標題文本對齊。
為了最大化我們的水平間距，我們需要為我們的標題內容添加一個自定義寬度，如下所示：
內容寬度：80%；
即使這小於默認的 100%，更改設置將覆蓋默認值並使用我們之前添加的自定義 css 進行調整。
最後，添加一個框陰影來完成設計：
盒子陰影：見截圖
框陰影模糊強度：0px
框陰影傳播強度：60px
現在看看最終的結果。
把它們變成全屏標題！
只需單擊一下按鈕，就可以輕鬆地將上述設計全屏顯示。 這是 fullwidth header 模塊的一個強大功能。 只需轉到標題設計設置並選擇“製作全屏”選項。
此外，您需要刪除這些設計的自定義填充，以便標題完全適合瀏覽器窗口。
最後的想法
這些只是 Divi 接頭模塊可用的接頭設計可能性中的一部分。 嘗試所有的設計設置會很有趣。 如果有的話，我希望這些示例能為您的下一個項目提供一點靈感。
我期待在下面的評論中收到您的來信。
乾杯!