如何使用 Divi 的全角標題模塊構建英雄部分
已發表: 2022-08-17建立一個英雄部分是一種很好的方式來引起人們對頁面上重要內容的關注。 這是一段超大的內容，您可以使用它來講述您的故事、分享有關您的工作的信息或突出產品或服務。 使用 Divi 的 Fullwidth Header 模塊，您可以添加標題、副標題、兩個按鈕、正文、徽標圖像和標題圖像。 當然，您也可以利用背景選項來添加和組合圖像、漸變、顏色、圖案和蒙版。 您可以在一個全角標題模塊的設置中編輯所有這些設置，而不必在多個圖像、文本和按鈕模塊之間切換。
在本教程中，我們將向您展示如何使用 Divi 的全角標題模塊構建一個引人入勝且引人注目的英雄部分。
讓我們開始吧！
搶先看
這是我們將設計的預覽。
你需要什麼開始
在我們開始之前，請確保您的網站上有最新版本的 Divi。
現在，您可以開始了！
如何使用 Divi 的全角標題模塊構建英雄部分
使用預製佈局創建新頁面
讓我們從使用 Divi 庫中的預製佈局開始。 對於此設計，我們將使用 Veterinarian Layout Pack 中的 Veterinarian Landing Page。
向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。
在本示例中，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。
搜索並選擇 Veterinarian Landing Page 佈局。
選擇使用此佈局將佈局添加到您的頁面。
現在我們已準備好構建我們的設計。
添加全角標題模塊
我們將使用 fullwidth header 模塊重新創建 hero 部分。 在頁面的現有標題下方添加一個新的全角部分。
將全角標題模塊添加到該部分。
然後，刪除原始標題部分。
自定義全角標題模塊
添加內容
打開全寬頭模塊設置，在模塊中添加以下內容：
- 標題： 獸醫
- 副標題：DiviVet。 服務我們最好的朋友
- 按鈕 #1：查看所有服務
- 按鈕 #2：預約
- 身體：Praesent sapien massa，convallis a pellentesque nec，egestas non nisi。 Nulla quis lorem ut libero malesuada feugiat。 Curabitur arcu erat，accumsan id imperdiet et，sem 的 porttitor。 Cras ultricies ligula sed magna dictum porta。
接下來，添加獸醫與動物的標題圖像。
漸變背景設置
移至背景設置。 刪除原始背景顏色，然後添加背景漸變。
- 0%：RGBA(255,170,205,0.48)
- 40%：RGBA(110,66,255,0.24)
- 87%：RGBA(124,239,255,0.71)
- 漸變類型：橢圓
- 漸變位置：右
接下來，選擇背景蒙版選項卡並將背景蒙版添加到背景中。
- 背景蒙版：角點
- 面具顏色：#FFFFFF
- 蒙版變換：垂直
自定義文本樣式
準備好標題內容和背景後，讓我們轉到設計選項卡以自定義文本樣式。 首先，打開標題設置，自定義文字如下：
- 標題字體：Nunito
- 標題字體粗細：超粗體
- 標題字體樣式：TT（大寫）
修改標題文本顏色、大小和間距。
- 標題文字顏色：#a9cb6b
- 標題文字大小：14px
- 標題字母間距：2px
移動到正文部分並自定義字體。 使用 Divi 的響應設置為移動設備添加更小的文本大小。
- 正文文本顏色：#000000
- 正文文本大小-桌面：18px
- 正文大小：手機：14px
- 車身線高：1.8em
接下來，打開字幕設置並自定義字體。
- 字幕字體：Nunito
- 字幕字體粗細：粗體
- 字幕文字顏色：#000000
最後，更改桌面和移動設備的文本大小（再次使用響應式設置在移動設備上添加較小的文本大小）並調整行高。
- 字幕文字大小–桌面：56px
- 字幕文字大小-移動：32px
- 字幕行高：1.2em
自定義按鈕一樣式
接下來，我們將自定義按鈕樣式。 首先為 Button One 啟用自定義樣式，然後調整文本大小。
- 為按鈕一使用自定義樣式：是
- 按鈕一文字大小：14px
為按鈕添加背景漸變。 梯度值如下：
- 58%：#316EFF
- 100%：#1D2B60
- 漸變方向：90度
接下來，自定義邊框設置和字體設置。
- 按鈕一邊框寬度：0px
- 按鈕一邊框半徑：80px
- 按鈕一個字母間距：2px
- 按鈕一字體：Nunito
- 按鈕一字體粗細：超粗體
- 按鈕一字體樣式：TT（大寫）
禁用按鈕一圖標。
- 顯示按鈕一圖標：否
接下來，為桌面設計自定義邊距和填充設置並添加框陰影。
- 按鈕一保證金-桌面-桌面：200px
- 按鈕一個邊距-底部-桌面：0px
- Button One Padding-Top-Desktop：16px
- 按鈕一填充-底部-桌面：16px
- 按鈕一填充左桌面：2em
- Button One Padding-Right-Desktop：50em
- 按鈕框陰影：底部
使用響應式設置在移動設備上設置不同的邊距和填充值。
- 按鈕一保證金頂部移動：25px
- 按鈕一填充-右-移動：10em
我們的按鈕存在一些文本換行問題，稍後我們將使用一些自定義 CSS 進行修復。
自定義按鈕兩種樣式
按鈕二有一些不同的顏色和間距，但與按鈕一非常相似。 為了省去一些重複的設計步驟，讓我們將按鈕一模塊樣式複製到按鈕二模塊，然後自定義我們需要更改的內容。
首先，右鍵單擊按鈕一部分並複制按鈕一樣式。
然後右鍵單擊按鈕二部分並粘貼按鈕一樣式。
現在我們可以自定義按鈕兩種樣式。 更改文本顏色。
- 按鈕兩個文本顏色：#121F60
自定義按鈕二的背景漸變。
- 30%：RGBA(0,229,198,0)
- 100%：#00e5c6
使用響應式設置來調整移動設備的背景漸變。
- 0%：RGBA(0,229,198,0)
- 100%：#00e5c6
接下來，調整桌面設計的邊距和填充。
- 按鈕二邊距-桌面-桌面：0px
- 按鈕兩個邊距-底部-桌面：0px
- 按鈕 2 左邊距桌面：30%
- 按鈕二 Padding-Top-Desktop：16px
- 按鈕二 Padding-Bottom-Desktop：16px
- 按鈕 2 Padding-Left-Desktop：48em
- 按鈕 2 Padding-Right-Desktop：2em
使用響應式設置為移動設計設置不同的邊距和填充值。
- 按鈕 2 邊距左移動：5%
- 按鈕 2 Padding-Left-Mobile：35%
- 按鈕 2 Padding-Right-Mobile：5%
自定義 CSS
最後，完成了大部分的設計工作。 現在我們需要添加一些自定義 CSS 來完成設計。 移至“高級”選項卡並打開“自定義 CSS”部分。
首先，讓我們從 Header Image CSS 開始。 此 CSS 允許標題圖像顯示在按鈕上方。
z-index: 1; position:relative;
接下來，自定義 CSS 到標題。 我們將使用響應式設置為桌面和移動視圖設置不同的值。
對於桌面：
padding-top:50px; padding-bottom:30px;
對於手機：
padding-top:5px; padding-bottom:10px;
最後，將以下 CSS 添加到按鈕一和按鈕二。
white-space: nowrap;
最後結果
這是我們全角標題英雄部分的最終設計。
最後的想法
全角標題模塊允許您輕鬆創建一個漂亮的英雄部分來宣傳您的服務並告訴您的訪問者您的網站是關於什麼的。 內置設置可以輕鬆自定義標題的各個方面的設計，並且一切都在一個地方，因此無需在多個模塊之間切換來構建您的英雄部分。 如需更多獨特的英雄部分設計，請查看本教程：如何為英雄部分使用 Divi 的背景蒙版和圖案。 您是否使用全角標題模塊來構建您的英雄部分？ 我們很樂意在評論中收到您的來信！