使用 Divi 創建內聯滾動顯示

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 DJ 佈局包創建漂亮的內聯滾動顯示。 這是一種將注意力吸引到您網站上的特定列容器的好方法，而無需多次將其添加到您的頁面。 我們將為該技術添加一個很酷的懸停/釋放效果，以幫助訪問者抓住列容器並在需要時將其放下。 您也可以免費下載 JSON 文件！

預覽

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

桌面

移動的

免費下載內嵌滾動顯示佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

使用 DJ Layout Pack 的主頁創建新頁面

添加新頁面

對於本用例教程，我們將使用其中一種 DJ 佈局。 首先創建一個新頁面，為頁面指定標題並切換到 Visual Builder。

上傳DJ主頁

繼續將 DJ 主頁佈局上傳到您的頁面。

為頁面上的每個部分添加更高的 Z 索引值

為英雄部分添加更高的 Z 索引

我們將固定一個特定的列，並允許它顯示在我們想要的任何地方。 反之亦然。 我們想把它隱藏在我們不希望它出現的地方。 為此，我們將為頁面上的每個部分（除了列所在的部分，即頁面上的部分 #2）賦予更高的 z 索引值。 首先打開英雄部分並在可見性設置中增加 z 索引。

• Z指數：2

複製 Z 索引

添加 z 索引後，您可以復制它。

粘貼到頁面上除部分 #2 之外的其他部分

並將其粘貼到頁面上的所有其他部分，除了部分 #2 （包含我們將轉換為內嵌滾動顯示的列的部分）。

更改第 2 部分

將列內容放在單獨的行中

更改行列結構

讓我們開始修改第二部分，從行的列結構開始。

重複行

繼續克隆該行。

刪除行中的模塊

移除第一行中的文本和按鈕模塊以及第二行中的音頻模塊。

修改第 2 節中的第 1 行

移除一些音頻模塊（以適應更小的屏幕尺寸）

在接下來的步驟中，我們將修復包含音頻模塊的列。 現在，為了確保列適合較小屏幕尺寸的視口高度，我們需要移除一些音頻模塊。

將底部邊距添加到行

繼續打開行設置，轉到設計選項卡並添加一些底部填充。 我們將需要這個空間來允許列在本教程後面的滾動中顯示。

• 下邊距：700px

打開列設置

是時候開始將列轉換為內聯滾動顯示了！ 打開列設置。

懸停框陰影

然後，轉到設計選項卡並在懸停時更改一些框陰影值。

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

懸停變換比例

通過修改變換比例值來增加懸停時列的大小。

• 底部：110%
• 正確：110%

默認主元素

為了使該列固定，我們將向該列的主要元素添加幾行 CSS 代碼。

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

懸停主元素

確保將固定位置 CSS 行也添加到懸停主元素。 這將防止列閃爍。

position: fixed;

默認 Z 索引

現在，在正常情況下，我們希望模塊出現在所有頁面內容下方。 為了確保發生這種情況，我們將更改列的 z 索引。

• Z 指數：0

懸停 Z 索引

但是，在懸停時，我們希望該列與所有頁面內容重疊。 一旦有人發布該列，它就會退回到所有頁面內容之後的位置。 相應地更改懸停時的 z 索引：

• Z指數：10

修改第 2 節中的第 2 行

將頂部填充添加到列

出於審美目的，我們將打開第 2 部分第二行中的列並添加一些自定義頂部填充。

• 頂部填充：80px

將自定義底部邊距添加到整個頁面的部分

定位部分

打開部分設置

現在我們已經修改了內聯滾動顯示列，我們必須創建一些空間來顯示它。 我們已經為它所在的行（700px底部填充）完成了這項工作，但我們將允許該列也顯示在頁面上的其他位置。 打開以下部分的部分設置：

添加底部邊距

轉到間距設置並添加一些底部邊距。 添加底部邊距將在頁面上創建允許低 z 索引列顯示的空白空間。

• 下邊距：700px

定位部分

打開部分設置

接下來打開以下部分：

添加底部邊距

並在此處添加一些底部邊距。

• 下邊距：700px

刪除多餘的部分填充

刪除第 2 部分底部填充

現在，我們唯一要做的就是優化我們的設計與內聯滾動顯示的匹配方式。 打開頁面上的第二部分並刪除底部填充。

• 底部：0px

定位部分

打開部分設置

接下來打開以下部分設置：

刪除底部填充和添加頂部填充

添加一些頂部填充並刪除底部填充。

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

定位部分

打開部分設置

進入最後一節。 打開分區設置。

去除頂部填充

去除頂部填充物，你就完成了！

• 頂部填充：0px

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 和 DJ Layout Pack 創建內聯滾動顯示。 這是向您的網站添加交互的好方法。 我們希望本教程也能激發您創建自己的固定內聯滾動顯示！ 如果您有任何問題或建議，請務必在下面的評論部分留言。

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