如何在滾動上與 Divi 同步擴展副本

當某個部分的重點放在副本上時，確保副本不會被忽視很重要。 您可以使用多種技術將您的副本置於聚光燈下，但在本教程中，我們將向您展示如何使用 Divi 的新滾動效果在滾動時同步擴展副本。 當用戶滾動時，副本的另一部分將出現，允許他們逐步閱讀您提供的內容。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載滾動佈局上的擴展副本

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

下載文件

免費下載

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

下載

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

1. 創建截面設計

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 打開部分設置並更改背景顏色。

• 背景顏色：#151515

間距

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

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

添加第 1 行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置如下：

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

間距

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

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

將文本模塊 #1 添加到列

添加內容

然後，添加具有您選擇的一些內容的第一個文本模塊。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：Livvic
• 文字字體粗細：粗體
• 文字顏色：#f1f1f1
• 文字大小：170 像素（桌面）、100 像素（平板電腦）、70 像素（手機）
• 文本行高：1em

• 文字陰影水平長度：0.06em
• 文字陰影垂直長度：0em
• 文字陰影顏色：rgba(79,79,79,0.74)
• 文本對齊方式：居中（桌面），左側（平板電腦和手機）

克隆文本模塊兩次

克隆文本模塊兩次。

更改內容

修改兩個重複文本模塊的內容。

添加第 2 行

列結構

使用以下列結構在前一行的正下方添加另一行：

漿紗

打開行設置並相應地更改大小設置：

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

間距

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

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

邊界

接下來添加一個頂部邊框。

• 頂部邊框寬度：1px
• 頂部邊框顏色：#4c4c4c

列設置

間距

我們也在對列設置進行一些更改。 打開設置並添加一些自定義填充值。

• 頂部填充：5vw
• 底部填充：10vw
• 左填充：6vw
• 右填充：6vw

邊界

也使用右邊框。

• 右邊框寬度：1px
• 右邊框顏色：#4c4c4c

將 Blurb 模塊添加到第 1 列

添加內容

繼續將 Blurb 模塊添加到具有您選擇的某些內容的列中。

選擇圖標

接下來選擇您選擇的圖標。

圖標設置

轉到模塊的設計選項卡並按如下方式更改圖標設置：

• 圖標顏色：#a3acff
• 圖像/圖標對齊方式：左

標題文字設置

也修改標題文本設置。

• 標題字體：Livvic
• 標題字體粗細：粗體
• 標題文字顏色：#c1c1c1
• 標題文字大小：35px

• 標題文字陰影水平長度：0.06em
• 標題文字陰影垂直長度：0em
• 標題文字陰影顏色：rgba(79,79,79,0.74)

正文設置

我們也在對正文設置進行一些更改。

• 正文顏色：#878787
• 正文文字大小：16px
• 車身線高：2.4em

模糊標題 CSS

我們將使用一行 CSS 代碼在標題周圍創建一些空間，我們將添加到高級選項卡中的模糊標題中。

margin: 30px 0 40px 0;

克隆整個列兩次

完成整個列和其中的 Blurb 模塊後，您可以克隆整個列兩次。

刪除第 3 列邊框

打開第 3 列設置並刪除右邊框。

• 右邊框寬度：0px

更改內容

並為每個副本更改 Blurb 模塊內容。

2. 添加滾動效果

部分

放大和縮小

是時候添加滾動效果了，從部分開始。 使用具有以下值的縮放滾動效果：

• 啟用向上和向下擴展：是
• 起始比例：70%
• 中等規模：100%
• 結束比例：100%

文本模塊 #1

淡入淡出

然後，打開部分第一行中的第一個文本模塊並添加淡入淡出效果。

• 啟用淡入淡出：是
• 起始不透明度：0%
• 中等不透明度：0%（55%）
• 結束不透明度：100%（71%）

放大和縮小

也使用縮放效果。

• 啟用向上和向下擴展：是
• 起始比例：0%（47%）
• 中檔：100%（56%）
• 結束比例：100%（64%）

擴展文本模塊 #1 滾動效果

繼續將滾動效果擴展到列中的其他兩個文本模塊。

• 至：所有文本
• 全文：本專欄

模糊模塊 #1

放大和縮小

接下來，我們將向第 1 列中的 Blurb 模塊添加縮放滾動效果。

• 啟用向上和向下擴展：是
• 起始規模：
  • 台式機：0%
  • 平板電腦和手機：100%
• 中等規模：100%（33%）
• 結束比例：100%（64%）

擴展模糊模塊 #1 滾動效果

通過將滾動效果擴展到行中的所有 Blurb 模塊來完成教程，您就大功告成了！

• 至：所有模糊
• 整個：這一行

預覽

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

桌面

移動的

最後的想法

在本教程中，我們向您展示了一種在 Divi 部分同步擴展副本的創造性方法。 這是突出顯示副本並允許訪問者逐步閱讀您部分的不同部分的好方法。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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