如何使用 Divi 的滾動效果在滾動上擴展地圖模塊
已發表: 2023-05-17將地圖添加到您的網站是向訪問者顯示您或您的企業所在位置的好方法。 使用 Divi 的內置設置，您可以完全創造性地控制地圖模塊的設計和任何周圍的設計元素。 通過將滾動效果應用到您的模塊，將您的設計提升到另一個層次。 有幾種不同類型的效果可供選擇，設置可以微調效果，直到達到您想要的效果，使用滾動效果可以幫助您為網站模塊添加引人注目的動作。 在這篇文章中，我們將向您展示如何使用 Divi 的滾動效果在滾動時放大地圖模塊。
讓我們開始吧！
- 1先睹為快
- 1.1佈局一
- 1.2佈局二
- 2你需要開始什麼
- 3如何使用 Divi 的滾動效果在滾動上放大地圖模塊
- 3.1佈局一
- 3.2佈局二
- 4最終結果
- 4.1佈局一
- 4.2佈局二
- 5最後的想法
搶先看
這是我們將要設計的內容的預覽。
佈局 1
佈局 2
你需要什麼開始
在我們開始之前，安裝並激活 Divi 主題，並確保您的網站上有最新版本的 Divi。
現在，您可以開始了！
如何使用 Divi 的滾動效果在滾動上放大地圖模塊
佈局 1
使用預製佈局創建新頁面
讓我們從使用 Divi 庫中的預製佈局開始。 對於此設計，我們將使用 Acai Bowl Layout Pack 中的 Acai Bowl Landing Page。
向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。
對於此示例，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。
搜索並選擇 Acai Bowl Landing Page。
選擇使用此佈局將佈局添加到您的頁面。
現在我們準備構建我們的設計。
添加地圖模塊
我們將把地圖模塊添加到登陸頁面的“來訪我們”部分。 首先添加一個包含單列的新行。
將地圖模塊添加到新行。
添加您的 Google API 密鑰以啟用地圖（如果您尚未啟用）。 然後，在地圖上添加一個中心地址。 對於本教程，地址將是加利福尼亞州舊金山。
接下來，添加一個新的引腳。
設置地圖引腳地址。 在本教程中，我們將再次將其設置為加利福尼亞州舊金山。
設計設定
移動到“設計”選項卡並打開尺寸設置。 設置高度。
- 高度：300px
接下來，打開邊框設置並為地圖添加圓角。
- 圓角：22px
添加滾動效果
現在地圖模塊的設計已經完成，可以添加滾動效果了。 移動到“高級”選項卡，然後導航到“滾動效果”。 在滾動變換效果下，選擇放大和縮小選項卡。
啟用向上和向下縮放。 這將允許我們的地圖模塊在您向下滾動頁面時增加大小。
讓我們微調縮放設置。 調整開始、中間和結束比例。 您可以通過使數字相對靠近來獲得更微妙的比例效果。 如果數字之間存在很大差異，您將獲得更劇烈的比例效果。
- 起始比例：80%
- 中規模：90%
- 結束比例：100%
最後，將運動效果設置為在元素中間觸發。
- 運動效果觸發器：元素中間
最終設計
這是我們第一個佈局的最終設計。
佈局 2
使用預製佈局創建新頁面
對於第二個佈局，我們將使用同一個 Acai Bowl 佈局包中的聯繫人頁面佈局。 讓我們開始吧。
向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。
對於此示例，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。
搜索並選擇 Acai Bowl 聯繫頁面。
選擇使用此佈局將佈局添加到您的頁面。
現在我們準備構建我們的設計。
修改行設置
首先，將包含地圖模塊的行移動到地址下方的上方部分。
然後，將行佈局修改為兩列。
打開行設置，然後打開第 1 列設置。
添加背景顏色。
- 背景：#442854
最後，導航到設計選項卡並打開邊框設置。 在左下角和右下角添加圓角。
- 圓角 - 左下角：300px
- 圓角 - 右下角：300px
修改部分設置
打開包含地圖模塊的部分的部分設置。 導航到背景設置，然後添加背景遮罩。
- 背景蒙版：角落斑點
- 面具顏色：#FFFFFF
- 蒙版變換：垂直和反轉
添加圖片
首先，在地圖模塊旁邊的列中添加一個圖像模塊。 
然後，將巴西莓碗的透明圖像添加到模塊中。 如果您使用佈局 1 的 Acai Bowl 登陸頁面佈局，您應該在媒體庫中將其標記為 acai-bowl-34.png。
我們希望 acai 碗的圖像在您向下滾動頁面時旋轉。 移動到“高級”選項卡，然後打開“滾動效果”部分。 選擇旋轉選項卡並啟用旋轉。
接下來，設置旋轉。
- 起始旋轉：180
- 中間旋轉：90
- 結束循環：0
地圖設計
現在轉到地圖模塊設置。 在設計選項卡下，打開地圖設置。 啟用灰度濾鏡。
- 使用灰度濾鏡：是
- 灰度過濾量（%）：100
接下來，修改尺寸選項卡下的高度。
- 高度：600px
在間距設置下，添加一些邊距。
- 上邊距：5px
- 底部邊距：5px
- 邊距-左：5px
- 右邊距：5px
然後在左下角和右下角添加圓角。
- 圓角 - 左下角：300px
- 圓角 - 右下角：300px
添加滾動效果
現在我們終於可以將滾動效果添加到地圖，以便它在滾動時放大。 打開“高級”選項卡下的“滾動效果”部分。 然後，選擇放大和縮小選項卡並啟用放大和縮小。
最後，自定義比例。
- 起始比例：90%
- 中規模：95%
- 結束比例：100%
最終設計
這是佈局 2 的最終設計。
最後結果
現在讓我們來看看我們的兩個佈局。
佈局 1
佈局 2
最後的想法
通過將 Divi 的滾動效果應用於地圖模塊，您可以在向下滾動頁面時獲得獨特的效果，並幫助您的地圖在網站訪問者面前脫穎而出。 這些效果也可以應用於您網站上的任何其他模塊，因此您可以通過一些創意實現無限可能！ 如果您對與地圖模塊相關的更多教程感興趣，請查看這篇文章，了解如何將固定地圖切換添加到您的 Divi 頁面模板。 如果您想要更多使用滾動效果的設計理念，請查看本教程，了解如何將滾動動畫圖標添加到您的部分背景。 您如何將 Divi 的滾動效果應用於您的網站？ 讓我們在評論中知道！