如何在使用 Divi 的粘性選項滾動之前隱藏標題

英雄部分是您網站的引人注目之處。 它通常為網站的其餘部分定下基調，並向訪問者展示他們的期望。 這就是為什麼確保所有重點都放在您在英雄部分分享的少數元素上會很有幫助，例如文案和號召性用語。 但僅僅因為您想突出顯示英雄部分，並不意味著您也不需要導航欄。 如果您正在尋找一種用戶友好的方式來在人們開始滾動時顯示您的標題，那麼您會喜歡這篇文章。 今天，我們將向您展示如何使用 Divi 的內置粘性選項在滾動前隱藏標題。 我們實現的效果是完全響應的，並且在所有屏幕尺寸上看起來都很棒。 您也可以免費下載模板 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載標題模板

要使用免費的標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

將模板上傳到 Divi Theme Builder 並輸入模板時，您會注意到該部分不可見。 那是因為效果已經應用到它了。 要修改不同的元素，您可以切換到線框模式並訪問那裡的元素，或者暫時刪除部分轉換轉換和主元素設置，並在完成標題設計修改後將它們放回原處。

1. 在新的標題模板中構建標題元素結構

創建新的全局標題模板

首先轉到Divi Theme Builder。 在那裡，開始構建新的全局或自定義標頭。

部分設置

背景顏色

進入模板編輯器後，您會注意到一個部分。 打開部分設置並更改背景顏色。

• 背景顏色：#001b34

間距

轉到該部分的設計選項卡，然後刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加新行

列結構

繼續使用以下列結構添加新行：

背景顏色

尚未添加模塊，打開行設置並應用您選擇的背景顏色。

• 背景顏色：#001b34

漿紗

轉到行的設計選項卡並相應地更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：100%
• 最大寬度：100%

間距

繼續相應地更改填充值：

• 頂部填充：0px
• 底部填充：0
• 左填充：
  • 桌面： /
  • 平板電腦和手機：5%
• 右填充：
  • 桌面： /
  • 平板電腦和手機：5%

第 1 列設置

背景顏色

完成常規行設置後，打開第 1 列設置並應用背景顏色。

• 背景顏色：#f4d5b8

將菜單模塊添加到第 1 列

選擇菜單

是時候添加模塊了，從第 1 列中的菜單模塊開始。選擇您選擇的菜單。

上傳標誌

接下來上傳徽標。

背景顏色

然後，更改背景顏色。

• 背景顏色：#063765

背景圖片

並上傳您選擇的插圖背景圖片。 您可以通過下載本文開頭的免費贈品來找到並使用以下內容。

• 背景圖片尺寸：適合
• 背景圖片位置：中心

菜單文字設置

轉到模塊的設計選項卡並更改菜單文本大小。

• 菜單文字大小：18px

下拉菜單設置

然後，相應地更改下拉菜單設置：

• 下拉菜單行顏色：rgba(0,0,0,0)
• 移動菜單背景顏色：#ddc1a7
• 移動菜單文本顏色：#063765

圖標設置

將圖標設置中的圖標顏色也更改為白色。

• 購物車圖標顏色：#ffffff
• 搜索圖標顏色：#ffffff
• 漢堡菜單圖標顏色：#ffffff

漿紗

然後，在大小設置中修改徽標最大寬度。

• 標誌最大寬度：70px

間距

接下來應用一些自定義填充值。

• 頂部填充：1%
• 底部填充：1%
• 左填充：5%
• 右填充：5%

盒子陰影

隨著一些自定義框陰影。

• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.3)

轉換 翻譯

並通過修改transform translate設置完成模塊設置如下：

• 對：
  • 桌面：20px
  • 平板電腦和手機：0px

將按鈕模塊添加到第 2 列

添加副本

在第 2 列中，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕對齊

移至設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：右

按鈕設置

然後，相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：16px
• 按鈕文字顏色：#2a2a2a
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：0px
• 按鈕邊框顏色：rgba(0,0,0,0)

• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

也使用自定義填充為您的按鈕賦予一些形狀。

• 頂部填充：20px
• 底部填充：20px
• 左填充：40px
• 右填充：40px

盒子陰影

接下來，應用框陰影。

• 框陰影模糊強度：30px
• 陰影顏色：rgba(0,0,0,0.18)

轉換 翻譯

並通過相應地修改轉換轉換值來完成模塊設置：

• 對：
  • 桌面：50px
  • 平板電腦和手機：0px

2. 應用自定義粘性效果來實現滾動前隱藏效果

使行絕對定位

現在我們已經設置了標題的基礎，我們可以在滾動效果之前應用隱藏標題。 只要您按照以下步驟操作，您就可以將此效果應用於您構建的任何標題。 第一步是打開行設置並將行轉為絕對值。 這將幫助我們防止頁面頂部的標題佔用空間。

• 位置：絕對
• 位置：左上角

使部分具有粘性

接下來，我們將打開部分設置並允許它粘在頂部。

• 粘滯位置：粘在頂部
• 底部粘性限制：無
• 從周圍的粘性元素偏移：是
• 過渡默認和粘性樣式：是

部分動畫

我們也將向我們的部分添加動畫。 此動畫將有助於防止頁面加載時顯示標題。

• 動畫風格：淡入淡出

部分過渡持續時間

一旦開始滾動，您可以通過修改部分高級選項卡中的過渡持續時間，自行決定標題向下滑動的速度。 持續時間越長，標題滑下的速度就越慢。

• 轉換持續時間：800ms

部分轉換 翻譯

現在，在默認狀態下，我們不希望標題可見。 實現這一目標的第一步是進入截面的變換設置並為 Y 軸使用負值。

• 右：-300px

我們將在粘性狀態下將此值恢復為零。 這意味著一旦您開始滾動，標題就會再次可見。

• 粘性右側：0px

部分可見性 CSS 屬性

本教程的下一步和最後一步在理論上不需要達到效果，但隱藏不使用的元素是一個很好的做法。 這就是為什麼我們將轉到該部分的高級選項卡並在主元素框中添加以下 CSS 代碼行：

• 主要元素：

  visibility: hidden

我們將把我們的內容改回可見的粘性狀態。 就是這樣！

• 粘性主要元素：

  visibility: visible;

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在人們進入您的頁面後立即確保您的英雄部分成為您頁面的焦點。 更具體地說，我們已經向您展示瞭如何在滾動前隱藏標題。 這允許您的訪問者在獲得導航能力之前先處理英雄部分信息。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。