如何使用 Divi 在 Scroll 上講述您的故事

您的關於頁面是您網站上最重要的頁面之一。 它可以讓人們更好地了解你，並決定他們是否願意採取下一步行動。 如果您正在尋找一種流暢的方式在您的關於頁面中包含講故事的內容，那麼您會喜歡本教程。 我們將使用 Divi 的滾動效果在滾動時創建平滑的講故事過渡。 一旦故事的一部分淡出，另一部分就會淡入。這讓訪問者感覺他們正在閱讀一個有趣的故事。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

訂閱我們的 YouTube 頻道

免費下載關於滾動佈局的關於頁面故事

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

下載文件

免費下載

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

下載

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

1. 創建頁面的第一個全屏部分

添加新部分

背景顏色

首先將第一部分添加到您的關於頁面。 打開部分設置並將背景顏色更改為黑色。

• 背景顏色：#000000

漿紗

接下來通過在大小設置中添加最小高度來全屏顯示該部分。

• 最小高度：100vh

2. 添加動畫行

添加新行

列結構

然後，使用以下列結構向您的部分添加一個新行：

漿紗

打開行設置並通過修改大小設置允許行佔據整個節容器的寬度。

• 寬度：100%
• 最大寬度：100%

間距

然後，在不同的屏幕尺寸上添加一些左右填充。

• 左填充：20vw（台式機），10vw（平板電腦和手機）
• 右填充：20vw（台式機）10vw（平板電腦和手機）

動畫片

為了增加講故事的效果，我們還將為行使用淡入淡出動畫。

• 動畫風格：淡入淡出
• 動畫持續時間：3000ms
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

位置

最後但並非最不重要的一點是，我們將通過修改位置選項來確保行位於節容器內的中心位置。

• 位置：絕對
• 地點：中心

3. 插入帶有滾動效果的標題

將文本模塊 #1 添加到列

添加H1內容

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

標題 1 文本設置

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

• 標題字體：Nunito
• 標題字體粗細：半粗體
• 標題文字顏色：#ffffff
• 標題文字大小：7vw（桌面）、9vw（平板電腦）、11vw（手機）

垂直運動

我們也會添加一個微妙的垂直動畫。

• 啟用垂直運動：是
• 起始偏移：0（50%）
• 中間偏移：10（100%）
• 結束偏移：10

淡入淡出滾動效果

隨著淡入淡出效果。

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

放大和縮小滾動效果

最後但並非最不重要的一點，我們還將使用縮放滾動效果。

• 啟用向上和向下擴展：是
• 起始比例：100%（40%）
• 中等規模：95%（74%）
• 結束比例：90%

4.克隆整個部分一次並包括具有滾動效果的描述文本

更改內容標題和復制

完成第一部分後，您可以完全克隆它。 打開復制部分容器內的文本模塊並使用一些 H2 副本。

修改文本模塊 H2 文本設置

相應地更改 H2 文本設置：

• 標題 2 字體：Nunito
• 標題 2 字體粗細：半粗體
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：5vw（桌面）、7vw（平板電腦）、8vw（手機）
• 標題 2 行高：1em（桌面），1.2em（平板電腦和手機）

將文本模塊 #2 添加到列

添加內容

接下來，將另一個文本模塊添加到具有您選擇的一些描述內容的列中。

文字設置

更改文本模塊的文本設置如下：

• 文字字體：Open Sans
• 文字顏色：#ffffff
• 文字大小：1vw（桌面）、2.5vw（平板電腦）、3vw（手機）
• 文本行高：3.1em（桌面），2.5em（平板電腦和手機）

間距

也使用一些上邊距。

• 最高利潤率：8vw

淡入淡出滾動效果

然後，轉到高級選項卡中的滾動效果並使用以下淡入淡出設置：

• 啟用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：0%（31%）
• 最終不透明度：0%（在 35% 時）

放大和縮小滾動效果

也添加縮放效果。

• 啟用向上和向下擴展：是
• 起始比例：100%（40%）
• 中等規模：95%（74%）
• 結束比例：90%

5.根據需要克隆第二部分

隨時更改內容

完成頁面上的第二部分後，您可以根據您的“關於”頁面的故事情節將其複制任意多次。 確保更改每個部分中的內容。

6. 帶有 CTA 部分的完整頁面

更改描述文本模塊間距

在最後使用 CTA 部分完成關於頁面。 打開描述文本模塊，修改上下邊距。

• 最高利潤率：4vw
• 底邊距：4vw

添加按鈕模塊

添加副本

然後，添加一個按鈕模塊以及您選擇的一些副本。

按鈕設置

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

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

• 按鈕邊框半徑：100px
• 按鈕字體：Nunito
• 按鈕字體粗細：粗體

間距

通過在不同屏幕尺寸上添加一些自定義填充值來完成按鈕模塊設置。

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：3vw（桌面）、6vw（平板電腦）、8vw（手機）
• 右填充：3vw（桌面）、6vw（平板電腦）、8vw（手機）

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的內置滾動效果在“關於”頁面上講述故事。 我們創建的效果允許連續複製淡入淡出，給訪問者一種他們正在閱讀故事的印象。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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