如何使用 Divi 的新溢出選項創建滾動畫廊模型

正在尋找一種創造性的方式在您的網站上顯示圖像？ 請確保您繼續閱讀，因為在這篇文章中，我們將向您展示如何僅使用 Divi 的內置選項創建滾動畫廊模型。 具體來說，我們將把一個部分變成一個模型，並使該部分中的所有行成為模型的一部分。 一旦掌握了這項技術，您就可以在移動模型中展示您想要的任何類型的內容，並立即為您的頁面添加交互。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載滾動畫廊模型設計

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

漿紗

首先創建一個新頁面或打開一個現有頁面，然後向其中添加一個常規部分。 打開部分設置並在大小設置中修改寬度和最大寬度。

• 寬度：25vw（桌面）、60vw（平板電腦）、80vw（手機）
• 最大寬度：25vw（桌面）、60vw（平板電腦）、80vw（手機）

間距

然後，轉到間距設置，刪除所有默認的頂部和底部填充並添加一些頂部和底部邊距以創建空間。

• 最高利潤率：9vw
• 底部：9vw
• 頂部填充：0px
• 底部填充：0px

邊界

繼續轉到該部分的邊框設置，並通過向每個角添加“30px”來創建移動模型的形狀。

盒子陰影

添加一個微妙的框陰影，讓形狀通過。

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

添加第 1 行

列結構

繼續使用以下列結構將第一行添加到該部分：

背景顏色

尚未添加任何模塊，打開行設置並更改背景顏色。

• 背景顏色：#ffffff

漿紗

然後，轉到大小設置並允許該行佔據該部分的整個寬度。

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

間距

接下來刪除默認的頂部和底部填充。

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

盒子陰影

並添加一個框陰影。

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

Z索引

最後但並非最不重要的一點是，我們將通過增加可見性設置中的 Z 索引來確保行（尤其是其框陰影）與下一行重疊。

• Z指數：99

將文本模塊添加到列

添加 H2 內容

我們在這一行中唯一需要的模塊是帶有一些 H2 內容的文本模塊。

H2 文本設置

添加 H2 副本後，轉到 H2 文本設置並進行一些更改。

• 標題 2 字體：Abril Fatface
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：1.5vw（桌面）、3.5vw（平板電腦）、5vw（手機）

間距

接下來添加一些自定義的頂部和底部邊距。

• 上邊距：1.5vw（台式機和平板電腦），3.5vw（手機）
• 下邊距：1.5vw（台式機和平板電腦），3.5vw（手機）

添加第 2 行

列結構

到第二排！ 在這裡，我們使用以下列結構：

漿紗

在不添加任何模塊的情況下，打開行設置並允許行佔據該部分的整個寬度。 我們還將修改高度和最大高度，以在接下來的步驟中創建垂直滾動效果。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 高度：38vw（桌面）、100vw（平板電腦）、120vw（手機）
• 最大高度：38vw（桌面）、100vw（平板電腦）、120vw（手機）

間距

然後，轉到間距設置並刪除所有默認的頂部和底部填充。

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

垂直溢出

如前所述，我們使這一行可垂直滾動。 為此，我們需要在行的可見性設置中更改垂直溢出。

• 垂直溢出：滾動

將圖像模塊添加到列

上傳圖片

繼續將第一個圖像模塊添加到該行並上傳您選擇的圖像。 您可以通過訪問婚禮策劃師佈局包帖子來下載我們在本教程中使用的圖像。

漿紗

確保在圖像模塊中啟用“強制全角”選項以確保響應結果。

• 強制全角：是

間距

轉到下一步的間距設置，並通過添加一些底部邊距在此模塊和下一個模塊之間創建一些空間。

• 底邊距：1vw

根據需要多次克隆圖像模塊

完成第一個圖像模塊的修改後，您可以根據需要多次克隆它。

上傳不同的圖像

當然，您需要更改每個副本中的圖像。

添加第 3 行

列結構

進入第三排也是最後一排！ 我們使用以下列結構：

背景顏色

尚未添加任何模塊，打開行設置並添加白色背景色。

• 背景顏色：#ffffff

漿紗

然後，轉到大小設置並允許該行佔據該部分的整個寬度。

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

間距

接下來添加一些自定義的頂部和底部填充值。

• 頂部填充：2.1vw（桌面）、3.5vw（平板電腦）、5vw（手機）
• 底部填充：2.1vw（台式機）、3.5vw（平板電腦）、5vw（手機）

盒子陰影

並添加一個框陰影來創建深度。

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

Z索引

為了確保這一行（尤其是它的框陰影）與前一行重疊，我們將增加 Z 索引。

• Z指數：99

將按鈕模塊添加到列

添加副本

我們在這一行中唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。

結盟

然後，轉到設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

還要修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：1px
• 按鈕字體：Abril Fatface

間距

並使用自定義填充值創建您想要的形狀。

• 頂部填充：0.5vw（桌面）、1vw（平板電腦）、2vw（手機）
• 底部填充：0.5vw（台式機）、1vw（平板電腦）、2vw（手機）
• 左填充：3vw（桌面）、7vw（平板電腦）、9vw（手機）
• 右填充：3vw（桌面）、7vw（平板電腦）、9vw（手機）

樣式滾動條

將 CSS ID 添加到第 2 行

是否要設置滾動條的樣式取決於您。 如果這樣做，請打開第二行並向其添加 CSS 類。

• CSS 類：圖像滾動條

打開頁面設置

然後，打開行設置。

使用 CSS 樣式滾動條

並將以下 CSS 代碼行添加到高級選項卡中的自定​​義 CSS 框中：

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建漂亮的滾動畫廊模型。 在本文開頭，您還可以免費下載佈局 JSON 並在您正在處理的任何網站上使用它。 如果您有任何問題或建議，請務必在下方評論區留言！

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