如何在 Divi 中創建從下到上的粘性導航欄

在今天的 Divi 教程中，我們將逐步向您展示如何在 Divi 中創建從底部到頂部的粘性導航欄。 這將允許導航欄最初停留在頁面底部，以獲得獨特的首屏佈局。 然後，一旦您滾動到頁面的首屏部分，導航欄將停留在頁面頂部，並在頁面的其餘部分保持在那裡。 您可以說頁面將“拾取”屏幕底部的菜單，並為您的主菜單和網站帶來良好的交互效果。

讓我們開始吧！

搶先看

為了幫助您可視化我們試圖實現的結果，讓我們看一下最終結果：

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中創建從底部到頂部的粘性導航欄

第 1 部分：創建首屏部分和標題

對於本教程的第一部分，我們將創建首屏部分和標題，作為頁面的主要標題部分。 該部分將在桌面上全屏顯示，以確保該部分佔據整個視口。

添加行

首先，向默認部分添加一列行。

部分設置

添加模塊之前，先打開版塊的設置，添加背景如下：

• 背景顏色：#e9f9ff
• 背景圖片：[添加圖片]

在設計選項卡下，更新最小高度和填充。

• 最小高度：100vh（台式機），汽車（平板電腦和手機）
• 填充：20vh 頂部，20vh 底部

標題文字

要創建標題文本，請向該行添加一個新的文本模塊。

然後使用以下 H1 標題更新內容：

<h1>Above the Fold</h1>

文字設置

在文本設置的設計選項卡下，更新標題字體樣式如下：

• 標題字體：魔方
• 標題字體粗細：半粗體
• 標題字體樣式 TT
• 標題文本對齊方式：居中
• 標題文字顏色：#302ea7
• 標題文字大小：130 像素（桌面）、70 像素（平板電腦）、40 像素（手機）
• 標題字母間距：2px
• 標題線高度：1.3em

第 2 部分：創建折疊下部分

為了演示粘性導航欄的功能，我們需要添加一個折疊下方的部分，以便我們可以有一些空間來滾動。

要創建該部分，請複制我們剛剛創建的折疊上方部分。

更新重複的部分背景。

• 背景顏色：#f4def1

然後給該部分一個大的最小高度，以便我們有空間向下滾動頁面。 這只是一個填充部分，代替了頁面的實際內容。

• 最小高度：200vh

然後通過將單詞“Below”替換為“Above”來更新文本模塊內容。

第 3 部分：創建粘性導航欄

要從下到上創建粘性導航欄，我們的第一步是創建一個具有一列行的新部分。

添加新的節和行

在折疊上方部分的正下方添加一個新的常規部分。

然後向該部分添加一列行。

部分背景和填充

打開部分設置並更新背景顏色。

• 背景顏色：#302ea7

然後取出頂部和底部填充，使導航欄的高度變小。

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

添加可見溢出

為了確保下拉菜單保持可見，請按如下方式更新可見性選項：

• 水平溢出：可見
• 垂直溢出：可見

給部分在移動設備上的絕對位置

默認情況下，移動下拉菜單將在漢堡包圖標下方打開。 如果我們將導航欄保持在底部，如果用戶在底部位置點擊它，這將隱藏下拉菜單。 為了獲得更好的用戶體驗，我們希望導航欄從平板電腦和手機顯示屏的頁面最頂部開始。

為此，請在平板電腦和手機上為該部分提供絕對位置。

• 位置：相對（桌面）、絕對（平板電腦和手機）

為桌面和移動設備添加粘性位置

要將粘性位置添加到導航欄部分，請更新以下內容：

• 粘性位置：粘在頂部和底部（桌面），粘在頂部（平板電腦和手機）

更新行填充

粘性部分完成後，打開該部分內行的設置並按如下方式更新填充：

• 填充：頂部 10 像素，底部 10 像素

創建導航菜單

部分和行就位後，我們就可以創建導航菜單了。

首先向一列行添加一個菜單模塊。

菜單內容

更新菜單內容如下：

• 從下拉菜單中選擇菜單
• 添加徽標圖像（我使用的是 122 像素 x 52 像素的圖像）
• 取出默認背景色

在設計選項卡下，更新以下菜單文本和圖標設置：

• 活動鏈接顏色：#fff
• 菜單字體：魔方
• 菜單字體樣式：TT
• 菜單文字顏色：#fff
• 菜單文字大小：16px
• 文本對齊：右
• 下拉菜單行顏色：#e19dff
• 移動菜單文本顏色：#302ea7
• 購物車圖標顏色：#fff
• 搜索圖標顏色：#fff
• 漢堡菜單圖標顏色：#fff

使用邊框偏移移動端導航欄的絕對位置

由於導航欄部分在移動設備上具有絕對位置，因此該欄將位於（並截斷）頁面頂部的上方。 為了解決這個問題，我們需要使用與導航欄/部分相同高度的頂部邊框來偏移頂部部分。

在手機上檢查導航欄部分的高度

要確定移動設備上導航欄的高度，請在新的瀏覽器窗口中打開頁面的實時版本。 然後您可以將瀏覽器寬度縮小到 980px 以下以查看移動菜單。 右鍵單擊包含菜單的部分，然後從瀏覽器的右鍵單擊菜單中選擇檢查元素選項。 您應該在該部分下方看到一個工具箱，顯示該部分的尺寸（包括高度）。 在這個例子中，導航欄部分的高度是 72px。

將頂部邊框偏移添加到折疊部分

現在我們已經確定了部分的高度，打開頂部（折疊上方）部分的設置。

在設計選項卡下，在平板電腦和手機上添加以下頂部邊框：

• 頂部邊框寬度：72px（平板電腦和手機）
• 頂部邊框顏色：#302ea7

由於邊框與具有絕對位置的部分的高度相同，因此您將看不到邊框，因為它只會將部分向下推，以免被切斷。

最後結果

看看最後的結果！

最後的想法

通過使用 Divi 的內置位置和粘性選項，可以輕鬆地從底部到頂部創建粘性導航欄。 關鍵是給折疊上方部分的高度為 100vh，然後在下面添加導航欄部分，貼在瀏覽器的底部和頂部。 希望這將有助於為您的網站添加更獨特和更具吸引力的首屏。

這個粘性導航欄最適合單頁設計而不是全局模板。 也就是說，您可以輕鬆選擇將其用作主頁設計，並使用 Divi 主題構建器為其餘頁面使用全局標題。

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

乾杯!