如何創建在 Divi 中滾動時更改的文本和圖像
已發表: 2020-07-17Divi 滾動效果非常適合創建有趣的佈局。 自該功能推出以來，我們已經發布了很多。 在本教程中，我們將向您展示如何使用滾動時更改的文本和圖像創建佈局。 此設計可用於服務頁面或您需要的任何類型的頁面。 我們保持簡潔，讓滾動效果成為焦點。
您可以將佈局下載為 JSON 文件，也可以在您自己的 Divi 網站上重新創建。
讓我們開始吧。
預覽
在開始之前，讓我們來看看不同屏幕尺寸上的佈局。
桌面
移動的
免費下載在滾動部分更改的文本和圖像
要使用隨滾動更改的文本和圖像的免費部分，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
使用滾動時更改的文本和圖像重新創建部分
添加新部分
背景
要開始重新創建設計，請在新頁面或現有頁面上添加新部分。 添加我們在上面的下載中提供的背景圖像。
- 背景圖片：盒子和圓點設計
- 桌面：圖像 1
- 平板電腦：圖 2
- 電話：圖 3
- 圖片尺寸：封面
- 背景圖像重複：重複 Y（垂直）
間距
為該部分添加一些間距。
- 頂部和底部填充：30%
能見度
也隱藏溢出。
- 水平和垂直溢出：隱藏
添加新行
能見度
現在添加第一行並在高級選項卡中調整可見性設置。
- 水平：隱藏
- 垂直溢出：默認
添加文本模塊
文本
為標題添加第一個文本模塊。 插入一些您選擇的 H1 內容。
- 正文：H1 內容 – 製作團隊
標題文字
轉到設計選項卡並設置標題文本的樣式。
- 標題級別：H1
- 字體：弗雷多克一號
- 重量：粗體
- 顏色：黑色
- 尺寸
- 桌面：100px
- 平板電腦：75px
- 電話：33px
- 字母間距
- 桌面：4px
- 平板電腦：3px
- 電話：2px
漿紗
然後，調整寬度。
- 寬度：100%
添加新行
漿紗
現在添加第二行並相應地調整大小設置：
- 寬度：80%
- 最大寬度：1000px
能見度
也隱藏溢出。
- 水平和垂直溢出：隱藏
添加第一個文本模塊
文本
添加另一個文本模塊。 這次，輸入一些您選擇的 H2 內容。
- 正文：H2 內容 – 佈景攝影
標題文字
下一個標題樣式。
- 標題級別：H2
- 重量：粗體
- 風格：TT
- 顏色：黑色#000000
- 尺寸
- 桌面：50px
- 平板電腦：40px
- 電話：28px
- 字母間距：3px
間距
也為模塊設置一些間距。
- 上下邊距：0px
滾動效果
通過添加以下滾動效果來完成模塊設置：
- 淡入淡出：啟用
- 視口底部
- 位置：42%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：43%
- 最高位置：53%
- 中等不透明度：100%
- 視口頂部
- 位置：54%
- 結束不透明度：0%
複製文本模塊兩次
克隆文本模塊兩次。
調整第二個文本模塊
文本
更改新文本模塊中的內容。
- 正文：H2 內容 – 藝術指導
位置
也向模塊添加絕對定位。
- 位置：絕對
- 位置：左上角
滾動效果
接下來，更新滾動效果設置。
- 淡入淡出：啟用
- 視口底部
- 位置：56%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：57%
- 最高位置：67%
- 中等不透明度：100%
- 視口頂部
- 位置：68%
- 結束不透明度：0%
調整第三個文本模塊
文本
現在調整第二個文本模塊副本。 先改變內容。
- 主體：H2 含量 – 道具和衣櫃
位置
接下來添加一個絕對位置。
- 位置：絕對
- 位置：左上角
滾動效果
然後，修改滾動效果。
- 淡入淡出：啟用
- 視口底部
- 位置：70%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：71%
- 最高位置：80%
- 中等不透明度：100%
- 視口頂部
- 位置：81%
- 結束不透明度：0%
添加圖像模塊
圖片
現在是添加圖像模塊的時候了。 使用圖像大小為 350 x 350 像素的方形圖像。
- 圖像：方形圖像 350 x 350 像素
結盟
將對齊設置為左側。
- 圖像對齊：左
間距
也調整間距。
- 在圖像下方顯示空間：否
- 上邊距：-60px
過濾器
然後，添加過濾器使圖像去飽和。
- 飽和度：0%
能見度
現在，移至高級選項卡並將溢出設置為隱藏。
- 水平和垂直溢出：隱藏
滾動效果
最後但並非最不重要的是，添加淡入淡出滾動效果。
- 淡入淡出：啟用
- 視口底部
- 位置：70%
- 起始不透明度：0%
- 中等不透明度
- 位置：71%
- 中：100%
- 視口頂部
- 位置：100%
- 結束不透明度：0%
添加號召性用語模塊
文本
進入下一個模塊，即號召性用語模塊。 包括您選擇的一些內容。
- 作品名稱：傑森的藝術團隊
- 按鈕：預訂傑森的藝術團隊
- 正文：描述性內容
關聯
接下來加個鏈接。
- 鏈接：你的鏈接
背景
也刪除默認的背景顏色。
- 使用背景顏色：否
文本
然後，將對齊設置為右側。
- 文本對齊：右
標題文字
標題文本的樣式也是如此。
- 標題級別：H3
- 字體：弗雷多克一號
- 標題文本對齊方式：左
- 顏色：黑色#oooooo
- 尺寸
- 桌面：48px
- 平板電腦：42px
- 電話：33px
- 字母間距
- 台式機和平板電腦：1px
- 電話：0px
- 線高
- 台式機和平板電腦：1.6em
- 電話：1.1em
文章主體
然後是正文。
- 字體: Verdana
- 顏色：黑色#000000
- 尺寸：14px
- 字母間距：0.5px
按鈕
調整按鈕樣式。
- 自定義樣式
- 文字大小：17px
- 文字顏色：白色#ffffff
- 背景：黑色#000000
- 字母間距：1px
- 字體: Verdana
- 上邊距：20px
- 頂部和底部填充：10px
- 左右填充：25px
位置
移至高級選項卡並按如下方式更改位置設置：
- 職位：相對
- 偏移原點：左上角
- 水平偏移：25px
能見度
然後，隱藏溢出。
- 水平和垂直溢出：隱藏
滾動效果
最後但並非最不重要的是，啟用淡入淡出滾動效果。
- 淡入淡出：啟用
- 視口底部
- 位置：54%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：55%
- 最高位置：80%
- 中：100%
- 視口頂部
- 位置：100%
- 結束不透明度：0%
複製第二行
克隆包含所有模塊的行。
調整第一個文本模塊
文本
現在更改克隆文本模塊的內容。 從頂部開始。
- 主體：H2 含量/預生產
文本
將對齊更改為右側。
- 文本對齊：右
擴展文本對齊
將對齊應用於同一行中的所有克隆文本模塊。
- 擴展文本對齊：到該行中的所有文本模塊
調整第二個文本模塊
文本
現在更新第二個克隆文本模塊中的內容。
- 正文：H2 內容/現場製作
位置
也在位置設置中更改位置。
- 位置：右上角
調整第三個文本模塊
文本
現在更改第三個克隆文本模塊的內容。
- 正文：H2 內容/團隊之間的協調
位置
也在位置設置中更改位置。
- 位置：右上角
調整新的圖像模塊
圖片
接下來，更改圖像模塊中的照片。
- 圖像：新圖像 350 x 350 像素
結盟
還要更改圖像對齊方式。
- 圖像對齊：右
調整新的號召性用語模塊
文本
接下來打開號召性用語模塊並更改所有內容。
- 片名：愛麗絲的製作團隊
- 按鈕：預訂愛麗絲的製作團隊
- 正文：新的描述性內容。
關聯
也換個鏈接。
- 鏈接：新鏈接
文本
還要修改對齊方式。
- 文本對齊方式：左
標題文字
也更改標題文本的對齊方式。
- 標題文本對齊方式：左
文章主體
以及正文。
- 正文對齊方式：左
漿紗
不要忘記在大小設置中更改整個模塊的對齊方式。
- 模塊對齊：左
位置
最後，將位置設置重置為默認值，您就大功告成了！
- 位置：重置為默認值
預覽
讓我們最後看一下不同屏幕尺寸上的頁面佈局。
桌面
移動的
這是佈局的包裝，文本和圖像在滾動時發生變化！
我們已完成重新創建滾動時更改的文本和圖像。 由於 Divi 的內置滾動效果，我們能夠實現這種效果。 將此佈局用於服務頁面、關於頁面、會見團隊頁面或任何您喜歡的頁面！ 使用提供的背景或將背景保留為白色。
請在留言中讓我們知道你的想法！