如何創建漂亮的頁腳滾動顯示在 Divi 的部分分隔線下方
已發表: 2019-07-18在所有設計趨勢中，頁腳仍然必不可少。 人們已經習慣了它們，這反過來又使它們非常用戶友好。 它們幫助訪問者組織他們在您網站上的停留並導航到他們正在尋找的準確頁面。 使用 Divi，您可以在一個部分中輕鬆創建任何類型的頁腳。
現在，如果你想給你的頁腳一些額外的維度和互動，你會喜歡這篇文章。 我們將創造性地將頁腳部分與部分分隔符組合起來，以創建頁腳滾動顯示。
讓我們開始吧！
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載佈局
要使用免費佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
訂閱我們的 YouTube 頻道
1.創建新的空白頁面並上傳選擇的佈局
添加新的空白頁
您需要做的第一件事是創建一個新的空白頁面。
上傳 SaaS 公司佈局包登陸頁面
切換到 Visual Builder 並上傳 SaaS 公司佈局包的登錄頁面。 儘管我們正在使用這種特定的佈局，但您可以使該技術在您正在處理的任何類型的頁面上工作。
2.為每個部分添加Z索引並刪除部分動畫
將 Z 索引添加到英雄部分
繼續更改頁面上英雄部分的 z 索引。
- Z指數：3
複製 Z 索引並粘貼到頁面上的所有其他部分
複製 z 索引並將其粘貼到頁面上的所有其他部分。 增加每個部分的 z 索引是使教程工作的關鍵步驟。 它將允許每個部分出現在我們稍後將在帖子中添加的頁腳部分的頂部。
刪除英雄部分動畫
為了確保頁腳一直隱藏到頁面底部，我們還將刪除所有部分動畫。 打開英雄部分並刪除動畫。
- 動畫風格：無
將動畫擴展到頁面上的所有部分
將動畫樣式擴展到整個頁面的所有部分。
3.修改頁面最後一節
更改背景顏色
移至頁面的最後一部分並更改背景顏色。
- 背景顏色：#f2f2f2
4. 將常規部分 #1 添加到頁面底部
部分設置
背景顏色
正如您在這篇文章的預覽中所注意到的，頁腳將出現在分區分隔符下方。 我們將在頁面底部專門為該部分分隔線創建一個新部分。 打開部分設置並使用完全透明的背景顏色。 這將允許頁腳通過節容器顯示，即使其位置將在其下方。
- 背景顏色：rgba(0,0,0,0)
頂部分隔線
轉到該部分的設計選項卡並添加您選擇的頂部分隔線。
- 分隔線樣式：在列表中查找
- 分隔線高度：250 像素（桌面）、150 像素（平板電腦）、100 像素（手機）
- 分隔線水平重複：2x
Z索引
這個新部分也需要增加 z 索引。
- Z指數：3
5. 將常規部分 #2 添加到頁面底部
部分設置
背景顏色
是時候創建頁腳部分了！ 在頁面底部添加另一個新的常規部分，然後選擇您選擇的背景顏色。
- 背景顏色：#202332
漿紗
轉到設計選項卡並確保寬度為“100%”。
- 寬度：100%
間距
我們還需要增加該部分的頂部填充。
- 頂部填充：500px
Z索引
我們分配給此部分的 z 索引低於頁面上其他部分的 z 索引。 這將幫助我們隱藏該部分，直到我們位於頁面底部。
- Z指數：2
添加新行
列結構
繼續使用以下列結構添加新行：
漿紗
打開行設置並相應地更改大小設置：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
列間距
接下來打開第 1 列設置並添加一些左填充。
- 左填充：20px
列右邊框
向列添加右邊框。
- 右邊框寬度：1px
- 右邊框顏色：#515151
複製粘貼列樣式
通過擴展樣式或使用複制粘貼選項將更改應用於所有列。
將圖像模塊添加到第 1 列
上傳圖片
是時候開始添加模塊了！ 將新的圖像模塊添加到第一列並上傳您的徽標。
漿紗
轉到設計選項卡並更改不同屏幕尺寸的寬度。
- 寬度：35%（桌面）、30%（平板電腦）、25%（手機）
- 模塊對齊：左
間距
添加一些底部邊距。
- 在圖像下方顯示空間：是
- 下邊距：50px
將文本模塊 #1 添加到第 2 列
添加內容
進入第二列！ 添加具有您選擇的某些內容的第一個文本模塊。
文字設置
修改文本設置。
- 文字字體：Nunito Sans
- 文字字體粗細：半粗體
- 文字顏色：#ffffff
- 文字大小：19px
間距
並在不同的屏幕尺寸上添加一些自定義的頂部和底部邊距。
- 上邊距：15px（桌面和平板電腦），10px（手機）
- 下邊距：15px（桌面和平板電腦），10px（手機）
將文本模塊 #2 添加到第 2 列
添加內容
將第二個文本模塊添加到第二列並輸入您選擇的一些內容。
添加鏈接
添加與頁腳項目匹配的鏈接。
- 模塊鏈接網址：#
文字設置
接下來修改文本設置。
- 文字字體：Nunito Sans
- 文字顏色：#dbdbdb
- 文字大小：17px
間距
並在不同的屏幕尺寸上添加一些自定義的頂部和底部填充。
- 上邊距：15px（桌面和平板電腦），10px（手機）
- 下邊距：15px（桌面和平板電腦），10px（手機）
根據需要多次克隆文本模塊 #2
根據需要多次克隆第 2 列中的第二個文本模塊。
更改內容
確保更改內容。
更改鏈接
隨著鏈接。
- 模塊鏈接網址：#
克隆第 2 列中的模塊並放置在其餘列中
完成第二列後，您可以根據需要最多克隆這兩個模塊，並將重複項放置在該行的其餘兩列中。
更改內容
更改每個副本的內容。
更改鏈接
隨著鏈接。
- 模塊鏈接網址：#
6. 將第 2 部分固定在頁面底部
添加自定義 CSS
現在，為了創建滾動顯示，我們將通過向頁腳部分的主要元素添加兩行 CSS 代碼來確保頁腳部分粘在頁面底部。
position: fixed; bottom: 0;
7. 將底部邊距添加到部分 #1 以創建顯示效果
在不同的屏幕尺寸上添加底部邊距
我們還需要在頁面底部留出一些空間，以便顯示頁腳。 打開包含部分分隔符的部分，並在不同的屏幕尺寸之間添加一些底部邊距，您就完成了！
- 下邊距：400px（桌面）、700px（平板）、800px（手機）
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何創建漂亮的頁腳滾動顯示在部分分隔線下方以創建獨特的效果。 這是使任何頁腳具有交互性並引起對頁腳中列出的項目的注意的好方法。 我們希望本教程也能激發您創建自己的分區分隔頁腳顯示！ 如果您有任何問題或建議，請務必在下面的評論部分留言。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。